getKeyboardResponse not working with html-keyboard-response

[noah10]

I've got a very simple setup (pulled from the documentation and the test code):

var t = {
        type: 'html-keyboard-response',
        stimulus: 'foo',
        choices: ['q'],
        response_ends_trial: false
    };
jsPsych.init({
    timeline: [t]
});
var alertCallback = function(info){
    alert('You pressed key '+info.key+' after '+info.rt+' ms');
}
jsPsych.pluginAPI.getKeyboardResponse({callback_function: alertCallback});

...yet my alertCallback function is never called (in either Safari or Chrome, both on OS X), no matter whether I press 'q' or another key. Stepping through it in the debugger I can watch my callback function get added to jsPsych.pluginAPI.keyboard_listeners and then see the html-keyboard-response plugin callback function get added. Unfortunately when the html-keyboard-response callback function is added keyboard_listeners is empty, suggesting that somehow it (or jsPysch.pluginAPI) has been re-initialized since my alertCallback was added.

Any thoughts on what might be going wrong here? I suspect that perhaps it's something wonky with webpack and jsPsych not playing well together, but I haven't been able to pin anything down.

[jodeleeuw]

Hi @noah10,

Thinking about what could be going on here... Could you try this?

var alertCallback = function(info){
    alert('You pressed key '+info.key+' after '+info.rt+' ms');
}

var t = {
        type: 'html-keyboard-response',
        stimulus: 'foo',
        choices: ['q'],
	on_load: function(){
		jsPsych.pluginAPI.getKeyboardResponse({callback_function: alertCallback});
	}
        response_ends_trial: false
    };

jsPsych.init({
    timeline: [t]
});

If that fixes it then I suspect what is happening is that there is an async operation in jsPsych.init() that runs before the keyboard listeners are setup. So the order of code execution ends up being init() -> getKeyboardResponse -> more init() stuff.

This will be fixed in v7.0 thanks to some API changes with how we handle jsPsych initialization.

[jodeleeuw]

Got it. Thanks for identifying this edge case 👍 I'm opening an issue to track a fix.

[noah10]

What I'm puzzled by is why this same case (my original one, that is) passes the test in the pluginAPI test suite. Is there something specific to the jest environment that causes it to pass? (Or to the browser environment that causes it to fail?)

[jodeleeuw]

I think this test never triggers the keyboard listener created by the html-keyboard-response trial since that listener only responds to q and the other one is being activated by a.

jsPsych/tests/jsPsych.pluginAPI/pluginapi.test.js

Lines 9 to 25 in 528d9ad

	test('should execute a function after successful keypress', function(){
	var callback = jest.fn();
	var t = {
	type: 'html-keyboard-response',
	stimulus: 'foo',
	choices: ['q']
	};
	jsPsych.init({
	timeline: [t]
	})
	jsPsych.pluginAPI.getKeyboardResponse({callback_function: callback});
	expect(callback.mock.calls.length).toBe(0);
	document.querySelector('.jspsych-display-element').dispatchEvent(new KeyboardEvent('keydown', {key: 'a'}));
	expect(callback.mock.calls.length).toBe(1);
	document.querySelector('.jspsych-display-element').dispatchEvent(new KeyboardEvent('keyup', {key: 'a'}));
	expect(callback.mock.calls.length).toBe(1);
	});

[noah10]

Sorry, my question wasn't clear. Based on my original example, I would expect the getKeyboardResponse listener in the test to never be called, just the way my alertCallback was never called. (Until you suggested putting the getKeyboardResponse call into on_load, which neither the test nor my example do.)

[jodeleeuw]

Oh right, good point!

I'm not sure I know enough about potential jest and browser environment differences to know if this is a likely cause, but it does seem plausible to me. Given that this will definitely be fixed by 7.0 I'm not going to worry too much about updating the test case. But I will add a test for the other problem you uncovered!