HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixes #1380

Browse Source
This commit is contained in:
Josh de Leeuw 2021-01-19 16:51:43 -05:00
parent e32b299d56
commit 6afe9ce086
4 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/jspsych-audio-button-response.html
View File

@ -29,17 +29,17 @@
timeline.push({
type: 'audio-button-response',
stimulus: 'sound/speech_red.mp3',
choices: ['Green', 'Blue', 'Red'],
trial_duration: 2000,
response_ends_trial: false,
prompt: "<p>What word was said? (trial ends after 2s)</p>"
choices: ['#00ff00', '#0000ff', '#ff0000'],
response_allowed_while_playing: false,
button_html: '<div style="background-color: %choice%; width:100px; height:100px;"></div>',
prompt: "<p>Which color was said?</p>"
});
timeline.push({
type: 'audio-button-response',
stimulus: 'sound/speech_joke.mp3',
choices: ['Not funny', 'Funny'],
prompt: '<p>How funny was the joke?</p><p>When the audio stops, click a button to end the trial.</p><p>Response buttons are disabled while the audio is playing.</p>',
prompt: '<p>Is the joke funny?</p><p>When the audio stops, click a button to end the trial.</p><p>Response buttons are disabled while the audio is playing.</p>',
response_allowed_while_playing: false
})

8
examples/jspsych-video-button-response.html
View File

@ -18,8 +18,7 @@
var trial_1 = {
type: 'video-button-response',
stimulus: ['video/sample_video.mp4'],
choices: ['y','n'],
button_html: '<button class="jspsych-btn">%choice%!</button>',
choices: ['Y','N'],
margin_vertical: '10px',
margin_horizontal: '8px',
prompt: 'Press Y or N',
@ -37,10 +36,11 @@
var trial_2 = {
type: 'video-button-response',
stimulus: ['video/sample_video.mp4'],
choices: ['Great','Not great'],
choices: ['😄','😁','🥱','😣','🤯'],
button_html: '<div style="font-size:40px;">%choice%</div>',
margin_vertical: '10px',
margin_horizontal: '8px',
prompt: '<p>How great was the video?</p><p>When the video stops, click a button to end the trial.</p><p>Response buttons are disabled while the video is playing.</p>',
prompt: '<p>Click the emoji that best represents your reaction to the video</p><p>When the video stops, click a button to end the trial.</p><p>Response buttons are disabled while the video is playing.</p>',
width: 600,
autoplay: true,
response_ends_trial: true,

45
plugins/jspsych-audio-button-response.js
View File

@ -142,14 +142,10 @@ jsPsych.plugins["audio-button-response"] = (function() {
display_element.innerHTML = html;
for (var i = 0; i < trial.choices.length; i++) {
display_element.querySelector('#jspsych-audio-button-response-button-' + i).addEventListener('click', function(e){
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;
}
if(trial.response_allowed_while_playing){
enable_buttons();
} else {
disable_buttons();
}
// store response
@ -172,11 +168,7 @@ jsPsych.plugins["audio-button-response"] = (function() {
response.rt = rt;
// disable all the buttons after a response
var btns = document.querySelectorAll('.jspsych-audio-button-response-button button');
for(var i=0; i<btns.length; i++){
//btns[i].removeEventListener('click');
btns[i].setAttribute('disabled', 'disabled');
}
disable_buttons();
if (trial.response_ends_trial) {
end_trial();
@ -215,11 +207,30 @@ jsPsych.plugins["audio-button-response"] = (function() {
jsPsych.finishTrial(trial_data);
}
// function to enable buttons after audio ends
function enable_buttons() {
var btns = document.querySelectorAll('.jspsych-audio-button-response-button button');
function button_response(e){
var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
after_response(choice);
}
function disable_buttons() {
var btns = document.querySelectorAll('.jspsych-audio-button-response-button');
for (var i=0; i<btns.length; i++) {
btns[i].disabled = false;
var btn_el = btns[i].querySelector('button');
if(btn_el){
btn_el.disabled = true;
}
btns[i].removeEventListener('click', button_response);
}
}
function enable_buttons() {
var btns = document.querySelectorAll('.jspsych-audio-button-response-button');
for (var i=0; i<btns.length; i++) {
var btn_el = btns[i].querySelector('button');
if(btn_el){
btn_el.disabled = false;
}
btns[i].addEventListener('click', button_response);
}
}

53
plugins/jspsych-video-button-response.js
View File

@ -187,7 +187,7 @@ jsPsych.plugins["video-button-response"] = (function() {
video_html += '<div id="jspsych-video-button-response-btngroup">';
for (var i = 0; i < trial.choices.length; i++) {
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
video_html += '<div class="jspsych-video-button-response-button" style="display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-video-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
video_html += '<div class="jspsych-video-button-response-button" style="cursor: pointer; display: inline-block; margin:'+trial.margin_vertical+' '+trial.margin_horizontal+'" id="jspsych-video-button-response-button-' + i +'" data-choice="'+i+'">'+str+'</div>';
}
video_html += '</div>';
@ -210,10 +210,7 @@ jsPsych.plugins["video-button-response"] = (function() {
if(trial.trial_ends_after_video){
end_trial();
} else if (!trial.response_allowed_while_playing) {
// enable response buttons
for (var i=0; i<trial.choices.length; i++) {
display_element.querySelector('#jspsych-video-button-response-button-' + i).querySelector('button').disabled = false;
}
enable_buttons();
}
}
@ -241,15 +238,10 @@ jsPsych.plugins["video-button-response"] = (function() {
})
}
// add event listeners to buttons
for (var i = 0; i < trial.choices.length; i++) {
display_element.querySelector('#jspsych-video-button-response-button-' + i).addEventListener('click', function(e){
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-video-button-response-button-' + i).querySelector('button').disabled = true;
}
if(trial.response_allowed_while_playing){
enable_buttons();
} else {
disable_buttons();
}
// store response
@ -297,17 +289,40 @@ jsPsych.plugins["video-button-response"] = (function() {
video_element.className += ' responded';
// disable all the buttons after a response
var btns = document.querySelectorAll('.jspsych-video-button-response-button button');
for(var i=0; i<btns.length; i++){
//btns[i].removeEventListener('click');
btns[i].setAttribute('disabled', 'disabled');
}
disable_buttons();
if (trial.response_ends_trial) {
end_trial();
}
}
function button_response(e){
var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
after_response(choice);
}
function disable_buttons() {
var btns = document.querySelectorAll('.jspsych-video-button-response-button');
for (var i=0; i<btns.length; i++) {
var btn_el = btns[i].querySelector('button');
if(btn_el){
btn_el.disabled = true;
}
btns[i].removeEventListener('click', button_response);
}
}
function enable_buttons() {
var btns = document.querySelectorAll('.jspsych-video-button-response-button');
for (var i=0; i<btns.length; i++) {
var btn_el = btns[i].querySelector('button');
if(btn_el){
btn_el.disabled = false;
}
btns[i].addEventListener('click', button_response);
}
}
// end trial if time limit is set
if (trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {