HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

iat plugin example works

Browse Source
This commit is contained in:
KristinDiep 2017-07-10 15:08:29 -04:00
parent cbb0643a95
commit c46b9263aa
4 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/jspsych-html.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-html.js"></script> <script src="../plugins/jspsych-external-html.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body> <body></body>
@ -25,7 +25,7 @@
}; };
var consent_block = { var consent_block = {
type: "html", type: "external-html",
force_refresh: true, force_refresh: true,
url: "external_html/simple_consent.html", url: "external_html/simple_consent.html",
cont_btn: "start", cont_btn: "start",

149
examples/jspsych-iat.html
View File

@ -5,50 +5,51 @@
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-iat-image.js"></script> <script src="../plugins/jspsych-iat-image.js"></script>
<script src="../plugins/jspsych-iat-html.js"></script> <script src="../plugins/jspsych-iat-html.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link href="../css/jspsych.css" rel="stylesheet"></link> <link href="../css/jspsych.css" rel="stylesheet"></link>
</head> </head>
<body> <body>
</body> </body>
<script> <script>
// var welcome_block = { var welcome_block = {
// type: 'text', type: 'html-keyboard-response',
// text: '<p>Welcome to the Age Task. In this study you will ' + stimulus: '<p>Welcome to the Age Task. In this study you will ' +
// 'complete an Implicit Association Test (IAT) in which you ' + 'complete an Implicit Association Test (IAT) in which you ' +
// 'will be asked to sort pictures and words into groups as ' + 'will be asked to sort pictures and words into groups as ' +
// 'fast as you can.</p><p>Press any key to begin.</p>', 'fast as you can.</p><p>Press any key to begin.</p>',
// timing_post_trial: 1500 post_trial_gap: 1500
// }; };
// var category_block = { var category_block = {
// type: 'text', type: 'html-keyboard-response',
// text: '<p>Next, you will use the "E" and "I" computer keys ' + 'to categorize items into groups as fast as you can. ' + stimulus: '<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>' + 'These are the four groups and the items that belong to each:<br><br>' +
// '<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' + '<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' +
// 'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' + 'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' +
// 'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' + 'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' +
// '<strong>Old</strong>:<br>' + "<img src='img/age/of1.jpg'></img> " + '<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/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/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/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/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/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>" + "<img src='img/age/ym3.jpg'></img> " + "<img src='img/age/ym5.jpg'></img><br><br>" +
// "Press any key to continue.</p>", "Press any key to continue.</p>",
// timing_post_trial: 1500 post_trial_gap: 1500
// }; };
// var instructions_block = { var instructions_block = {
// type: 'text', type: 'html-keyboard-response',
// text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" + stimulus: "<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: 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 " + "<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 " + "<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.</div>", "Press the any key when you are ready to start.</div>",
// }; };
var trial_block = { var trial_block = {
@ -61,7 +62,7 @@ var trial_block = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['OLD'], left_category_label: ['OLD'],
@ -85,12 +86,12 @@ var trial_block = {
{stimulus: "img/age/ym5.jpg", stim_key_association: "right"} {stimulus: "img/age/ym5.jpg", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repetitions: 2
}; };
var instructions_block2 = { var instructions_block2 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" + stimulus: "<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: 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 " + "<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 " + "belong to the Bad category. Put a right finger on the " +
@ -111,7 +112,7 @@ var trial_block2 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['BAD'], left_category_label: ['BAD'],
@ -139,12 +140,12 @@ var trial_block2 = {
{stimulus: "Joyous", stim_key_association: "right"} {stimulus: "Joyous", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repetitions: 2
}; };
var instructions_block3 = { var instructions_block3 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + stimulus: "<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%'>" + "<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>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " +
@ -165,7 +166,7 @@ var trial_block3 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['BAD', 'OLD'], left_category_label: ['BAD', 'OLD'],
@ -205,12 +206,12 @@ var trial_block3 = {
{type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"} {type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 1 repetitions: 1
}; };
var instructions_block4 = { var instructions_block4 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + stimulus: "<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%'>" + "<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>" +
"<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 " + "<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 " +
@ -232,7 +233,7 @@ var trial_block4 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['BAD', 'OLD'], left_category_label: ['BAD', 'OLD'],
@ -272,12 +273,12 @@ var trial_block4 = {
{type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"} {type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repetitions: 2
}; };
var instructions_block5 = { var instructions_block5 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>YOUNG</strong></div>" + stimulus: "<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: 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>" + "<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>" +
@ -297,7 +298,7 @@ var trial_block4 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['YOUNG'], left_category_label: ['YOUNG'],
@ -321,12 +322,12 @@ var trial_block4 = {
{type: 'iat-image', stimulus: "img/age/ym5.jpg", stim_key_association: "left"} {type: 'iat-image', stimulus: "img/age/ym5.jpg", stim_key_association: "left"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repetitions: 2
}; };
var instructions_block6 = { var instructions_block6 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>BAD</strong><br>" + "or<br>" + stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
"<strong>YOUNG</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: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
"<strong>OLD</strong></div>" + "<strong>OLD</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for Young People<br>" + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for Young People<br>" +
@ -346,7 +347,7 @@ var trial_block4 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['BAD', 'YOUNG'], left_category_label: ['BAD', 'YOUNG'],
@ -386,12 +387,12 @@ var trial_block4 = {
{type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"} {type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 1 repetitions: 1
}; };
var instructions_block7 = { var instructions_block7 = {
type: 'text', type: 'html-keyboard-response',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" + stimulus: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
"<strong>Young 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: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
"<strong>Old People</strong></div>" + "<strong>Old People</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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>" +
@ -414,7 +415,7 @@ var trial_block7 = {
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false trial_duration: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['BAD', 'YOUNG'], left_category_label: ['BAD', 'YOUNG'],
@ -454,12 +455,12 @@ var trial_block7 = {
{type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"} {type: 'iat-html', stimulus: "Joyous", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repetitions: 2
}; };
var debrief_block = { var debrief_block = {
type: "text", type: "html-keyboard-response",
text: function() { stimulus: function() {
// calculate D-score from https://faculty.washington.edu/agg/pdf/GB&N.JPSP.2003.pdf // calculate D-score from https://faculty.washington.edu/agg/pdf/GB&N.JPSP.2003.pdf
// first find mean RT // first find mean RT
var bad_old = jsPsych.data.get().filter({iat_type: 'bad-old'}).filterCustom(function(x) { return x.rt < 10000 }); var bad_old = jsPsych.data.get().filter({iat_type: 'bad-old'}).filterCustom(function(x) { return x.rt < 10000 });
@ -481,23 +482,23 @@ var trial_block7 = {
}; };
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_block7); timeline.push(trial_block7);
// timeline.push(debrief_block); timeline.push(debrief_block);
jsPsych.init({ jsPsych.init({
timeline: timeline, timeline: timeline,

2
plugins/jspsych-iat-html.js
View File

@ -92,7 +92,7 @@
no_function: false, no_function: false,
description: '' description: ''
}, },
timing_response: { trial_duration: {
type: jsPsych.plugins.parameterType.INT, type: jsPsych.plugins.parameterType.INT,
default: -1, default: -1,
no_function: false, no_function: false,

2
plugins/jspsych-iat-image.js
View File

@ -94,7 +94,7 @@
no_function: false, no_function: false,
description: '' description: ''
}, },
timing_response: { trial_duration: {
type: jsPsych.plugins.parameterType.INT, type: jsPsych.plugins.parameterType.INT,
default: -1, default: -1,
no_function: false, no_function: false,