Cloze plugin key press?

[Divyanshi09]

Hello. In the cloze plugin, in order to move to the next trial, the participant has to click a buttton. However, I was wondering if it can be possible for them to just press a key and move to the next trial? I have got a lot of cloze trials and it gets frustrating to constantly move your hand away from the keys and click the button. Thanks!

[becky-gilbert]

Yep you can do this by modifying the cloze plugin. I would start by looking at a different plugin that allows a key press to end the trial, such as the html-keyboard-response plugin. In the plugin.info section of the cloze plugin, you could add a parameter that defines the valid "submit" key(s) that can be pressed to submit the cloze response, like the choices parameter here:

jsPsych/plugins/jspsych-html-keyboard-response.js

Lines 26 to 32 in 21e7fa3

	choices: {
	type: jsPsych.plugins.parameterType.KEYCODE,
	array: true,
	pretty_name: 'Choices',
	default: jsPsych.ALL_KEYS,
	description: 'The keys the subject is allowed to press to respond to the stimulus.'
	},

Instead of using jsPsych.ALL_KEYS as the default value, you'll want to use 'enter' or some other non-alphanumeric key, so that participants don't accidentally submit their response while typing into the textboxes.

And then in the plugin.trial function, you'll need to add a keyboard listener for the submit key(s), which will look something like this:

jsPsych/plugins/jspsych-html-keyboard-response.js

Lines 121 to 130 in 21e7fa3

	// start the response listener
	if (trial.choices != jsPsych.NO_KEYS) {
	var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
	callback_function: after_response,
	valid_responses: trial.choices,
	rt_method: 'performance',
	persist: false,
	allow_held_key: false
	});
	}

In the jsPsych.pluginAPI.getKeyboardResponse function above, the callback_function parameter is the function that you want to be called after a valid key is pressed. In the cloze plugin, I think the function you want to use here is called check.

Please feel free to follow up here if you need further guidance. And you should also feel free to submit a pull request to add this change to jsPsych's version of the cloze plugin, since this feature might be generally useful for others 😃

[becky-gilbert]

Sorry, forgot to mention that when the trial ends, you'll also need to cancel the keyboard listener for the submit key(s). You can either cancel the specific keyboard response listener you created using the jsPsych.pluginAPI.cancelKeyboardResponse function, like this:

jsPsych/plugins/jspsych-html-keyboard-response.js

Lines 86 to 88 in 21e7fa3

	if (typeof keyboardListener !== 'undefined') {
	jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
	}

Or you could use the jsPsych.pluginAPI.cancelAllKeyboardResponses function.

This should happen right before the trial is about to end via jsPsych.finishTrial, which is here in the cloze plugin:

jsPsych/plugins/jspsych-cloze.js

Lines 97 to 98 in 21e7fa3

	display_element.innerHTML = '';
	jsPsych.finishTrial(trial_data);

[Divyanshi09]

@becky-gilbert Hi, thank you for your quick response! I followed what you did and sadly I have not been able to make it work. Forgive me for this, I am rather new to jsPsych. The only thing that I have managed to do is that the clickable box to move to the next trial is now gone and the task script is not registering 'enter' as the submit key and therefore there is no way to submit the response with this edited plugin:

/**
 * jspsych-cloze
 * Philipp Sprengholz
 *
 * Plugin for displaying a cloze test and checking participants answers against a correct solution.
 *
 * documentation: docs.jspsych.org
 **/

jsPsych.plugins['cloze-keypress'] = (function () {

    var plugin = {};

    plugin.info = {
        name: 'cloze-keypress',
        description: '',
        parameters: {
            text: {
                type: jsPsych.plugins.parameterType.STRING,
                pretty_name: 'Cloze text',
                default: undefined,
                description: 'The cloze text to be displayed. Blanks are indicated by %% signs and automatically replaced by input fields. If there is a correct answer you want the system to check against, it must be typed between the two percentage signs (i.e. %solution%).'
            },
            submit_answer: {
                type: jsPsych.plugins.parameterType.KEYCODE,
                array: true,
                pretty_name: 'Submit',
                default: 13,
                description: 'The key the subject is allowed to submit their answer to the stimulus.'
              
            },
            check_answers: {
                type: jsPsych.plugins.parameterType.BOOL,
                pretty_name: 'Check answers',
                default: false,
                description: 'Boolean value indicating if the answers given by participants should be compared against a correct solution given in the text (between % signs) after the button was clicked.'
            },
            mistake_fn: {
                type: jsPsych.plugins.parameterType.FUNCTION,
                pretty_name: 'Mistake function',
                default: function () {},
                description: 'Function called if check_answers is set to TRUE and there is a difference between the participants answers and the correct solution provided in the text.'
            }
        }
    };

    plugin.trial = function (display_element, trial) {

        var html = '<div class="cloze-keypress">';
        var elements = trial.text.split('%');
        var solutions = [];

        for (i=0; i<elements.length; i++)
        {
            if (i%2 === 0)
            {
                html += elements[i];
            }
            else
            {
                solutions.push(elements[i].trim());
                html += '<input type="text" id="input'+(solutions.length-1)+'" value="">';
            }
        }
        html += '</div>';
        
        display_element.innerHTML = html;
                
        var check = function() {

            var answers = [];
            var answers_correct = true;

            for (i=0; i<solutions.length; i++)
            {
                var field = document.getElementById('input'+i);
                answers.push(field.value.trim());
                
                if (trial.check_answers)
                {
                    if (answers[i] !== solutions[i])
                    {
                        field.style.color = 'red';
                        answers_correct = false;
                    }
                    else
                    {
                        field.style.color = 'black';
                    }
                }
            }
            
            if (!trial.check_answers || (trial.check_answers && answers_correct))
            {
                var trial_data = {
                    'answers' : answers
                };

                display_element.innerHTML = '';
                jsPsych.finishTrial(trial_data);
            }
            else
            {
                trial.mistake_fn();
            }
                
        };

            // start the response listener 
            if (trial.submit_answer != jsPsych.NO_KEYS) { 
                var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({ 
                    callback_function: check, 
                    valid_responses: trial.choices, 
                    rt_method: 'performance', 
                    persist: false, 
                    allow_held_key: false 
                }); 
             } 
        
            if (typeof keyboardListener !== 'undefined') { 
                jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); 
            } 
    };

    return plugin;
})();

Also, in order to make the cursor appear on the answer box, one would anyway have to click the answer box and therefore the use of the mouse/click is not entirely removed. This would defeat the purpose of having to remove the submit click box. Is there a way to change entirely remove the need to click anything?

[becky-gilbert]

No problem, and thanks for sharing your code - this is a great start! Here are some changes to make to your version:

1. In the getKeyboardResponse function, the valid_responses parameter should be an array of the keys that are allowed, which for this plugin is trial.submit_answer (not trial.choices). Also, since this has to be an array of valid keys and the submit_answer parameter is a single key, so you'll need to put trial.submit_answer inside of square brackets to turn it into an array:

var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({ 
  callback_function: check, 
  valid_responses: [trial.submit_answer], // <--- change to this
  rt_method: 'performance', 
  persist: false, 
  allow_held_key: false 
}); 

2. In your code the keyboard listener is cancelled immediately, but you only want to cancel it after a valid response has been made and the trial is about to end. So the last if statement in your version should be moved into the check function, like this:

var check = function() {

  //...

  if (!trial.check_answers || (trial.check_answers && answers_correct)) {
    // if check_answers is false, or if it's true and the answers are correct, 
    // then cancel the keyboard listener, save the data, and end the trial
    if (typeof keyboardListener !== 'undefined') { 
       jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); 
    } 
    var trial_data = {
      'answers' : answers
    };
    display_element.innerHTML = '';
    jsPsych.finishTrial(trial_data);
    //...

3. To put the cursor in a text box, you can call the focus() function on that element. So, to put the cursor in the first text box when the trial first loads, you can add this to the bottom of the plugin function:

    // set up keyboard listener...

    // put cursor in first text box
    var fields = display_element.querySelectorAll('input[type="text"]');
    fields[0].focus();

  }; // end of plugin.trial function
  return plugin;
})();

[Divyanshi09]

@becky-gilbert Hi! Thanks to your suggested edits, the script is now working! I will copy the edited code here for anyone else to use:
/**

• jspsych-cloze
• Philipp Sprengholz
• Plugin for displaying a cloze test and checking participants answers against a correct solution.
• documentation: docs.jspsych.org
  **/

jsPsych.plugins['cloze-keypress'] = (function () {

var plugin = {};

plugin.info = {
    name: 'cloze-keypress',
    description: '',
    parameters: {
        text: {
            type: jsPsych.plugins.parameterType.STRING,
            pretty_name: 'Cloze text',
            default: undefined,
            description: 'The cloze text to be displayed. Blanks are indicated by %% signs and automatically replaced by input fields. If there is a correct answer you want the system to check against, it must be typed between the two percentage signs (i.e. %solution%).'
        },
        submit_answer: {
            type: jsPsych.plugins.parameterType.KEYCODE,
            array: true,
            pretty_name: 'Submit',
            default: 'enter',
            description: 'The key the subject is allowed to submit their answer to the stimulus.'
          
        },
        check_answers: {
            type: jsPsych.plugins.parameterType.BOOL,
            pretty_name: 'Check answers',
            default: false,
            description: 'Boolean value indicating if the answers given by participants should be compared against a correct solution given in the text (between % signs) after the button was clicked.'
        },
        mistake_fn: {
            type: jsPsych.plugins.parameterType.FUNCTION,
            pretty_name: 'Mistake function',
            default: function () {},
            description: 'Function called if check_answers is set to TRUE and there is a difference between the participants answers and the correct solution provided in the text.'
        }
    }
};

plugin.trial = function (display_element, trial) {

    var html = '<div class="cloze-keypress">';
    var elements = trial.text.split('%');
    var solutions = [];

    for (i=0; i<elements.length; i++)
    {
        if (i%2 === 0)
        {
            html += elements[i];
        }
        else
        {
            solutions.push(elements[i].trim());
            html += '<input type="text" id="input'+(solutions.length-1)+'" value="">';
        }
    }
    html += '</div>';
    
    display_element.innerHTML = html;
            
    var check = function() {

        var answers = [];
        var answers_correct = true;

        for (i=0; i<solutions.length; i++)
        {
            var field = document.getElementById('input'+i);
            answers.push(field.value.trim());
            
            if (!trial.check_answers || (trial.check_answers && answers_correct)) {
                // if check_answers is false, or if it's true and the answers are correct, 
                // then cancel the keyboard listener, save the data, and end the trial
                if (typeof keyboardListener !== 'undefined') { 
                   jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); 
                } 
                var trial_data = {
                  'answers' : answers
                };
                display_element.innerHTML = '';
                jsPsych.finishTrial(trial_data);
            
                if (answers[i] !== solutions[i])
                {
                    field.style.color = 'red';
                    answers_correct = false;
                }
                else
                {
                    field.style.color = 'black';
                }
            }
        }  
            
    };

        // start the response listener 
        if (trial.submit_answer != jsPsych.NO_KEYS) { 
            var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({ 
                callback_function: check, 
                valid_responses: [trial.submit_answer], 
                rt_method: 'performance', 
                persist: false, 
                allow_held_key: false 
            }); 
         } 

        // put cursor in first text box
        var fields = display_element.querySelectorAll('input[type="text"]');
        fields[0].focus();
};

return plugin;

})();