Giving participant visual feedback and delaying trial end after response

[sarahfeng02]

Hello all,

I hope you're well! I'm working on a psych experiment in which the participant sees 5 buttons on-screen. However, they're not allowed to click; they must respond using corresponding keyboard presses. Each of the 5 allowed keys corresponds to one of the buttons. After they click, I want the corresponding button to light up in green/red depending on if it is correct or not (I compare the response to an answer key). I also want the screen to linger for 1000ms after the response is made so that the user can see the feedback. I am encountering two issues:

1. The color change is not happening

I used console.log to print out what's going on. The browser is tracking the user's keyboard press and mapping it accurately to a button ID, but when I try to print out the ID of 'selectedButton' (see code below'), it returns 'null'. Not sure if there's some kind of a timing issue in jsPsych where things aren't being rendered in the right order.

2. After the response is made, it doesn't wait 1000ms; it waits the full length of the trial duration, even though I want it to basically end the trial 1000ms after the response

I set response_ends_trial to false so that it would linger and added the timeout thing at the end, but it it's still going for the full 6000ms (trial_dur) but I don't want it to after the user makes a response.

Thank you in advance for any help, have been struggling for a while :)

Code here:

  var probeTrial = {
    type: HtmlKeyboardResponsePlugin,
    stimulus: function() {
      let probe = jsPsych.timelineVariable('probe');

      return `
        <div style="text-align: center; margin-bottom: 20px;">
          <img src="${probe}" alt="probe stimulus" style="max-width: 600px; max-height: 600px;">
        </div>

        <div style="display: flex; justify-content: center; gap: 10px;">
          <button id="btn-up" class="response-btn">On-top</button>
        </div>

        <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px;">
          <button id="btn-left" class="response-btn">Left</button>
          <button id="btn-right"class="response-btn">Right</button>
        </div>

        <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px;">
          <button id="btn-down" class="response-btn">Below</button>
        </div>

        <div style="display: flex; justify-content: center; gap: 30px; margin-top: 10px;">
          <button id="dnc" class="response-btn">Did not connect</button>
        </div>
      `;
    },
    trial_duration: trial_dur,
    response_ends_trial: false,
    choices: ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', ' '],
    data: {
        type: 'probe',
        trial: jsPsych.timelineVariable('trial'),
        correct_response: jsPsych.timelineVariable('correct_response'),
    },

    on_finish: function(data) {
      console.log('on finish');

      let keyMapping = {
        "arrowup": "btn-up",
        "arrowleft": "btn-left",
        "arrowright": "btn-right",
        "arrowdown": "btn-down",
        " ": "dnc",
      };

      if (data.response == null) {
        console.log('no choice made');

        data.correct = false;
        data.timeout = true;
      } else {
        console.log('response made: ', data.response);
        console.log('mapped button id: ', keyMapping[data.response]);

        data.timeout = false;

          var selectedButton = document.getElementById(keyMapping[data.response]);
          console.log('selected button: ', selectedButton);
          console.log('data correct response: ', data.correct_response);
          
          if (selectedButton) {
            let isCorrect = jsPsych.pluginAPI.compareKeys(rel_id(data.response), data.correct_response);
            selectedButton.style.backgroundColor = isCorrect ? 'green' : 'red';
            data.correct = isCorrect; 

            if (isCorrect) {
              console.log('correct choice!');
            } else {
              console.log('incorrect choice!');
            }

          jsPsych.pluginAPI.setTimeout(function() {
            jsPsych.finishTrial(data);
          },1000);
      }
  }
},
    post_trial_gap: 1000,
  };

[kurokida]

Hi!

Regarding the first question, I have had a similar experience. It is likely that by the time on_finish is called, all elements have been discarded. Therefore, you cannot access these elements using getElementById. I recommend creating a new trial that follows and reads the response from the previous trial at the on_start of the new trial, displaying the color change accordingly.

Sorry for writing in Japanese, but this article might be helpful. Just by reading the code section, you can probably understand it.

Best regards,
Daiichiro