var jsPsychHtmlKeyboardResponse = (function (jspsych) {
'use strict';
const info = {
name: "html-keyboard-response",
parameters: {
/**
* The HTML string to be displayed.
*/
stimulus: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Stimulus",
default: undefined,
},
/**
* Array containing the key(s) the subject is allowed to press to respond to the stimulus.
*/
choices: {
type: jspsych.ParameterType.KEYS,
pretty_name: "Choices",
default: "ALL_KEYS",
},
/**
* Any content here will be displayed below the stimulus.
*/
prompt: {
type: jspsych.ParameterType.HTML_STRING,
pretty_name: "Prompt",
default: null,
},
/**
* How long to show the stimulus.
*/
stimulus_duration: {
type: jspsych.ParameterType.INT,
pretty_name: "Stimulus duration",
default: null,
},
/**
* How long to show trial before it ends.
*/
trial_duration: {
type: jspsych.ParameterType.INT,
pretty_name: "Trial duration",
default: null,
},
/**
* If true, trial will end when subject makes a response.
*/
response_ends_trial: {
type: jspsych.ParameterType.BOOL,
pretty_name: "Response ends trial",
default: true,
},
},
};
/**
* **html-keyboard-response**
*
* jsPsych plugin for displaying a stimulus and getting a keyboard response
*
* @author Josh de Leeuw
* @see {@link https://www.jspsych.org/plugins/jspsych-html-keyboard-response/ html-keyboard-response plugin documentation on jspsych.org}
*/
class HtmlKeyboardResponsePlugin {
constructor(jsPsych) {
this.jsPsych = jsPsych;
}
trial(display_element, trial) {
var new_html = '
' + trial.stimulus + "
";
// add prompt
if (trial.prompt !== null) {
new_html += trial.prompt;
}
// draw
display_element.innerHTML = new_html;
// store response
var response = {
rt: null,
key: null,
};
// function to end trial when it is time
const end_trial = () => {
// kill any remaining setTimeout handlers
this.jsPsych.pluginAPI.clearAllTimeouts();
// kill keyboard listeners
if (typeof keyboardListener !== "undefined") {
this.jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
}
// gather the data to store for the trial
var trial_data = {
rt: response.rt,
stimulus: trial.stimulus,
response: response.key,
};
// clear the display
display_element.innerHTML = "";
// move on to the next trial
this.jsPsych.finishTrial(trial_data);
};
// function to handle responses by the subject
var after_response = (info) => {
// 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";
// only record the first response
if (response.key == null) {
response = info;
}
if (trial.response_ends_trial) {
end_trial();
}
};
// start the response listener
if (trial.choices != "NO_KEYS") {
var keyboardListener = this.jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: "performance",
persist: false,
allow_held_key: false,
});
}
// hide stimulus if stimulus_duration is set
if (trial.stimulus_duration !== null) {
this.jsPsych.pluginAPI.setTimeout(() => {
display_element.querySelector("#jspsych-html-keyboard-response-stimulus").style.visibility = "hidden";
}, trial.stimulus_duration);
}
// end trial if trial_duration is set
if (trial.trial_duration !== null) {
this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
}
}
simulate(trial, simulation_mode, simulation_options, load_callback) {
if (simulation_mode == "data-only") {
load_callback();
this.simulate_data_only(trial, simulation_options);
}
if (simulation_mode == "visual") {
this.simulate_visual(trial, simulation_options, load_callback);
}
}
create_simulation_data(trial, simulation_options) {
const default_data = {
stimulus: trial.stimulus,
rt: this.jsPsych.randomization.sampleExGaussian(500, 50, 1 / 150, true),
response: this.jsPsych.pluginAPI.getValidKey(trial.choices),
};
const data = this.jsPsych.pluginAPI.mergeSimulationData(default_data, simulation_options);
this.jsPsych.pluginAPI.ensureSimulationDataConsistency(trial, data);
return data;
}
simulate_data_only(trial, simulation_options) {
const data = this.create_simulation_data(trial, simulation_options);
this.jsPsych.finishTrial(data);
}
simulate_visual(trial, simulation_options, load_callback) {
const data = this.create_simulation_data(trial, simulation_options);
const display_element = this.jsPsych.getDisplayElement();
this.trial(display_element, trial);
load_callback();
if (data.rt !== null) {
this.jsPsych.pluginAPI.pressKey(data.response, data.rt);
}
}
}
HtmlKeyboardResponsePlugin.info = info;
return HtmlKeyboardResponsePlugin;
})(jsPsychModule);