Questions regarding feedback

[chenxuh2]

Hello,

I am wondering when a keyboard response is used, would it be possible to display the letters that the participant is typing while the participant is typing (i.e., giving real-time feedback)?

I have programmed an OSPAN task where at some point I ask the participant to view a string of letters and type them out in the order that they are displayed. It would be great to be able to show the participants what they are typing.

Since the structure of my trial for a sequence of 3 letters is as below:

for i in 1:3:
display a letter
for i in 1:3:
get one keyboard response

Is it also possible to get the three responses into an array to compare with the original sequence so that the participant can see general feedback (e.g., "You have gotten 1 out of 3 letters correct!")

Thank you!!

[jodeleeuw]

Hi @chenxuh2 ,

While you could make this work with some convoluted timelines and the core set of plugins, e.g., html-keyboard-response, this is probably a case where a custom plugin is more efficient.

I wrote a plugin that happens to do something pretty similar for a span task. It's not exactly what you want, and I didn't write out the full documentation for it. But I'm copying it here as a starting point:

/**
 * jspsych-echo-response
 * Josh de Leeuw
 *
 * plugin for a echo-response block span task
 *
 * documentation: docs.jspsych.org
 *
 **/

jsPsych.plugins["echo-response"] = (function() {

  var plugin = {};

  plugin.info = {
    name: 'echo-response',
    description: '',
    parameters: {
      sequence: {
        type: jsPsych.plugins.parameterType.STRING,
        array: true,
        default: undefined
      }
    }
  }

  plugin.trial = function(display_element, trial) {

    // display stimulus
    var html = '';
    html += '<div id="jspsych-echo-response">';
    html += trial.prompt
    html += '<div id="jspsych-echo-response-box" style="text-align: center; font-size:'+trial.echo_font_size+'px; height:'+trial.echo_font_size+'px; margin:0.5em;"></div>';
    html += '</div>';

    display_element.innerHTML = html;

    var trial_data = {
      response: [],
      sequence: JSON.stringify(trial.sequence)
    }

    var on_response = function(info){
      var character = jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(info.key).toUpperCase();
      trial_data.response.push(character);

      var correct = character.toUpperCase() == trial.sequence[trial_data.response.length - 1].toUpperCase();
      var to_insert = '<span class="response-echo" style="padding: 0 .25em;">'+character+'</span>';

      display_element.querySelector('#jspsych-echo-response-box').insertAdjacentHTML('beforeend', to_insert);

      var correct_animation = [
        { color: '#555' },
        { color: '#0f0', offset: 0.2 },
        { color: '#555' }
      ];

      var incorrect_animation = [
        { color: '#555' },
        { color: '#f00', offset: 0.2 },
        { color: '#555' }
      ];

      var animation_timing = {
        duration: 500,
        iterations: 1
      }

      if(correct){
        document.querySelector(".response-echo:last-of-type").animate(correct_animation, animation_timing)
      } else {
        document.querySelector(".response-echo:last-of-type").animate(incorrect_animation, animation_timing);
        jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
        trial_data.correct = false;
        setTimeout(end_trial, 500);
      }

      if(trial_data.response.length == trial.sequence.length){
        jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
        trial_data.correct = true;
        setTimeout(end_trial, 500);
      }
    }

    var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
      callback_function: on_response,
      valid_responses: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
      rt_method: 'performance',
      persist: true,
      allow_held_key: false
    });

    var end_trial = function(){
      trial_data.response = JSON.stringify(trial_data.response);

      jsPsych.pluginAPI.cancelAllKeyboardResponses();

      display_element.innerHTML = "";

      jsPsych.finishTrial(trial_data);
    }
    
  };

  return plugin;
})();

Here's a sample use case:

var trial = {
          type: 'echo-response',
          prompt: '<p>Type the sequence of letters in the same order you saw them</p>',
          sequence: ['a','b','c'],
          echo_font_size: 48,
}

To use this, copy the plugin code into a file called jspsych-echo-response.js and then load the file as you would any other plugin. Try it out and let me know what features would be useful to add. I wrote this for one of my own experiments, but could work on making a fully-developed version part of the main library.