fixes #1380

examples/jspsych-audio-button-response.html

@@ -29,17 +29,17 @@
   timeline.push({
     type: 'audio-button-response',
     stimulus: 'sound/speech_red.mp3',
-    choices: ['Green', 'Blue', 'Red'],
+    choices: ['#00ff00', '#0000ff', '#ff0000'],
-    trial_duration: 2000,
+    response_allowed_while_playing: false,
-    response_ends_trial: false,
+    button_html: '<div style="background-color: %choice%; width:100px; height:100px;"></div>',
-    prompt: "<p>What word was said? (trial ends after 2s)</p>"
+    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
   })
 

examples/jspsych-video-button-response.html

@@ -18,8 +18,7 @@
   var trial_1 = {
     type: 'video-button-response',
     stimulus: ['video/sample_video.mp4'],
-    choices: ['y','n'],
+    choices: ['Y','N'],
-    button_html: '<button class="jspsych-btn">%choice%!</button>',
     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,

plugins/jspsych-audio-button-response.js

@@ -140,16 +140,12 @@ jsPsych.plugins["audio-button-response"] = (function() {
 			html += trial.prompt;
 		}
 
-		display_element.innerHTML = html;
+    display_element.innerHTML = html;
-
+    
-		for (var i = 0; i < trial.choices.length; i++) {
+    if(trial.response_allowed_while_playing){
-      display_element.querySelector('#jspsych-audio-button-response-button-' + i).addEventListener('click', function(e){
+      enable_buttons();
-        var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
+    } else {
-        after_response(choice);
+      disable_buttons();
-      });
-      if (!trial.response_allowed_while_playing) {
-        display_element.querySelector('#jspsych-audio-button-response-button-' + i).querySelector('button').disabled = true;
-      }
     }
 
     // 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');
+      disable_buttons();
-      for(var i=0; i<btns.length; i++){
-        //btns[i].removeEventListener('click');
-        btns[i].setAttribute('disabled', 'disabled');
-      }
 
       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 button_response(e){
-    function enable_buttons() {
+      var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
-      var btns = document.querySelectorAll('.jspsych-audio-button-response-button button');
+      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);
       }
     }
 

plugins/jspsych-video-button-response.js

@@ -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
+        enable_buttons();
-        for (var i=0; i<trial.choices.length; i++) {
-          display_element.querySelector('#jspsych-video-button-response-button-' + i).querySelector('button').disabled = false;
-        }
       }
     }
 
@@ -241,15 +238,10 @@ jsPsych.plugins["video-button-response"] = (function() {
       })
     }
 
-    // add event listeners to buttons
+    if(trial.response_allowed_while_playing){
-    for (var i = 0; i < trial.choices.length; i++) {
+      enable_buttons();
-      display_element.querySelector('#jspsych-video-button-response-button-' + i).addEventListener('click', function(e){
+    } else {
-        var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
+      disable_buttons();
-        after_response(choice);
-      });
-      if (!trial.response_allowed_while_playing) {
-        display_element.querySelector('#jspsych-video-button-response-button-' + i).querySelector('button').disabled = true;
-      }
     }
 
     // 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');
+      disable_buttons();
-      for(var i=0; i<btns.length; i++){
-        //btns[i].removeEventListener('click');
-        btns[i].setAttribute('disabled', 'disabled');
-      }
 
       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() {