-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
605 lines (538 loc) · 31.7 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
<!DOCTYPE html>
<html>
<head>
<title>Cards</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>
<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 () {
processed_data = jsPsych.data.get().json()
download_csv(jsPsych.data.get().csv())
$.ajax({
type: 'POST',
url: '/save',
data: { 'data': processed_data },
success: function () {
console.log('success');
document.location = '/next'
},
// Endpoint not running, local save
error: function (err) {
console.log(err)
}
});
}
});
/*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");
/*----------------------------------------------------
Card game starts
------------------------------------------------------*/
/*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
}
/*----------------------------------------------------
Define images
------------------------------------------------------*/
var possible_block_stakes = [[5, 0, 1], [1, 5, 0], [0, 1, 5]]
var blocks_stakes = possible_block_stakes[jsPsych.randomization.sampleWithReplacement([0, 1, 2], 1)[0]];
var instructions_images = ['images/example_deck.jpg','images/example_new.jpg', 'images/reward_example_new.jpg','images/no_reward_example.png']
var practice_deck_images = ['images/practice/p1.jpg', 'images/practice/p2.jpg', 'images/practice/p3.jpg', 'images/practice/p4.jpg']
var test_deck_images = ['images/test/f1.jpg', 'images/test/f2.jpg', 'images/test/f3.jpg', 'images/test/f4.jpg', 'images/test/f5.jpg',
'images/test/f7.jpg', 'images/test/f8.jpg', 'images/test/f9.jpg', 'images/test/f10.jpg', 'images/test/f11.jpg', 'images/test/f12.jpg', 'images/test/f13.jpg',
'images/test/f14.jpg', 'images/test/f15.jpg', 'images/test/f16.jpg']
var reward_images = ['images/zero_coins.png', 'images/won1-no-back1.png']
var fixation = '<div class="fixation">+</div>'
var preload = {
type: jsPsychPreload,
images: practice_deck_images, test_deck_images, reward_images, instructions_images,
};
/*----------------------------------------------------
Start instructions
------------------------------------------------------*/
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 card game</u></b></p>"
+ "<p style='text-align:left'>Your winnings in this game will earn you additional payment bonus for participating in the study."
+ " If you do not earn any extra money in the card game, you will still receive <b>£5 per hour</b> for completing this session of the study."
+ " <br>However, you can gain up to an <b>extra £4 based on winnings in the game.</b></p>",
"<p style='text-align:left'> We will now provide instructions regarding the card game. Please read them carefully. <br>"
+ "Feel free to go back and forth between the screens.<br><br>",
"Once you finished reading the instructions, <b>we will ask you to take a quick quiz</b> to make sure you understood everything correctly.</p>",
"<p style='text-align:left'> Here is an example of a four-card deck, similar to the cards you will encounter in the upcoming 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, or...</p>"
+"<br> <img class='example' src= " + instructions_images[2] + ">",
"<p style='text-align:left'>Or it could be <b>not winning a coin, like here</b></p>"
+ "<br> <img class='example' src= " + instructions_images[3] + ">",
"<b>Some cards give golden coins more often</b> than others.<br> Your task is to <b>learn this and choose accordingly.</b>",
"<p style='text-align:left'>There are 3 parts in the game with different winning opportunities in each: <b>zero gains (0X)</b>, <b>low gains (1X)</b> and <b>high gains (5X)</b>."
+ "<br><br>The amount you earn for each correct answer will vary depending on how much gain is offered by the game part you're currently in.<br><br>"
+"In a high gain part, every coin you earn will be multiplied by 5. In a low gain part, every coin you earn will be multiplied by 1. In a zero gain part, you will not earn any money for winning a coin.</p>",
"<p style='text-align:left'><b> <b>Your chances of winning a coin depend on the card you choose, as some cards are better than others in their deck.</b><br><br>"
+"Please note that the winning chances of the cards are not related</b>.<br> Learning about one card does not tell you anything about the other cards. Finding out that one card gives you coins often, doesn't mean the other one will not.</p>",
"<p style='text-align:left'><u>Three important things to remember:</u><br>"
+ "1. <b>How good a card is will not change during the game</b> - even a card that has 90% chances of giving a coin will sometimes give you nothing."
+ "<br><br>2.<b> Only the cards matter when you choose - </b> the location of the card and the response key you used to select it do not influence the chances of winning a coin.<br><br>"
+ " 3. <b>Each card has its own winning chances - </b> you can't learn about one card from the money rewards you got for the other."
+ " <br><br><u>Please do your best to earn as many coins as you can, while responding quickly as possible.</u><br><br></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 move on to a quick quiz to make sure you understood the instructions. <b>If you will have a mistake you will need to go again through the instructions.</b> Make sure you scroll down until you answer all questions. <br><br> <b> Press any key to continue</b></p>"
}
var Q1_2_options = ["2", "4", "6"];
var Q3_options = ["Click on it", "Press the LEFT or RIGHT arrow keys", "Press the `S` or `K` key with your LEFT or RIGHT hand."];
var Q4_5_6_7_options = ["True", "False"];
var Q8_options = ["The goal is to learn which card is better", "The goal is to answer the questions as quickly as possible"]
var Q9_options = ["True", "False - what I learn about one card does not tell me anything about the others. I can only learn whether a card is good or not by choosing it."];
var Q10_options = ["True - the response keys are related to the winning chances", "False - you won't win more or less using RIGHT or LEFT response keys. Only the cards are related to your chance of winning."];
var instructions_test = {
type: jsPsychSurveyMultiChoice,
questions: [
{ prompt: "What is the size of a card deck?", name: 'deck_size', correct: '4', options: Q1_2_options, required: true },
{ prompt: "How many cards are presented on each step?", name: 'cards_step', correct: '2', options: Q1_2_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: Q3_options, required: true },
{ prompt: "I will receive the same amount of money for each correct response in every part of the game.", name: 'block_stakes', correct: "False", options: Q4_5_6_7_options, required: true },
{ prompt: "Some cards are better than others.", name: 'better_cards', correct: 'True', options: Q4_5_6_7_options, required: true },
{ prompt: "How `good` or `bad` a card is will change along the game.", name: 'value_change', correct: 'False', options: Q4_5_6_7_options, required: true },
{ prompt: "What is the goal of the game?", name: 'game_goal', correct: "The goal is to learn which card is better", options: Q8_options, required: true },
{ prompt: "If one card leads to more money, it is likely that the other cards will lead to less money.", name: 'value_independence',
correct: "False - what I learn about one card does not tell me anything about the others. I can only learn whether a card is good or not by choosing it.", options: Q9_options, required: true },
{ prompt: "If you use the RIGHT and not the LEFT response keys, you might win more.", 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 chance of winning.", options: Q10_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 () {
to_repeat = false;
var responses_to_test = jsPsych.data.get().filter({ trial_type: 'survey-multi-choice' }).last(1).select('response').values[0]
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
}
}
/*----------------------------------------------------
Functions for card game
------------------------------------------------------*/
function draw_show_cards(deck) {
drawn_cards = jsPsych.randomization.sampleWithoutReplacement(deck, 4)
curr_block_probs = jsPsych.randomization.sampleWithoutReplacement(FB_matrix, 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 = curr_block_probs[card_selected];
prob_unreward = 1 - prob_reward;
reward = jsPsych.randomization.sampleWithReplacement([0, 1], 1, [prob_unreward, prob_reward])[0];
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
}
function curr_block_stakes(block_number){
if (blocks_stakes[block_number] == 1){
return ["low gains (1X)", "2 cents"]
}
if (blocks_stakes[block_number] == 0){
return ["zero gains (0X)", "0 cents"]
}
return ["high gains (5X)", "10 cents"]
}
/*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 = [0.35, 0.45, 0.55, 0.65];
var current_cards_practice_trial = 0;
var current_cards_exp_trial = 0;
var block = 0;
var blocks = 3;
var curr_block_probs;
var draw_cards;
var drawn_cards;
var left_card;
var right_card;
var selected;
var reward;
var rewards_for_block = 0;
/*----------------------------------------------------
Start practice
------------------------------------------------------*/
var timeline = [];
/*init connection with pavlovia.org
var pavlovia_init = {
type: jsPsychPavlovia,
command: "init"
};
timeline.push(pavlovia_init);*/
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>',
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: 900
}
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: 750,
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;
}
}
/*----------------------------------------------------
Start exp part of card game
------------------------------------------------------*/
var start_exp_cards = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<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,
}
var start_block = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
var stakes_data = curr_block_stakes(block)
return '<p><b><u>Test block ' + (block + 1) + ' out of ' + (blocks) + '</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"> This is a <b><u>' + (stakes_data[0])+ '</u></b> game part, which means you will earn ' + (stakes_data[1]) + ' for every correct response.</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 will not 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: 'cards', trial_num: function () { return current_cards_exp_trial }, block_type: function () {return blocks_stakes[block]} },
}
var exp_choice = {
type: jsPsychHtmlKeyboardResponse,
stimulus: show_choice,
choices: "NO_KEYS",
trial_duration: 500,
data: { phase: 'exp', trial_name: 'choice', trial_num: function () { return current_cards_exp_trial }, block_type: function () {return blocks_stakes[block]} },
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: 750,
data: {
phase: 'exp', trial_name: 'reward', trial_num: function () { return current_cards_exp_trial }, block: function () { return block }, block_type: function () {return blocks_stakes[block]}, coins: function () {return blocks_stakes[block] * reward} },
on_finish: function (data) {
current_cards_exp_trial += 1;
rewards_for_block += reward;
data.reward = reward;
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)
}
}
}
var finish_block = {
type: jsPsychHtmlKeyboardResponse,
stimulus: function () {
finish_block_string = '<p>Good job!</p>' + '<p style="text-align: left"><br> Test block ' + (block + 1) + ' out of ' + (blocks) + ' is over.'
finish_block_string += '<br>In this part of the game, you earned ' + rewards_for_block + ' coins, which translate to ' + rewards_for_block * blocks_stakes[block] + ' coins under the gains condition.</p>'
if (block != 3) {
finish_block_string += '<p style="text-align: left"> 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 += ' We will now continue to answer some questions.</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;
rewards_for_block = 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 return to Prolific and complete this part of the study"]
, button_html: ['<a href=https://app.prolific.co/submissions/complete?cc=XXXXXXX target="_blank"> %choice%</a>']
}
/*----------------------------------------------------
Define timeline for card part
------------------------------------------------------*/
var demo_procedure_only_cards = {
timeline: [fixation_cards, practice_cards1, practice_choice1, practice_reward1, fixation_cards, practice_cards2, practice_choice2, practice_reward2],
repetitions: 1 //every trial takes 2*(900+6000+1000+750) =8650 ms = 8.65 sec
}
var instructions_loop = {
timeline: [instructions_cards, start_practice_only_cards, demo_procedure_only_cards, start_instructions_test, instructions_test, check_answers],
loop_function: function () {
if (to_repeat == true) {
return true;
} else {
return false;
}
}
} //instructions+ 1000 ms + 8.65 + test= 5 min + 9.65 sec + 3 min = 480 + 9.65 sec = 489.65 sec
var test_procedure_block1 = {
prompt: '<div class="myprompt" ><h2>' + curr_block_stakes(0)[0] + '</h2></div><br><br><br>' ,
timeline: [fixation_cards, exp_cards, exp_choice, exp_reward],
repetitions: 1 // 900+ 6000+ 1000+ 750= 8650 ms= 8.65 sec per trial - 40 trials per block= 346 sec
}
var test_procedure_block2 = {
prompt: '<div class="myprompt" ><h2>' +curr_block_stakes(1)[0] + '</h2></div><br><br><br>' ,
timeline: [fixation_cards, exp_cards, exp_choice, exp_reward],
repetitions: 1
}
var test_procedure_block3 = {
prompt: '<div class="myprompt" ><h2>' +curr_block_stakes(2)[0] + '</h2></div><br><br><br>' ,
timeline: [fixation_cards, exp_cards, exp_choice, exp_reward],
repetitions: 1
}
var test_blocks = {
timeline: [start_block, test_procedure_block1, finish_block, start_block, test_procedure_block2, finish_block, start_block, test_procedure_block3, finish_block],
}; //3*(1+ 346+ 1)= 1044 sec
var full_procedure_cards = {
timeline: [preload, instructions_loop, start_exp_cards, test_blocks,finish_learning]
} //489.65+ 1+ 1044= 1534.65 sec = 25.5775 min
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>