support custom start values #472

examples/jspsych-html-slider-response.html

@@ -24,7 +24,8 @@
     type: 'html-slider-response',
     stimulus: '<div style="margin: 50px auto; width: 100px; height: 100px; background-color: rgb(29, 23, 138)"></div>',
     labels: ['Purple', 'Blue'],
-    prompt: '<p>Is this color closer to purple or blue? Use the slider above. (5s time limit).</p>',
+    start: 10,
+    prompt: '<p>Is this color closer to purple or blue? Use the slider above. (5s time limit; custom starting value).</p>',
     trial_duration: 5000
   }
 

examples/jspsych-image-slider-response.html

@@ -24,7 +24,8 @@
     type: 'image-slider-response',
     stimulus: 'img/happy_face_2.jpg',
     labels: ['1 (least happy)', '100 (most happy)'],
-    prompt: '<p>How happy is this person on a scale of 1-100? (5s time limit)</p>',
+    start: 80,
+    prompt: '<p>How happy is this person on a scale of 1-100? (5s time limit; set start value)</p>',
     trial_duration: 5000
   }
 

plugins/jspsych-audio-slider-response.js

@@ -25,6 +25,12 @@ jsPsych.plugins['audio-slider-response'] = (function() {
         default: 100,
         description: 'Sets the maximum value of the slider',
       },
+			start: {
+				type: jsPsych.plugins.parameterType.INT,
+				pretty_name: 'Slider starting value',
+				default: 50,
+				description: 'Sets the starting value of the slider',
+			},
       step: {
         type: jsPsych.plugins.parameterType.INT,
         pretty_name: 'Step',
@@ -98,7 +104,7 @@ 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;">';
-    html += '<input type="range" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-audio-slider-response-response"></input>';
+    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++){
       var width = 100/(trial.labels.length-1);

plugins/jspsych-html-slider-response.js

@@ -35,6 +35,12 @@ jsPsych.plugins['html-slider-response'] = (function() {
         default: 100,
         description: 'Sets the maximum value of the slider',
       },
+      start: {
+				type: jsPsych.plugins.parameterType.INT,
+				pretty_name: 'Slider starting value',
+				default: 50,
+				description: 'Sets the starting value of the slider',
+			},
       step: {
         type: jsPsych.plugins.parameterType.INT,
         pretty_name: 'Step',
@@ -87,7 +93,7 @@ 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;">';
-    html += '<input type="range" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-html-slider-response-response"></input>';
+    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++){
       var width = 100/(trial.labels.length-1);

plugins/jspsych-image-slider-response.js

@@ -37,6 +37,12 @@ jsPsych.plugins['image-slider-response'] = (function() {
         default: 100,
         description: 'Sets the maximum value of the slider',
       },
+      start: {
+				type: jsPsych.plugins.parameterType.INT,
+				pretty_name: 'Slider starting value',
+				default: 50,
+				description: 'Sets the starting value of the slider',
+			},
       step: {
         type: jsPsych.plugins.parameterType.INT,
         pretty_name: 'Step',
@@ -89,7 +95,7 @@ jsPsych.plugins['image-slider-response'] = (function() {
     var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
     html += '<div id="jspsych-image-slider-response-stimulus"><img src="' + trial.stimulus + '"></div>';
     html += '<div class="jspsych-image-slider-response-container" style="position:relative;">';
-    html += '<input type="range" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
+    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++){
       var width = 100/(trial.labels.length-1);