Added parameter to include a number showing the slider value jspsych#…

…1192

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

@@ -16,6 +16,7 @@ max | integer | 100 | Sets the maximum value of the slider.
 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.
+slider_number | boolean | false | If true, includes a number with the selected value next to the slider.
 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.

examples/jspsych-html-slider-response.html

@@ -41,8 +41,17 @@
     stimulus_duration: 1000
   }
 
+  var trial_4 = {
+    type: 'html-slider-response',
+    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,
+    slider_number: true
+  }
+
   jsPsych.init({
-    timeline: [trial_1, trial_2, trial_3],
+    timeline: [trial_1, trial_2, trial_3, trial_4],
     on_finish: function() {
       jsPsych.data.displayData();
     },

plugins/jspsych-html-slider-response.js

@@ -60,6 +60,12 @@ jsPsych.plugins['html-slider-response'] = (function() {
         default: null,
         description: 'Width of the slider in pixels.'
       },
+      slider_number: {
+        type: jsPsych.plugins.parameterType.BOOL,
+        pretty_name:'Slider with number',
+        default: false,
+        description: 'Include a number with the selected value in the slider.'
+      },
       button_label: {
         type: jsPsych.plugins.parameterType.STRING,
         pretty_name: 'Button label',
@@ -109,7 +115,10 @@ jsPsych.plugins['html-slider-response'] = (function() {
       html += 'width:'+trial.slider_width+'px;';
     }
     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" value="'+trial.slider_start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-html-slider-response-response" oninput="document.getElementById(&quot;output&quot;).value = this.value"></input>';
+    if(trial.slider_number){
+      html += '<div style="font-weight: bold; vertical-align: top; width: 107%; text-align: right; position: relative; top: -30px; z-index: -1;"><output id = "output">50</output></div>';
+    }
     html += '<div>'
     for(var j=0; j < trial.labels.length; j++){
       var width = 100/(trial.labels.length-1);