Display on-screen feedback indicating key press has been recorded

[mayaraza]

Hello,

I have a simple word encoding task where words are presented sequentially (timeline with 3000ms word trial, 250ms fixation cross trial). For each word pps respond with a pleasant or unpleasant judgement (one of two keys). The response does not end the trial so that every pp is exposed to the words for the same length of time. One problem with this is that pps are unsure as to whether their key press has been recorded. This is particularly important bc if the cursor focus moves off the screen (say they change the volume) then responses will not be recorded and they will be kicked out of the task even if they were making responses.

I would like to show some kind of feedback on screen to indicate that the keypress has been recorded, so that pps can click back onto the screen if necessary, but that doesn't end the trial. The feedback can be anything e.g. small dot appearing on screen, circle appearing around the word. I have been looking at the keydown plugin api but I am not sure where to implement this. I can see in the html-keyboard-response plugin, a comment that says the CSS class responded can be used to provide visual feedback of a response, but again I am not sure what to do with this!

Many thanks in advance for any support,

Maya Raza

[ChristopheBossens]

Something like this could work:

You create a keyboard event handler in the on_start function with a callback function. In that callback function you can customize any of the elements on screen:

    function keypress_detected(info){
        document.getElementById("stimulus_box").style.border = "1px solid green";
    }

    var trial = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: '<p style="font-size:48px; color:green;">BLUE</p>',
        choices: ['r', 'g', 'b'],
        prompt: "<p id='stimulus_box'>Is the ink color (r)ed, (g)reen, or (b)lue?</p>",
        trial_duration: 10000,
        response_ends_trial: false,
        on_start : function(){
            jsPsych.pluginAPI.getKeyboardResponse({
                callback_function: keypress_detected,
                valid_responses : "ALL_KEYS",
                rt_method: "performance",
                persist: false
            });
        }
    };

[jodeleeuw]

The HtmlKeyboardResponse plugin also adds the class responded to the stimulus when a response is recorded.

// 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-html-keyboard-response-stimulus").className +=
      " responded";

So you can add a CSS rule to the experiment document that modifies the stimulus to put a border around it or some other visual indication.