From 3cb1aab7abea021960a394e48b1fc1904ae09fb5 Mon Sep 17 00:00:00 2001
From: gorkang <gorkang@gmail.com>
Date: Sat, 21 Nov 2020 07:32:31 +0000
Subject: [PATCH] Added parameter to include a number showing the slider value
 #1192

---
 docs/plugins/jspsych-html-slider-response.md |  1 +
 examples/jspsych-html-slider-response.html   | 11 ++++++++++-
 plugins/jspsych-html-slider-response.js      | 11 ++++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/plugins/jspsych-html-slider-response.md b/docs/plugins/jspsych-html-slider-response.md
index 33470107c7..8da96f14ec 100644
--- a/docs/plugins/jspsych-html-slider-response.md
+++ b/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.
diff --git a/examples/jspsych-html-slider-response.html b/examples/jspsych-html-slider-response.html
index aedc3f6dc6..c420af637a 100644
--- a/examples/jspsych-html-slider-response.html
+++ b/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();
     },
diff --git a/plugins/jspsych-html-slider-response.js b/plugins/jspsych-html-slider-response.js
index 1e38408d13..309397ac87 100644
--- a/plugins/jspsych-html-slider-response.js
+++ b/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);