How to record the latest response and not the initial key press?

[prashantig25]

Hi everyone,
My trial duration is 1000 ms and participants are asked to respond with the left or the right arrow. However, I let the trial remain even after people have responded i.e. response does not end the trial. This could allow participants to change their initial response even after they have responded once (for instance, when they realize that their initial response could have been wrong). jsPsych currently records the first response. Is there a way to record the latest response before the trial ends? I am attaching part of my code here. Any help is appreciated. Thank you!

var s0_r1_high60 = {
        type: 'canvas-keyboard-response',
        on_start: function(s0_r1_high90){
            s0_r1_high90.contrast = Math.random(); s0_r1_high90.contrast1 = jsPsych.currentTrial().contrast  + randbet(0.05,0.35);
        },
        stimulus: gabor,
        data: { condition: 'HL', state: '0', reward: '1', prob: '90_10', block: '2'},
        choices: keys, trial_duration: duration, response_ends_trial: false,
        on_finish: function (data) {
            if (data.key_press === rand60r1_r1.pop()) {
                data.correct = true;
            } else {
                data.correct = false;
            }
            data.con = jsPsych.currentTrial().contrast
            data.con1 = jsPsych.currentTrial().contrast1
        },
    };

[becky-gilbert]

Hi @prashantig25, you can do this by modifying the plugin. I would start by changing the plugin name and plugin file name to something like 'canvas-multiple-keyboard-response'. Then, you can change the response object to be an object that holds arrays for the rt and key, instead of just single values (lines 81-84).

var response = {
  rt: [],
  key: []
};

Then, in the after_response function, you can remove these lines (117-120):

// only record the first response
if (response.key == null) {
  response = info;
}

And instead, you want to add the key and rt value from info (the current response) onto the rt and key arrays in the response object:

response.rt.push(info.rt);
response.key.push(info.key);

I think that's all you have to do, but I haven't tested this... Let us know if this works, and if you have any follow-up questions.

EDIT:
One other thing I forgot to mention: if you want to capture multiple keyboard responses during a trial, then you should change the persist parameter in the getKeyboardResponse function from false to true. The persist parameter determines whether or not the keyboard listener should keep running after the first valid keyboard response is recorded - see docs here.

Also, when the keyboard listener is started with persist: true, then the keyboard listener must be explicitly cancelled at the end of the trial (otherwise it will keep running throughout the whole experiment). This can be done using the cancelKeyboardResponse function, which cancels a specific keyboard listener, or the cancelAllKeyboardResponses function, which cancels all active keyboard listeners. You'll want to use one of these functions right before the trial ends.

[prashantig25]

Yes, it works! Thanks so much!

[nrschoen]

Hello,

I tried exactly this, only for the image-keyboard-response plugin. I altered exactly the code you mention above @becky-gilbert, however it still only saves the first response in the array array... What am I missing?

Here is the altered plugin with your suggested changes:

jsPsych.plugins["image-keyboard-multiple-responses"] = (function() {

  var plugin = {};

  jsPsych.pluginAPI.registerPreload('image-keyboard-multiple-response', 'stimulus', 'image');

  plugin.info = {
    name: 'image-keyboard-multiple-responses',
    description: 'Adapted image-keyboard-response to record multiple key responses',
    parameters: {
      stimulus: {
        type: jsPsych.plugins.parameterType.IMAGE,
        pretty_name: 'Stimulus',
        default: undefined,
        description: 'The image to be displayed'
      },
      stimulus_height: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Image height',
        default: null,
        description: 'Set the image height in pixels'
      },
      stimulus_width: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Image width',
        default: null,
        description: 'Set the image width in pixels'
      },
      maintain_aspect_ratio: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Maintain aspect ratio',
        default: true,
        description: 'Maintain the aspect ratio after setting width or height'
      },
      choices: {
        type: jsPsych.plugins.parameterType.KEY,
        array: true,
        pretty_name: 'Choices',
        default: jsPsych.ALL_KEYS,
        description: 'The keys the subject is allowed to press to respond to the stimulus.'
      },
      prompt: {
        type: jsPsych.plugins.parameterType.STRING,
        pretty_name: 'Prompt',
        default: null,
        description: 'Any content here will be displayed below the stimulus.'
      },
      stimulus_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Stimulus duration',
        default: null,
        description: 'How long to hide the stimulus.'
      },
      trial_duration: {
        type: jsPsych.plugins.parameterType.INT,
        pretty_name: 'Trial duration',
        default: null,
        description: 'How long to show trial before it ends.'
      },
      response_ends_trial: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Response ends trial',
        default: true,
        description: 'If true, trial will end when subject makes a response.'
      },
      render_on_canvas: {
        type: jsPsych.plugins.parameterType.BOOL,
        pretty_name: 'Render on canvas',
        default: true,
        description: 'If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).'+
          'If false, the image will be shown via an img element.'
      }
    }
  }

  plugin.trial = function(display_element, trial) {

    var height, width;
    if (trial.render_on_canvas) {
      var image_drawn = false;
      // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
      if (display_element.hasChildNodes()) {
        // can't loop through child list because the list will be modified by .removeChild()
        while (display_element.firstChild) {
          display_element.removeChild(display_element.firstChild);
        }
      }
      // create canvas element and image
      var canvas = document.createElement("canvas");
      canvas.id = "jspsych-image-keyboard-response-stimulus";
      canvas.style.margin = 0;
      canvas.style.padding = 0;
      var ctx = canvas.getContext("2d");
      var img = new Image();
      img.onload = function() {
        // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
        if (!image_drawn) {
          getHeightWidth(); // only possible to get width/height after image loads
          ctx.drawImage(img,0,0,width,height);
        }
      };
      img.src = trial.stimulus;
      // get/set image height and width - this can only be done after image loads because uses image's naturalWidth/naturalHeight properties
      function getHeightWidth() {
        if (trial.stimulus_height !== null) {
          height = trial.stimulus_height;
          if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
            width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
          }
        } else {
          height = img.naturalHeight;
        }
        if (trial.stimulus_width !== null) {
          width = trial.stimulus_width;
          if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
            height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
          }
        } else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
          // if stimulus width is null, only use the image's natural width if the width value wasn't set
          // in the if statement above, based on a specified height and maintain_aspect_ratio = true
          width = img.naturalWidth;
        }
        canvas.height = height;
        canvas.width = width;
      }
      getHeightWidth(); // call now, in case image loads immediately (is cached)
      // add canvas and draw image
      display_element.insertBefore(canvas, null);
      if (img.complete && Number.isFinite(width) && Number.isFinite(height)) {
        // if image has loaded and width/height have been set, then draw it now
        // (don't rely on img onload function to draw image when image is in the cache, because that causes a delay in the image presentation)
        ctx.drawImage(img,0,0,width,height);
        image_drawn = true;
      }
      // add prompt if there is one
      if (trial.prompt !== null) {
        display_element.insertAdjacentHTML('beforeend', trial.prompt);
      }

    } else {

      // display stimulus as an image element
      var html = '<img src="'+trial.stimulus+'" id="jspsych-image-keyboard-response-stimulus">';
      // add prompt
      if (trial.prompt !== null){
        html += trial.prompt;
      }
      // update the page content
      display_element.innerHTML = html;

      // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
      var img = display_element.querySelector('#jspsych-image-keyboard-response-stimulus');
      if (trial.stimulus_height !== null) {
        height = trial.stimulus_height;
        if (trial.stimulus_width == null && trial.maintain_aspect_ratio) {
          width = img.naturalWidth * (trial.stimulus_height/img.naturalHeight);
        }
      } else {
        height = img.naturalHeight;
      }
      if (trial.stimulus_width !== null) {
        width = trial.stimulus_width;
        if (trial.stimulus_height == null && trial.maintain_aspect_ratio) {
          height = img.naturalHeight * (trial.stimulus_width/img.naturalWidth);
        }
      } else if (!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
        // if stimulus width is null, only use the image's natural width if the width value wasn't set
        // in the if statement above, based on a specified height and maintain_aspect_ratio = true
        width = img.naturalWidth;
      }
      img.style.height = height.toString() + "px";
      img.style.width = width.toString() + "px";
    }

    // store response
    var response = {
      rt: [],
      key: []
    };

    // function to end trial when it is time
    var end_trial = function() {

      // kill any remaining setTimeout handlers
      jsPsych.pluginAPI.clearAllTimeouts();

      // kill keyboard listeners
      if (typeof keyboardListener !== 'undefined') {
        jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
      }

      // gather the data to store for the trial
      var trial_data = {
        rt: response.rt,
        stimulus: trial.stimulus,
        response: response.key
      };

      // clear the display
      display_element.innerHTML = '';

      // move on to the next trial
      jsPsych.finishTrial(trial_data);
    };

    // function to handle responses by the subject
    var after_response = function(info) {

      // 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('#jspsych-image-keyboard-response-stimulus').className += ' responded';

      response.rt.push(info.rt);
      response.key.push(info.key);

      if (trial.response_ends_trial) {
        end_trial();
      }
    };

    // start the response listener
    if (trial.choices != jsPsych.NO_KEYS) {
      var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
        callback_function: after_response,
        valid_responses: trial.choices,
        rt_method: 'performance',
        persist: false,
        allow_held_key: false
      });
    }

    // hide stimulus if stimulus_duration is set
    if (trial.stimulus_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        display_element.querySelector('#jspsych-image-keyboard-response-stimulus').style.visibility = 'hidden';
      }, trial.stimulus_duration);
    }

    // end trial if trial_duration is set
    if (trial.trial_duration !== null) {
      jsPsych.pluginAPI.setTimeout(function() {
        end_trial();
      }, trial.trial_duration);
    } else if (trial.response_ends_trial === false) {
      console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.");
    }
  };

  return plugin;
})();

[becky-gilbert]

Hi @nrschoen! Can you try changing the persist parameter in the getKeyboardResponse function from false to true? The persist parameter determines whether or not the keyboard listener should keep running after the first valid keyboard response - see docs here. Can you let us know if it works after making this change?

One thing to keep in mind when persist is true is the keyboard listener must be explicitly cancelled at the end of the trial (otherwise it will keep running throughout the whole experiment). But in your code, this is already taken care of with these lines in the end_trial function:

// kill keyboard listeners
if (typeof keyboardListener !== 'undefined') {
  jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
}

Sorry for missing this in my original response! I'll edit my response above to include this.

[nrschoen]

Yup that did it! Thanks!