mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
fix slider label positioning with custom track/thumb CSS & calc - fixes #695
This commit is contained in:
Becky Gilbert
parent
71ce1263f9
commit
3424f386ff
@ -96,6 +96,79 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* custom style for input[type="range] (slider) to improve alignment between positions and labels */
|
||||
|
||||
.jspsych-slider {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
.jspsych-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
/* track */
|
||||
.jspsych-slider::-webkit-slider-runnable-track {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.jspsych-slider::-moz-range-track {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.jspsych-slider::-ms-track {
|
||||
appearance: none;
|
||||
width: 99%;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
/* thumb */
|
||||
.jspsych-slider::-webkit-slider-thumb {
|
||||
border: 1px solid #666;
|
||||
height: 24px;
|
||||
width: 15px;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -9px;
|
||||
}
|
||||
.jspsych-slider::-moz-range-thumb {
|
||||
border: 1px solid #666;
|
||||
height: 24px;
|
||||
width: 15px;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.jspsych-slider::-ms-thumb {
|
||||
border: 1px solid #666;
|
||||
height: 20px;
|
||||
width: 15px;
|
||||
border-radius: 5px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
/* jsPsych progress bar */
|
||||
|
||||
#jspsych-progressbar-container {
|
||||
|
||||
@ -86,6 +86,9 @@ jsPsych.plugins['audio-slider-response'] = (function() {
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// half of the thumb width value from jspsych.css, used to adjust the label positions
|
||||
var half_thumb_width = 7.5;
|
||||
|
||||
// setup stimulus
|
||||
var context = jsPsych.pluginAPI.audioContext();
|
||||
if(context !== null){
|
||||
@ -109,17 +112,22 @@ jsPsych.plugins['audio-slider-response'] = (function() {
|
||||
}
|
||||
|
||||
var html = '<div id="jspsych-audio-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
html += '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
html += trial.slider_width+'px;';
|
||||
} else {
|
||||
html += 'auto;';
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-audio-slider-response-response"></input>';
|
||||
html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-audio-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
||||
var label_width_perc = 100/(trial.labels.length-1);
|
||||
var percent_of_range = j * (100/(trial.labels.length - 1));
|
||||
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
|
||||
var offset = (percent_dist_from_center * half_thumb_width)/100;
|
||||
html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
|
||||
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
|
||||
@ -102,19 +102,27 @@ jsPsych.plugins['html-slider-response'] = (function() {
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// half of the thumb width value from jspsych.css, used to adjust the label positions
|
||||
var half_thumb_width = 7.5;
|
||||
|
||||
var html = '<div id="jspsych-html-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div id="jspsych-html-slider-response-stimulus">' + trial.stimulus + '</div>';
|
||||
html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
} else {
|
||||
html += 'width:auto;';
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-html-slider-response-response"></input>';
|
||||
html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-html-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
||||
var label_width_perc = 100/(trial.labels.length-1);
|
||||
var percent_of_range = j * (100/(trial.labels.length - 1));
|
||||
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
|
||||
var offset = (percent_dist_from_center * half_thumb_width)/100;
|
||||
html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
|
||||
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
|
||||
@ -122,6 +122,9 @@ jsPsych.plugins['image-slider-response'] = (function() {
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// half of the thumb width value from jspsych.css, used to adjust the label positions
|
||||
var half_thumb_width = 7.5;
|
||||
|
||||
var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div id="jspsych-image-slider-response-stimulus">';
|
||||
html += '<img src="'+trial.stimulus+'" style="';
|
||||
@ -139,17 +142,22 @@ jsPsych.plugins['image-slider-response'] = (function() {
|
||||
}
|
||||
html += '"></img>';
|
||||
html += '</div>';
|
||||
html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
|
||||
if (trial.slider_width !== null) {
|
||||
html += trial.slider_width+'px;';
|
||||
} else {
|
||||
html += 'auto;';
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
|
||||
html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-image-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
||||
var label_width_perc = 100/(trial.labels.length-1);
|
||||
var percent_of_range = j * (100/(trial.labels.length - 1));
|
||||
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
|
||||
var offset = (percent_dist_from_center * half_thumb_width)/100;
|
||||
html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
|
||||
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
|
||||
@ -145,6 +145,9 @@ jsPsych.plugins["video-slider-response"] = (function() {
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
// half of the thumb width value from jspsych.css, used to adjust the label positions
|
||||
var half_thumb_width = 7.5;
|
||||
|
||||
// setup stimulus
|
||||
var video_html = '<video id="jspsych-video-slider-response-stimulus-video"';
|
||||
|
||||
@ -181,17 +184,22 @@ jsPsych.plugins["video-slider-response"] = (function() {
|
||||
|
||||
var html = '<div id="jspsych-video-slider-response-wrapper" style="margin: 100px 0px;">';
|
||||
html += '<div id="jspsych-video-slider-response-stimulus">' + video_html + '</div>';
|
||||
html += '<div class="jspsych-video-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
|
||||
if(trial.slider_width !== null){
|
||||
html += 'width:'+trial.slider_width+'px;';
|
||||
html += '<div class="jspsych-video-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
|
||||
if (trial.slider_width !== null) {
|
||||
html += trial.slider_width+'px;'
|
||||
} else {
|
||||
html += 'auto;'
|
||||
}
|
||||
html += '">';
|
||||
html += '<input type="range" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-video-slider-response-response"></input>';
|
||||
html += '<input type="range" class="jspsych-slider" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" id="jspsych-video-slider-response-response"></input>';
|
||||
html += '<div>'
|
||||
for(var j=0; j < trial.labels.length; j++){
|
||||
var width = 100/(trial.labels.length-1);
|
||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
||||
var label_width_perc = 100/(trial.labels.length-1);
|
||||
var percent_of_range = j * (100/(trial.labels.length - 1));
|
||||
var percent_dist_from_center = ((percent_of_range-50)/50)*100;
|
||||
var offset = (percent_dist_from_center * half_thumb_width)/100;
|
||||
html += '<div style="border: 1px solid transparent; display: inline-block; position: absolute; '+
|
||||
'left:calc('+percent_of_range+'% - ('+label_width_perc+'% / 2) - '+offset+'px); text-align: center; width: '+label_width_perc+'%;">';
|
||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
||||
html += '</div>'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user