From 3f23fe5d19f5c765e85c73addd5a65818f4c95ad Mon Sep 17 00:00:00 2001 From: Gali Geller Date: Sat, 27 Nov 2021 20:34:33 +0200 Subject: [PATCH 1/2] Added a new option to the plugin With this option it is now possible to hide the slider while the video is playing --- docs/plugins/video-slider-response.md | 1 + .../plugin-video-slider-response/src/index.ts | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/docs/plugins/video-slider-response.md b/docs/plugins/video-slider-response.md index a68edf4350..536574a5df 100644 --- a/docs/plugins/video-slider-response.md +++ b/docs/plugins/video-slider-response.md @@ -31,6 +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. ## Data Generated diff --git a/packages/plugin-video-slider-response/src/index.ts b/packages/plugin-video-slider-response/src/index.ts index e56ae44861..0ba5d8b93d 100644 --- a/packages/plugin-video-slider-response/src/index.ts +++ b/packages/plugin-video-slider-response/src/index.ts @@ -131,6 +131,12 @@ const info = { pretty_name: "Response allowed while playing", default: true, }, + hide_slider_while_video_plays: { + type: ParameterType.BOOL, + pretty_name: "Hide slider while video plays", + default: false, + description: "If true the slider will be hidden while the video plays and it will appear when the video stops" + }, }, }; @@ -274,6 +280,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { 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(); } }; @@ -310,6 +320,10 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { var currenttime = video_element.currentTime; if (currenttime >= trial.stop) { video_element.pause(); + if (trial.hide_slider_while_video_plays){ + show_slider(); + } + if (trial.trial_ends_after_video && !stopped) { // this is to prevent end_trial from being called twice, because the timeupdate event // can fire in quick succession @@ -336,6 +350,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { .addEventListener("touchstart", enable_button); } + if (trial.hide_slider_while_video_plays) { + hide_slider(); + } + + var startTime = performance.now(); // store response @@ -405,6 +424,14 @@ class VideoSliderResponsePlugin implements JsPsychPlugin { } } + function hide_slider() { + (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = "none"; + } + + function show_slider() { + (document.getElementsByClassName("jspsych-video-slider-response-container")[0] as HTMLElement).style.display = ""; + } + // end trial if time limit is set if (trial.trial_duration !== null) { this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration); From 0f7cc03b92081b2903fbf9781c1308fb0c77c705 Mon Sep 17 00:00:00 2001 From: Gali Geller Date: Mon, 6 Dec 2021 20:30:39 +0200 Subject: [PATCH 2/2] hide slider while playing video+audio --- docs/plugins/audio-slider-response.md | 1 + docs/plugins/video-slider-response.md | 2 +- .../plugin-audio-slider-response/src/index.ts | 25 +++++++++++++++++++ .../plugin-video-slider-response/src/index.ts | 18 +++++++------ 4 files changed, 37 insertions(+), 9 deletions(-) diff --git a/docs/plugins/audio-slider-response.md b/docs/plugins/audio-slider-response.md index 5734997508..e997121d85 100644 --- a/docs/plugins/audio-slider-response.md +++ b/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 diff --git a/docs/plugins/video-slider-response.md b/docs/plugins/video-slider-response.md index 536574a5df..6773bbac91 100644 --- a/docs/plugins/video-slider-response.md +++ b/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 diff --git a/packages/plugin-audio-slider-response/src/index.ts b/packages/plugin-audio-slider-response/src/index.ts index 67b756da10..1ca13181d6 100644 --- a/packages/plugin-audio-slider-response/src/index.ts +++ b/packages/plugin-audio-slider-response/src/index.ts @@ -89,6 +89,11 @@ const info = { 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 { audio.addEventListener("ended", enable_slider); } + if (trial.hide_slider_while_playing) { + audio.addEventListener("ended", show_slider); + } + var html = '
'; html += '
("#jspsych-audio-slider-response-response").disabled = @@ -317,6 +341,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin { audio.removeEventListener("ended", end_trial); audio.removeEventListener("ended", enable_slider); + audio.removeEventListener("ended", show_slider) // save data var trialdata = { diff --git a/packages/plugin-video-slider-response/src/index.ts b/packages/plugin-video-slider-response/src/index.ts index 0ba5d8b93d..fa7954e247 100644 --- a/packages/plugin-video-slider-response/src/index.ts +++ b/packages/plugin-video-slider-response/src/index.ts @@ -131,9 +131,9 @@ const info = { 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 { } 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 { 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 { .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 { 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