diff --git a/docs/plugins/jspsych-audio-button-response.md b/docs/plugins/jspsych-audio-button-response.md index 7c68fe13..c68e5788 100644 --- a/docs/plugins/jspsych-audio-button-response.md +++ b/docs/plugins/jspsych-audio-button-response.md @@ -23,6 +23,7 @@ margin_vertical | string | '0px' | Vertical margin of the button(s). margin_horizontal | string | '8px' | Horizontal margin of the button(s). 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. trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing. +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 button choices are enabled and a response is accepted. Once the audio has played all the way through, the buttons are enabled and a response is allowed (including while the audio is being re-played via on-screen playback controls). ## Data Generated diff --git a/docs/plugins/jspsych-audio-keyboard-response.md b/docs/plugins/jspsych-audio-keyboard-response.md index 36f29548..c17eb11d 100644 --- a/docs/plugins/jspsych-audio-keyboard-response.md +++ b/docs/plugins/jspsych-audio-keyboard-response.md @@ -20,6 +20,7 @@ prompt | string | null | This string can contain HTML markup. Any content here w 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 use 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. trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing. +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 a keyboard response is accepted. Once the audio has played all the way through, a valid keyboard response is allowed (including while the audio is being re-played via on-screen playback controls). ## Data Generated diff --git a/docs/plugins/jspsych-audio-slider-response.md b/docs/plugins/jspsych-audio-slider-response.md index 7d694e49..6a9f2502 100644 --- a/docs/plugins/jspsych-audio-slider-response.md +++ b/docs/plugins/jspsych-audio-slider-response.md @@ -26,6 +26,7 @@ require_movement | boolean | false | If true, the subject must move the slider b prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). 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). ## Data Generated diff --git a/docs/plugins/jspsych-video-button-response.md b/docs/plugins/jspsych-video-button-response.md index 5c2a5d7a..ad0d3fa7 100644 --- a/docs/plugins/jspsych-video-button-response.md +++ b/docs/plugins/jspsych-video-button-response.md @@ -24,6 +24,7 @@ rate | numeric | null | The playback rate of the video. 1 is normal, <1 is slowe trial_ends_after_video | bool | false | If true, then the trial will end as soon as the video file finishes playing. 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 button choices are enabled and a response is accepted. Once the video has played all the way through, the buttons are enabled and a response is allowed (including while the video is being re-played via on-screen playback controls). ## Data Generated diff --git a/docs/plugins/jspsych-video-keyboard-response.md b/docs/plugins/jspsych-video-keyboard-response.md index eaf727e8..5a19f7a4 100644 --- a/docs/plugins/jspsych-video-keyboard-response.md +++ b/docs/plugins/jspsych-video-keyboard-response.md @@ -21,7 +21,7 @@ choices | array of keycodes | `jsPsych.ALL_KEYS` | This array contains the keys trial_ends_after_video | bool | false | If true, then the trial will end as soon as the video file finishes playing. 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 a keyboard response is accepted. Once the video has played all the way through, a valid keyboard response is allowed (including while the video is being re-played via on-screen playback controls). ## Data Generated diff --git a/docs/plugins/jspsych-video-slider-response.md b/docs/plugins/jspsych-video-slider-response.md index 76dd5cbc..14d56130 100644 --- a/docs/plugins/jspsych-video-slider-response.md +++ b/docs/plugins/jspsych-video-slider-response.md @@ -27,6 +27,7 @@ button_label | string | 'Continue' | Label of the button to end the trial. trial_ends_after_video | bool | false | If true, then the trial will end as soon as the video file finishes playing. 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). ## Data Generated diff --git a/examples/jspsych-audio-button-response.html b/examples/jspsych-audio-button-response.html index 3e6ac41e..94de8b25 100644 --- a/examples/jspsych-audio-button-response.html +++ b/examples/jspsych-audio-button-response.html @@ -13,9 +13,9 @@ timeline.push({ type: 'html-button-response', - stimulus: 'Recent versions of Chrome require the user to interact with a page before it can play audio. '+ - 'Clicking the button below counts as an interaction. Be aware of this when planning audio experiments if '+ - 'you want the first trial to include audio.', + stimulus: '

Some browsers now require the user to interact with a page before it can play audio. '+ + 'Clicking the button below counts as an interaction.

Be aware of this when planning audio experiments if '+ + 'you want the first trial to include audio.

', choices: ['Continue'] }); @@ -35,6 +35,14 @@ prompt: "

What word was said? (trial ends after 2s)

" }); + timeline.push({ + type: 'audio-button-response', + stimulus: 'sound/speech_joke.mp3', + choices: ['Not funny', 'Funny'], + prompt: '

How funny was the joke?

When the audio stops, click a button to end the trial.

Response buttons are disabled while the audio is playing.

', + response_allowed_while_playing: false + }) + jsPsych.init({ timeline: timeline, use_webaudio: false, diff --git a/examples/jspsych-audio-keyboard-response.html b/examples/jspsych-audio-keyboard-response.html index 990982ce..be0fb941 100644 --- a/examples/jspsych-audio-keyboard-response.html +++ b/examples/jspsych-audio-keyboard-response.html @@ -11,9 +11,9 @@ var pre_audio = { type: 'html-button-response', - stimulus: 'Recent versions of Chrome require the user to interact with a page before it can play audio. '+ - 'Clicking the button below counts as an interaction. Be aware of this when planning audio experiments if '+ - 'you want the first trial to include audio.', + stimulus: '

Some browsers now require the user to interact with a page before it can play audio. '+ + 'Clicking the button below counts as an interaction.

Be aware of this when planning audio experiments if '+ + 'you want the first trial to include audio.

', choices: ['Continue'] } @@ -40,8 +40,16 @@ prompt: '

No response allowed. 2s wait.

' } + trial_4 = { + type: 'audio-keyboard-response', + stimulus: 'sound/speech_joke.mp3', + choices: jsPsych.ALL_KEYS, + prompt: '

When the audio stops, press any key to end the trial.

Responses made while the audio is still playing will be ignored.

', + response_allowed_while_playing: false + } + jsPsych.init({ - timeline: [pre_audio, trial_1, trial_2, trial_3], + timeline: [pre_audio, trial_1, trial_2, trial_3, trial_4], use_webaudio: false, on_finish: function() { jsPsych.data.displayData(); diff --git a/examples/jspsych-audio-slider-response.html b/examples/jspsych-audio-slider-response.html index cb0b79ab..d35f9f34 100644 --- a/examples/jspsych-audio-slider-response.html +++ b/examples/jspsych-audio-slider-response.html @@ -11,9 +11,9 @@ var pre_audio = { type: 'html-button-response', - stimulus: 'Recent versions of Chrome require the user to interact with a page before it can play audio. '+ - 'Clicking the button below counts as an interaction. Be aware of this when planning audio experiments if '+ - 'you want the first trial to include audio.', + stimulus: '

Some browsers now require the user to interact with a page before it can play audio. '+ + 'Clicking the button below counts as an interaction.

Be aware of this when planning audio experiments if '+ + 'you want the first trial to include audio.

', choices: ['Continue'] } @@ -25,8 +25,26 @@ prompt: '

How funny is the joke?

' } + var trial_2 = { + type: 'audio-slider-response', + stimulus: 'sound/speech_red.mp3', + labels: ['Hate it', 'It"s OK', 'Love it'], + slider_width: 500, + prompt: '

How much do you like this color?

Slider movement is required, so you must interact with (click) the slider before you can continue.

', + require_movement: true + } + + var trial_3 = { + type: 'audio-slider-response', + stimulus: 'sound/hammer.mp3', + labels: ['Unpleasant', 'OK', 'Very pleasant'], + slider_width: 500, + prompt: '

How pleasant was this sound?

The slider will be enabled after the audio ends.

', + response_allowed_while_playing: false + } + jsPsych.init({ - timeline: [pre_audio, trial_1], + timeline: [pre_audio, trial_1, trial_2, trial_3], use_webaudio: false, on_finish: function() { jsPsych.data.displayData(); diff --git a/examples/jspsych-video-button-response.html b/examples/jspsych-video-button-response.html index 6b120228..decb9f53 100644 --- a/examples/jspsych-video-button-response.html +++ b/examples/jspsych-video-button-response.html @@ -12,10 +12,10 @@ var pre_trial = { type: 'html-button-response', stimulus: '

Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.

Without this trial, the video will load but not play.

', - choices: ['continue'] + choices: ['Continue'] } - var trial = { + var trial_1 = { type: 'video-button-response', sources: ['video/sample_video.mp4'], choices: ['y','n'], @@ -34,10 +34,23 @@ response_ends_trial: true } + var trial_2 = { + type: 'video-button-response', + sources: ['video/sample_video.mp4'], + choices: ['Great','Not great'], + margin_vertical: '10px', + margin_horizontal: '8px', + prompt: '

How great was the video?

When the video stops, click a button to end the trial.

Response buttons are disabled while the video is playing.

', + width: 600, + autoplay: true, + response_ends_trial: true, + response_allowed_while_playing: false + } + jsPsych.init({ show_preload_progress_bar: true, - timeline: [pre_trial, trial], + timeline: [pre_trial, trial_1, trial_2], on_finish: function() { jsPsych.data.displayData(); } }); diff --git a/examples/jspsych-video-keyboard-response.html b/examples/jspsych-video-keyboard-response.html index 7d8d3bea..19f589dd 100644 --- a/examples/jspsych-video-keyboard-response.html +++ b/examples/jspsych-video-keyboard-response.html @@ -15,7 +15,7 @@ choices: ['continue'] } - var trial = { + var trial_1 = { type: 'video-keyboard-response', sources: ['video/sample_video.mp4'], choices: ['y','n'], @@ -32,12 +32,22 @@ response_ends_trial: true } - jsPsych.init({ + var trial_2 = { + type: 'video-keyboard-response', + sources: ['video/sample_video.mp4'], + choices: jsPsych.ALL_KEYS, + prompt: '

When the video stops, press any key to end the trial.

Responses that are made before the video ends will be ignored.

', + width: 600, + autoplay: true, + response_ends_trial: true, + response_allowed_while_playing: false + } + jsPsych.init({ show_preload_progress_bar: true, - timeline: [pre_trial, trial], + timeline: [pre_trial, trial_1, trial_2], on_finish: function() { jsPsych.data.displayData(); } }); - + \ No newline at end of file diff --git a/examples/jspsych-video-slider-response.html b/examples/jspsych-video-slider-response.html index 819f274e..0fed2613 100644 --- a/examples/jspsych-video-slider-response.html +++ b/examples/jspsych-video-slider-response.html @@ -12,10 +12,10 @@ var pre_trial = { type: 'html-button-response', stimulus: '

Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.

Without this trial, the video will load but not play.

', - choices: ['continue'] + choices: ['Continue'] } - var trial = { + var trial_1 = { type: 'video-slider-response', sources: ['video/sample_video.mp4'], labels: ['1 Star', '2 Stars', '3 Stars', '4 Stars', '5 Stars'], @@ -23,24 +23,32 @@ max: 5, step: 1, slider_start: 1, - prompt: 'Rate this video clip', + prompt: '

Rate this video clip.

Slider movement is required, so you must interact with (click) the slider cursor to continue.

', require_movement: true, width: 600, - //height: 600, autoplay: true, - //controls: true, - //start: 8, - //stop: 9, rate: 1.5, - //trial_duration: 2000, - //trial_ends_after_video: true, response_ends_trial: true } + var trial_2 = { + type: 'video-slider-response', + sources: ['video/sample_video.mp4'], + labels: ['1 Star', '2 Stars', '3 Stars', '4 Stars', '5 Stars'], + min: 1, + max: 5, + step: 1, + slider_start: 3, + prompt: '

Rate this video clip after the video finishes playing.

The slider will be enabled after the video ends.

', + width: 600, + autoplay: true, + response_allowed_while_playing: false + } + jsPsych.init({ show_preload_progress_bar: true, - timeline: [pre_trial, trial], + timeline: [pre_trial, trial_1, trial_2], on_finish: function() { jsPsych.data.displayData(); } }); diff --git a/plugins/jspsych-audio-button-response.js b/plugins/jspsych-audio-button-response.js index 878fbe84..0ddf124f 100644 --- a/plugins/jspsych-audio-button-response.js +++ b/plugins/jspsych-audio-button-response.js @@ -73,6 +73,13 @@ jsPsych.plugins["audio-button-response"] = (function() { default: false, description: 'If true, then the trial will end as soon as the audio file finishes playing.' }, + response_allowed_while_playing: { + type: jsPsych.plugins.parameterType.BOOL, + pretty_name: 'Response allowed while playing', + default: true, + description: 'If true, then responses are allowed while the audio is playing. '+ + 'If false, then the audio must finish playing before a response is accepted.' + } } } @@ -92,14 +99,21 @@ jsPsych.plugins["audio-button-response"] = (function() { // set up end event if trial needs it if(trial.trial_ends_after_audio){ if(context !== null){ - source.onended = function() { - end_trial(); - } + source.addEventListener('ended', end_trial); } else { audio.addEventListener('ended', end_trial); } } + // enable buttons after audio ends if necessary + if ((!trial.response_allowed_while_playing) & (!trial.trial_ends_after_audio)) { + if (context !== null) { + source.addEventListener('ended', enable_buttons); + } else { + audio.addEventListener('ended', enable_buttons); + } + } + //display buttons var buttons = []; if (Array.isArray(trial.button_html)) { @@ -133,6 +147,9 @@ jsPsych.plugins["audio-button-response"] = (function() { var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility after_response(choice); }); + if (!trial.response_allowed_while_playing) { + display_element.querySelector('#jspsych-audio-button-response-button-' + i).querySelector('button').disabled = true; + } } // store response @@ -160,24 +177,26 @@ jsPsych.plugins["audio-button-response"] = (function() { if (trial.response_ends_trial) { end_trial(); } - }; + } // function to end trial when it is time function end_trial() { + // kill any remaining setTimeout handlers + jsPsych.pluginAPI.clearAllTimeouts(); + // stop the audio file if it is playing // remove end event listeners if they exist if(context !== null){ source.stop(); - source.onended = function() { } + source.removeEventListener('ended', end_trial); + source.removeEventListener('ended', enable_buttons); } else { audio.pause(); - audio.removeEventListener('ended', end_trial); + audio.removeEventListener('ended', end_trial); + audio.removeEventListener('ended', enable_buttons); } - // kill any remaining setTimeout handlers - jsPsych.pluginAPI.clearAllTimeouts(); - // gather the data to store for the trial var trial_data = { "rt": response.rt, @@ -190,7 +209,15 @@ jsPsych.plugins["audio-button-response"] = (function() { // move on to the next trial jsPsych.finishTrial(trial_data); - }; + } + + // function to enable buttons after audio ends + function enable_buttons() { + var btns = document.querySelectorAll('.jspsych-audio-button-response-button button'); + for (var i=0; i'; - html += '
' + html += ''+trial.button_label+''; + var next_disabled_attribute = ""; + if (trial.require_movement | !trial.response_allowed_while_playing) { + next_disabled_attribute = "disabled"; + } + html += ''; display_element.innerHTML = html; @@ -141,6 +162,11 @@ jsPsych.plugins['audio-slider-response'] = (function() { response: null }; + if (!trial.response_allowed_while_playing) { + display_element.querySelector('#jspsych-audio-slider-response-response').disabled = true; + display_element.querySelector('#jspsych-audio-slider-response-next').disabled = true; + } + if(trial.require_movement){ display_element.querySelector('#jspsych-audio-slider-response-response').addEventListener('click', function(){ display_element.querySelector('#jspsych-audio-slider-response-next').disabled = false; @@ -168,14 +194,19 @@ jsPsych.plugins['audio-slider-response'] = (function() { function end_trial(){ + // kill any remaining setTimeout handlers jsPsych.pluginAPI.clearAllTimeouts(); + // stop the audio file if it is playing + // remove end event listeners if they exist if(context !== null){ source.stop(); - source.onended = function() { } + source.removeEventListener('ended', end_trial); + source.removeEventListener('ended', enable_slider); } else { audio.pause(); audio.removeEventListener('ended', end_trial); + audio.removeEventListener('ended', enable_slider); } // save data @@ -192,6 +223,14 @@ jsPsych.plugins['audio-slider-response'] = (function() { jsPsych.finishTrial(trialdata); } + // function to enable slider after audio ends + function enable_slider() { + document.querySelector('#jspsych-audio-slider-response-response').disabled = false; + if (!trial.require_movement) { + document.querySelector('#jspsych-audio-slider-response-next').disabled = false; + } + } + var startTime = performance.now(); // start audio if(context !== null){ diff --git a/plugins/jspsych-video-button-response.js b/plugins/jspsych-video-button-response.js index 26cfed34..afcb581c 100644 --- a/plugins/jspsych-video-button-response.js +++ b/plugins/jspsych-video-button-response.js @@ -115,6 +115,13 @@ jsPsych.plugins["video-button-response"] = (function() { pretty_name: 'Response ends trial', default: true, description: 'If true, the trial will end when subject makes a response.' + }, + response_allowed_while_playing: { + type: jsPsych.plugins.parameterType.BOOL, + pretty_name: 'Response allowed while playing', + default: true, + description: 'If true, then responses are allowed while the video is playing. '+ + 'If false, then the video must finish playing before a response is accepted.' } } } @@ -199,6 +206,17 @@ jsPsych.plugins["video-button-response"] = (function() { video_element.src = video_preload_blob; } + video_element.onended = function(){ + if(trial.trial_ends_after_video){ + end_trial(); + } else if (!trial.response_allowed_while_playing) { + // enable response buttons + for (var i=0; i'; - html += '
' + html += ''+trial.button_label+''; + var next_disabled_attribute = ""; + if (trial.require_movement | !trial.response_allowed_while_playing) { + next_disabled_attribute = "disabled"; + } + html += ''; display_element.innerHTML = html; @@ -222,6 +236,14 @@ jsPsych.plugins["video-slider-response"] = (function() { video_element.src = video_preload_blob; } + video_element.onended = function(){ + if(trial.trial_ends_after_video){ + end_trial(); + } else if (!trial.response_allowed_while_playing) { + enable_slider(); + } + } + video_element.playbackRate = trial.rate; // if video start time is specified, hide the video and set the starting time @@ -246,12 +268,6 @@ jsPsych.plugins["video-slider-response"] = (function() { }) } - video_element.onended = function(){ - if(trial.trial_ends_after_video){ - end_trial(); - } - } - if(trial.require_movement){ display_element.querySelector('#jspsych-video-slider-response-response').addEventListener('click', function(){ display_element.querySelector('#jspsych-video-slider-response-next').disabled = false; @@ -286,6 +302,11 @@ jsPsych.plugins["video-slider-response"] = (function() { // kill any remaining setTimeout handlers jsPsych.pluginAPI.clearAllTimeouts(); + // stop the video file if it is playing + // remove any remaining end event handlers + display_element.querySelector('#jspsych-video-slider-response-stimulus-video').pause(); + display_element.querySelector('#jspsych-video-slider-response-stimulus-video').onended = function() {}; + // gather the data to store for the trial var trial_data = { "rt": response.rt, @@ -302,6 +323,14 @@ jsPsych.plugins["video-slider-response"] = (function() { jsPsych.finishTrial(trial_data); }; + // function to enable slider after video ends + function enable_slider() { + document.querySelector('#jspsych-video-slider-response-response').disabled = false; + if (!trial.require_movement) { + document.querySelector('#jspsych-video-slider-response-next').disabled = false; + } + } + // end trial if time limit is set if (trial.trial_duration !== null) { jsPsych.pluginAPI.setTimeout(function() {