How do I get the buttons in my modified plugin to work?

[sophief10]

Hi everyone,

I'm having some trouble with a plugin that I made in jsPsych 7.1.2. I modelled it after the html-button-response plugin because I would like each experimental trial to end once the user clicks a button. There are four buttons in my plugin. They are each coded like this:

"<input type='image' class='yang-response-button' id='yang-response-button-3' data-choice='3' src='" + trial.emoji_order[2] + ".bmp'; alt='" + trial.emoji_order[2] + "'; style='animation-delay:" + (seconds[0] + 2.5) + "s;'/>";

When I run my plugin, the trial stimulus and buttons show up just as I would like them. However, nothing happens when I click on the buttons. I'm sure that means that there are bugs in the way I coded the end_trial() function of my plugin, but I cannot figure out what they are.

I think the bug(s) lies somewhere in the following code:

          // start time
          var start_time = performance.now();
          // add event listeners to buttons
          for (var i = 0; i < 4; i++) {
              display_element
                  .querySelector("#yang-response-button-" + i)
                  .addEventListener("click", (e) => {
                  var btn_el = e.currentTarget;
                  var choice = btn_el.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
                  after_response(choice);
              });
          }
          // store response
          var response = {
              rt: null,
              button: null,
          };
          // function to end trial when it is time
          const end_trial = () => {
              // kill any remaining setTimeout handlers
              this.jsPsych.pluginAPI.clearAllTimeouts();
              // gather the data to store for the trial
              var trial_data = {
                  rt: response.rt,
                  stimulus: trial.stimulus,
                  response: response.button,
              };
              // clear the display
              display_element.innerHTML = "";
              // move on to the next trial
              this.jsPsych.finishTrial(trial_data);
          };
          // function to handle responses by the subject
          function after_response(choice) {
              // measure rt
              var end_time = performance.now();
              var rt = Math.round(end_time - start_time);
              response.button = parseInt(choice);
              response.rt = rt;
              // after a valid response, the stimulus will have the CSS class 'responded'
              // which can be used to provide visual feedback that a response was recorded
              display_element.querySelector("#yang-stimulus").className +=
                  " responded";
              // disable all the buttons after a response
              var btns = document.querySelectorAll(".yang-response-button button");
              for (var i = 0; i < btns.length; i++) {
                  //btns[i].removeEventListener('click');
                  btns[i].setAttribute("disabled", "disabled");
              }
              if (trial.response_ends_trial) {
                  end_trial();
              }
          }
          // end trial if time limit is set
          if (trial.trial_duration !== null) {
              this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
          }
      }

As I said, this code is very similar to the one found in the html-button-response plugin because I used the latter as a model. Therefore, I am confused as to why my plugin will not work.

Does anyone know what I have done wrong?

[sophief10]

Hi everyone! I figured out what was going wrong. I had deleted the response_ends_trial parameter from the plugin, but the function
if (trial.response_ends_trial) { end_trial(); } was still there.