Added value_display parameter to all *-slider-response plugins and Updated docs

Added `value_display` parameter to all `slider_response` plugins and updated docs: if the parameter value_display is set as true, the slider's value will be displayed in real-time below the slider as participants adjust it.

Before participants adjust the slider, the displayed value will be the slider_start value

Author: raynatang

docs/plugins/audio-slider-response.md

@@ -29,6 +29,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | trial_duration                 | numeric          | null          | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant'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. |
 | response_ends_trial            | boolean          | true          | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to listen to the stimulus for a fixed amount of time, even if they respond before the time is complete. |
 | response_allowed_while_playing | boolean          | true          | If true, then responses are allowed while the audio is playing. If false, then the audio must finish playing before the slider is enabled and the trial can end via the next button click. Once the audio has played all the way through, the slider is enabled and a response is allowed (including while the audio is being re-played via on-screen playback controls). |
+| value_display | boolean          | false          | If true, the slider's real-time value will be displayed below the slider. The initial value will be specified by the `slider_start` parameter. |
 
 ## Data Generated
 

docs/plugins/canvas-slider-response.md

@@ -24,6 +24,7 @@ prompt | string | null | This string can contain HTML markup. Any content here w
 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.
 trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant'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.
 response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can use this parameter to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+value_display | boolean | false | If true, the slider's real-time value will be displayed below the slider. The initial value will be specified by the `slider_start` parameter.
 
 ## Data Generated
 

docs/plugins/html-slider-response.md

@@ -23,6 +23,7 @@ prompt | string | null | This string can contain HTML markup. Any content here w
 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.
 trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant'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.
 response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
+value_display | boolean | false | If true, the slider's real-time value will be displayed below the slider. The initial value will be specified by the `slider_start` parameter.
 
 ## Data Generated
 

docs/plugins/image-slider-response.md

@@ -29,6 +29,7 @@ stimulus_duration | numeric | null | How long to show the stimulus for in millis
 trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant'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.
 response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
 render_on_canvas | boolean | true | If true, the image will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive image trials in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych. If the stimulus is an **animated gif**, you must set this parameter to false, because the canvas rendering method will only present static images.
+value_display | boolean | false | If true, the slider's real-time value will be displayed below the slider. The initial value will be specified by the `slider_start` parameter.
 
 ## Data Generated
 

docs/plugins/video-slider-response.md

@@ -33,6 +33,7 @@ trial_ends_after_video | bool | false | If true, then the trial will end as soon
 trial_duration | numeric | null | How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant'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.
 response_ends_trial | boolean | true | If true, then the trial will end whenever the participant makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `trial_duration` is reached. You can set this parameter to `false` to force the participant to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
 response_allowed_while_playing | boolean | true | If true, then responses are allowed while the video is playing. If false, then the video must finish playing before the slider is enabled and the trial can end via the next button click. Once the video has played all the way through, the slider is enabled and a response is allowed (including while the video is being re-played via on-screen playback controls). 
+value_display | boolean | false | If true, the slider's real-time value will be displayed below the slider. The initial value will be specified by the `slider_start` parameter.
 
 
 ## Data Generated

packages/plugin-audio-slider-response/src/index.ts

@@ -96,6 +96,11 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: false,
+  },
   },
   data: {
     /** The numeric value of the slider. */
@@ -223,7 +228,16 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
     if (!this.params.response_allowed_while_playing) {
       html += " disabled";
     }
-    html += "></input><div>";
+
+    // Add real-time value display if enabled
+    if (this.params.value_display) {
+        html += ' oninput="this.nextElementSibling.value = this.value"></input>';
+        html += "<output>" + this.params.slider_start + "</output>";
+    }else{
+        html += "></input>";
+    }
+    html += "<div>";
+    
     for (var j = 0; j < this.params.labels.length; j++) {
       var label_width_perc = 100 / (this.params.labels.length - 1);
       var percent_of_range = j * (100 / (this.params.labels.length - 1));

packages/plugin-canvas-slider-response/src/index.ts

@@ -79,6 +79,11 @@ const info = <const>{
       array: true,
       default: [500, 500],
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: false,
+    },
   },
   data: {
     /** The response time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. */
@@ -132,7 +137,13 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
       trial.max +
       '" step="' +
       trial.step +
-      '" style="width: 100%;" id="jspsych-canvas-slider-response-response"></input>';
+      '" style="width: 100%;" id="jspsych-canvas-slider-response-response"> ';
+    if (trial.value_display) {
+        html += 'oninput="this.nextElementSibling.value = this.value"></input>';
+        html += "<output>" + trial.slider_start + "</output>";
+    }else{
+        html += "></input>";
+    }
     html += "<div>";
     for (var j = 0; j < trial.labels.length; j++) {
       var width = 100 / (trial.labels.length - 1);

packages/plugin-html-slider-response/src/index.ts

@@ -73,6 +73,12 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: false,
+  },
+
   },
   data: {
     /** The time in milliseconds for the participant to make a response. The time is measured from when the stimulus first appears on the screen until the participant's response. */
@@ -129,7 +135,13 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
       trial.max +
       '" step="' +
       trial.step +
-      '" id="jspsych-html-slider-response-response"></input>';
+      '" id="jspsych-html-slider-response-response" ';
+    if (trial.value_display) {
+        html += 'oninput="this.nextElementSibling.value = this.value"></input>';
+        html += "<output>" + trial.slider_start + "</output>";
+    }else{
+        html += "></input>";
+    }
     html += "<div>";
     for (var j = 0; j < trial.labels.length; j++) {
       var label_width_perc = 100 / (trial.labels.length - 1);

packages/plugin-image-slider-response/src/index.ts

@@ -108,6 +108,11 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: false,
+  },
   },
   data: {
     /** The path of the image that was displayed. */
@@ -222,7 +227,13 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
         trial.max +
         '" step="' +
         trial.step +
-        '" id="jspsych-image-slider-response-response"></input>';
+        '" id="jspsych-image-slider-response-response"> ';
+      if (trial.value_display) {
+          html += 'oninput="this.nextElementSibling.value = this.value"></input>';
+          html += "<output>" + trial.slider_start + "</output>";
+      }else{
+          html += "></input>";
+      }
       html += "<div>";
       for (var j = 0; j < trial.labels.length; j++) {
         var label_width_perc = 100 / (trial.labels.length - 1);

packages/plugin-video-slider-response/src/index.ts

@@ -140,6 +140,11 @@ const info = <const>{
       type: ParameterType.BOOL,
       default: true,
     },
+    /** If true, the slider's value will be displayed in real time below the slider. */
+    value_display: {
+      type: ParameterType.BOOL,
+      default: false,
+  },
   },
   data: {
     /** The numeric value of the slider. */
@@ -265,7 +270,16 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
     if (!trial.response_allowed_while_playing) {
       html += " disabled";
     }
-    html += "></input><div>";
+
+    // Add real-time value display if enabled
+    if (trial.value_display) {
+        html += ' oninput="this.nextElementSibling.value = this.value"></input>';
+        html += "<output>" + trial.slider_start + "</output>";
+    }else{
+        html += "></input>";
+    }
+    html += "<div>";
+    
     for (var j = 0; j < trial.labels.length; j++) {
       var label_width_perc = 100 / (trial.labels.length - 1);
       var percent_of_range = j * (100 / (trial.labels.length - 1));