'Enter','ArrowRight','ArrowLeft' as Invalid key string

[BastienBlain]

Hi there,

I'm using jspsych-6.2.0 and I specified the following plugin for example as below:

var XX = {
  type: "html-keyboard-response",
  stimulus: "YY",
  choices: 'ArrowRight',
};

Nothing happened when I did then press the right arrow while seeing YY, that is, the next screen is not displayed. There is no error message. I tried chrome and internet explorer and both lead to the same issue.

If instead I replace 'ArrowRight' by 'f', then pressing 'f' works (in that I move to the next screen).

Pressing the right arrow e.g. on https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ does return the relevant code.

Any idea of what could be wrong?

Thanks for your help!

[becky-gilbert]

Converting this to a discussion.

[becky-gilbert]

Hi @BastienBlain! Try this:

var XX = {
  type: "html-keyboard-response",
  stimulus: "YY",
  choices: ['rightarrow']
};

Long answer: I think you're running into two different problems here.

1. The choices parameter must be an array, e.g. choices: ['f']. If you use a string, then jsPsych will treat the string as an array, which means that every character in the string will become a separate valid key choice. This means that using choices: 'f' (without the square brackets) will actually work as expected, even though 'f' isn't inside an array. But if you use choices: 'ArrowRight', this string will become an array: 'a','r','r','o'... etc. You can see this for yourself by using choices: 'ArrowRight' - you'll find that the individual letters become valid keys. (Side note: ideally jsPsych would check that all parameters are using the correct types to avoid this problem - this is something we should fix in the future)
2. The 'ArrowRight' key identifier won't work because that's actually the key event's .code value, whereas jsPsych v6.2 uses the numeric .keyCode values (I know, very confusing!). So you could try using the numeric keyCode for the right arrow key, which is 39. Or you can use 'rightarrow', which is the key string identifier that jsPsych v6.2 uses. You can find this information in the keylookup object in jspsych.js here:

   jsPsych/jspsych.js

   Lines 2204 to 2298 in 4296203

   	var keylookup = {
   	'backspace': 8,
   	'tab': 9,
   	'enter': 13,
   	'shift': 16,
   	'ctrl': 17,
   	'alt': 18,
   	'pause': 19,
   	'capslock': 20,
   	'esc': 27,
   	'space': 32,
   	'spacebar': 32,
   	' ': 32,
   	'pageup': 33,
   	'pagedown': 34,
   	'end': 35,
   	'home': 36,
   	'leftarrow': 37,
   	'uparrow': 38,
   	'rightarrow': 39,
   	'downarrow': 40,
   	'insert': 45,
   	'delete': 46,
   	'0': 48,
   	'1': 49,
   	'2': 50,
   	'3': 51,
   	'4': 52,
   	'5': 53,
   	'6': 54,
   	'7': 55,
   	'8': 56,
   	'9': 57,
   	'a': 65,
   	'b': 66,
   	'c': 67,
   	'd': 68,
   	'e': 69,
   	'f': 70,
   	'g': 71,
   	'h': 72,
   	'i': 73,
   	'j': 74,
   	'k': 75,
   	'l': 76,
   	'm': 77,
   	'n': 78,
   	'o': 79,
   	'p': 80,
   	'q': 81,
   	'r': 82,
   	's': 83,
   	't': 84,
   	'u': 85,
   	'v': 86,
   	'w': 87,
   	'x': 88,
   	'y': 89,
   	'z': 90,
   	'0numpad': 96,
   	'1numpad': 97,
   	'2numpad': 98,
   	'3numpad': 99,
   	'4numpad': 100,
   	'5numpad': 101,
   	'6numpad': 102,
   	'7numpad': 103,
   	'8numpad': 104,
   	'9numpad': 105,
   	'multiply': 106,
   	'plus': 107,
   	'minus': 109,
   	'decimal': 110,
   	'divide': 111,
   	'f1': 112,
   	'f2': 113,
   	'f3': 114,
   	'f4': 115,
   	'f5': 116,
   	'f6': 117,
   	'f7': 118,
   	'f8': 119,
   	'f9': 120,
   	'f10': 121,
   	'f11': 122,
   	'f12': 123,
   	'=': 187,
   	',': 188,
   	'.': 190,
   	'/': 191,
   	'`': 192,
   	'[': 219,
   	'\\': 220,
   	']': 221
   	};

[BastienBlain]

Thank you very much indeed for your very quick and thorough answer! I now understand this much better!

[BastienBlain]

May I ask the same question but with JsPsych 7.1? Left and right arrows seem not to be recognised if I specified them as before:
choices: ['leftarrow','rightarrow']
The mapping is no longer in jspsych.js or not in a trivial way.

Thanks!

[BastienBlain]

I guess it is now more standard, like this?
choices: ['ArrowLeft','ArrowRight']

[jodeleeuw]

If you use this handy tool it is whatever is shown under event.key