Add real-time value display feature to plugin-image-slider-response

Added real-time value display feature to plugin-image-slider-response: 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

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: true,
+ },
  },
  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);