implements settable width for sliders (#631)

docs/plugins/jspsych-audio-slider-response.md

@@ -21,6 +21,7 @@ min | integer | 0 | Sets the minimum value of the slider
 max | integer | 100 | Sets the maximum value of the slider
 start | integer | 50 | Sets the starting value of the slider
 step | integer | 1 | Sets the step of the slider. This is the smallest amount by which the slider can change.
+slider_width | integer | null | Set the width of the slider in pixels. If left null, then the width will be equal to the widest element in the display.
 require_movement | boolean | false | If true, the subject must move the slider before clicking the continue button.
 prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press).
 trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, then the trial will wait for a response indefinitely.

docs/plugins/jspsych-html-slider-response.md

@@ -15,6 +15,7 @@ min | integer | 0 | Sets the minimum value of the slider
 max | integer | 100 | Sets the maximum value of the slider
 start | integer | 50 | Sets the starting value of the slider
 step | integer | 1 | Sets the step of the slider. This is the smallest amount by which the slider can change.
+slider_width | integer | null | Set the width of the slider in pixels. If left null, then the width will be equal to the widest element in the display.
 require_movement | boolean | false | If true, the subject must move the slider before clicking the continue button.
 prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press).
 stimulus_duration | numeric | null | How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.

docs/plugins/jspsych-image-slider-response.md

@@ -18,6 +18,7 @@ min | integer | 0 | Sets the minimum value of the slider
 max | integer | 100 | Sets the maximum value of the slider
 start | integer | 50 | Sets the starting value of the slider
 step | integer | 1 | Sets the step of the slider
+slider_width | integer | null | Set the width of the slider in pixels. If left null, then the width will be equal to the widest element in the display.
 require_movement | boolean | false | If true, the subject must move the slider before clicking the continue button.
 prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press).
 stimulus_duration | numeric | null | How long to show the stimulus for in milliseconds. If the value is null, then the stimulus will be shown until the subject makes a response.

examples/jspsych-audio-slider-response.html

@@ -21,6 +21,7 @@
     type: 'audio-slider-response',
     stimulus: 'sound/speech_joke.mp3',
     labels: ['Not Funny', 'Funny'],
+    slider_width: 500,
     prompt: '<p>How funny is the joke?</p>'
   }
 

examples/jspsych-html-slider-response.html

@@ -17,6 +17,8 @@
     type: 'html-slider-response',
     stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(46, 26, 122);"></div>',
     labels: ['Purple', 'Blue'],
+    slider_width: 500,
+    require_movement: true,
     prompt: '<p>Is this color closer to purple or blue? Use the slider above.</p>'
   }
 
@@ -25,6 +27,7 @@
     stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(29, 23, 138)"></div>',
     labels: ['Purple', 'Blue'],
     start: 10,
+    slider_width: 500,
     prompt: '<p>Is this color closer to purple or blue? Use the slider above. (5s time limit; custom starting value).</p>',
     trial_duration: 5000
   }
@@ -34,6 +37,7 @@
     stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(63, 17, 129)"></div>',
     labels: ['Purple', 'Blue'],
     prompt: '<p>Is this color closer to purple or blue? Use the slider above. (1s display).</p>',
+    slider_width: 500,
     stimulus_duration: 1000
   }
 

examples/jspsych-image-slider-response.html

@@ -17,6 +17,8 @@
     type: 'image-slider-response',
     stimulus: 'img/happy_face_1.jpg',
     labels: ['1 (least happy)', '100 (most happy)'],
+    slider_width: 500,
+    require_movement: true,
     prompt: '<p>How happy is this person on a scale of 1-100?</p>'
   }
 
@@ -25,6 +27,7 @@
     stimulus: 'img/happy_face_2.jpg',
     labels: ['1 (least happy)', '100 (most happy)'],
     start: 80,
+    slider_width: 500,
     prompt: '<p>How happy is this person on a scale of 1-100? (5s time limit; set start value)</p>',
     trial_duration: 5000
   }
@@ -33,6 +36,7 @@
     type: 'image-slider-response',
     stimulus: 'img/happy_face_2.jpg',
     labels: ['1 (least happy)', '100 (most happy)'],
+    slider_width: 500,
     prompt: '<p>How happy is this person on a scale of 1-100? (1s stimulus duration)</p>',
     stimulus_duration: 1000
   }

plugins/jspsych-audio-slider-response.js

@@ -44,6 +44,12 @@ jsPsych.plugins['audio-slider-response'] = (function() {
         array: true,
         description: 'Labels of the slider.',
       },
+      slider_width: {
+        type: jsPsych.plugins.parameterType.INT,
+        pretty_name:'Slider width',
+        default: null,
+        description: 'Width of the slider in pixels.'
+      },
       button_label: {
         type: jsPsych.plugins.parameterType.STRING,
         pretty_name: 'Button label',
@@ -103,7 +109,11 @@ 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-bottom:3em;">';
+  	html += '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; ';
+    if(trial.slider_width !== null){
+      html += 'width:'+trial.slider_width+'px;';
+    }
+    html += '">';
     html += '<input type="range" value="'+trial.start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-audio-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){

plugins/jspsych-html-slider-response.js

@@ -54,6 +54,12 @@ jsPsych.plugins['html-slider-response'] = (function() {
         array: true,
         description: 'Labels of the slider.',
       },
+      slider_width: {
+        type: jsPsych.plugins.parameterType.INT,
+        pretty_name:'Slider width',
+        default: null,
+        description: 'Width of the slider in pixels.'
+      },
       button_label: {
         type: jsPsych.plugins.parameterType.STRING,
         pretty_name: 'Button label',
@@ -98,7 +104,11 @@ jsPsych.plugins['html-slider-response'] = (function() {
 
     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-bottom:3em;">';
+    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;';
+    }
+    html += '">';
     html += '<input type="range" value="'+trial.start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-html-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){

plugins/jspsych-image-slider-response.js

@@ -74,6 +74,12 @@ jsPsych.plugins['image-slider-response'] = (function() {
         array: true,
         description: 'Labels of the slider.',
       },
+      slider_width: {
+        type: jsPsych.plugins.parameterType.INT,
+        pretty_name:'Slider width',
+        default: null,
+        description: 'Width of the slider in pixels.'
+      },
       button_label: {
         type: jsPsych.plugins.parameterType.STRING,
         pretty_name: 'Button label',
@@ -133,7 +139,11 @@ jsPsych.plugins['image-slider-response'] = (function() {
     }
     html += '"></img>';
     html += '</div>';
-    html += '<div class="jspsych-image-slider-response-container" style="position:relative; margin-bottom:3em;">';
+    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 += '">';
     html += '<input type="range" value="'+trial.start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){