hide slider while playing video+audio

docs/plugins/audio-slider-response.md

@@ -27,6 +27,7 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 | trial_duration                 | numeric          | null          | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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 subject 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 subject 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). |
+hide_slider_while_playing | boolean | false | If true, the slider will be hidden while the audio is playing, and will appear when the audio stops.|
 
 ## Data Generated
 

docs/plugins/video-slider-response.md

@@ -31,7 +31,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 subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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 subject 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 subject 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). 
-hide_slider_while_video_plays | boolean | false | If true, the slider will be hidden while the video is playing, and will appear when the video stops.
+hide_slider_while_playing | boolean | false | If true, the slider will be hidden while the video is playing, and will appear when the video stops.
 
 
 ## Data Generated

packages/plugin-audio-slider-response/src/index.ts

@@ -89,6 +89,11 @@ const info = <const>{
       pretty_name: "Response allowed while playing",
       default: true,
     },
+    hide_slider_while_playing: {
+      type: ParameterType.BOOL,
+      pretty_name: "Hide slider while playing",
+      default: false
+    },
   },
 };
 
@@ -156,6 +161,10 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         audio.addEventListener("ended", enable_slider);
       }
 
+      if (trial.hide_slider_while_playing) {
+        audio.addEventListener("ended", show_slider);
+      }
+
       var html = '<div id="jspsych-audio-slider-response-wrapper" style="margin: 100px 0px;">';
       html +=
         '<div class="jspsych-audio-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
@@ -283,6 +292,10 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         audio.play();
       }
 
+      if (trial.hide_slider_while_playing) {
+        hide_slider();
+      }
+
       // end trial if trial_duration is set
       if (trial.trial_duration !== null) {
         this.jsPsych.pluginAPI.setTimeout(() => {
@@ -293,6 +306,17 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
       on_load();
     };
 
+
+    function hide_slider() {
+      (document.getElementsByClassName("jspsych-slider")[0] as HTMLElement).style.display = "none";
+      (document.getElementById("jspsych-audio-slider-response-next") as HTMLElement).style.display = "none";
+    }
+
+    function show_slider(){
+      (document.getElementsByClassName("jspsych-slider")[0] as HTMLElement).style.display = "";
+      (document.getElementById("jspsych-audio-slider-response-next") as HTMLElement).style.display = "";
+    }
+
     // function to enable slider after audio ends
     function enable_slider() {
       document.querySelector<HTMLInputElement>("#jspsych-audio-slider-response-response").disabled =
@@ -317,6 +341,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
 
       audio.removeEventListener("ended", end_trial);
       audio.removeEventListener("ended", enable_slider);
+      audio.removeEventListener("ended", show_slider)
 
       // save data
       var trialdata = {

packages/plugin-video-slider-response/src/index.ts

@@ -131,9 +131,9 @@ const info = <const>{
       pretty_name: "Response allowed while playing",
       default: true,
     },
-    hide_slider_while_video_plays: {
+    hide_slider_while_playing: {
       type: ParameterType.BOOL,
-      pretty_name: "Hide slider while video plays",
+      pretty_name: "Hide slider while playing",
       default: false,
       description: "If true the slider will be hidden while the video plays and it will appear when the video stops"
     },
@@ -277,13 +277,13 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
     }
 
     video_element.onended = () => {
+      if(trial.hide_slider_while_playing) {
+        show_slider();
+      } 
+
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
-        if(trial.hide_slider_while_video_plays) {
-          show_slider();
-        }
-
         enable_slider();
       }
     };
@@ -320,7 +320,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
-          if (trial.hide_slider_while_video_plays){
+          if (trial.hide_slider_while_playing){
             show_slider();
           }
 
@@ -350,7 +350,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         .addEventListener("touchstart", enable_button);
     }
 
-    if (trial.hide_slider_while_video_plays) {
+    if (trial.hide_slider_while_playing) {
       hide_slider();
     }
 
@@ -426,10 +426,12 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     function hide_slider() {
       (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = "none";
+      (document.getElementById("jspsych-video-slider-response-next") as HTMLElement).style.display = "none";
     }
 
     function show_slider() {
       (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = "";
+      (document.getElementById("jspsych-video-slider-response-next") as HTMLElement).style.display = "";
     }
 
     // end trial if time limit is set