-
Notifications
You must be signed in to change notification settings - Fork 0
/
Exp4 - Odile - IAT.html
808 lines (740 loc) · 38.6 KB
/
Exp4 - Odile - IAT.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exp</title>
<script src="jspsych-6.2.0/jspsych.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-fullscreen.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-image-keyboard-response.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-survey-text.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-html-button-response.js"></script>
<script src="jspsych-6.2.0/plugins/jspsych-survey-likert.js"></script>
<script src="js/jspsych-categorize-html-mat.js"></script>
<script src="js/jspsych-iat-html-mat.js"></script>
<script src="js/jquery.min.js"></script> <!-- https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js -->
<script src="js/lodash.min.js"></script> <!-- https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js -->
<script src="js/firebase.js"></script> <!-- https://www.gstatic.com/firebasejs/5.0.4/firebase.js -->
<link href="jspsych-6.2.0/css/jspsych.css" rel="stylesheet" type="text/css">
<style>
.stimulus {
font-size: 32px;
}
.feedback {
font-size: 25px;
}
.jspsych-content-wrapper {
width: 900px !important;
height: 700px !important;
}
#jspsych-iat-stim {
margin: 0;
padding: 0;
height: 75px;
font-size: 25px;
}
.small_img > img {
max-height: 75px;
}
</style>
</head>
<script>
/* Parameters */
var qlink = "https://uclpsychology.co1.qualtrics.com/jfe/form/SV_3KjlDtYnGMiLB3g";
var primeDuration = 17; // 76 hz (13ms); 2 frames = 13*2 ms
var cond = jsPsych.data.getURLVariable("cond");
// if (cond == null) { cond = _.sampleSize(["bogus", "control"], 1)[0] };
cond = "bogus";
/* Initial variables */
var timeline = [];
var id = jsPsych.data.getURLVariable("id");
if (id == null) { id = jsPsych.randomization.randomID(15) };
// Consent ---------------------------------------------------------------------------------------------------------------
/* Fullscreen mode */
var activeFullscreen = {
message: function () {
html = "";
html += "<h1>Informed Consent</h1>";
html += "<p class='justify'>In this study, ";
html += "you will be asked to complete a reaction time task and to fill in a brief survey. ";
html += "It is important that you remain fully <b>concentrated</b>.</p>";
html += "<p class='justify'>Your participation is voluntary, does not imply any risks, your answers will be ";
html += "anonymous, and you are free to withdraw from the study at any moment. After full completion, ";
html += "and if you do not fail more than one of the <b>attention checks</b>, ";
html += "you will receive a <b>monetary compensation</b> as stated in the Prolific ";
html += "description of this experiment.</p>";
html += "<p class='justify'>This study is administrated by Mathias Schmitz (Postdoctoral researcher) ";
html += "at the UCLouvain (Belgium). ";
html += "If you have any question or comment, please feel free to contact me at "
html += "<b>[email protected]</b></p></br></br>";
return html;
},
button_label: "I agree to take part in this study",
type: 'fullscreen',
fullscreen_mode: true,
delay_after: 200,
};
// IAT instructions ------------------------------------------------------------------------------------------------------
var inst1 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: function () {
var html = "";
html += "<h1>Measuring attitudes with the Implicit Association Test (IAT)</h1>";
html += "<p class='justify'>This study is about measuring genuine attitudes (emotions or beliefs about a person or a group) ";
html += "and is carried out by four international researchers from the Netherlands, US, Germany, and Belgium. ";
html += "Its aim is to test if people are able to access to their genuine (true) attitude.</br></br>";
html += "Specifically, you will first take a new version of the <b>Implicit Association Test</b> ";
html += "or <b>IAT</b> for short. This test aims to measure people’s genuine personal attitudes.</br></br>";
html += "In the second part, you will complete a follow-up study. ";
html += "This study is designed to check if you are able to report your ";
html += "own true attitude as revealed by means of the IAT.</p>";
return html;
}
};
// IAT --------------------------------------------------------------------------------------------------------------
// parameters
var left_key = "S";
var right_key = "L";
var label_good_bad = ['good', 'bad'];
var label_black_white = ['elderly/disabled people', 'people in general'];
var IATstims_black = [
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/old_1.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/old_2.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/old_3.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/old_4.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/disabled_1.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/disabled_2.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/disabled_3.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[0], stimulus: "<img src='imgbogus/disabled_4.png' height='120px'>" },
];
var IATstims_white = [
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_1.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_2.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_3.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_4.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_5.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_6.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_7.png' height='120px'>" },
{ categories: "black_white", category: label_black_white[1], stimulus: "<img src='imgbogus/general_8.png' height='120px'>" },
];
var IATstims_good = [
{ categories: "good_bad", category: label_good_bad[0], stimulus: "lovely" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "fantastic" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "joyful" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "valuable" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "fabulous" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "excellent" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "successful" },
{ categories: "good_bad", category: label_good_bad[0], stimulus: "precious" },
];
var IATstims_bad = [
{ categories: "good_bad", category: label_good_bad[1], stimulus: "failure" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "sadness" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "worthless" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "insanity" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "tragic" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "horrific" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "awful" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "selfish" },
{ categories: "good_bad", category: label_good_bad[1], stimulus: "scorn" },
];
var IATstims_blackWhite = _.flattenDeep([IATstims_black, IATstims_white]);
var IATstims_goodBad = _.flattenDeep([IATstims_good, IATstims_bad]);
// block trials Function Left key Right key
// 1 20 Practice White Black
// 2 20 Practice Good Bad
// 3 20 Practice Good & White Bad & Black
// 4 40 Test Good & White Bad & Black
// 5 20 Practice Black White
// 6 20 Practice Good & Black Bad & White
// 7 40 Test Good & Black Bad & White
// Note. For half the subjects, the positions of Blocks 1, 3, and 4 are
// switched with those of Blocks 5, 6, and 7, respectively.
// The procedure in Blocks 3, 4, 6, and 7 is to alternate trials that present either
// a pleasant or an unpleasant word with trials that presented either a White or Black image.
// keys html
var left_key_html = "<span class='light-keys'><kbd>" + left_key + "</kbd></span>";
var right_key_html = "<span class='light-keys'><kbd>" + right_key + "</kbd></span>";
// randomize label side
label_good_bad = _.shuffle(label_good_bad);
label_black_white = _.shuffle(label_black_white);
// generate labels
var block_1_label_left = label_black_white[0];
var block_1_label_right = label_black_white[1];
var block_2_label_left = label_good_bad[0];
var block_2_label_right = label_good_bad[1];
var block_3_label_left_top = label_black_white[0];
var block_3_label_left_bot = label_good_bad[0];
var block_3_label_right_top = label_black_white[1];
var block_3_label_right_bot = label_good_bad[1];
var block_4_label_left_top = block_3_label_left_top;
var block_4_label_left_bot = block_3_label_left_bot;
var block_4_label_right_top = block_3_label_right_top;
var block_4_label_right_bot = block_3_label_right_bot;
var block_5_label_left = label_black_white[1];
var block_5_label_right = label_black_white[0];
var block_6_label_left_top = label_black_white[1];
var block_6_label_left_bot = label_good_bad[0];
var block_6_label_right_top = label_black_white[0];
var block_6_label_right_bot = label_good_bad[1];
var block_7_label_left_top = block_6_label_left_top;
var block_7_label_left_bot = block_6_label_left_bot;
var block_7_label_right_top = block_6_label_right_top;
var block_7_label_right_bot = block_6_label_right_bot;
// general instructions
var IATinst_1 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: function () {
var html = "";
html += "<h1>IAT - Instructions</h1>";
html += "<p class='justify'>In this task, you will be presented with a set of words or icons and ";
html += "you will have to sort them into categories as <b>quickly</b> as you can ";
html += "while trying to make as <b>few mistakes as possible</b>. Going too slowly or ";
html += "making too many mistakes will make your result uninterpretable.</br></br>";
html += "You will have to classify the words according to whether they are <b>good</b> or <b>bad</b>, ";
html += "and the icons according to whether they refer to <b>elderly/disabled people</b> or <b>people in general</b>. ";
html += "On the following slide we will present you these categories of words and icons.</p></br>";
html += "<h3 style='text-align: left'>Keep in mind</h3>";
html += "<p class='justify'>• The two labels at the top of your screen will tell you which words or icons go with each key.</br>";
html += "• Keep your left index finger on the <span class='light-keys'><kbd>S</span> key and the right index finger ";
html += "on the <span class='light-keys'><kbd>L</span> key so you can respond quickly.</br>";
html += "• Every word or icon has a correct classification. Most of these are easy.</br>";
html += "• Try to be as fast as possible.</br>";
html += "• Expect to make a few mistakes because you're going fast. That's okay.</p>";
return html;
},
on_load: function () {
$('.jspsych-content-wrapper').css({ "width": "900px" });
$('.jspsych-content').css({ "max-width": "90%" });
},
};
var IATinst_2 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: function () {
var html = "";
html += "<h1>IAT - Instructions</h1>";
html += "<p class='justify'><center>Here are the four categories and the words/icons belonging to each category:</center></p></br>";
html += "<table>";
html += "<tr>";
html += "<th width='200px' align='left'>Category</th>";
html += "<th align='left'>Word/Icon</th>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Good</td>";
html += "<td align='left'>" + IATstims_good.map(function (e) { return e.stimulus; }).join(", ") + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Bad</td>";
html += "<td align='left'>" + IATstims_bad.map(function (e) { return e.stimulus; }).join(", ") + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Elderly/disabled people</td>";
html += "<td class='small_img' align='left'>" + IATstims_black.map(function (e) { return e.stimulus; }).join(", ") + "</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>People in general</td>";
html += "<td class='small_img' align='left'>" + IATstims_white.map(function (e) { return e.stimulus; }).join(", ") + "</td>";
html += "</tr>";
html += "</table></br>";
return html;
}
};
// blocks instructions
var IATinst_block_1 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_1_label_left.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_1_label_right.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Put your index or middle fingers on the " + left_key_html + " and " +
right_key_html + " keys of your keyboard. <span class='iat_color_black'>Words</span> belonging to the categories indicated at the top of your screen will appear " +
"in the middle of the screen. When the item belongs to a category on the left, press the " + left_key_html + " key; " +
"when the item belongs to a category on the right, press the " + right_key_html + " key.</br></br>" +
"The items belong to one category only. If you make a mistake, a red " +
"<span style='color: red'>X</span> will appear; ccorrect the mistake by pressing the other key.</br></br>" +
"The speed of your responses to this classification task is important. " +
"Go as <b>fast</b> as possible while making as <b>few mistakes</b> as possible. " +
"If you go too slowly or make too many mistakes, it will produce an uninterpretable score. " +
"This task will take about 2 minutes.</p>",
on_load: function () {
$('#jspsych-content').css({ "max-width": "100%" });
$('#jspsych-content').css({ "margin": "0px" });
$('#jspsych-content').css({ "width": "900px" });
},
};
var IATinst_block_2 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_green'>" + block_2_label_left.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_green'>" + block_2_label_right.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Regardez ci-dessus; les <b>catégories ont changé</b>. Les <span class='iat_color_green'>mots</span> à classer ont changé également. " +
"La façon de procéder, par contre, est toujours la même.</br></br>" +
"Quand l'item appartient à une catégorie sur la gauche, pressla touche " + left_key_html + "; " +
"lorsque l'item appartient à une catégorie sur la droite, pressla touche " + right_key_html + ".</br></br>" +
"Les items appartiennent à une seule catégorie. Si vous faites une erreur, un " +
"<span style='color: red'>X</span> rouge apparaîtra; corrigez l'erreur en pressant l'autre touche.</br></br>" +
"La rapidité de vos réponses à cette tâche de classification est importante. " +
"Allez <b>aussi vite que possible</b> tout en faisant aussi peu d'erreurs que possible.</p>",
};
var IATinst_block_3 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_3_label_left_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_3_label_left_bot.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_3_label_right_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_3_label_right_bot.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Look at the top. <b>Four</b> (instead of two) categories are now displayed. " +
"Remember that each item belong to only one of these categories.</br></br>" +
"Your task is the same, use the " + left_key_html + " and " + right_key_html + " keys to classify the items " +
"in the four categories displayed on the top-<b>left</b> or right <b>right</b> of your screen, " +
"and correct any mistake by pressing the other key.</p>",
};
var IATinst_block_4 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_4_label_left_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_4_label_left_bot.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_4_label_right_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_4_label_right_bot.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Classez à nouveau les quatres mêmes catégories. Rappelez-vous d'aller aussi vite que possible tout en faisant " +
"aussi peu d'erreurs que possible.</br></br>" +
"Les labels et items <span class='iat_color_green'>verts</span> et <span class='iat_color_black'>noirs</span> " +
"devraient vous aider à identifier la catégorie pertinente. " +
"Utilisez les touches " + left_key_html + " et " + right_key_html + " pour catégoriser les items dans " +
"les quatres groupes figurant à <b>gauche</b> ou à <b>droite</b>, " +
"et corrigez les erreurs en pressant l'autre touche.</p>",
};
var IATinst_block_5 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_5_label_left.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_5_label_right.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Look at the top: <b>the categories have now changed place</b>. " +
"The categories that were previously on the left are now on the right side. " +
"Your task is the same, use the " + left_key_html + " and " + right_key_html + " keys to classify the items " +
"in the four categories displayed on the top-<b>left</b> or right <b>right</b> of your screen, " +
"and correct any mistake by pressing the other key.</p>"
};
var IATinst_block_6 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_6_label_left_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_6_label_left_bot.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_6_label_right_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_6_label_right_bot.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Look at the top: <b>the categories have now changed place</b>. " +
"Some of the categories that were previously on the left are now on the right side. " +
"Your task is the same, use the " + left_key_html + " and " + right_key_html + " keys to classify the items " +
"in the four categories displayed on the top-<b>left</b> or right <b>right</b> of your screen, " +
"and correct any mistake by pressing the other key.</p>"
};
var IATinst_block_7 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: "<table class='iat_table' style='width: 100%; table-layout: fixed;'>" +
"<tr>" +
"<td style='width: 20%;'><p>Press " + left_key_html + " for:</br><span class='iat_color_black'>" + block_7_label_left_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_7_label_left_bot.bold() + "</span></td>" +
"<td></td>" +
"<td style='width: 20%;'><p>Press " + right_key_html + " for:</br><span class='iat_color_black'>" + block_7_label_right_top.bold() +
"</span></br>or</br><span class='iat_color_green'>" + block_7_label_right_bot.bold() + "</span></td>" +
"</tr>" +
"</table>" +
"</br></br></br></br></br></br></br></br>" +
"<p class='justify' style='padding: 0 40px 0 40px;'>" +
"Classez à nouveau les quatres mêmes catégories. Rappelez-vous d'aller aussi vite que possible tout en faisant " +
"aussi peu d'erreurs que possible.</br></br>" +
"Les labels et items <span class='iat_color_green'>verts</span> et <span class='iat_color_black'>noirs</span> " +
"devraient vous aider à identifier la catégorie pertinente. " +
"Utilisez les touches " + left_key_html + " et " + right_key_html + " pour catégoriser les items dans " +
"les quatres groupes figurant à <b>gauche</b> ou à <b>droite</b>, " +
"et corrigez les erreurs en pressant l'autre touche.</p>"
};
// IAT functions
var shuffleIATstims = function (stims) {
// Alterenate categories blackWhite vs. goodBad
var n = stims.length / 2;
var chunkedStims = _.chunk(stims, n);
var stims1 = jsPsych.randomization.shuffleNoRepeats(chunkedStims[0]);
var stims2 = jsPsych.randomization.shuffleNoRepeats(chunkedStims[1]);
var stims12 = stims1.map(function (e, i) { // merge two arrays so that the values alternate
return [e, stims2[i]];
});
var stims21 = stims2.map(function (e, i) {
return [e, stims1[i]];
});
var t = _.sample([stims12, stims21]);
t = _.flattenDeep(t);
return t;
};
var genIATblock = function (stims) {
var trial_block = {
timeline_variables: stims,
timeline: [{
type: 'iat-html',
stimulus: function () {
if (jsPsych.timelineVariable('category', true) == label_good_bad[0] | jsPsych.timelineVariable('category', true) == label_good_bad[1]) {
return "<span class='iat_color_green'>" + jsPsych.timelineVariable('stimulus', true) + "</span>";
} else {
return "<span class='iat_color_black'>" + jsPsych.timelineVariable('stimulus', true) + "</span>";
};
},
html_when_wrong: '<span style="color: red; font-size: 50px">X</span>',
stim_key_association: jsPsych.timelineVariable('correct_key'),
bottom_instructions: "<p>If you press the wrong key an <span style='color: red'>X</span> will appear. Press the other key to continue.</p>",
force_correct_key_press: true,
display_feedback: true,
left_category_key: left_key,
right_category_key: right_key,
left_category_label: function () {
var label = jsPsych.timelineVariable('labels_left', true);
if (label.length == 1) {
if (label[0] == label_good_bad[0] | label[0] == label_good_bad[1]) {
label[0] = "<span class='iat_color_green'>" + label[0] + "</span>";
} else {
label[0] = "<span class='iat_color_black'>" + label[0] + "</span>";
};
} else {
if (label[0] == label_good_bad[0] | label[0] == label_good_bad[1]) {
label[0] = "<span class='iat_color_green'>" + label[0] + "</span>";
} else {
label[0] = "<span class='iat_color_black'>" + label[0] + "</span>";
};
if (label[1] == label_good_bad[0] | label[1] == label_good_bad[1]) {
label[1] = "<span class='iat_color_green'>" + label[1] + "</span>";
} else {
label[1] = "<span class='iat_color_black'>" + label[1] + "</span>";
};
};
return label;
},
right_category_label: function () {
var label = jsPsych.timelineVariable('labels_right', true);
if (label.length == 1) {
if (label[0] == label_good_bad[0] | label[0] == label_good_bad[1]) {
label[0] = "<span class='iat_color_green'>" + label[0] + "</span>";
} else {
label[0] = "<span class='iat_color_black'>" + label[0] + "</span>";
};
} else {
if (label[0] == label_good_bad[0] | label[0] == label_good_bad[1]) {
label[0] = "<span class='iat_color_green'>" + label[0] + "</span>";
} else {
label[0] = "<span class='iat_color_black'>" + label[0] + "</span>";
};
if (label[1] == label_good_bad[0] | label[1] == label_good_bad[1]) {
label[1] = "<span class='iat_color_green'>" + label[1] + "</span>";
} else {
label[1] = "<span class='iat_color_black'>" + label[1] + "</span>";
};
};
return label;
},
response_ends_trial: true
}],
data: {
label_left_top: jsPsych.timelineVariable('label_left_top'),
label_left_bot: jsPsych.timelineVariable('label_left_bot'),
label_right_top: jsPsych.timelineVariable('label_right_top'),
label_right_bot: jsPsych.timelineVariable('label_right_bot'),
blockNum: jsPsych.timelineVariable('blockNum'),
type: jsPsych.timelineVariable('type'),
category: jsPsych.timelineVariable('category'),
categories: jsPsych.timelineVariable('categories'),
stimulus: jsPsych.timelineVariable('stimulus'),
task: "IAT",
},
on_load: function () {
$('#jspsych-content').css({ "max-width": "100%" });
$('#jspsych-content').css({ "margin": "0px" });
$('#jspsych-content').css({ "width": "900px" });
},
on_finish: function (data) {
console.log(jsPsych.data.getLastTrialData().json());
},
}
return trial_block;
};
// block stims
var block_1 = _.cloneDeep(IATstims_blackWhite);
block_1 = _.shuffle(block_1);
block_1.map(function (x) {
x.label_left_top = block_1_label_left;
x.label_left_bot = undefined;
x.label_right_top = block_1_label_right;
x.label_right_bot = undefined;
x.labels_left = [block_1_label_left];
x.labels_right = [block_1_label_right];
x.correct_key = x.category == x.labels_left[0] ? 'left' : 'right';
x.type = 'practice';
x.blockNum = 1;
});
var block_2 = _.cloneDeep(IATstims_goodBad);
block_2 = _.shuffle(block_2);
block_2.map(function (x) {
x.label_left_top = block_2_label_left;
x.label_left_bot = undefined;
x.label_right_top = block_2_label_right;
x.label_right_bot = undefined;
x.labels_left = [block_2_label_left];
x.labels_right = [block_2_label_right];
x.correct_key = x.category == x.labels_left[0] ? 'left' : 'right';
x.type = 'practice';
x.blockNum = 2;
});
var block_3 = _.flattenDeep([_.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_goodBad)]);
block_3 = shuffleIATstims(block_3);
block_3.map(function (x) {
x.label_left_top = block_3_label_left_top;
x.label_left_bot = block_3_label_left_bot;
x.label_right_top = block_3_label_right_top;
x.label_right_bot = block_3_label_right_bot;
x.labels_left = [block_3_label_left_top, block_3_label_left_bot];
x.labels_right = [block_3_label_right_top, block_3_label_right_bot];
x.correct_key = (x.category == x.labels_left[0] | x.category == x.labels_left[1]) ? 'left' : 'right';
x.type = 'practice';
x.blockNum = 3;
});
var block_4 = _.flattenDeep([_.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_goodBad), _.cloneDeep(IATstims_goodBad)]);
block_4 = shuffleIATstims(block_4);
block_4.map(function (x) {
x.label_left_top = block_4_label_left_top;
x.label_left_bot = block_4_label_left_bot;
x.label_right_top = block_4_label_right_top;
x.label_right_bot = block_4_label_right_bot;
x.labels_left = [block_4_label_left_top, block_4_label_left_bot];
x.labels_right = [block_4_label_right_top, block_4_label_right_bot];
x.correct_key = (x.category == x.labels_left[0] | x.category == x.labels_left[1]) ? 'left' : 'right';
x.type = 'test';
x.blockNum = 4;
});
var block_5 = _.cloneDeep(IATstims_blackWhite);
block_5 = _.shuffle(block_5);
block_5.map(function (x) {
x.label_left_top = block_5_label_left;
x.label_left_bot = undefined;
x.label_right_top = block_5_label_right;
x.label_right_bot = undefined;
x.labels_left = [block_5_label_left];
x.labels_right = [block_5_label_right];
x.correct_key = x.category == x.labels_left[0] ? 'left' : 'right';
x.type = 'practice';
x.blockNum = 5;
});
var block_6 = _.flattenDeep([_.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_goodBad)]);
block_6 = shuffleIATstims(block_6);
block_6.map(function (x) {
x.label_left_top = block_6_label_left_top;
x.label_left_bot = block_6_label_left_bot;
x.label_right_top = block_6_label_right_top;
x.label_right_bot = block_6_label_right_bot;
x.labels_left = [block_6_label_left_top, block_6_label_left_bot];
x.labels_right = [block_6_label_right_top, block_6_label_right_bot];
x.correct_key = (x.category == x.labels_left[0] | x.category == x.labels_left[1]) ? 'left' : 'right';
x.type = 'practice';
x.blockNum = 6;
});
var block_7 = _.flattenDeep([_.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_blackWhite), _.cloneDeep(IATstims_goodBad), _.cloneDeep(IATstims_goodBad)]);
block_7 = shuffleIATstims(block_7);
block_7.map(function (x) {
x.label_left_top = block_7_label_left_top;
x.label_left_bot = block_7_label_left_bot;
x.label_right_top = block_7_label_right_top;
x.label_right_bot = block_7_label_right_bot;
x.labels_left = [block_7_label_left_top, block_7_label_left_bot];
x.labels_right = [block_7_label_right_top, block_7_label_right_bot];
x.correct_key = (x.category == x.labels_left[0] | x.category == x.labels_left[1]) ? 'left' : 'right';
x.type = 'test';
x.blockNum = 7;
});
// generate IAT blocks
var IAT_block_1 = genIATblock(block_1);
var IAT_block_2 = genIATblock(block_2);
var IAT_block_3 = genIATblock(block_3);
var IAT_block_4 = genIATblock(block_4);
var IAT_block_5 = genIATblock(block_5);
var IAT_block_6 = genIATblock(block_6);
var IAT_block_7 = genIATblock(block_7);
var inst8 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: function () {
var html = "";
html += "<h1>IAT - How does it work?</h1>";
html += "<p class='justify'>Research has shown that this IAT task provides a very accurate measure of the person's genuine (true) attitudes ";
html += "(emotions or beliefs about a person or a group). It is <b>the closest 'tool' to the lie detector test</b> ";
html += "available today to determine your genuine attitudes.</br></br>";
html += "For example, researchers at the universities of ";
html += "Harvard (M. Banaji), Stanford (J. Eberhardt), Princeton (S. Fiske) have used it to measure ";
html += "people's genuine attitudes towards groups and showed that these responses predicted behaviour ";
html += "better than any other psychological measure.</br></br>";
html += "<i>How does it works?</i></br>";
html += "Because you are asked to respond very quickly, you have no control over your response. ";
html += "This is why the measurement is reliable and gives you access to your genuine attitudes, ";
html += "in a way that is devoid of the various strategies to hide 'real' underlying feelings ";
html += "(for example, making a positive judgment to give a good self-image).</br></br>";
html += "You will now be redirected to the second part of this study.</p>";
return html;
},
on_load: function () {
$('#jspsych-content').css({ "max-width": "95%" });
$('#jspsych-content').css({ "margin": "auto" });
},
};
var inst9 = {
type: 'html-keyboard-response',
choices: jsPsych.NO_KEYS,
trial_duration: 1000 * 25,
stimulus: function () {
var html = "";
html += "<h1>IAT - Calibration</h1>";
html += "<p class='justify'>Based on your responses, we are now verifying that the IAT has been calibrated correctly ";
html += "to measure your true attitudes. ";
html += "If the calibration fails, you will be asked to do a few more IAT trials to further calibrate the measure. ";
html += "If the calibration succeeds, then you will be redirected to the second part of this study.</br></br>";
html += "Please wait a few seconds while the program carries out the computation...</p></br>";
html += "<img src='img/loading2.gif' width = '80px'>";
return html;
}
};
var inst10 = {
type: "html-button-response",
post_trial_gap: 300,
choices: ['continue'],
stimulus: function () {
var html = "";
html += "<h1>IAT - Calibration result</h1>";
html += "<p class='justify'>The calibration succeeded to measure your true attitudes toward two social groups, ";
html += "namely, old people and disabled people.</br></br>";
html += " You will now be redirected to the second part of the study.</p></br>";
html += "<img src='imgbogus/check.png' width = '80px'></br></br>";
return html;
}
};
/* ~~~~~~~~~~~~~~~~ TIMELINES ~~~~~~~~~~~~~~~~ */
timeline.push(activeFullscreen); // yes
timeline.push(inst1); // yes
timeline.push(IATinst_1); // yes
timeline.push(IATinst_2); // yes
timeline.push(IATinst_block_1); // yes
timeline.push(IAT_block_1); // yes
// timeline.push(IATinst_block_2);
// timeline.push(IAT_block_2);
timeline.push(IATinst_block_3); // yes
timeline.push(IAT_block_3); // yes
// timeline.push(IATinst_block_4);
// timeline.push(IAT_block_4);
// timeline.push(IATinst_block_5);
// timeline.push(IAT_block_5);
timeline.push(IATinst_block_6); // yes
timeline.push(IAT_block_6); // yes
// timeline.push(IATinst_block_7);
// timeline.push(IAT_block_7);
timeline.push(inst8); // yes
// timeline.push(inst9);
// timeline.push(inst10);
/* ~~~~~~~~~~~~~~~~ INITIALISE EXP ~~~~~~~~~~~~~~~~ */
jsPsych.init({
timeline: timeline,
max_load_time: 60 * 1000,
preload_images: [
'imgbogus/disabled_1.png', 'imgbogus/disabled_2.png', 'imgbogus/disabled_3.png', 'imgbogus/disabled_4.png',
'imgbogus/old_1.png', 'imgbogus/old_2.png', 'imgbogus/old_3.png', 'imgbogus/old_4.png',
'imgbogus/general_1.png', 'imgbogus/general_2.png', 'imgbogus/general_3.png',
'imgbogus/general_4.png', 'imgbogus/general_5.png', 'imgbogus/general_6.png',
'imgbogus/general_7.png', 'imgbogus/general_8.png',
'imgbogus/check.png', 'img/loading.gif'
],
// exclusions: {
// min_width: 800,
// min_height: 600,
// },
on_interaction_data_update: function (data) {
//console.log(JSON.stringify(data)); // focus/blur data
},
on_finish: function (data) {
$("#jspsych-content").html("<img src='img/loading.gif'>");
/* Initialize Firebase */
var config = {
apiKey: "AIzaSyD4r9uWI4icto61fm2tC9neKdEiOUWzMJ8",
databaseURL: "https://biatw-68fe6.firebaseio.com/"
};
firebase.initializeApp(config);
var database = firebase.database();
/* Qualtrics url parameters */
qlink += "?id=" + id;
qlink += "&cond=" + cond;
qlink += "&jsTime=" + jsPsych.totalTime();
/* jsPsych: add data to every trial */
jsPsych.data.addProperties({
id: id,
cond: cond,
});
//jsPsych.data.displayData();
var dataIAT = data.filter({ task: 'IAT' }).csv();
/* Send data to Firebase and redirect to Qualtrics */
database.ref("bogus/IAT/" + id + "/")
.update({ dataIAT })
.then(function () {
console.log("dataAll sent!");
window.location = qlink; // redirect to qualtrics
});
}
});
</script>
</html>