Allow keyboard movements to enable slider buttons when `require_movem…

…ent`
jspsych · Nov 26, 2021 · d8b23ca · d8b23ca
1 parent a8ab2eb
commit d8b23ca
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/mean-bees-warn.md 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
@@ -248,6 +248,10 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         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
@@ -206,6 +206,10 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
       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
@@ -182,6 +182,10 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
       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
@@ -365,6 +365,10 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
       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
@@ -147,7 +147,7 @@ type Info = typeof info;
 class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
   static info = info;
 
-  constructor(private jsPsych: JsPsych) { }
+  constructor(private jsPsych: JsPsych) {}
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     if (!Array.isArray(trial.stimulus)) {
@@ -299,11 +299,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         } 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<Info> {
             end_trial();
           }
 
-          if (!trial.response_allowed_while_playing){
+          if (!trial.response_allowed_while_playing) {
             enable_slider();
           }
         }
@@ -345,6 +345,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
       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<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-slider-response-stimulus-video"
-      ).onended = () => { };
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {