HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1193 from becky-gilbert/slider-positions

Browse Source 
fix slider label positioning with custom CSS - fixes #695
This commit is contained in:
Becky Gilbert 2020-11-25 09:26:55 -08:00 committed by GitHub
commit e94bc9fc3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 129 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/jspsych.css
View File

@ -96,6 +96,79 @@
cursor: not-allowed; 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 progress bar */
#jspsych-progressbar-container { #jspsych-progressbar-container {

20
plugins/jspsych-audio-slider-response.js
View File

@ -93,6 +93,9 @@ jsPsych.plugins['audio-slider-response'] = (function() {
plugin.trial = function(display_element, trial) { 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 // setup stimulus
var context = jsPsych.pluginAPI.audioContext(); var context = jsPsych.pluginAPI.audioContext();
if(context !== null){ if(context !== null){
@ -123,20 +126,25 @@ jsPsych.plugins['audio-slider-response'] = (function() {
} }
var html = '<div id="jspsych-audio-slider-response-wrapper" style="margin: 100px 0px;">'; 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){ if(trial.slider_width !== null){
html += 'width:'+trial.slider_width+'px;'; html += trial.slider_width+'px;';
} else {
html += 'auto;';
} }
html += '">'; 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"'; 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"';
if (!trial.response_allowed_while_playing) { if (!trial.response_allowed_while_playing) {
html += ' disabled'; html += ' disabled';
} }
html += '></input><div>' html += '></input><div>'
for(var j=0; j < trial.labels.length; j++){ for(var j=0; j < trial.labels.length; j++){
var width = 100/(trial.labels.length-1); var label_width_perc = 100/(trial.labels.length-1);
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2); var percent_of_range = j * (100/(trial.labels.length - 1));
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">'; 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 += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
html += '</div>' html += '</div>'
} }

16
plugins/jspsych-html-slider-response.js
View File

@ -102,19 +102,27 @@ jsPsych.plugins['html-slider-response'] = (function() {
plugin.trial = function(display_element, trial) { 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;">'; 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 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; '; html += '<div class="jspsych-html-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
if(trial.slider_width !== null){ if(trial.slider_width !== null){
html += 'width:'+trial.slider_width+'px;'; html += 'width:'+trial.slider_width+'px;';
} else {
html += 'width:auto;';
} }
html += '">'; 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>' html += '<div>'
for(var j=0; j < trial.labels.length; j++){ for(var j=0; j < trial.labels.length; j++){
var width = 100/(trial.labels.length-1); var label_width_perc = 100/(trial.labels.length-1);
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2); var percent_of_range = j * (100/(trial.labels.length - 1));
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">'; 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 += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
html += '</div>' html += '</div>'
} }

20
plugins/jspsych-image-slider-response.js
View File

@ -122,6 +122,9 @@ jsPsych.plugins['image-slider-response'] = (function() {
plugin.trial = function(display_element, trial) { 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;">'; var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div id="jspsych-image-slider-response-stimulus">'; html += '<div id="jspsych-image-slider-response-stimulus">';
html += '<img src="'+trial.stimulus+'" style="'; html += '<img src="'+trial.stimulus+'" style="';
@ -139,17 +142,22 @@ jsPsych.plugins['image-slider-response'] = (function() {
} }
html += '"></img>'; html += '"></img>';
html += '</div>'; html += '</div>';
html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; '; html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
if (trial.slider_width !== null) { if (trial.slider_width !== null) {
html += 'width:'+trial.slider_width+'px;'; html += trial.slider_width+'px;';
} else {
html += 'auto;';
} }
html += '">'; 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>' html += '<div>'
for(var j=0; j < trial.labels.length; j++){ for(var j=0; j < trial.labels.length; j++){
var width = 100/(trial.labels.length-1); var label_width_perc = 100/(trial.labels.length-1);
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2); var percent_of_range = j * (100/(trial.labels.length - 1));
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">'; 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 += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
html += '</div>' html += '</div>'
} }

20
plugins/jspsych-video-slider-response.js
View File

@ -152,6 +152,9 @@ jsPsych.plugins["video-slider-response"] = (function() {
plugin.trial = function(display_element, trial) { 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 // setup stimulus
var video_html = '<video id="jspsych-video-slider-response-stimulus-video"'; var video_html = '<video id="jspsych-video-slider-response-stimulus-video"';
@ -195,20 +198,25 @@ jsPsych.plugins["video-slider-response"] = (function() {
var html = '<div id="jspsych-video-slider-response-wrapper" style="margin: 100px 0px;">'; 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 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; '; html += '<div class="jspsych-video-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
if (trial.slider_width !== null) { if (trial.slider_width !== null) {
html += 'width:'+trial.slider_width+'px;'; html += trial.slider_width+'px;'
} else {
html += 'auto;'
} }
html += '">'; 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"'; 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"';
if (!trial.response_allowed_while_playing) { if (!trial.response_allowed_while_playing) {
html += ' disabled'; html += ' disabled';
} }
html += '></input><div>' html += '></input><div>'
for(var j=0; j < trial.labels.length; j++){ for(var j=0; j < trial.labels.length; j++){
var width = 100/(trial.labels.length-1); var label_width_perc = 100/(trial.labels.length-1);
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2); var percent_of_range = j * (100/(trial.labels.length - 1));
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">'; 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 += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
html += '</div>' html += '</div>'
} }