diff --git a/docs/plugins/audio-slider-response.md b/docs/plugins/audio-slider-response.md index 77eb6b9e1d..3508d6de85 100644 --- a/docs/plugins/audio-slider-response.md +++ b/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 diff --git a/docs/plugins/canvas-slider-response.md b/docs/plugins/canvas-slider-response.md index cc440880b9..3ec66ce63b 100644 --- a/docs/plugins/canvas-slider-response.md +++ b/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 diff --git a/docs/plugins/html-slider-response.md b/docs/plugins/html-slider-response.md index 24548571cc..22aa287858 100644 --- a/docs/plugins/html-slider-response.md +++ b/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 diff --git a/docs/plugins/image-slider-response.md b/docs/plugins/image-slider-response.md index 9960f7bb2d..308a6e4f62 100644 --- a/docs/plugins/image-slider-response.md +++ b/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 diff --git a/docs/plugins/video-slider-response.md b/docs/plugins/video-slider-response.md index 6c75415c6d..2f3fdbaa9f 100644 --- a/docs/plugins/video-slider-response.md +++ b/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 diff --git a/packages/plugin-audio-slider-response/src/index.ts b/packages/plugin-audio-slider-response/src/index.ts index f43e376f94..c4150ed91b 100644 --- a/packages/plugin-audio-slider-response/src/index.ts +++ b/packages/plugin-audio-slider-response/src/index.ts @@ -96,6 +96,11 @@ const info = { 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 { if (!this.params.response_allowed_while_playing) { html += " disabled"; } - html += ">
"; + + // Add real-time value display if enabled + if (this.params.value_display) { + html += ' oninput="this.nextElementSibling.value = this.value">'; + html += "" + this.params.slider_start + ""; + }else{ + html += ">"; + } + html += "
"; + 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)); diff --git a/packages/plugin-canvas-slider-response/src/index.ts b/packages/plugin-canvas-slider-response/src/index.ts index 0d202d6e3f..32fefc4f08 100644 --- a/packages/plugin-canvas-slider-response/src/index.ts +++ b/packages/plugin-canvas-slider-response/src/index.ts @@ -79,6 +79,11 @@ const info = { 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 { trial.max + '" step="' + trial.step + - '" style="width: 100%;" id="jspsych-canvas-slider-response-response">'; + '" style="width: 100%;" id="jspsych-canvas-slider-response-response"> '; + if (trial.value_display) { + html += 'oninput="this.nextElementSibling.value = this.value">'; + html += "" + trial.slider_start + ""; + }else{ + html += ">"; + } html += "
"; for (var j = 0; j < trial.labels.length; j++) { var width = 100 / (trial.labels.length - 1); diff --git a/packages/plugin-html-slider-response/src/index.ts b/packages/plugin-html-slider-response/src/index.ts index 1351cb25ff..38e83f957a 100644 --- a/packages/plugin-html-slider-response/src/index.ts +++ b/packages/plugin-html-slider-response/src/index.ts @@ -73,6 +73,12 @@ const info = { 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 { trial.max + '" step="' + trial.step + - '" id="jspsych-html-slider-response-response">'; + '" id="jspsych-html-slider-response-response" '; + if (trial.value_display) { + html += 'oninput="this.nextElementSibling.value = this.value">'; + html += "" + trial.slider_start + ""; + }else{ + html += ">"; + } html += "
"; for (var j = 0; j < trial.labels.length; j++) { var label_width_perc = 100 / (trial.labels.length - 1); diff --git a/packages/plugin-image-slider-response/src/index.ts b/packages/plugin-image-slider-response/src/index.ts index 2e5c77aecd..39308467c6 100644 --- a/packages/plugin-image-slider-response/src/index.ts +++ b/packages/plugin-image-slider-response/src/index.ts @@ -108,6 +108,11 @@ const info = { 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 { trial.max + '" step="' + trial.step + - '" id="jspsych-image-slider-response-response">'; + '" id="jspsych-image-slider-response-response"> '; + if (trial.value_display) { + html += 'oninput="this.nextElementSibling.value = this.value">'; + html += "" + trial.slider_start + ""; + }else{ + html += ">"; + } html += "
"; for (var j = 0; j < trial.labels.length; j++) { var label_width_perc = 100 / (trial.labels.length - 1); diff --git a/packages/plugin-video-slider-response/src/index.ts b/packages/plugin-video-slider-response/src/index.ts index 1e8466b050..9214c9152c 100644 --- a/packages/plugin-video-slider-response/src/index.ts +++ b/packages/plugin-video-slider-response/src/index.ts @@ -140,6 +140,11 @@ const info = { 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 { if (!trial.response_allowed_while_playing) { html += " disabled"; } - html += ">
"; + + // Add real-time value display if enabled + if (trial.value_display) { + html += ' oninput="this.nextElementSibling.value = this.value">'; + html += "" + trial.slider_start + ""; + }else{ + html += ">"; + } + html += "
"; + 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));