jsPsych/docs/markdown_docs/plugins/jspsych-iat.md

jspsych-iat plugin

This plugin displays an image or HTML-formatted content that is the stimulus of the experiement. Each stimulus is assigned a category and a key that the user presses to give a response. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. If the stimulus is displayed until a response is given, then an image to indicate if the user pressed the wrong key can be displayed. The trial can be ended automatically if the subject has failed to respond within a fixed length of time.

Because this plugin can display any HTML content, it is quite versatile. It can be used for any situation in which the response generated by the subject is a single keystroke.

Parameters

This table lists the parameters associated with this plugin. Parameters with a default value of undefined must be specified. Other parameters can be left unspecified if the default value is acceptable.

Parameter	Type	Default Value	Description
stimulus	string	undefined	The stimulus to display. Either HTML-formatted, or the path to an image.
is_html	boolean	false	If stimulus is an HTML-formatted string, this parameter needs to be set to true.
prompt	string	""	This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g. which key to press).
image_when_wrong	string	undefined	Displays image feedback when user presses wrong key. Only needed when display_feedback == true.
wrong_image_name	string	'wrong image'	The name associated with image_when_wrong.
display_feedback	boolean	false	If true, then image_when_wrong and wrong_image_name is required. If false, timing_response is needed and trial will continue automatically.
left_category_key	string	'E'	Key press that is associated with the left_category_label.
right_category_key	string	'I'	Key press that is associated with the right_category_label.
left_category_label	string	['left']	An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the left side of the page.
right_category_label	string	['right']	An array that contains the words/labels associated with a certain stimulus. The labels are aligned to the right side of the page.
stim_key_association	string	'undefined'	Inputs are either 'left' or 'right'. It will associate the stimulus with the key presses on the left or right side of the page(left_category_key or right_category_key).
key_to_move_forward	array of characters	[jsPsych.ALL_KEYS]	This array contains the characters the subject is allowed to press to move on to the next trial if their key press was incorrect and feedback was displayed. Can also have 'other key' as an option which will only allow the user to select the right key to move forward.
timing_response	numeric	-1	How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the the subject's response will be recorded as -1 for the trial and the trial will end. If the value of this parameter is -1, then the trial will wait for a response indefinitely.
response_ends_trial	boolean	true	If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the timing_response parameter). If false, then the trial will continue until the value for timing_response is reached. You can use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.

Data Generated

In addition to the default data collected by all plugins, this plugin collects the following data for each trial.

Name	Type	Value
stimulus	string	Either the path to the image file or the string containing the HTML formatted content that the subject saw on this trial.
key_press	numeric	Indicates which key the subject pressed. The value is the numeric key code corresponding to the subject's response.
rt	numeric	The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.
correct	boolean	Boolean of whether the user's key press was correct for the given image or incorrect.

Examples

var instructions_block = {
type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" + 
"<div style='position: absolute; top: 18%; right: 20%'><p>Press I for:<br><strong>YOUNG</strong></p></div>" + 
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that belong to the Old People category. Put a right finger on the " +
"<strong>I</strong> key for items that belong to the Young People " +
"category. Items will appear one at a time.<br><br>" + "If you " +
"make a mistake, a red X will appear. Press the keys listed below " +
"to continue. Go as fast as you can while being accurate.<br><br> " +
"Press the any key when you are ready to start.</div>",
};


var trial_block = {
timeline: [
{
type: 'iat',
stimulus: jsPsych.timelineVariable('stimulus'),
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
is_html: false,
image_when_wrong: 'img/redX.png',
wrong_image_name: 'red X',
display_feedback: true, 
timing_response: 3000, //Only if display_feedback is false 
left_category_key: 'E',
right_category_key: 'I',
left_category_label: ['OLD'],
right_category_label: ['YOUNG'],
key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true
}
],
timeline_variables: [
{stimulus: "img/age/of1.jpg", stim_key_association: "left"},
{stimulus: "img/age/of2.jpg", stim_key_association: "left"},
{stimulus: "img/age/of3.jpg", stim_key_association: "left"},
{stimulus: "img/age/om1.jpg", stim_key_association: "left"},
{stimulus: "img/age/om2.jpg", stim_key_association: "left"},
{stimulus: "img/age/om3.jpg", stim_key_association: "left"},
{stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
{stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
{stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
{stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
{stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
{stimulus: "img/age/ym5.jpg", stim_key_association: "right"}
],
randomize_order: true,
repititions: 2
};

var instructions_block2 = {
type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" + 
"<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" + 
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that " +
"belong to the Bad category. Put a right finger on the " +
"<strong>I</strong> key for items that belong to the Good " +
"category. Items will appear one at a time.<br><br>" + "If you " +
"make a mistake, a red X will appear. Press the keys listed below " +
"to continue. Go as fast as you can while being accurate.<br><br> " +
"Press the any key when you are ready to start.</div>",
};

var trial_block2 = {
timeline: [
{
type: 'iat',
is_html: true,
stimulus: jsPsych.timelineVariable('stimulus'),
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
image_when_wrong: 'img/redX.png',
wrong_image_name: 'red X',
display_feedback: true, 
timing_response: 3000, //Only if display_feedback is false 
left_category_key: 'E',
right_category_key: 'I',
left_category_label: ['BAD'],
right_category_label: ['GOOD'],
key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true
}
],
timeline_variables: [
{stimulus: "Humiliate", stim_key_association: "left"},
{stimulus: "Evil", stim_key_association: "left"},
{stimulus: "Grief", stim_key_association: "left"},
{stimulus: "Yucky", stim_key_association: "left"},
{stimulus: "Detest", stim_key_association: "left"},
{stimulus: "Poison", stim_key_association: "left"},
{stimulus: "Abuse", stim_key_association: "left"},
{stimulus: "Despise", stim_key_association: "left"},
{stimulus: "Fabulous", stim_key_association: "right"},
{stimulus: "Excitement", stim_key_association: "right"},
{stimulus: "Glorious", stim_key_association: "right"},
{stimulus: "Cheerful", stim_key_association: "right"},
{stimulus: "Cherish", stim_key_association: "right"},
{stimulus: "Enjoy", stim_key_association: "right"},
{stimulus: "Delightful", stim_key_association: "right"},
{stimulus: "Joyous", stim_key_association: "right"}
],
randomize_order: true,
repititions: 2
};

var instructions_block3 = {
type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + 
"<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
"Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + 
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for " +
"Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" + 
"Each item belongs to only one category.<br><br>" + "If you " +
"make a mistake, a red X will appear. Press the keys listed below " +
"to continue. Go as fast as you can while being accurate.<br><br> " +
"Press the any key when you are ready to start.</div>",
};

var trial_block3 = {
timeline: [
{
type: 'iat',
is_html: jsPsych.timelineVariable('is_html'),
stimulus: jsPsych.timelineVariable('stimulus'),
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
image_when_wrong: 'img/redX.png',
wrong_image_name: 'red X',
display_feedback: true, 
timing_response: 3000, //Only if display_feedback is false 
left_category_key: 'E',
right_category_key: 'I',
left_category_label: ['BAD', 'OLD'],
right_category_label: ['GOOD', 'YOUNG'],
key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true
}
],
timeline_variables: [
{stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
{stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
{stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
{stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
{stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
{stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
{stimulus: "img/age/ym5.jpg", stim_key_association: "right", is_html: false},
{stimulus: "Humiliate", stim_key_association: "left", is_html: true},
{stimulus: "Evil", stim_key_association: "left", is_html: true},
{stimulus: "Grief", stim_key_association: "left", is_html: true},
{stimulus: "Yucky", stim_key_association: "left", is_html: true},
{stimulus: "Detest", stim_key_association: "left", is_html: true},
{stimulus: "Poison", stim_key_association: "left", is_html: true},
{stimulus: "Abuse", stim_key_association: "left", is_html: true},
{stimulus: "Despise", stim_key_association: "left", is_html: true},
{stimulus: "Fabulous", stim_key_association: "right", is_html: true},
{stimulus: "Excitement", stim_key_association: "right", is_html: true},
{stimulus: "Glorious", stim_key_association: "right", is_html: true},
{stimulus: "Cheerful", stim_key_association: "right", is_html: true},
{stimulus: "Cherish", stim_key_association: "right", is_html: true},
{stimulus: "Enjoy", stim_key_association: "right", is_html: true},
{stimulus: "Delightful", stim_key_association: "right", is_html: true},
{stimulus: "Joyous", stim_key_association: "right", is_html: true}
],
randomize_order: true,
repititions: 2
};
var timeline = [];
timeline.push(welcome_block);
timeline.push(category_block);
timeline.push(instructions_block);
timeline.push(trial_block);
timeline.push(instructions_block2);
timeline.push(trial_block2);
timeline.push(instructions_block3);
timeline.push(trial_block3);
timeline.push(debrief_block);

jsPsych.init({
timeline: timeline,
on_finish: function() {
jsPsych.data.displayData();
}
});