From d8b23ca36539501c552f180a213192e13fc18cc9 Mon Sep 17 00:00:00 2001 From: Josh de Leeuw Date: Fri, 26 Nov 2021 11:55:21 -0500 Subject: [PATCH] Allow keyboard movements to enable slider buttons when `require_movement` --- .changeset/mean-bees-warn.md | 9 +++++++++ packages/plugin-audio-slider-response/src/index.ts | 4 ++++ .../plugin-canvas-slider-response/src/index.ts | 4 ++++ packages/plugin-html-slider-response/src/index.ts | 4 ++++ packages/plugin-image-slider-response/src/index.ts | 4 ++++ packages/plugin-video-slider-response/src/index.ts | 14 +++++++++----- 6 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 .changeset/mean-bees-warn.md diff --git a/.changeset/mean-bees-warn.md b/.changeset/mean-bees-warn.md new file mode 100644 index 0000000000..c5ebac5fea --- /dev/null +++ b/.changeset/mean-bees-warn.md @@ -0,0 +1,9 @@ +--- +"@jspsych/plugin-audio-slider-response": patch +"@jspsych/plugin-canvas-slider-response": patch +"@jspsych/plugin-html-slider-response": patch +"@jspsych/plugin-image-slider-response": patch +"@jspsych/plugin-video-slider-response": patch +--- + +When `require_movement` is `true`, allow changes to the slider using the keyboard to enable the button (#1783). diff --git a/packages/plugin-audio-slider-response/src/index.ts b/packages/plugin-audio-slider-response/src/index.ts index a38200aa21..08e400897b 100644 --- a/packages/plugin-audio-slider-response/src/index.ts +++ b/packages/plugin-audio-slider-response/src/index.ts @@ -248,6 +248,10 @@ class AudioSliderResponsePlugin implements JsPsychPlugin { display_element .querySelector("#jspsych-audio-slider-response-response") .addEventListener("touchstart", enable_button); + + display_element + .querySelector("#jspsych-audio-slider-response-response") + .addEventListener("change", enable_button); } display_element diff --git a/packages/plugin-canvas-slider-response/src/index.ts b/packages/plugin-canvas-slider-response/src/index.ts index 957466d71f..aa22019f44 100644 --- a/packages/plugin-canvas-slider-response/src/index.ts +++ b/packages/plugin-canvas-slider-response/src/index.ts @@ -206,6 +206,10 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin { display_element .querySelector("#jspsych-canvas-slider-response-response") .addEventListener("touchstart", enable_button); + + display_element + .querySelector("#jspsych-canvas-slider-response-response") + .addEventListener("change", enable_button); } display_element diff --git a/packages/plugin-html-slider-response/src/index.ts b/packages/plugin-html-slider-response/src/index.ts index 4a8be1111f..e78ace505e 100644 --- a/packages/plugin-html-slider-response/src/index.ts +++ b/packages/plugin-html-slider-response/src/index.ts @@ -182,6 +182,10 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin { display_element .querySelector("#jspsych-html-slider-response-response") .addEventListener("touchstart", enable_button); + + display_element + .querySelector("#jspsych-html-slider-response-response") + .addEventListener("change", enable_button); } const end_trial = () => { diff --git a/packages/plugin-image-slider-response/src/index.ts b/packages/plugin-image-slider-response/src/index.ts index 0ea814a8d8..e3a1e368af 100644 --- a/packages/plugin-image-slider-response/src/index.ts +++ b/packages/plugin-image-slider-response/src/index.ts @@ -365,6 +365,10 @@ class ImageSliderResponsePlugin implements JsPsychPlugin { display_element .querySelector("#jspsych-image-slider-response-response") .addEventListener("touchstart", enable_button); + + display_element + .querySelector("#jspsych-image-slider-response-response") + .addEventListener("change", enable_button); } const end_trial = () => { diff --git a/packages/plugin-video-slider-response/src/index.ts b/packages/plugin-video-slider-response/src/index.ts index 3b7c71791e..605f019a67 100644 --- a/packages/plugin-video-slider-response/src/index.ts +++ b/packages/plugin-video-slider-response/src/index.ts @@ -147,7 +147,7 @@ type Info = typeof info; class VideoSliderResponsePlugin implements JsPsychPlugin { static info = info; - constructor(private jsPsych: JsPsych) { } + constructor(private jsPsych: JsPsych) {} trial(display_element: HTMLElement, trial: TrialType) { if (!Array.isArray(trial.stimulus)) { @@ -299,11 +299,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { } else { video_element.pause(); } - video_element.onseeked = () => { }; + video_element.onseeked = () => {}; }; video_element.onplaying = () => { video_element.currentTime = trial.start; - video_element.onplaying = () => { }; + video_element.onplaying = () => {}; }; // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play, // change current time, then show/unmute @@ -324,7 +324,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { end_trial(); } - if (!trial.response_allowed_while_playing){ + if (!trial.response_allowed_while_playing) { enable_slider(); } } @@ -345,6 +345,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { display_element .querySelector("#jspsych-video-slider-response-response") .addEventListener("touchstart", enable_button); + + display_element + .querySelector("#jspsych-video-slider-response-response") + .addEventListener("change", enable_button); } var startTime = performance.now(); @@ -367,7 +371,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { .pause(); display_element.querySelector( "#jspsych-video-slider-response-stimulus-video" - ).onended = () => { }; + ).onended = () => {}; // gather the data to store for the trial var trial_data = {