mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 08:38:11 +00:00
Josh de Leeuw
GitHub
commit
9fe33ba1dc
67
docs/markdown_docs/plugins/jspsych-iat.md
Normal file
67
docs/markdown_docs/plugins/jspsych-iat.md
Normal file
@ -0,0 +1,67 @@
|
||||
# jspsych-iat plugin
|
||||
|
||||
A list of images or HTML-formatted content is given as the stimulus. There are two or more labels associated with each stimulus and two different key presses associated with the labels. For example, you would press 'f' for the right category lable and 'j' for the left category lable. Throughout the experiment, data will be collected such as the number of correct key presses, the time it takes to get a response, etc. Here is a link if you want a better understanding of what the IAT plugin is: https://implicit.harvard.edu/implicit/iatdetails.html
|
||||
|
||||
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](overview#datacollectedbyplugins), 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](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) 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
|
||||
|
||||
```javascript
|
||||
var trial_block = {
|
||||
type: 'iat',
|
||||
stimulus: 'img/blue.png',
|
||||
stim_key_association: 'left',
|
||||
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
|
||||
}
|
||||
|
||||
var timeline = [];
|
||||
timeline.push(trial_block);
|
||||
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
BIN
examples/img/age/of1.jpg
Executable file
BIN
examples/img/age/of1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
examples/img/age/of2.jpg
Executable file
BIN
examples/img/age/of2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
examples/img/age/of3.jpg
Executable file
BIN
examples/img/age/of3.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
examples/img/age/om1.jpg
Executable file
BIN
examples/img/age/om1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
examples/img/age/om2.jpg
Executable file
BIN
examples/img/age/om2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
examples/img/age/om3.jpg
Executable file
BIN
examples/img/age/om3.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
examples/img/age/yf1.jpg
Executable file
BIN
examples/img/age/yf1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
examples/img/age/yf4.jpg
Executable file
BIN
examples/img/age/yf4.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
examples/img/age/yf5.jpg
Executable file
BIN
examples/img/age/yf5.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
examples/img/age/ym2.jpg
Executable file
BIN
examples/img/age/ym2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
examples/img/age/ym3.jpg
Executable file
BIN
examples/img/age/ym3.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
examples/img/age/ym5.jpg
Executable file
BIN
examples/img/age/ym5.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
examples/img/redX.png
Executable file
BIN
examples/img/redX.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
447
examples/jspsych-iat.html
Normal file
447
examples/jspsych-iat.html
Normal file
@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My experiment</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="../jspsych.js"></script>
|
||||
<script src="../plugins/jspsych-text.js"></script>
|
||||
<script src="../plugins/jspsych-iat.js"></script>
|
||||
<link href="../css/jspsych.css" rel="stylesheet"></link>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<script>
|
||||
|
||||
var welcome_block = {
|
||||
type: 'text',
|
||||
text: '<p>Welcome to the Age Task. In this study you will ' +
|
||||
'complete an Implicit Association Test(IAT) in which you ' +
|
||||
'will be asked to sort pictures and words into groups as ' +
|
||||
'fast as you can. At the end, you will receive your IAT ' +
|
||||
'result along with information about what it means.<br><br> ' + 'Press any key to begin.</p>',
|
||||
timing_post_trial: 1500
|
||||
};
|
||||
|
||||
var category_block = {
|
||||
type: 'text',
|
||||
text: '<p>Next, you will use the "E" and "I" computer keys ' + 'to categorize items into groups as fast as you can. ' +
|
||||
'These are the four groups and the items that belong to each:<br><br>' +
|
||||
'<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' +
|
||||
'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' +
|
||||
'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' +
|
||||
'<strong>Old</strong>:<br>' + "<img src='img/age/of1.jpg'></img> " +
|
||||
"<img src='img/age/of2.jpg'></img> " + "<img src='img/age/of3.jpg'></img> " +
|
||||
"<img src='img/age/om1.jpg'></img> " + "<img src='img/age/om2.jpg'></img> " +
|
||||
"<img src='img/age/om3.jpg'></img><br><br>" + '<strong>Young</strong>:<br>' +
|
||||
"<img src='img/age/yf1.jpg'></img> " + "<img src='img/age/yf4.jpg'></img> " +
|
||||
"<img src='img/age/yf5.jpg'></img> " + "<img src='img/age/ym2.jpg'></img> " +
|
||||
"<img src='img/age/ym3.jpg'></img> " + "<img src='img/age/ym5.jpg'></img><br><br>" +
|
||||
"Press any key to continue.</p>",
|
||||
timing_post_trial: 1500
|
||||
};
|
||||
|
||||
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 instructions_block4 = {
|
||||
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'>This is the same as the previous part.<br>" + "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_block4 = {
|
||||
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 instructions_block5 = {
|
||||
type: 'text',
|
||||
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>YOUNG</strong></div>" +
|
||||
"<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>OLD</strong></div>" +
|
||||
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Watch out, the labels have changed positions!<br>" +
|
||||
"Use <strong>E</strong> for Young People<br>" + "Use <strong>I</strong> for Old People<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_block5 = {
|
||||
timeline: [
|
||||
{
|
||||
type: 'iat',
|
||||
is_html: false,
|
||||
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: ['YOUNG'],
|
||||
right_category_label: ['OLD'],
|
||||
key_to_move_forward: [jsPsych.ALL_KEYS],
|
||||
response_ends_trial: true
|
||||
}
|
||||
],
|
||||
timeline_variables: [
|
||||
{stimulus: "img/age/of1.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/of2.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/of3.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/om1.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/om2.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/om3.jpg", stim_key_association: "right"},
|
||||
{stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
|
||||
{stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
|
||||
{stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
|
||||
{stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
|
||||
{stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
|
||||
{stimulus: "img/age/ym5.jpg", stim_key_association: "left"}
|
||||
],
|
||||
randomize_order: true,
|
||||
repititions: 2
|
||||
};
|
||||
|
||||
var instructions_block6 = {
|
||||
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><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_block6 = {
|
||||
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],
|
||||
}
|
||||
],
|
||||
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 instructions_block7 = {
|
||||
type: 'text',
|
||||
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
|
||||
"<strong>Old People</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
|
||||
"<strong>Young People</strong></div>" +
|
||||
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part<br>" +
|
||||
"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 debrief_block = {
|
||||
type: "text",
|
||||
text: function() {
|
||||
var sum = 0;
|
||||
var IATtrials = jsPsych.data.get().filter({trial_type: 'iat'});
|
||||
var numTrials = jsPsych.data.get().filter({trial_type: 'iat'}).count();
|
||||
var n_correct = IATtrials.filter({correct: true}).count();
|
||||
var total_iat_trials = IATtrials.count();
|
||||
var percent_correct = Math.floor( n_correct / total_iat_trials * 100 );
|
||||
var responseTime = IATtrials.select('rt').mean();
|
||||
|
||||
return "<p>You responded correctly on " + percent_correct + "% of the trials. " +
|
||||
"Your average response time was " + "<strong>" + responseTime + "ms</strong></p>";
|
||||
}
|
||||
};
|
||||
|
||||
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(instructions_block4);
|
||||
// timeline.push(trial_block4);
|
||||
// timeline.push(instructions_block5);
|
||||
// timeline.push(trial_block5);
|
||||
// timeline.push(instructions_block6);
|
||||
// timeline.push(trial_block6);
|
||||
// timeline.push(instructions_block7);
|
||||
// timeline.push(trial_block6);
|
||||
timeline.push(debrief_block);
|
||||
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
on_finish: function() {
|
||||
jsPsych.data.displayData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
285
plugins/jspsych-iat.js
Normal file
285
plugins/jspsych-iat.js
Normal file
@ -0,0 +1,285 @@
|
||||
/**
|
||||
* jspsych-iat
|
||||
* Kristin Diep
|
||||
*
|
||||
* plugin for displaying a stimulus and getting a keyboard response
|
||||
*
|
||||
* documentation: docs.jspsych.org
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
jsPsych.plugins["iat"] = (function() {
|
||||
|
||||
var plugin = {};
|
||||
|
||||
jsPsych.pluginAPI.registerPreload('iat', 'stimulus', 'image', function(t){return !t.is_html || t.is_html == 'undefined'});
|
||||
|
||||
|
||||
plugin.trial = function(display_element, trial) {
|
||||
|
||||
var plugin_id_name = "jspsych-iat";
|
||||
var plugin_id_selector = '#' + plugin_id_name;
|
||||
var _join = function( /*args*/ ) {
|
||||
var arr = Array.prototype.slice.call(arguments, _join.length);
|
||||
return arr.join(separator = '-');
|
||||
}
|
||||
|
||||
|
||||
// if any trial variables are functions
|
||||
// this evaluates the function and replaces
|
||||
// it with the output of the function
|
||||
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
|
||||
|
||||
// set default values for the parameters
|
||||
trial.display_feedback = trial.display_feedback || false;
|
||||
trial.image_when_wrong = trial.image_when_wrong || 'undefined';
|
||||
trial.wrong_image_name = trial.wrong_image_name || 'wrong image';
|
||||
trial.left_category_key = trial.left_category_key || 'E';
|
||||
trial.right_category_key = trial.right_category_key || 'I';
|
||||
trial.left_category_label = trial.left_category_label || ['left'];
|
||||
trial.right_category_label = trial.right_category_label || ['right'];
|
||||
trial.stim_key_association = trial.stim_key_association || 'undefined';
|
||||
trial.response_ends_trial = (typeof trial.response_ends_trial == 'undefined') ? true : trial.response_ends_trial;
|
||||
trial.timing_response = trial.timing_response || -1;
|
||||
trial.key_to_move_forward = trial.key_to_move_forward || [jsPsych.ALL_KEYS];
|
||||
trial.prompt = trial.prompt || "";
|
||||
|
||||
//Get keys to continue and put them in a string
|
||||
var i;
|
||||
var keysToContinue = "";
|
||||
var lastKey = trial.key_to_move_forward.length - 1;
|
||||
for(i = 0; i < lastKey; i++) {
|
||||
keysToContinue += trial.key_to_move_forward[i] + ", ";
|
||||
}
|
||||
|
||||
|
||||
var html_str = " ";
|
||||
//html_str += "<div class='main_layout' style='position: relative; height: 100vh; width: 100vh' id='jspsych-iat-stim'>";
|
||||
|
||||
if (!trial.is_html) {
|
||||
html_str += "<div style='position: absolute; height: 20%; width: 100%; margin-left: auto; margin-right: auto; top: 42%; left: 0; right: 0'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
|
||||
} else {
|
||||
html_str += "<div style='position: absolute; height: 20%; width: 100%; margin-left: auto; margin-right: auto; top: 42%; left: 0; right: 0'><p id='jspsych-iat-stim'>" + trial.stimulus + "</p></div>";
|
||||
}
|
||||
|
||||
html_str += "<div id='trial_left_align' style='position: absolute; top: 18%; left: 20%'>";
|
||||
|
||||
if(trial.left_category_label.length == 1) {
|
||||
html_str += "<p>Press " + trial.left_category_key + " for:<br> " +
|
||||
trial.left_category_label[0].bold() + "</p></div>";
|
||||
} else {
|
||||
html_str += "<p>Press " + trial.left_category_key + " for:<br> " +
|
||||
trial.left_category_label[0].bold() + "<br>" + "or<br>" +
|
||||
trial.left_category_label[1].bold() + "</p></div>";
|
||||
}
|
||||
|
||||
html_str += "<div id='trial_right_align' style='position: absolute; top: 18%; right: 20%'>";
|
||||
|
||||
if(trial.right_category_label.length == 1) {
|
||||
html_str += "<p>Press " + trial.right_category_key + " for:<br> " +
|
||||
trial.right_category_label[0].bold() + '</p></div>';
|
||||
} else {
|
||||
html_str += "<p>Press " + trial.right_category_key + " for:<br> " +
|
||||
trial.right_category_label[0].bold() + "<br>" + "or<br>" +
|
||||
trial.right_category_label[1].bold() + "</p></div>";
|
||||
}
|
||||
|
||||
html_str += "<div id='wrongImgID' style='position:relative; top: 300px; margin-left: auto; margin-right: auto; left: 0; right: 0'>";
|
||||
|
||||
if(!trial.response_ends_trial && trial.display_feedback == true) {
|
||||
html_str += "<div id='wrongImgContainer' style='visibility: hidden; position: absolute; top: -75px; margin-left: auto; margin-right: auto; left: 0; right: 0'><img src='" + trial.image_when_wrong + "' id='wrongImgID'></img></div>";
|
||||
var wImg = document.getElementById("wrongImgContainer");
|
||||
html_str += "<p>Trial will continue automatically.</p>";
|
||||
}
|
||||
|
||||
if(!trial.response_ends_trial && !trial.display_feedback) {
|
||||
html_str += "<p>Trial will continue automatically.</p>";
|
||||
}
|
||||
|
||||
if(trial.response_ends_trial && trial.display_feedback == true) {
|
||||
html_str += "<div id='wrongImgContainer' style='visibility: hidden; position: absolute; top: -75px; margin-left: auto; margin-right: auto; left: 0; right: 0'><img src='" + trial.image_when_wrong + "' id='wrongImgID'></img></div>";
|
||||
var wImg = document.getElementById("wrongImgContainer");
|
||||
//wImg.style.visibility = "hidden";
|
||||
|
||||
if(trial.key_to_move_forward.length == 1) {
|
||||
if(trial.key_to_move_forward[0] == "other key") {
|
||||
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press the other key to continue.</p>"
|
||||
} else if(trial.key_to_move_forward[0] == jsPsych.ALL_KEYS) {
|
||||
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press any key to continue.</p>"
|
||||
} else {
|
||||
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press " + trial.key_to_move_forward[0] + " to continue.</p>";
|
||||
}
|
||||
} else {
|
||||
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press " +
|
||||
keysToContinue + " " + trial.key_to_move_forward[lastKey] + " to continue.</p>";
|
||||
}
|
||||
} else if (trial.response_ends_trial && trial.display_feedback != true) {
|
||||
html_str += "<div id='wrongImgContainer' style='position: absolute; top: -75px; margin-left: auto; margin-right: auto; left: 0; right: 0'></div>";
|
||||
if(trial.key_to_move_forward.length == 1) {
|
||||
if(trial.key_to_move_forward[0] == "other key") {
|
||||
html_str += "<p>If you press the wrong key, press the other key to continue.</p>"
|
||||
} else if(trial.key_to_move_forward[0] == jsPsych.ALL_KEYS) {
|
||||
html_str += "<p>If you press the wrong key, press any key to continue.</p>"
|
||||
} else {
|
||||
html_str += "<p>If you press the wrong key, press " + trial.key_to_move_forward[0] + " to continue.</p>";
|
||||
}
|
||||
} else {
|
||||
html_str += "<p>If you press the wrong key, press " +
|
||||
keysToContinue + " " + trial.key_to_move_forward[lastKey] + " to continue.</p>";
|
||||
}
|
||||
}
|
||||
|
||||
html_str += "</div>";
|
||||
|
||||
display_element.innerHTML += html_str;
|
||||
|
||||
|
||||
//show prompt if there is one
|
||||
if (trial.prompt !== "") {
|
||||
display_element.innerHTML += trial.prompt;
|
||||
}
|
||||
|
||||
// store response
|
||||
var response = {
|
||||
rt: -1,
|
||||
key: -1,
|
||||
correct: false
|
||||
};
|
||||
|
||||
// function to end trial when it is time
|
||||
var end_trial = function() {
|
||||
|
||||
// kill any remaining setTimeout handlers
|
||||
jsPsych.pluginAPI.clearAllTimeouts();
|
||||
|
||||
// kill keyboard listeners
|
||||
if (typeof keyboardListener !== 'undefined') {
|
||||
jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
|
||||
}
|
||||
|
||||
// gather the data to store for the trial
|
||||
var trial_data = {
|
||||
"rt": response.rt,
|
||||
"stimulus": trial.stimulus,
|
||||
"key_press": response.key,
|
||||
"correct": response.correct
|
||||
};
|
||||
|
||||
jsPsych.data.write(trial_data);
|
||||
jsPsych.data.addDataToLastTrial(trial_data);
|
||||
|
||||
// clears the display
|
||||
display_element.innerHTML = '';
|
||||
|
||||
// move on to the next trial
|
||||
jsPsych.finishTrial(trial_data);
|
||||
};
|
||||
|
||||
|
||||
var leftKeyCode = jsPsych.pluginAPI.convertKeyCharacterToKeyCode(trial.left_category_key);
|
||||
var rightKeyCode = jsPsych.pluginAPI.convertKeyCharacterToKeyCode(trial.right_category_key);
|
||||
|
||||
|
||||
// function to handle responses by the subject
|
||||
var after_response = function(info) {
|
||||
var wImg = document.getElementById("wrongImgContainer");
|
||||
// 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-iat-stim').className += ' responded';
|
||||
|
||||
// only record the first response
|
||||
if (response.key == -1 ) {
|
||||
response = info;
|
||||
}
|
||||
|
||||
if(trial.stim_key_association == "right") {
|
||||
if(response.rt > -1 && response.key == rightKeyCode) {
|
||||
response.correct = true;
|
||||
if (trial.response_ends_trial) {
|
||||
end_trial();
|
||||
}
|
||||
} else {
|
||||
response.correct = false;
|
||||
if(!trial.response_ends_trial && trial.display_feedback == true) {
|
||||
wImg.style.visibility = "visible";
|
||||
}
|
||||
if (trial.response_ends_trial && trial.display_feedback == true) {
|
||||
wImg.style.visibility = "visible";
|
||||
if(trial.key_to_move_forward[0] == "other key") {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: [trial.right_category_key]
|
||||
});
|
||||
} else {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: trial.key_to_move_forward
|
||||
});}
|
||||
} else if(trial.response_ends_trial && trial.display_feedback != true) {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: [jsPsych.ALL_KEYS]
|
||||
});
|
||||
} else if(!trial.response_ends_trial && trial.display_feedback != true) {
|
||||
// end_trial();
|
||||
}
|
||||
}
|
||||
} else if(trial.stim_key_association == "left") {
|
||||
if(response.rt > -1 && response.key == leftKeyCode) {
|
||||
response.correct = true;
|
||||
if (trial.response_ends_trial) {
|
||||
end_trial();
|
||||
}
|
||||
} else {
|
||||
response.correct = false;
|
||||
if(!trial.response_ends_trial && trial.display_feedback == true) {
|
||||
wImg.style.visibility = "visible";
|
||||
}
|
||||
if (trial.response_ends_trial && trial.display_feedback == true) {
|
||||
wImg.style.visibility = "visible";
|
||||
if(trial.key_to_move_forward[0] == "other key") {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: [trial.left_category_key]
|
||||
});
|
||||
} else {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: trial.key_to_move_forward
|
||||
});}
|
||||
} else if(trial.response_ends_trial && trial.display_feedback != true) {
|
||||
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: end_trial,
|
||||
valid_responses: [jsPsych.ALL_KEYS]
|
||||
});
|
||||
} else if(!trial.response_ends_trial && trial.display_feedback != true) {
|
||||
// end_trial();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// start the response listener
|
||||
if (trial.left_category_key != jsPsych.NO_KEYS && trial.right_category_key != jsPsych.NO_KEYS) {
|
||||
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||
callback_function: after_response,
|
||||
valid_responses: [trial.left_category_key, trial.right_category_key],
|
||||
rt_method: 'date',
|
||||
persist: false,
|
||||
allow_held_key: false
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// end trial if time limit is set
|
||||
if (trial.timing_response > 0 && trial.response_ends_trial != true) {
|
||||
jsPsych.pluginAPI.setTimeout(function() {
|
||||
end_trial();
|
||||
}, trial.timing_response);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return plugin;
|
||||
})();
|
||||
16
tests/plugins/button-response.test.js
Normal file
16
tests/plugins/button-response.test.js
Normal file
@ -0,0 +1,16 @@
|
||||
const root = '../../';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('iat plugin', function(){
|
||||
|
||||
beforeEach(function(){
|
||||
require(root + 'jspsych.js');
|
||||
require(root + 'plugins/jspsych-button-response.js');
|
||||
});
|
||||
|
||||
test('loads correctly', function(){
|
||||
expect(typeof window.jsPsych.plugins['button-response']).not.toBe('undefined');
|
||||
});
|
||||
|
||||
});
|
||||
403
tests/plugins/plugin-iat.test.js
Normal file
403
tests/plugins/plugin-iat.test.js
Normal file
@ -0,0 +1,403 @@
|
||||
const root = '../../';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('iat plugin', function(){
|
||||
|
||||
beforeEach(function(){
|
||||
require(root + 'jspsych.js');
|
||||
require(root + 'plugins/jspsych-iat.js');
|
||||
});
|
||||
|
||||
test('loads correctly', function(){
|
||||
expect(typeof window.jsPsych.plugins['iat']).not.toBe('undefined');
|
||||
});
|
||||
|
||||
test('displays image by default', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '../media/blue.png',
|
||||
is_html: true,
|
||||
response_ends_trial: true,
|
||||
display_feedback: false,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
timing_response: 500
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(/blue.png/);
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('displays html stimulus when is_html is true', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
response_ends_trial: true,
|
||||
display_feedback: false,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
timing_response: 500
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(/hello/);
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('display should only clear when left key is pressed', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
left_category_key: 'f',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
key_to_move_forward: ['f']
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch('<p id=\"jspsych-iat-stim\"></p><p>hello</p><p></p>');
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('display should only clear when right key is pressed', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
right_category_key: 'j',
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'right',
|
||||
key_to_move_forward: ['j']
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p><p></p>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 74}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 74}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
|
||||
});
|
||||
|
||||
test('display should clear when any key is pressed', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'right',
|
||||
key_to_move_forward: [jsPsych.ALL_KEYS]
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\" class=\" responded\"></p><p>hello</p>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
|
||||
});
|
||||
|
||||
test('display should clear only when "other key" is pressed', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
key_to_move_forward: ['other key']
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 74}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 74}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\" class=\" responded\"></p><p>hello</p>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
|
||||
});
|
||||
|
||||
|
||||
test('labels should be with assigned key characters', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>Press j for:<br> <b>UNFRIENDLY</b>'));
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p>Press f for:<br> <b>FRIENDLY</b>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode:70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode:70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
|
||||
});
|
||||
|
||||
test('should display wrong image when wrong key is pressed', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
image_when_wrong: '../media/redX.png',
|
||||
wrong_image_name: 'red X',
|
||||
is_html: true,
|
||||
display_feedback: true,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
key_to_move_forward: [jsPsych.ALL_KEYS],
|
||||
response_ends_trial: true
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<img src=\"../media/redX.png\" style=\"visibility: hidden;\" id=\"wrongImgID\">'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode:74}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode:74}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<img src=\"../media/redX.png\" style=\"visibility: visible;\" id=\"wrongImgID\">'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
|
||||
test('prompt should append html below stimulus', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
image_when_wrong: '../media/redX.png',
|
||||
wrong_image_name: 'red X',
|
||||
is_html: true,
|
||||
display_feedback: true,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
key_to_move_forward: [jsPsych.ALL_KEYS],
|
||||
response_ends_trial: true,
|
||||
prompt: '<div id="foo">this is the prompt</div>'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<div id="foo">this is the prompt</div>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('timing_response should end trial after time has elapsed; only if display_feedback is false', function(){
|
||||
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
display_feedback: false,
|
||||
response_ends_trial: false,
|
||||
timing_response: 500
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p>'));
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
|
||||
});
|
||||
|
||||
test('trial should not end when response_ends_trial is false and stimulus should get responded class', function(){
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: '<p>hello</p>',
|
||||
is_html: true,
|
||||
response_ends_trial: false,
|
||||
display_feedback: false,
|
||||
left_category_key: 'f',
|
||||
right_category_key: 'j',
|
||||
left_category_label: ['FRIENDLY'],
|
||||
right_category_label: ['UNFRIENDLY'],
|
||||
stim_key_association: 'left',
|
||||
timing_response: 500
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\" class=\" responded\"></p><p>hello</p>'));
|
||||
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
test('should accept functions as parameters(timing_response in use, response ends trial false)', function(){
|
||||
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: function(){ return '<p>hello</p>'; },
|
||||
is_html: function(){ return true; },
|
||||
display_feedback: function(){ return true; },
|
||||
image_when_wrong: function(){ return '../media/redX.png'; },
|
||||
wrong_image_name: function(){ return 'red X'; },
|
||||
left_category_key: function(){ return 'e'; },
|
||||
right_category_key: function(){ return 'i'; },
|
||||
left_category_label: function(){return ['FRIENDLY']; },
|
||||
right_category_label: function(){return ['UNFRIENDLY']; },
|
||||
stim_key_association: function(){return 'left'; },
|
||||
prompt: function(){ return '<div>prompt</div>'; },
|
||||
timing_response: function(){ return 1000; },
|
||||
response_ends_trial: function(){ return false; }
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p><p></p>'));
|
||||
|
||||
jest.runTimersToTime(500);
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 73}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 73}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<img src=\"../media/redX.png\" style=\"visibility: visible;\" id=\"wrongImgID\">'));
|
||||
//expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p><p></p>'));
|
||||
|
||||
jest.runTimersToTime(1100);
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('should accept functions as parameters(timing_response is not in use)', function(){
|
||||
|
||||
var trial = {
|
||||
type: 'iat',
|
||||
stimulus: function(){ return '<p>hello</p>'; },
|
||||
is_html: function(){ return true; },
|
||||
display_feedback: function(){ return true; },
|
||||
image_when_wrong: function(){ return '../media/redX.png'; },
|
||||
wrong_image_name: function(){return 'red X'; },
|
||||
left_category_key: function(){ return 'e'; },
|
||||
right_category_key: function(){ return 'i'; },
|
||||
left_category_label: function(){return ['FRIENDLY']; },
|
||||
right_category_label: function(){return ['UNFRIENDLY']; },
|
||||
stim_key_association: function(){return 'left'; },
|
||||
key_to_move_forward: function(){return [jsPsych.ALL_KEYS]; },
|
||||
prompt: function(){ return '<div>prompt</div>'; },
|
||||
timing_response: function(){ return 1000; },
|
||||
response_ends_trial: function(){ return true; }
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p>'));
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 73}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 73}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p>'));
|
||||
|
||||
jest.runTimersToTime(1000);
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp('<p id=\"jspsych-iat-stim\"></p><p>hello</p>'));
|
||||
|
||||
jest.runTimersToTime(1500);
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 69}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 69}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
});
|
||||
62
tests/plugins/plugin-text.test.js
Normal file
62
tests/plugins/plugin-text.test.js
Normal file
@ -0,0 +1,62 @@
|
||||
const root = '../../';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('text plugin', function(){
|
||||
|
||||
beforeEach(function(){
|
||||
require(root + 'jspsych.js');
|
||||
require(root + 'plugins/jspsych-text.js');
|
||||
});
|
||||
|
||||
test('loads correctly', function(){
|
||||
expect(typeof window.jsPsych.plugins['text']).not.toBe('undefined');
|
||||
});
|
||||
|
||||
test('displays text', function(){
|
||||
var trial = {
|
||||
type: 'text',
|
||||
text: 'Hello World!'
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial]
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('Hello World!');
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test('when key in choices is pressed, window should display next trail', function(){
|
||||
var trial = {
|
||||
type: 'text',
|
||||
text: 'Testing',
|
||||
choices: ['f']
|
||||
};
|
||||
|
||||
var trial2 = {
|
||||
type: 'text',
|
||||
text: 'Second Trial'
|
||||
};
|
||||
|
||||
var timeline = [];
|
||||
timeline.push(trial);
|
||||
timeline.push(trial2);
|
||||
|
||||
jsPsych.init({
|
||||
timeline: timeline
|
||||
});
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('Testing');
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||
|
||||
expect(jsPsych.getDisplayElement().innerHTML).toBe('Second Trial');
|
||||
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user