Record first keypress and RT

[dreamerie]

I've been using the survey-html-form plugin for a stem completion task e.g., complete the word: rea____

I want to record the first keypress and the RT for that keypress. Right now, the RT that's recorded is the time it takes for them to submit the response.

[ChristopheBossens]

I think you can achieve this by using the on_start function to create a keyboard listener, and using the on_finish function to attach the data that you get in the event callback to your trial data:

    let first_key_info;

    function first_keypress(info){
        console.log(info);
        first_key_info = info;
    }

    var trial = {
        type: jsPsychSurveyHtmlForm,
        preamble: '<p>How are you feeling <b>right now?</b></p>',
        html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>',
        on_start : function(){
            jsPsych.pluginAPI.getKeyboardResponse({
                callback_function: first_keypress,
                valid_responses : "ALL_KEYS",
                rt_method: "performance",
                persist: false
            });
        },
        on_finish : function(data){
            data.first_key_info = first_key_info;
        }
    };

Is this what you need?

[dreamerie]

This is similar to what I came up with. The problem is that the first keypress is recorded this way, but then doesn't appear on screen.
e.g., participant types "le", first_key_info registers "l", but only "e" appears in the response box.

[dreamerie]

With some help from GPT, I was able to fix the issue. The key was to manually update the value of the input field for the first keypress. Since this was also displaying non-letters like Control in the textbox, I added a filter to display letters only.

function isLetter(str) {
    return /^[a-zA-Z]$/.test(str);
}

function first_keypress(info) {
    console.log(info);
    first_key_info = info;
    
    // Check if the pressed key is a letter before updating the input field
    if (isLetter(first_key_info.key)) {
        $('input[name="first"]').val(first_key_info.key);
    }
}

    var trial = {
        type: jsPsychSurveyHtmlForm,
        preamble: '<p>How are you feeling <b>right now?</b></p>',
        html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>',
        on_start : function(){
            jsPsych.pluginAPI.getKeyboardResponse({
                callback_function: first_keypress,
                valid_responses : "ALL_KEYS",
                rt_method: "performance",
                persist: false
            });
        },
        on_finish : function(data){
            data.first_key_info = first_key_info;
        }
    };

[ChristopheBossens]

Good catch, did not think about that :)

I checked the source code and the getKeyboardResponse indeed does not propagate the event. I think your solution will always but the first keypress in the first input field, even if a participant has a focus in the second input field? For future reference I adjusted the code a little bit so that it works irrespective of the input field

    let startTime, first_key_info;
    function first_keypress_handler(e){
        // Check if we already have info
        if(first_key_info)
          return;

        first_key_info= {
          rt : Math.round( performance.now() - startTime), 
          key : e.key
        }
    }

    var trial = {
        type: jsPsychSurveyHtmlForm,
        preamble: '<p>How are you feeling <b>right now?</b></p>',
        html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>',
        on_start : function(){
          startTime = performance.now();
          first_key_info= null;
          jsPsych.pluginAPI.getRootElement().addEventListener('keypress', first_keypress_handler);
        },
        on_finish : function(data){
            jsPsych.pluginAPI.getRootElement().removeEventListener('keypress', first_keypress_handler);
            data.first_key_info = first_key_info;
        }
    };

[dreamerie]

Thank you! This worked well.