mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
moved age folder to imgand removed container div
This commit is contained in:
KristinDiep
parent
0d3b935bb1
commit
0b2e14781f
70
docs/markdown_docs/plugins/jspsych-iat.md
Normal file
70
docs/markdown_docs/plugins/jspsych-iat.md
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
# jspsych-iat plugin
|
||||||
|
|
||||||
|
This plugin displays an image or HTML-formatted content and allows the subject to respond by pressing a key on the keyboard. The stimulus can be displayed until a response is given, or for a pre-determined amount of time. 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 | *undefined* | 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.
|
||||||
|
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
|
||||||
|
|
||||||
|
####Displaying feedback after wrong response
|
||||||
|
|
||||||
|
'''javascript
|
||||||
|
var trial = {
|
||||||
|
type:'iat',
|
||||||
|
is_html: false,
|
||||||
|
stimulus: 'img/blue.png,'
|
||||||
|
stim_key_association: 'right',
|
||||||
|
image_when_wrong: 'img/redX.png',
|
||||||
|
wrong_image_name: 'red X',
|
||||||
|
left_category_key: 'F',
|
||||||
|
right_category_key: 'J',
|
||||||
|
left_category_label: ['orange','happy'],
|
||||||
|
right_category_label: ['blue','sad'],
|
||||||
|
key_to_move_forward:['a','b'],
|
||||||
|
display_feedback: true,
|
||||||
|
response_ends_trial: true
|
||||||
|
}
|
||||||
|
'''
|
||||||
|
|
||||||
|
####Setting timing response
|
||||||
|
|
||||||
|
'''javascrpt
|
||||||
|
var trial = {
|
||||||
|
type:'iat',
|
||||||
|
stimulus: 'img/blue.png',
|
||||||
|
left_category_key: 'F',
|
||||||
|
right_category_key: 'J',
|
||||||
|
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1018 B |
@ -6,7 +6,7 @@
|
|||||||
<script src="../jspsych.js"></script>
|
<script src="../jspsych.js"></script>
|
||||||
<script src="../plugins/jspsych-text.js"></script>
|
<script src="../plugins/jspsych-text.js"></script>
|
||||||
<script src="../plugins/jspsych-iat.js"></script>
|
<script src="../plugins/jspsych-iat.js"></script>
|
||||||
<link href="../css/jspsych.css" rel="stylesheet" type="text/css"></link>
|
<link href="../css/jspsych.css" rel="stylesheet"></link>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
</body>
|
||||||
@ -42,15 +42,14 @@ var category_block = {
|
|||||||
|
|
||||||
var instructions_block = {
|
var instructions_block = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'><p>Press E for:<br> " +
|
text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" +
|
||||||
"<strong>OLD</strong></p></div>" + "<div style='position: fixed; right: 100px; top: 80px;'><p>Press I for:<br>" + "<strong>YOUNG</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; width: 900px;'>" +
|
"<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 " +
|
||||||
"<p>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 " +
|
"<strong>I</strong> key for items that belong to the Young People " +
|
||||||
"category. Items will appear one at a time.<br><br>" + "If you " +
|
"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 " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p></div>",
|
"Press the any key when you are ready to start.</div>",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -61,7 +60,7 @@ var trial_block = {
|
|||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
is_html: false,
|
is_html: false,
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -74,18 +73,18 @@ var trial_block = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
timeline_variables: [
|
timeline_variables: [
|
||||||
{stimulus: "age/of1.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/of1.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/of2.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/of2.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/of3.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/of3.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/om1.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/om1.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/om2.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/om2.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/om3.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/om3.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/yf1.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/yf1.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/yf4.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/yf4.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/yf5.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/yf5.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/ym2.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/ym2.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/ym3.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/ym3.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/ym5.jpg", stim_key_association: "right"}
|
{stimulus: "img/age/ym5.jpg", stim_key_association: "right"}
|
||||||
],
|
],
|
||||||
randomize_order: true,
|
randomize_order: true,
|
||||||
repititions: 2
|
repititions: 2
|
||||||
@ -93,17 +92,15 @@ var trial_block = {
|
|||||||
|
|
||||||
var instructions_block2 = {
|
var instructions_block2 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press E for:<br> " +
|
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" +
|
||||||
"<strong>BAD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
|
"<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" +
|
||||||
"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 " +
|
||||||
"<div style='position: relative; width: 900px;'>" +
|
|
||||||
"<p>Put a left finger on the <strong>E</strong> key for items that " +
|
|
||||||
"belong to the Bad category. Put a right finger on the " +
|
"belong to the Bad category. Put a right finger on the " +
|
||||||
"<strong>I</strong> key for items that belong to the Good " +
|
"<strong>I</strong> key for items that belong to the Good " +
|
||||||
"category. Items will appear one at a time.<br><br>" + "If you " +
|
"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 " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p></div>",
|
"Press the any key when you are ready to start.</div>",
|
||||||
};
|
};
|
||||||
|
|
||||||
var trial_block2 = {
|
var trial_block2 = {
|
||||||
@ -113,7 +110,7 @@ var trial_block2 = {
|
|||||||
is_html: true,
|
is_html: true,
|
||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -149,15 +146,15 @@ var trial_block2 = {
|
|||||||
|
|
||||||
var instructions_block3 = {
|
var instructions_block3 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " +
|
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: fixed; right: 100px; top: 80px;'>" +
|
"<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>" +
|
"Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
|
||||||
"<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for " +
|
"<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>" +
|
"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 " +
|
"Each item belongs to only one category.<br><br>" + "If you " +
|
||||||
"make a mistake, a red X will appear. Press the keys listed below " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p>",
|
"Press the any key when you are ready to start.</div>",
|
||||||
};
|
};
|
||||||
|
|
||||||
var trial_block3 = {
|
var trial_block3 = {
|
||||||
@ -167,7 +164,7 @@ var trial_block3 = {
|
|||||||
is_html: jsPsych.timelineVariable('is_html'),
|
is_html: jsPsych.timelineVariable('is_html'),
|
||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -180,18 +177,18 @@ var trial_block3 = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
timeline_variables: [
|
timeline_variables: [
|
||||||
{stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym5.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: "Humiliate", stim_key_association: "left", is_html: true},
|
||||||
{stimulus: "Evil", 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: "Grief", stim_key_association: "left", is_html: true},
|
||||||
@ -215,15 +212,15 @@ var trial_block3 = {
|
|||||||
|
|
||||||
var instructions_block4 = {
|
var instructions_block4 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " +
|
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: fixed; right: 100px; top: 80px;'>" +
|
"<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>" +
|
"Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
|
||||||
"<p style='padding-top: 100px'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " +
|
"<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>" +
|
"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 " +
|
"Each item belongs to only one category.<br><br>" + "If you " +
|
||||||
"make a mistake, a red X will appear. Press the keys listed below " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p>",
|
"Press the any key when you are ready to start.</div>",
|
||||||
};
|
};
|
||||||
|
|
||||||
var trial_block4 = {
|
var trial_block4 = {
|
||||||
@ -233,7 +230,7 @@ var trial_block4 = {
|
|||||||
is_html: jsPsych.timelineVariable('is_html'),
|
is_html: jsPsych.timelineVariable('is_html'),
|
||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -246,18 +243,18 @@ var trial_block4 = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
timeline_variables: [
|
timeline_variables: [
|
||||||
{stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym5.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: "Humiliate", stim_key_association: "left", is_html: true},
|
||||||
{stimulus: "Evil", 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: "Grief", stim_key_association: "left", is_html: true},
|
||||||
@ -281,13 +278,13 @@ var trial_block4 = {
|
|||||||
|
|
||||||
var instructions_block5 = {
|
var instructions_block5 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>YOUNG</strong></div>" +
|
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>YOUNG</strong></div>" +
|
||||||
"<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>OLD</strong></div>" +
|
"<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>OLD</strong></div>" +
|
||||||
"<p style='padding-top: 100px'>Watch out, the labels have changed positions!<br>" +
|
"<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>" +
|
"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 " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p>"
|
"Press the any key when you are ready to start.</div>"
|
||||||
};
|
};
|
||||||
|
|
||||||
var trial_block5 = {
|
var trial_block5 = {
|
||||||
@ -297,7 +294,7 @@ var trial_block4 = {
|
|||||||
is_html: false,
|
is_html: false,
|
||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -310,18 +307,18 @@ var trial_block4 = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
timeline_variables: [
|
timeline_variables: [
|
||||||
{stimulus: "age/of1.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/of1.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/of2.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/of2.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/of3.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/of3.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/om1.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/om1.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/om2.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/om2.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/om3.jpg", stim_key_association: "right"},
|
{stimulus: "img/age/om3.jpg", stim_key_association: "right"},
|
||||||
{stimulus: "age/yf1.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/yf1.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/yf4.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/yf4.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/yf5.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/yf5.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/ym2.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/ym2.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/ym3.jpg", stim_key_association: "left"},
|
{stimulus: "img/age/ym3.jpg", stim_key_association: "left"},
|
||||||
{stimulus: "age/ym5.jpg", stim_key_association: "left"}
|
{stimulus: "img/age/ym5.jpg", stim_key_association: "left"}
|
||||||
],
|
],
|
||||||
randomize_order: true,
|
randomize_order: true,
|
||||||
repititions: 2
|
repititions: 2
|
||||||
@ -329,14 +326,14 @@ var trial_block4 = {
|
|||||||
|
|
||||||
var instructions_block6 = {
|
var instructions_block6 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
|
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: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>GOOD</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>" +
|
"<strong>YOUNG</strong></div>" +
|
||||||
"<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for Old People<br>" +
|
"<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>" +
|
"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 " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p>"
|
"Press the any key when you are ready to start.</div>"
|
||||||
};
|
};
|
||||||
|
|
||||||
var trial_block6 = {
|
var trial_block6 = {
|
||||||
@ -346,7 +343,7 @@ var trial_block4 = {
|
|||||||
is_html: jsPsych.timelineVariable('is_html'),
|
is_html: jsPsych.timelineVariable('is_html'),
|
||||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||||
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
stim_key_association: jsPsych.timelineVariable('stim_key_association'),
|
||||||
image_when_wrong: 'redX.png',
|
image_when_wrong: 'img/redX.png',
|
||||||
wrong_image_name: 'red X',
|
wrong_image_name: 'red X',
|
||||||
display_feedback: true,
|
display_feedback: true,
|
||||||
timing_response: 3000, //Only if display_feedback is false
|
timing_response: 3000, //Only if display_feedback is false
|
||||||
@ -358,18 +355,18 @@ var trial_block4 = {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
timeline_variables: [
|
timeline_variables: [
|
||||||
{stimulus: "age/of1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/of3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/of3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om1.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om1.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om2.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om2.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/om3.jpg", stim_key_association: "left", is_html: false},
|
{stimulus: "img/age/om3.jpg", stim_key_association: "left", is_html: false},
|
||||||
{stimulus: "age/yf1.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf1.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf4.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf4.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/yf5.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/yf5.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym2.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym2.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym3.jpg", stim_key_association: "right", is_html: false},
|
{stimulus: "img/age/ym3.jpg", stim_key_association: "right", is_html: false},
|
||||||
{stimulus: "age/ym5.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: "Humiliate", stim_key_association: "left", is_html: true},
|
||||||
{stimulus: "Evil", 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: "Grief", stim_key_association: "left", is_html: true},
|
||||||
@ -393,16 +390,16 @@ var trial_block4 = {
|
|||||||
|
|
||||||
var instructions_block7 = {
|
var instructions_block7 = {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
|
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: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>Good</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>" +
|
"<strong>Young People</strong></div>" +
|
||||||
"<p style='padding-top: 100px'>This is the same as the previous part<br>" +
|
"<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>E</strong> for Bad and for Old People<br>" +
|
||||||
"Use <strong>I</strong> for Good and for Young People<br>" +
|
"Use <strong>I</strong> for Good and for Young People<br>" +
|
||||||
"Each item belongs to only one category<br><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 " +
|
"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> " +
|
"to continue. Go as fast as you can while being accurate.<br><br> " +
|
||||||
"Press the any key when you are ready to start.</p>"
|
"Press the any key when you are ready to start.</div>"
|
||||||
};
|
};
|
||||||
|
|
||||||
var debrief_block = {
|
var debrief_block = {
|
||||||
@ -422,29 +419,29 @@ var trial_block4 = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var timeline = [];
|
var timeline = [];
|
||||||
// timeline.push(welcome_block);
|
timeline.push(welcome_block);
|
||||||
// timeline.push(category_block);
|
timeline.push(category_block);
|
||||||
// timeline.push(instructions_block);
|
timeline.push(instructions_block);
|
||||||
// timeline.push(trial_block);
|
timeline.push(trial_block);
|
||||||
// timeline.push(instructions_block2);
|
timeline.push(instructions_block2);
|
||||||
// timeline.push(trial_block2);
|
timeline.push(trial_block2);
|
||||||
// timeline.push(instructions_block3);
|
timeline.push(instructions_block3);
|
||||||
// timeline.push(trial_block3);
|
timeline.push(trial_block3);
|
||||||
timeline.push(instructions_block4);
|
timeline.push(instructions_block4);
|
||||||
timeline.push(trial_block4);
|
timeline.push(trial_block4);
|
||||||
timeline.push(instructions_block5);
|
timeline.push(instructions_block5);
|
||||||
timeline.push(trial_block5);
|
timeline.push(trial_block5);
|
||||||
timeline.push(instructions_block6);
|
timeline.push(instructions_block6);
|
||||||
timeline.push(trial_block6);
|
timeline.push(trial_block6);
|
||||||
timeline.push(instructions_block7);
|
timeline.push(instructions_block7);
|
||||||
timeline.push(trial_block6);
|
timeline.push(trial_block6);
|
||||||
timeline.push(debrief_block);
|
timeline.push(debrief_block);
|
||||||
|
|
||||||
jsPsych.init({
|
jsPsych.init({
|
||||||
timeline: timeline,
|
timeline: timeline,
|
||||||
on_finish: function() {
|
on_finish: function() {
|
||||||
jsPsych.data.displayData();
|
jsPsych.data.displayData();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
@ -41,17 +41,17 @@
|
|||||||
trial.stim_key_association = trial.stim_key_association || 'undefined';
|
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.response_ends_trial = (typeof trial.response_ends_trial == 'undefined') ? true : trial.response_ends_trial;
|
||||||
trial.timing_response = trial.timing_response || 0;
|
trial.timing_response = trial.timing_response || 0;
|
||||||
trial.key_to_move_forward = trial.key_to_move_forward || jsPsych.ALL_KEYS;
|
trial.key_to_move_forward = trial.key_to_move_forward || [jsPsych.ALL_KEYS];
|
||||||
trial.is_html = (typeof trial.is_html == 'undefined') ? false : trial.is_html;
|
trial.is_html = (typeof trial.is_html == 'undefined') ? false : trial.is_html;
|
||||||
trial.prompt = trial.prompt || "";
|
trial.prompt = trial.prompt || "";
|
||||||
|
|
||||||
|
|
||||||
//Creates extra styling needed
|
//Creates extra styling needed
|
||||||
var node = display_element.innerHTML += "<style id='jspsych-iat-css'>";
|
//var node = display_element.innerHTML += "<style id='jspsych-iat-css'>";
|
||||||
var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" +
|
// var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" +
|
||||||
".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}"
|
// ".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}"
|
||||||
|
|
||||||
display_element.querySelector('#jspsych-iat-css').innerHTML = cssstr;
|
//display_element.querySelector('#jspsych-iat-css').innerHTML = cssstr;
|
||||||
|
|
||||||
//Get keys to continue and put them in a string
|
//Get keys to continue and put them in a string
|
||||||
var i;
|
var i;
|
||||||
@ -61,43 +61,43 @@
|
|||||||
keysToContinue += trial.key_to_move_forward[i] + ", ";
|
keysToContinue += trial.key_to_move_forward[i] + ", ";
|
||||||
}
|
}
|
||||||
|
|
||||||
var html_str = "";
|
var html_str = " ";
|
||||||
html_str += "<div style='position: relative; width: 100%; height: 100%' id='jspsych-iat-stim'>";
|
//html_str += "<div class='main_layout' style='position: relative; height: 100vh; width: 100vh' id='jspsych-iat-stim'>";
|
||||||
|
|
||||||
if (!trial.is_html) {
|
if (!trial.is_html) {
|
||||||
html_str += "<div style='position: relative; width: 100%; height: 100%'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
|
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 {
|
} else {
|
||||||
html_str += "<div style='position: relative; width: 100%; height: 100%'><p id='jspsych-iat-stim'>"+trial.stimulus+"</p></div>";
|
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: fixed; left: 100px; top: 80px;'>";
|
html_str += "<div id='trial_left_align' style='position: absolute; top: 18%; left: 20%'>";
|
||||||
|
|
||||||
if(trial.left_category_label.length == 1) {
|
if(trial.left_category_label.length == 1) {
|
||||||
html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
|
html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
|
||||||
trial.left_category_label[0].toUpperCase().bold() + "</p>";
|
trial.left_category_label[0].toUpperCase().bold() + "</p></div>";
|
||||||
} else {
|
} else {
|
||||||
html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
|
html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
|
||||||
trial.left_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
|
trial.left_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
|
||||||
trial.left_category_label[1].toUpperCase().bold() + "</p>";
|
trial.left_category_label[1].toUpperCase().bold() + "</p></div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
html_str += "</div><div id='trial_right_align' style='position: fixed; right: 100px; top: 80px;'>";
|
html_str += "<div id='trial_right_align' style='position: absolute; top: 18%; right: 20%'>";
|
||||||
|
|
||||||
if(trial.right_category_label.length == 1) {
|
if(trial.right_category_label.length == 1) {
|
||||||
html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
|
html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
|
||||||
trial.right_category_label[0].toUpperCase().bold() + '</p>';
|
trial.right_category_label[0].toUpperCase().bold() + '</p></div>';
|
||||||
} else {
|
} else {
|
||||||
html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
|
html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
|
||||||
trial.right_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
|
trial.right_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
|
||||||
trial.right_category_label[1].toUpperCase().bold() + "</p>";
|
trial.right_category_label[1].toUpperCase().bold() + "</p></div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
html_str += "</div><div id='wrongImg' style='position:relative; top: 100px'>";
|
html_str += "<div id='wrongImg' style='position:relative; top: 300px; margin-left: auto; margin-right: auto; left: 0; right: 0'>";
|
||||||
|
|
||||||
if(trial.display_feedback == true) {
|
if(trial.display_feedback == true) {
|
||||||
|
|
||||||
|
|
||||||
html_str += "<div id='wrongImgContainer' style='align:center'><img src='" + trial.image_when_wrong + "' style='visibility: hidden;' id='wrongImgID'></img></div>";
|
html_str += "<div id='wrongImgContainer' style='position: absolute; top: -75px; margin-left: auto; margin-right: auto; left: 0; right: 0'><img src='" + trial.image_when_wrong + "' style='visibility: hidden;' id='wrongImgID'></img></div>";
|
||||||
var wImg = document.getElementById("wrongImgID");
|
var wImg = document.getElementById("wrongImgID");
|
||||||
//wImg.style.visibility = "hidden";
|
//wImg.style.visibility = "hidden";
|
||||||
|
|
||||||
@ -118,7 +118,7 @@
|
|||||||
html_str += "<p>Trial will continue automatically.</p>";
|
html_str += "<p>Trial will continue automatically.</p>";
|
||||||
}
|
}
|
||||||
|
|
||||||
html_str += "</div></div>";
|
html_str += "</div>";
|
||||||
|
|
||||||
display_element.innerHTML += html_str;
|
display_element.innerHTML += html_str;
|
||||||
|
|
||||||
|
|||||||
201
tests/plugins/plugin-iat.test.js
Normal file
201
tests/plugins/plugin-iat.test.js
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
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'
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<img src="../media/blue.png" id="jspsych-iat-stim">');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('displays html when is_html is true', function(){
|
||||||
|
var trial = {
|
||||||
|
type: 'iat',
|
||||||
|
stimulus: '<p>hello</p>',
|
||||||
|
is_html: true
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stimu"><p>hello</p></div>');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('display should clear after key press', function(){
|
||||||
|
var trial = {
|
||||||
|
type: 'iat',
|
||||||
|
stimulus: '<p>hello</p>',
|
||||||
|
is_html: true
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('display should not clear after key press when choices is jsPsych.NO_KEYS', function(){
|
||||||
|
var trial = {
|
||||||
|
type: 'iat',
|
||||||
|
stimulus: '<p>hello</p>',
|
||||||
|
is_html: true,
|
||||||
|
choices: jsPsych.NO_KEYS
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('display should only clear when key is in choices array', function(){
|
||||||
|
var trial = {
|
||||||
|
type: 'iat',
|
||||||
|
stimulus: '<p>hello</p>',
|
||||||
|
is_html: true,
|
||||||
|
choices: ['f']
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
|
||||||
|
|
||||||
|
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>',
|
||||||
|
is_html: true,
|
||||||
|
prompt: '<div id="foo">this is the prompt</div>'
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div id="foo">this is the prompt</div>');
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
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,
|
||||||
|
timing_response: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div>');
|
||||||
|
|
||||||
|
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,
|
||||||
|
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).toBe('<div id="jspsych-iat-stim" class=" responded"><p>hello</p></div>');
|
||||||
|
|
||||||
|
jest.runAllTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should accept functions as parameters', function(){
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: 'iat',
|
||||||
|
stimulus: function(){ return '<p>hello</p>'; },
|
||||||
|
is_html: function(){ return true; },
|
||||||
|
choices: function(){ return ['j']; },
|
||||||
|
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).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 32}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 32}));
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
|
||||||
|
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keydown', {keyCode: 70}));
|
||||||
|
document.dispatchEvent(new KeyboardEvent('keyup', {keyCode: 70}));
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim"><p>hello</p></div><div>prompt</div>');
|
||||||
|
|
||||||
|
jest.runTimersToTime(500);
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('<div id="jspsych-iat-stim" style="visibility: hidden;"><p>hello</p></div><div>prompt</div>');
|
||||||
|
|
||||||
|
jest.runTimersToTime(1000);
|
||||||
|
|
||||||
|
expect(jsPsych.getDisplayElement().innerHTML).toBe('');
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user