HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Added real-time value display feature to plugin-html-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
This commit is contained in:
raynatang 2024-08-09 19:07:03 -05:00 committed by GitHub
parent 87cf4bff1d
commit 50de647a5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/plugin-html-slider-response/src/index.ts
View File

@ -73,6 +73,11 @@ const info = <const>{
type: ParameterType.BOOL, type: ParameterType.BOOL,
default: true, 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: { 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. */ /** 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 +134,13 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
trial.max + trial.max +
'" step="' + '" step="' +
trial.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>"; html += "<div>";
for (var j = 0; j < trial.labels.length; j++) { for (var j = 0; j < trial.labels.length; j++) {
var label_width_perc = 100 / (trial.labels.length - 1); var label_width_perc = 100 / (trial.labels.length - 1);