How to display pressed keyboard response to pp?

[kevinvschie]

I have this very simple experiment in which participants rate words on how abstract/concrete they are (see below). Ideally, I would like them to see which number they pressed. I think this can easily be added as an additional object to the end of my timeline and then just show the key_press for 1s. Could also be fancier by keeping the scale on screen and by highlighting the selected button, but I assume that'll be a lot more work. Can anyone help me out how to do this (the simple solution is fine by me).

Below what I have now:

    var scale_procedure = {
        timeline: [
            {
                type: 'html-keyboard-response',
                stimulus: '<span style="font-size:40px;">+</span>',
                choices: jsPsych.NO_KEYS,
                trial_duration: 500
              },
              {
                  type: 'html-keyboard-response',
                  stimulus: jsPsych.timelineVariable('scalefiller'),
                  choices: jsPsych.NO_KEYS,
                  trial_duration: 2500
              },
              {
                  type: 'html-keyboard-response',
                  stimulus: '<span style=font-size:25px;">very abstract &nbsp &nbsp 1 &nbsp &nbsp 2 &nbsp &nbsp 3 &nbsp &nbsp 4 &nbsp &nbsp 5 &nbsp &nbsp very concrete</span>',
                  choices: ['1', '2', '3', '4', '5'],
                  stimulus_duration: 10000,
                  trial_duration: 10000
              }
            ],
            timeline_variables: [
                { scalefiller: '<span style="font-size:40px;">SCARF</span>' },
                { scalefiller: '<span style="font-size:40px;">HIPPO</span>' },
                { scalefiller: '<span style="font-size:40px;">OLIVE</span>' },
                { scalefiller: '<span style="font-size:40px;">FLAME</span>' },
                { scalefiller: '<span style="font-size:40px;">COCOON</span>' },
                { scalefiller: '<span style="font-size:40px;">MYTH</span>' }
            ]
        }

        timeline.push(scale_procedure)

[fohria]

You should be able to use dynamic parameters for this: https://www.jspsych.org/overview/trial/#dynamic-parameters

For your use case, you may want to find all the key codes that map to your choices, for example if you have the keyboard keys d, f, g, h, j to press for 1-5, respectively. Here's a random list of keycodes: http://gcctech.org/csc/javascript/javascript_keycodes.htm

Quick adaption of the documentation example (I've not tested it so maybe won't work directly):

var timeline = [];

var trial = {
  type: 'html-keyboard-response',
  stimulus: '<span style=font-size:25px;">very abstract &nbsp &nbsp 1 &nbsp &nbsp 2 &nbsp &nbsp 3 &nbsp &nbsp 4 &nbsp &nbsp 5 &nbsp &nbsp very concrete</span>',
  choices: ['1', '2', '3', '4', '5'],
  on_finish: function(data){
    if(data.key_press == 68){// 68 is the numeric code for d
      data.choice = 1;
    }
    if(data.key_press == 70){// 70 is the numeric code for f
      data.choice = 2;
    }
    // ...etc for the rest of the keycodes 
  }
}

var feedback = {
  type: 'html-keyboard-response',
  stimulus: function(){
    var last_choice = jsPsych.data.get().last(1).values()[0].choice;
    return "<p>" + last_choice + "</p>";
  }
}

timeline.push(trial, feedback);

Though maybe you want to use the switch statement instead of many if statements, depending on how fancy you'd like to be.

Hope that helps, let me know if I can clarify something :)

[kevinvschie]

Finally got it working by doing the following (also thanks to help from Becky Gilbert)

    var scale_procedure = {
        timeline: [
            {
                type: 'html-keyboard-response',
                stimulus: '<span style="font-size:40px;">+</span>',
                choices: jsPsych.NO_KEYS,
                trial_duration: 500
              },
              {
                type: 'html-keyboard-response',
                stimulus: jsPsych.timelineVariable('scalefiller'),
                choices: jsPsych.NO_KEYS,
                trial_duration: 2500
              },
              {
                type: 'html-keyboard-response',
                stimulus: '<span style=font-size:25px;">very abstract &nbsp &nbsp 1 &nbsp &nbsp 2 &nbsp &nbsp 3 &nbsp &nbsp 4 &nbsp &nbsp 5 &nbsp &nbsp very concrete</span>',
                choices: ['1', '2', '3', '4', '5'],
                stimulus_duration: 10000,
                trial_duration: 10000
              },
              {
                type: 'html-keyboard-response',
                stimulus: function(){
                    var response = jsPsych.data.get().last(1).values()[0].key_press;
                    var response_key = jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(response);
                    return '<p style="font-size:25px;">'+response_key+'</p>'
                    },
                trial_duration: 500,
                choices: jsPsych.NO_KEYS
                }
            ],
            timeline_variables: [
                { scalefiller: '<span style="font-size:40px;">MYTH</span>' },
                { scalefiller: '<span style="font-size:40px;">OLIVE</span>' }
            ]
        }

        timeline.push(scale_procedure)

[fohria]

Ahh, of course what key is pressed is registered automatically in that plugin, no need to record it yourself. Sorry, hope it didn't take you too far off track

And I didn't know there's a built in function to convert keycodes, that's good to know, thanks!