-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
785 lines (697 loc) · 45.3 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<!-- online run-->
<!-- <script src="lib/vendors/jspsych-7.1.2/jspsych.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-html-keyboard-response.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-html-button-response.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-preload.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-fullscreen.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-instructions.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-survey-likert.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-survey-text.js"></script>
<script src="lib/vendors/jspsych-7.1.2/plugin-survey-multi-choice.js"></script>
<link rel="stylesheet" href="lib/vendors/jspsych-7.1.2/jspsych.css">
<link href="./css/my_exp.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="lib/jspsych-7-pavlovia-2022.1.1.js"></script> -->
<!-- local run -->
<script src="jspsych/dist/jspsych.js"></script>
<script src="jspsych/dist/plugin-html-keyboard-response.js"></script>
<script src="jspsych/dist/plugin-html-button-response.js"></script>
<script src="jspsych/dist/plugin-preload.js"></script>
<script src="jspsych/dist/plugin-instructions.js"></script>
<script src="jspsych/dist/plugin-survey-likert.js"></script>
<script src="jspsych/dist/plugin-survey-text.js"></script>
<script src="jspsych/dist/plugin-survey-multi-choice.js"></script>
<script src="jspsych/dist/plugin-fullscreen.js"></script>
<script src="jspsych/dist/plugin-html-slider-response.js"></script>
<script src="jspsych/dist/plugin-call-function.js"></script>
<link href="jspsych/dist/jspsych.css" rel="stylesheet" type="text/css" />
<link href="css/my_exp.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script>
var jsPsych = initJsPsych({
on_finish: function () {
download_csv(jsPsych.data.get().csv());
}
});
/*this defines the css properties according to the window_screen_size*/
var root = document.documentElement;
var vis_angle_px = 105
root.style.setProperty('--left_card', window.screen.width / 2 - 2 * vis_angle_px + "px");
root.style.setProperty('--right_card', window.screen.width / 2 - 2 * vis_angle_px + "px");
root.style.setProperty('--top_card', window.screen.height / 2 - 90 + "px");
root.style.setProperty('--top_reward', window.screen.height / 2 + "px");
root.style.setProperty('--left_reward', window.screen.width / 2 + "px");
/*----------------------------------------------------
Define experiment conditions
------------------------------------------------------*/
/*----------------------------------------------------
Define images
------------------------------------------------------*/
var practice_deck_images = ['images/practice_cards/p1.jpg', 'images/practice_cards/p2.jpg', 'images/practice_cards/p3.jpg', 'images/practice_cards/p4.jpg']
var test_deck_images = ['images/test_cards/f1.jpg', 'images/test_cards/f2.jpg', 'images/test_cards/f3.jpg', 'images/test_cards/f4.jpg', 'images/test_cards/f5.jpg', 'images/test_cards/f6.jpg', 'images/test_cards/f7.jpg', 'images/test_cards/f8.jpg'
, 'images/test_cards/f9.jpg', 'images/test_cards/f10.jpg', 'images/test_cards/f11.jpg', 'images/test_cards/f12.jpg','images/test_cards/f13.jpg', 'images/test_cards/f14.jpg', 'images/test_cards/f15.jpg', 'images/test_cards/f16.jpg']
var reward_images = ['images/zero_coins.png', 'images/won1-no-back1.png']
var instructions_images = ['images/example_deck.jpg', 'images/example_new.jpg', 'images/reward_example_new.jpg','images/no_reward_example.png','images/group_shapes.png','images/group_shapes_surprise.png','images/keyboard.png']
var fixation = '<div class="fixation">+</div>'
var logo = 'images/logo.png'
var is_confirm_trial;
var preload = {
type: jsPsychPreload,
images: practice_deck_images, test_deck_images, reward_images, instructions_images,
};
/*----------------------------------------------------
Start instructions
------------------------------------------------------*/
/*full screen */
var enter_fullscreen = {
type: jsPsychFullscreen,
message: '<p>This experiment will be in fullscreen mode. <br> <b>Please make sure your browser is on 100% zoom, and your keyboard is on the English language.</b></p>',
fullscreen_mode: true,
button_label: "Press here to confirm and get into fullscreen mode"
}
var instructions_cards = {
on_start: function () {
if (document.querySelector('#cursor-toggle') != null) {
document.querySelector('#cursor-toggle').remove()
}
},
type: jsPsychInstructions,
pages: ["<p ><b><u>Welcome to the <i>Card Game</i></u></b></p>"
+ "<p> Your winnings in this game will earn you an additional payment bonus for participating in this study.</p> "
+ "<p>In any case you will still receive <b>£2 for completing this study.</b></p>"
+ " <p>However, you can earn up to an <b>extra £0.5 based on your winnings in the game.</b></p>"
,
"<p style='text-align:left'> We will now provide instructions for the game. <b>Please read them carefully.</b> <br>"
+ "You can go back and forth between screens as needed.</p> ",
"<p style='text-align:left'> At the end of the instructions, <b>we will request that you complete a brief quiz</b>, to ensure everything is clearly understood.</p>",
"<p style='text-align:left'> Here is an example of a four-card deck as you will encounter in the game. </p>" +
"<img class='group' src= " + instructions_images[0] + ">",
"<p style='text-align:left'>During each step, you will be presented with a choice between two cards from the four-card deck."
+" To select the <b>left card</b>, press 's' on your keyboard, and to select the <b>right card</b>, press 'k'.</p><br>"
+ "<img class='example' src= " + instructions_images[1] + ">",
"<p style='text-align:left'>Once you made your card selection, you will <b>see the card you selected alongside an outcome</b> displayed in the center of the screen. <br>The outcome can either be <b>winning a golden coin</b>, as illustrated below...</p>"
+"<br> <img class='example' src= " + instructions_images[2] + ">",
"<p style='text-align:left'>Or it could be <b>not winning a coin, as presented here</b></p>"
+ "<br> <img class='example' src= " + instructions_images[3] + ">",
"<p style='text-align:left'> You will play <b>4 rounds of 50 choices each</b>. Every round will include <b>4 new cards</b>. The golden coins you earn will be exchanged for a <b>bonus</b> at the end of the experiment.</p>",
"<p style='text-align:left'> <b>Winning a coin depends only on the card you choose</b>."
+ "At any given time, some cards are worth more than others.</p>",
"<p style='text-align:left'>However, throughout the game <b>the demand for each card will slowly change</b>. Similar to how the demands of market products change.</p>",
"<p style='text-align:left'>Note that the <b>location of the cards (which one is on the left and which one is on the right) is completely random </b> and has nothing to do with their demand.</p>",
"Keep in mind that <b>each card has its own demand</b>, it could be that both offered cards have high demand or both have low demand. Learning about one card tells you nothing about the other cards.</p>",
"<p style='text-align:left'> Your task is to figure out <b>which cards have a higher demand at any given time</b> and select them.</p>"],
show_clickable_nav: true
};
var start_instructions_test = {
on_start: function () {
if (document.querySelector('#cursor-toggle') != null)
document.querySelector('#cursor-toggle').remove()
},
type: jsPsychHtmlKeyboardResponse,
stimulus: "<p> <br><br> You will now take a brief quiz to make sure that you understood the instructions. <b>If you make a mistake, you will need to review the instructions again.</b> Please scroll down until you answer all the questions. <br><br> <b> Press any key to continue</b></p>"
}
var numbers_options = ["2", "4", "6"];
var pressing_options = ["Click on it", "Press the LEFT or RIGHT arrow keys", "Press the `S` or `K` key with your LEFT or RIGHT hand"];
var true_false_options = ["True", "False"];
var cards_goal_options = ["The goal is to choose the best I can to earn as much bonus money as I can", "The goal is to pick similar cards"]
var card_keys_options = ["True - the response keys are related to coins winning chances", "False - you won't win more or less using RIGHT or LEFT response keys. Only the cards are related to your chances of winning coins"];
var instructions_test = {
type: jsPsychSurveyMultiChoice,
questions: [
{ prompt: "How many cards in total are there in each round?", name: 'deck_size', correct: '4', options: numbers_options, required: true },
{ prompt: "How many cards are presented on each choice?", name: 'cards_step', correct: '2', options: numbers_options, required: true },
{ prompt: "How do you choose a card?", name: 'choose_card', correct: 'Press the `S` or `K` key with your LEFT or RIGHT hand', options: pressing_options, required: true },
{ prompt: "The demand for a card can change during the round.", name: 'better_cards', correct: 'True', options: true_false_options, required: true },
{ prompt: "What is the goal of the game?", name: 'game_goal', correct: "The goal is to choose the best I can to earn as much bonus money as I can", options: cards_goal_options, required: true },
{ prompt: "If one card leads you to more coins, it means the other cards will probably lead you to fewer coins", name: 'value_independence', correct: 'False', options: true_false_options, required: true },
{ prompt: "Using the RIGHT response key instead of the LEFT key may increase your coin winning chances", name: 'location_value', correct: "False - you won't win more or less using RIGHT or LEFT response keys. Only the cards are related to your chances of winning coins", options: card_keys_options, required: true },
]
};
var if_trial = {
type: jsPsychHtmlButtonResponse,
stimulus: "<p>Sorry. You made a mistake.<br>"
+ "Let`s go back to the instructions. "
+ "Please read them carefully before submitting your answers. <br>"
+ "Thank you!",
choices: ['Back to instructions']
}
var to_repeat;
var check_answers = {
timeline: [if_trial],
conditional_function: function () {
// get the data from the previous trial,
// and check which key was pressed
to_repeat = false;
var responses_to_test = jsPsych.data.getLastTrialData().trials[0].response
for (i = 0; i < instructions_test.questions.length; i++) {
current_name = instructions_test.questions[i].name;
current_correct = instructions_test.questions[i].correct
if (current_correct != responses_to_test[current_name]) {
to_repeat = true;
return to_repeat
}
else {
to_repeat = false;
}
}
return to_repeat
}
}
/*----------------------------------------------------
extra question
------------------------------------------------------*/
var confirm_instructions_cards = {
on_start: function () {
document.body.style.cursor = 'auto';
is_confirm_trial=true;
},
type: jsPsychInstructions,
pages: [" <p style='text-align:left'>Before starting the game, we would like to check again your understanding of the instructions.</p>",
"<p style='text-align:left'> The test will start with you <b>observing a single game step without needing to respond.</b><br> Two cards will be displayed for a few seconds, after which the computer will select one card, and an outcome will be displayed.</p>",
"<p style='text-align:left'>Then, a new pair of cards will be presented to you.<br> <b> You'll then be asked a question to ensure your understanding.</b> <br><br></p> <p style='text-align:center'><b>Click Next to Start</b></p>",],
show_clickable_nav: true,
post_trial_gap:1000
};
var confirm_cards1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return draw_show_cards(images_for_block_start())
},
choices: "NO_KEYS",
trial_duration: 2000,
data: { phase: 'understanding confirmation', trial_name: 'cards1', trial_num: function () { return current_cards_practice_trial } },
}
var confirm_choice = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function (){
selected = jsPsych.randomization.sampleWithoutReplacement([0,1], 1)
if (selected == 0) {
card_to_show = "<img class='card_left' src='" + left_card + "'>"
}
else {
card_to_show = "<img class='card_right' src='" + right_card + "'>"
}
return card_to_show + fixation
},
choices: "NO_KEYS",
trial_duration: 1000,
data: { phase: 'understanding confirmation', trial_name: 'choice1', trial_num: function () { return current_cards_practice_trial } },
on_finish: function (data) {
data.key_selected = selected
if (selected == 0) {
data.card_selected = images_for_block_start().indexOf(left_card)
}
else if (selected == 1) {
data.card_selected = images_for_block_start().indexOf(right_card)
}
}
}
var confirm_reward = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return show_reward(current_cards_practice_trial)
},
choices: "NO_KEYS",
trial_duration: 750,
data: { phase: 'understanding confirmation', trial_name: 'reward1', trial_num: function () { return current_cards_practice_trial } }
, on_finish: function (data) {
data.reward = reward;
}
}
var confirm_instructions_before_question = {
on_start: function () {
document.body.style.cursor = 'auto';
},
type: jsPsychInstructions,
pages: ["<p style='text-align:left'>Next, you will be presented with a pair of cards.<br><br> Please consider them carefully and select the most logical option, in your opinion, from the following choices:<br><br>"
+ "1. The Left card<br>"
+ "2. The Right card<br>"
+ "3. I have no information about these two cards so I have to guess<br></p>",],
show_clickable_nav: true
};
var confirm_cards2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
left_card = drawn_cards[2];
right_card = drawn_cards[3];
left_with_tag = "<img class='card_left' src='" + left_card + "'>"
right_with_tag = "<img class='card_right' src='" + right_card + "'>"
return left_with_tag + right_with_tag + fixation;
},
choices: "NO_KEYS",
trial_duration: 4000,
data: { phase: 'understanding confirmation', trial_name: 'cards2', trial_num: function () { return current_cards_practice_trial } }
}
var confirm_options = ["Left card", "Right card", "I have no information about these two cards so I have to guess"];
var confirm_test = {
type: jsPsychSurveyMultiChoice,
questions: [
{ prompt: "Which card do you think is the best choice, considering what you've seen before?", name: 'confirmation_question', correct: "I have no information about these two cards so I have to guess", options: confirm_options, required: true } ],
};
var if_not_confirm = {
type: jsPsychHtmlButtonResponse,
stimulus: "<p>Wrong.<br><br>"
+ "Please note that <b> only the card you choose is related to your chances of winning a coin. </b> The location of the card and the response key you used to select it do not influence your chances of winning a coin.<br>"
+ "<br>Please try again.",
choices: ['Re-answer the question']
}
var if_confirm = {
type: jsPsychHtmlButtonResponse,
stimulus: "<p><b>Correct</b>, Good job!<br><br>"
+ "If you haven't seen these cards before, please pick one at random, as neither the card's placement nor the answer key you used to select affects your odds of winning.<br><br> You are now ready to start the real game.",
choices: ['Begin the game'],
}
var to_repeat_confirm;
var check_answers_confirm = {
timeline: [if_not_confirm],
conditional_function: function () {
to_repeat_confirm = false;
var data = jsPsych.data.get().filter({ trial_type: 'survey-multi-choice' }).last(1).select('response').values[0]
for (i = 0; i < confirm_test.questions.length; i++) {
current_name = confirm_test.questions[i].name;
current_correct = confirm_test.questions[i].correct
if (current_correct != data[current_name]) {
to_repeat_confirm = true;
return to_repeat_confirm
}
else {
to_repeat_confirm = false;
}
}
return to_repeat_confirm
}
}
/*----------------------------------------------------
Functions for card game
------------------------------------------------------*/
function draw_show_cards(deck, ) {
if (is_confirm_trial) {
drawn_cards = deck;
left_card = drawn_cards[0];
right_card = drawn_cards[1];
}
else {
drawn_cards = jsPsych.randomization.sampleWithoutReplacement(deck, 4)
left_card = drawn_cards[0];
right_card = drawn_cards[1];
}
left_with_tag = "<img class='card_left' src='" + left_card + "'>"
right_with_tag = "<img class='card_right' src='" + right_card + "'>"
return left_with_tag + right_with_tag + fixation;
}
function show_choice() {
last_choice = jsPsych.data.getLastTrialData().values()[0].response
if (last_choice == 's') {
selected = 0
card_to_show = "<img class='card_left' src='" + left_card + "'>"
}
else if (last_choice == 'k') {
selected = 1
card_to_show = "<img class='card_right' src='" + right_card + "'>"
}
else if (last_choice == null) {
selected = null
reward = 0
return '<div style="font-size:40px;">Please respond faster!</div>'
}
else {
selected = -1
reward = 0
return '<div style="font-size:40px;">wrong key!</div><br><br><div style="font-size:20px;">Please use the `K` and `S` keys to select the left or right card respectively. </div>'
}
return card_to_show + fixation
}
function show_reward(current_trial_num) {
key_selected = jsPsych.data.getLastTrialData().values()[0].key_selected
if (key_selected == 0) {
card_to_show = "<img class='card_left' src='" + left_card + "'>"
}
else if (key_selected == 1) {
card_to_show = "<img class='card_right' src='" + right_card + "'>"
}
else if (key_selected == null) {
return '<div style="font-size:40px;">Please respond faster!</div>'
}
else {
return '<div style="font-size:40px;">wrong key!</div><br><br><div style="font-size:20px;">Please use the `K` and `S` keys to select the left or right card respectively. </div>'
}
card_selected = jsPsych.data.getLastTrialData().values()[0].card_selected
prob_reward = FB_matrix[card_selected][current_trial_num];
prob_unreward = 1 - prob_reward;
reward = jsPsych.randomization.sampleWithReplacement([0, 1], 1, [prob_unreward, prob_reward])[0];
curr_block_reward += reward;
reward_to_show = "<img class=reward src='" + reward_images[reward] + "'>"
return card_to_show + reward_to_show
}
function images_for_block_start() {
images = test_deck_images.slice(block * 4, block * 4 + 4)
return images
}
/*This function downloads the data */
var subN = localStorage.subN
var IDsub = Date.now();
function download_csv(csv) {
var hiddenElement = document.createElement('a');
file_name = "WM_visual_array_" + subN + "_" + IDsub.toString() + ".csv"
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = file_name;
hiddenElement.click();
}
/*----------------------------------------------------
Variabels for card game
------------------------------------------------------*/
var FB_matrix_1 = [];
FB_matrix_1[0] = [0.157020842, 0.15, 0.15, 0.156040006, 0.15, 0.15, 0.15, 0.15, 0.15, 0.195488406, 0.238761738, 0.208685625, 0.176161325, 0.189415947, 0.179116023, 0.1990778, 0.15, 0.154505329, 0.20971304, 0.248624145, 0.243429274, 0.222942467, 0.25854102, 0.32771788, 0.346910101, 0.363247772, 0.412600622, 0.394723848, 0.379588708, 0.39092306, 0.37934023, 0.422537053, 0.42854826, 0.414645187, 0.411459023, 0.357681821, 0.319182052, 0.271389827, 0.331717046, 0.337330719, 0.360532922, 0.40079545, 0.4120548, 0.419174746, 0.49439884, 0.445138221, 0.462633019, 0.472754153, 0.446989894, 0.450821354];
FB_matrix_1[1] = [0.619709433, 0.638847416, 0.673558252, 0.650024264, 0.609580707, 0.643928684, 0.632410914, 0.660272086, 0.654805088, 0.654415047, 0.651459173, 0.622871469, 0.621873043, 0.64873017, 0.614258789, 0.624416768, 0.584623601, 0.549768795, 0.501743755, 0.463638119, 0.572912292, 0.521565163, 0.483212291, 0.416664343, 0.406414638, 0.424988911, 0.423891952, 0.477917326, 0.499917072, 0.527574737, 0.55610902, 0.542712218, 0.558499434, 0.630558855, 0.630067304, 0.633714377, 0.66237771, 0.642321058, 0.598826994, 0.537534203, 0.541353187, 0.565797459, 0.625624932, 0.673666597, 0.709709244, 0.732720996, 0.63950116, 0.653624258, 0.59332484, 0.584050675];
FB_matrix_1[2] = [0.455624574, 0.447060403, 0.464653849, 0.468050463, 0.479689254, 0.489298433, 0.49896292, 0.503229792, 0.426905337, 0.43950215, 0.424029653, 0.373946687, 0.309792793, 0.299386806, 0.330861332, 0.390680702, 0.368970152, 0.364360177, 0.30563429, 0.304244594, 0.231771321, 0.189074154, 0.232423255, 0.167898662, 0.223806442, 0.15, 0.160403157, 0.15, 0.15, 0.199845574, 0.252707012, 0.240813444, 0.31536487, 0.238292789, 0.158989637, 0.160086403, 0.157452045, 0.176706854, 0.163972711, 0.156086284, 0.15, 0.15, 0.15, 0.15, 0.15, 0.15, 0.163664995, 0.191478745, 0.179692284, 0.15];
FB_matrix_1[3] = [0.57748884, 0.547476684, 0.564055839, 0.533591457, 0.548975462, 0.530164744, 0.449644452, 0.400668363, 0.363860908, 0.384457003, 0.381435283, 0.395809752, 0.418116153, 0.444540894, 0.461018357, 0.499538162, 0.501779212, 0.444644815, 0.41071651, 0.412544239, 0.404462135, 0.394042659, 0.427578923, 0.414173854, 0.432006777, 0.409534504, 0.383596933, 0.366896641, 0.455084108, 0.475709276, 0.523782927, 0.467327472, 0.456414917, 0.399816399, 0.404586093, 0.419517324, 0.426407739, 0.408329963, 0.442421569, 0.439231949, 0.422045599, 0.398831425, 0.445303813, 0.442015842, 0.391095483, 0.39784058, 0.324718947, 0.306483515, 0.337784885, 0.36036193];
var FB_matrix_2 = [];
FB_matrix_2[0] = [0.845975582, 0.85, 0.811239816, 0.789141099, 0.751663825, 0.727353519, 0.742347793, 0.753754227, 0.746075024, 0.737343506, 0.692984958, 0.675577628, 0.745556749, 0.711258377, 0.694514714, 0.714388446, 0.783630387, 0.770445764, 0.824521546, 0.790480453, 0.85, 0.85, 0.843176962, 0.85, 0.828195931, 0.755869601, 0.776593185, 0.816069896, 0.826657857, 0.85, 0.763451985, 0.768782827, 0.723154538, 0.744041295, 0.75598182, 0.763692087, 0.715492667, 0.665323379, 0.661767041, 0.636919337, 0.699988753, 0.705796474, 0.697944057, 0.668310167, 0.703052596, 0.670977142, 0.657559375, 0.657697261, 0.691640971, 0.611226726];
FB_matrix_2[1] = [0.375602714, 0.482825098, 0.494525989, 0.543622095, 0.516946927, 0.475244821, 0.4007603, 0.381880564, 0.347755216, 0.3778123, 0.38016307, 0.38413162, 0.267607153, 0.260422785, 0.26815508, 0.251406282, 0.209543175, 0.151202231, 0.22497851, 0.272585103, 0.250095598, 0.303130387, 0.376558624, 0.425015109, 0.466527045, 0.475585373, 0.495376391, 0.454527684, 0.458159321, 0.484668262, 0.495795589, 0.51734446, 0.52701977, 0.533999076, 0.503566092, 0.473970607, 0.496098949, 0.486695447, 0.450300737, 0.398544662, 0.352858472, 0.398636195, 0.426971078, 0.41298565, 0.416677577, 0.395748342, 0.327448231, 0.327799692, 0.251975712, 0.340218688];
FB_matrix_2[2] = [0.193985212, 0.206956046, 0.210698561, 0.167181867, 0.160385971, 0.222730036, 0.198469638, 0.172671624, 0.162798513, 0.15, 0.15, 0.15, 0.15, 0.199552386, 0.174287774, 0.269670687, 0.25278694, 0.189125238, 0.2254143, 0.243618922, 0.242317154, 0.2899124, 0.373745951, 0.359084648, 0.40365613, 0.441680486, 0.441644009, 0.414427809, 0.432450359, 0.422407689, 0.47876598, 0.439913213, 0.460515346, 0.477542614, 0.546639512, 0.571856383, 0.599289461, 0.632344043, 0.645294844, 0.603839822, 0.626033977, 0.617148809, 0.60514556, 0.605813283, 0.634693544, 0.608156883, 0.638272917, 0.759248046, 0.800744795, 0.743147931];
FB_matrix_2[3] = [0.657246048, 0.61808683, 0.595684151, 0.557190569, 0.5647405, 0.537794873, 0.572478029, 0.54428476, 0.565512041, 0.609162316, 0.612692636, 0.599074184, 0.624430541, 0.613624783, 0.589115859, 0.659608157, 0.609923227, 0.64601798, 0.678981124, 0.614548145, 0.56383454, 0.549029586, 0.558494015, 0.53432138, 0.524323956, 0.470320959, 0.472906551, 0.538562287, 0.47814494, 0.44618519, 0.381082716, 0.366965796, 0.358985001, 0.372394934, 0.344972096, 0.385304745, 0.353303089, 0.3547712, 0.302906028, 0.295663486, 0.352017105, 0.354826601, 0.31827643, 0.336191646, 0.321068887, 0.359266139, 0.341415476, 0.281568938, 0.282294115, 0.199795953];
var FB_matrix = jsPsych.randomization.sampleWithoutReplacement([1,2], 1)[0] == 1 ? FB_matrix_1 : FB_matrix_2;
var current_cards_practice_trial = 0;
var current_cards_exp_trial = 0;
var block = 0;
var blocks = 3;
var draw_cards;
var drawn_cards;
var left_card;
var right_card;
var selected;
var reward;
var catch_trial_used_cards = 0;
var curr_block_reward = 0;
/*----------------------------------------------------
Start practice
------------------------------------------------------*/
var timeline = [];
/*init connection with pavlovia.org*/
// var pavlovia_init = {
// type: jsPsychPavlovia,
// command: "init"
// };
// timeline.push(pavlovia_init);
var consent = {
type: jsPsychHtmlButtonResponse,
choices: ["I have read, understand, and agree to the above", "<a href='https://www.prolific.co/'>Press here to quit the experiment</a>"],
stimulus:" <p style='text-align: left;'><img class='logo' src='" + logo + "'><h2><b>Consent to participate in a research:</b></h2>"
+"<p style='text-align: left;'><strong>Greetings and thank you for your willingness to participate in this research.</strong> This study aims to examine learning mechanisms. Specifically, it seeks to improve and strengthen the diagnosis and treatment of mental disorders in the future. Hence, your participation is highly valued and contributes significantly.</p>"
+
"<p style='text-align: left;'>For your participation, you will receive monetary compensation. Additionally, you could win a cash bonus based on your performance (details will be provided soon). Finally, at the end of the experiment, we would appreciate discussing the research questions further and sharing the results with you.</p>"
+
"<p style='text-align: left;'><b>Participation Criteria:</b></p>"
+
"<p style='text-align: left;'>The experiment is intended for young adults aged <strong>18 to 50</strong>. You cannot participate if you regularly use psychiatric or neurological medications, have a psychiatric/neurological diagnosis (including attention deficit hyperactivity disorder - ADHD), a history of head injuries, epilepsy, learning disabilities, or color blindness.</p>"
+
"<p style='text-align: left;'><b>Procedure:</b></p>"
+
"<p style='text-align: left;'>The study will be conducted online using your computer. During the experiment, we will track your learning patterns through a simple computer game. The game will display images on the screen, and you will make choices during the game to maximize profits according to rules explained during the experiment itself. The whole experiment is expected to take about 25 minutes. Upon completion of participation, compensation will be provided as agreed, and we will offer a full debriefing regarding the research goals and hypotheses.</p>"
+
"<p style='text-align: left;'><b>Expected Risks and Termination of the Experiment:</b></p>"
+
"<p style='text-align: left;'>The expected risks and discomforts in this study are minimal and include potential discomfort during the performance of the computer task. You have the right to withdraw from the experiment at any stage. In case of withdrawal, partial compensation will be provided based on the duration of your participation.</p>"
+
"<p style='text-align: left;'><b>Compensation for Participation:</b></p>"
+
"<p style='text-align: left;'>For completing the experiment, money payment will be given. In addition a cash bonus will be awarded based on performance in the task. Throughout the task, you can collect points (gold coins). At the end of the task, the number of points you have accumulated will be calculated. The amount of points depends on your ability to perform the experiment well, similar to scoring in a computer game. </p>"
+
"<p style='text-align: left;'><b>Anonymity and Data Protection:</b></p>"
+
"<p style='text-align: left;'>The information collected during the experiment will be kept solely on the lab computers and will be linked only to your PROLIFIC ID.</p>"}
timeline.push(consent)
timeline.push(enter_fullscreen)
var start_practice_only_cards = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div>We will now do a few practice trials. <br> Please be ready with your fingers on <b>"s"</b> and <b>"k".</b> <br><br> <b> Press any key to begin</b></div>'+"<img class='example' src=" + instructions_images[6] + ">",
post_trial_gap: 1000,
on_finish: function () { document.querySelector('head').insertAdjacentHTML('beforeend', '<style id="cursor-toggle"> html { cursor: none; } </style>') },
}
var fixation_cards = {
type: jsPsychHtmlKeyboardResponse,
stimulus: fixation,
choices: "NO_KEYS",
trial_duration: 1000
}
var practice_cards1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return draw_show_cards(practice_deck_images)
}
,
choices: "ALL_KEYS",
trial_duration: 6000,
data: { phase: 'practice', trial_name: 'cards1', trial_num: function () { return current_cards_practice_trial } },
}
var practice_choice1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: show_choice,
choices: "NO_KEYS",
trial_duration: 500,
data: { phase: 'practice', trial_name: 'choice1', trial_num: function () { return current_cards_practice_trial } },
on_finish: function (data) {
data.key_selected = selected
if (selected == 0) {
data.card_selected = practice_deck_images.indexOf(left_card)
}
else if (selected == 1) {
data.card_selected = practice_deck_images.indexOf(right_card)
}
}
}
var practice_reward1 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return show_reward(current_cards_practice_trial)
},
choices: "NO_KEYS",
trial_duration: 1000,
data: { phase: 'practice', trial_name: 'reward1', trial_num: function () { return current_cards_practice_trial } }
, on_finish: function (data) {
data.reward = reward;
}
}
var practice_cards2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
left_card = drawn_cards[2];
right_card = drawn_cards[3];
left_with_tag = "<img class='card_left' src='" + left_card + "'>"
right_with_tag = "<img class='card_right' src='" + right_card + "'>"
return left_with_tag + right_with_tag + fixation;
},
choices: "ALL_KEYS",
trial_duration: 6000,
data: { phase: 'practice', trial_name: 'cards2', trial_num: function () { return current_cards_practice_trial } }
}
var practice_choice2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: show_choice,
choices: "NO_KEYS",
trial_duration: 500,
data: { phase: 'practice', trial_name: 'choice2', trial_num: function () { return current_cards_practice_trial } },
on_finish: function (data) {
data.key_selected = selected
if (selected == 0) {
data.card_selected = practice_deck_images.indexOf(left_card)
}
else if (selected == 1) {
data.card_selected = practice_deck_images.indexOf(right_card)
}
}
}
var practice_reward2 = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return show_reward(current_cards_practice_trial)
},
choices: "NO_KEYS",
trial_duration: 750,
data: { phase: 'practice', trial_name: 'reward2', trial_num: function () { return current_cards_practice_trial } }
, on_finish: function (data) {
data.reward = reward;
current_cards_practice_trial += 1;
phase = jsPsych.data.getLastTrialData().values()[0].phase
current_cards_practice_trial += 1;
var correct = false;
if (data.correct_response == data.response) {
correct = true;
}
else if (data.response == null) {
correct = null;
}
data.is_correct = correct;
}
}
/*----------------------------------------------------
Start exp part of card game
------------------------------------------------------*/
var start_exp_cards = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function() {
return '<div> Good job! Practice completed. <br> <br> We will now move on to the real game. Do your best to figure out which cards are better. Good luck!<br><br> <b>Press any key to continue.</b></div>'
},
post_trial_gap: 1000,
on_finish: function() {
curr_block_reward=0;
}
}
var start_block = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return '<p><b><u>Test block ' + (block + 1) + ' out of ' + (blocks + 1) + '</u></b></p>' + '<p style="text-align: left"> You will now start a test block. Below are the four cards that can appear in this round.</p>'
+ '<p style="text-align: left">Use the LEFT or RIGHT response keys (`s` or `k`, in correspondence) to make your selection. <br> Please do your best to win as many coins as possible!<br> </p>'
+ '<p style="text-align: left">Remember that: <br> 1) How `good` each card is can change along the round <br> 2) Only the cards (not the response key that was used to select them) predict an outcome <br> 3) The chance that each card will give you money has nothing to do with the other cards </p>'
+ '<p><b>Press SPACE to start</b></p>'
+ '<img class ="start" src="' + images_for_block_start()[0] + '"> ' + '<img class ="start" src="' + images_for_block_start()[1] + '"> ' + '<img class ="start" src="' + images_for_block_start()[2]
+ '"> ' + '<img class ="start" src="' + images_for_block_start()[3] + '"> '
},
choices: [" "]
, post_trial_gap: 1000,
on_finish: function () { document.querySelector('head').insertAdjacentHTML('beforeend', '<style id="cursor-toggle"> html { cursor: none; } </style>') },
}
var exp_cards = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return draw_show_cards(images_for_block_start())
},
choices: "ALL_KEYS",
trial_duration: 6000,
data: { phase: 'exp', trial_name: 'cards1', trial_num: function () { return current_cards_exp_trial }},
}
var exp_choice = {
type: jsPsychHtmlKeyboardResponse,
stimulus: show_choice,
choices: "NO_KEYS",
trial_duration: 500,
data: { phase: 'exp', trial_name: 'choice2', trial_num: function () { return current_cards_exp_trial } },
on_finish: function (data) {
data.key_selected = selected
if (selected == 0) {
data.card_selected = images_for_block_start().indexOf(left_card)
}
else if (selected == 1) {
data.card_selected = images_for_block_start().indexOf(right_card)
}
}
}
var exp_reward = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
return show_reward(current_cards_exp_trial)
},
choices: "NO_KEYS",
trial_duration: 1000,
data: {
phase: 'exp', trial_name: 'reward2', trial_num: function () { return current_cards_exp_trial }, block: function () { return block },
prob1 : function(){return FB_matrix[0][current_cards_exp_trial]} ,
prob2 : function(){return FB_matrix[1][current_cards_exp_trial]},
prob3 : function(){return FB_matrix[2][current_cards_exp_trial]},
prob4 : function(){return FB_matrix[3][current_cards_exp_trial]}},
on_finish: function(data){
data.left_card = images_for_block_start().indexOf(left_card);
data.right_card = images_for_block_start().indexOf(right_card);
data.key_selected = selected;
if (selected == 0) {
data.card_selected = images_for_block_start().indexOf(left_card)
}
else if (selected == 1) {
data.card_selected = images_for_block_start().indexOf(right_card)
}
data.reward = reward;
current_cards_exp_trial += 1;}
}
var finish_block = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
finish_block_string = '<p><u>Good job!</u></p>' + '<p style="text-align: left"><br> <b>Test block ' + (block + 1) + ' out of ' + (blocks) + ' is over.</b>'
finish_block_string += '<br> On the this part of the game <b>you earned ' + curr_block_reward +'</b>.'
if (block != 3) {
finish_block_string += '<br><br> You can stretch a little and take a short break while sitting in front of the screen, if needed.</p><p> <br><br><br><b>Press SPACE to continue</b> </p>'
}
else {
finish_block_string += ' That was the last part.</p><p> <br><br><br><b>Press SPACE to continue</b> </p>'
}
return finish_block_string
},
post_trial_gap: 1000,
choices: [" "],
on_finish: function () {
block += 1;
current_cards_exp_trial = 0;
curr_block_reward = 0;
}
}
var finish_learning = {
on_start: function () {
while (document.querySelector('#cursor-toggle') != null)
document.querySelector('#cursor-toggle').remove()
},
type: jsPsychHtmlButtonResponse,
stimulus: function () {
return "<b>Congratulations!</b> <br><br> You successfully finished the task. <br>"
},
choices:["Click here to complete the experiment"]
, button_html: ['<a href=https://tau-psychology.sona-systems.com/ target="_blank"> %choice%</a>']
}
/*----------------------------------------------------
Define timelines
------------------------------------------------------*/
var demo_procedure = {
timeline: [fixation_cards, practice_cards1, practice_choice1, practice_reward1],
repetitions: 2 //demo procedure takes 2*(900+6000+1000+750) = 17.3 sec
}
var confirm_loop = {
timeline: [confirm_instructions_cards, confirm_cards1, confirm_choice, confirm_reward, confirm_instructions_before_question, confirm_cards2, confirm_test, check_answers_confirm],
loop_function: function () {
if (to_repeat_confirm == true) {
return true;
} else {
return false;
}
}
}
// 1 min + 2 sec +0.9 sec + 0.9 sec + 0.4 min + 4 sec + 0.3 min + 0.5 min = 2.2 min + 7.8 sec = 139.8 sec~ 140 sec
var instructions_loop = {
timeline: [instructions_cards, start_practice_only_cards, demo_procedure,instructions_shapes, start_instructions_test,instructions_test, check_answers],
loop_function: function () {
if (to_repeat == true) {
return true;
} else {
return false;
}
}
} //manipulation: 7 min+ 1 sec + 17.3 sec + 2.5 min = 588.3 sec=
// regular: 4 min+ 1 sec + 17.3 sec + 2 min = 378.3 sec
var test_procedure_cards = {
timeline: [fixation_cards, exp_cards, exp_choice,exp_reward],
repetitions: 20 // every trial takes 900 + 6000 + 1000 + 750 = 8.65 sec pre trial, 50 trials = 432.5 sec
}
var test_blocks = {
timeline: [start_block, test_procedure_cards, finish_block],
repetitions: 2
}; // every block takes 1000 + 432500 + 1000 = 434500= 434.5 sec, 4 blocks = 1738 sec
var full_procedure_cards = {
timeline: [preload, instructions_loop,confirm_loop, if_confirm, start_exp_cards, test_blocks,finish_learning]
} // 378 + 1 + 1738 = 2117 sec= 35.28 min
/*----------------------------------------------------
Run the main timeline
------------------------------------------------------*/
timeline.push(full_procedure_cards)
/* finish connection with pavlovia.org */
// var pavlovia_finish = {
// type: jsPsychPavlovia,
// command: "finish",
// participantId: subject_id
// };
// timeline.push(pavlovia_finish);
jsPsych.run(timeline);
</script>
</body>
</html>