-
Notifications
You must be signed in to change notification settings - Fork 0
/
timelinecode.html
296 lines (274 loc) · 15.8 KB
/
timelinecode.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
<!DOCTYPE html>
<html>
<head>
<title>Blurry Words Experiment</title>
<script src="jsPsych/jspsych.js"></script>
<script src="jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jsPsych/plugins/jspsych-image-keyboard-response.js"></script>
<script src="jsPsych/plugins/jspsych-blurry-word.js"></script>
<script src="jsPsych/plugins/jspsych-call-function.js"></script>
<script src="js/serverComm.js"></script>
<link href="jsPsych/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body></body>
<script>
var id = jsPsych.data.getURLVariable('PROLIFIC_PID');
jsPsych.data.addProperties({subject_id:id});
// prepare trial parameters
var w_choices = ['been', 'book', 'cash', 'dead', 'from', 'long',
'look', 'luck', 'much', 'neck', 'room', 'seem', 'send', 'test',
'want'];
// randomly select four words from the bank
var word_1 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(word_1),1);
var word_2 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(word_2),1);
var word_3 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(word_3),1);
var word_4 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(word_4),1);
var words = [word_1, word_2, word_3, word_4];
var m_choices = [1, 2];
// randomly select one of the two sets of scrambled words
const meaningless = m_choices[Math.floor(Math.random() * 2)]
var test_m = [0, meaningless];
var target_m = [0, meaningless];
var blur = [3, 4, 6, 7];
var trial_types = [];
for (const i of words) {
for (const j of test_m) {
for (const k of target_m) {
for (const l of blur) {
trial_types.push([i, j, k, l])
}
}
}
}
var attentionProbeList = ["up", "down", "none"];
var timeline_variables = [];
for (const i of trial_types) {
s = 'stimuli/'
target = s.concat(i[0], i[2], '.png')
test = s.concat(i[0], i[1], '.png')
blur = i[3]
attentionProbe = attentionProbeList[Math.floor(Math.random()*attentionProbeList.length)]
// console.log(attentionProbe)
attentionProbeDelay = (Math.random() * (2000 - 500) + 500)
timeline_variables.push({
target_stimulus: target,
test_stimulus: test,
targetBlur : blur,
attentionProbe : attentionProbe,
attentionProbeDelay : attentionProbeDelay,
attentionProbeDuration : 50
})
}
var prac_timeline_variables = []
while (prac_timeline_variables.length < 10) {
// randomly select a trial from all possible trials
const trial = timeline_variables[Math.floor(Math.random() * timeline_variables.length)];
// check whether the selected trial is already part of the practice trials timeline
const unique = 1;
for (const i of prac_timeline_variables) {
if (trial == i) {
unique == 0;
}
}
// only add the selected trial to the practice timeline if it is new
if (unique == 1) {
prac_timeline_variables.push(trial)
}
}
var prac_word_1 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(prac_word_1),1);
var prac_word_2 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(prac_word_2),1);
var prac_word_3 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(prac_word_3),1);
var prac_word_4 = w_choices[Math.floor(Math.random() * w_choices.length)];
w_choices.splice(w_choices.indexOf(prac_word_4),1);
for (const i of prac_timeline_variables) {
var old_test = i.test_stimulus.slice(8,12);
switch(old_test) {
case word_1:
i.test_stimulus = i.test_stimulus.replace(word_1, prac_word_1);
break;
case word_2:
i.test_stimulus = i.test_stimulus.replace(word_2, prac_word_2);
break;
case word_3:
i.test_stimulus = i.test_stimulus.replace(word_3, prac_word_3);
break;
default:
i.test_stimulus = i.test_stimulus.replace(word_4, prac_word_4);
}
var old_target = i.target_stimulus.slice(8,12);
switch(old_target) {
case word_1:
i.target_stimulus = i.target_stimulus.replace(word_1, prac_word_1);
break;
case word_2:
i.target_stimulus = i.target_stimulus.replace(word_2, prac_word_2);
break;
case word_3:
i.target_stimulus = i.target_stimulus.replace(word_3, prac_word_3);
break;
default:
i.target_stimulus = i.target_stimulus.replace(word_4, prac_word_4);
}
}
// define all timelines
var timeline = []; // master timeline
var blurPracticeTimeline = [];
var probePracticeTimeline = [];
var bothPracticeTimeline = [];
// the preceding timelines will be added to this one, which will be added to the master timeline
var practiceTimeline = [];
// add basic instructions to master timeline
var initial_instructions1 = {
type: 'html-keyboard-response',
stimulus: "Thank you for helping us with our research! <p>In this task, you will be shown two sets of letters of varying levels of blurriness. Your goal is to adjust the blurriness of the letters on the bottom to match the blurriness of the top letters while looking at a fixation target in the center. </p> <p>Press any key to continue through the instructions.</p>"
}
timeline.push(initial_instructions1);
var initial_instructions2 = {
type: 'html-keyboard-response',
stimulus: "<p>During the adjustment process, you may notice a brief flash of a small and light-colored shape in the letters. Whenever you notice a flash, press the <strong>spacebar</strong> immediately, no more than a second after you see the probe.</p> <p><b>Because your accuracy will be noted, it's very important that you pay attention.</b></p>"
}
timeline.push(initial_instructions2);
var initial_instructions3 = {
type: 'html-keyboard-response',
stimulus: "The first few trials will give you some practice with the task. You will first practice adjusting the blurriness and detecting the flash separately. Then you will practice them in the same trial."
}
timeline.push(initial_instructions3);
// add instructions for each of the three practice phases to the timeline
// for each phase
var blur_instructions = {
type: 'html-keyboard-response',
stimulus: "<strong>Practice Trials: Blur Adjustment</strong><p>Match the blurriness of the letters on the bottom to the blurriness of the top letters, <b>keeping your gaze on the fixation target as you adjust the blurriness levels</b>. Use the mouse to move the slider left and right to adjust the blurriness. Moving the slider to the left make the letters sharper. Moving the slider to the right makes the letters blurrier.</p><p>When you are done adjusting, click the fixation target to go to the next trial.</p>"
}
blurPracticeTimeline.push(blur_instructions);
var probe_instructions = {
type: 'html-keyboard-response',
stimulus: "<strong> Practice Trials: Flash Detection</strong><p>During the trials, you may notice a brief flash of a small and light-colored shape in the letters. Whenever you notice a flash, press the spacebar immediately. The following trials will give you practice with pressing the spacebar when you see a flash.</p>"
}
probePracticeTimeline.push(probe_instructions);
var task_instructions = {
type: 'html-keyboard-response',
stimulus: "Now you will practice blurriness adjustment and flash detection together. Remember to <b>keep your gaze on the fixation target at all times</b>. Press any key to start the practice trials."
}
bothPracticeTimeline.push(task_instructions);
// define a trial
var trial = {
type: 'jspsych-blurry-word',
target_stimulus: jsPsych.timelineVariable('target_stimulus'),
test_stimulus: jsPsych.timelineVariable('test_stimulus'),
targetBlur: jsPsych.timelineVariable('targetBlur'),
attentionProbe: jsPsych.timelineVariable('attentionProbe'),
attentionProbeDuration: jsPsych.timelineVariable('attentionProbeDuration'),
attentionProbeDelay: jsPsych.timelineVariable('attentionProbeDelay')
}
// define probe trial (in which probe detection concludes the trial)
var probe_trial = {
type: 'jspsych-blurry-word',
target_stimulus: jsPsych.timelineVariable('target_stimulus'),
test_stimulus: jsPsych.timelineVariable('test_stimulus'),
targetBlur: jsPsych.timelineVariable('targetBlur'),
attentionProbe: jsPsych.timelineVariable('attentionProbe'),
attentionProbeDuration: jsPsych.timelineVariable('attentionProbeDuration'),
attentionProbeDelay: jsPsych.timelineVariable('attentionProbeDelay'),
attention_response_ends_trial: true
}
// add 3 blur practice trials to blur practice timeline
var blur_practice_timeline_variables = prac_timeline_variables.slice(0,3);
for (var i of blur_practice_timeline_variables) {
i.attentionProbe = "none";
}
var blur_practice = {
timeline: [trial],
timeline_variables: blur_practice_timeline_variables,
randomize_order: true,
repetitions: 1
}
blurPracticeTimeline.push(blur_practice);
// add 3 probe practice trials to probe practice timeline
var probe_practice_timeline_variables = prac_timeline_variables.slice(3,6);
for (var i of probe_practice_timeline_variables) {
var rand = Math.random();
if (rand < 0.5) {
i.attentionProbe = "up";
}
else {
i.attentionProbe = "down";
}
}
var probe_practice = {
timeline: [probe_trial],
timeline_variables: probe_practice_timeline_variables,
randomize_order: true,
repetitions: 1
}
probePracticeTimeline.push(probe_practice);
// add 4 complete practice trials to both practice timeline
var both_practice = {
timeline: [trial],
timeline_variables: prac_timeline_variables.slice(6),
randomize_order: true,
repetitions: 1
}
bothPracticeTimeline.push(both_practice);
// add the three phases to the practice timeline
order = Math.random();
if (order < 0.5) {
practiceTimeline = practiceTimeline.concat(blurPracticeTimeline);
practiceTimeline = practiceTimeline.concat(probePracticeTimeline);
}
else {
practiceTimeline = practiceTimeline.concat(probePracticeTimeline);
practiceTimeline = practiceTimeline.concat(blurPracticeTimeline);
}
practiceTimeline = practiceTimeline.concat(bothPracticeTimeline);
// add the practice timeline to the master timeline
timeline = timeline.concat(practiceTimeline);
var start_instructions = {
type: 'html-keyboard-response',
stimulus: "You have completed the practice trials. Now you will start the actual experiment. <p>Remember: adjust the blurriness of the bottom word to the top word using your mouse and the slider.</p> <p>Press the spacebar whenever you see a flash.</p> Do all of this <b>while keeping your gaze on the fixation target</b>. <p>Press any key to start the experiment.</p>"
}
timeline.push(start_instructions);
// add all trials to the master timeline
var all_trials = {
timeline: [trial],
timeline_variables: timeline_variables,
randomize_order: true,
repetitions: 1
}
timeline.push(all_trials);
// SAVE DATA TO DATABASE
var saveData = {
type: 'call-function',
func: function(){
serverComm.save_data(jsPsych.data.get().values());
}
}
timeline.push(saveData);
var debrief1 = {
type: 'html-keyboard-response',
stimulus: "Congratulations! You have completed all of the trials.</p> "+
"<p>In this experiment, we investigate a purposed effect of knowledge on perception by Gary Lupyan."+
" In the experiment that Lupyan conducted, participants made meaningless, but not meaningful, letters "+
"sharper when adjusting them in relation to meaningful letters, a result which suggests that meaningful "+
"letters look sharper than meaningless ones. We propose that such an effect might be influenced by the way "+
"participants allocate physically directed and mentally directed attention.</p> <p>In this experiment, we "+
"ask you to perform the same task with your gaze fixed, so that your physically directed attention is "+
"equally allocated between the meaningful and meaningless letters. We use flashes to detect your mental "+
"attention to see if it is unequally allocated to the meaningful and meaningless letters. We hypothesize "+
"that a difference in your mental attention might cause you to make meaningless letters sharper when "+
"adjusting them to meaningful strings. Analyzation of your data gives us insight into our hypothesis. Thank you! </p>"+
"<p><a href='https://app.prolific.ac/submissions/complete?cc=UDN08F8A'>Click here to complete the experiment and return to Prolific.</a> You do not need a completion code.</p>",
choices: jsPsych.NO_KEYS
}
timeline.push(debrief1);
jsPsych.init({
timeline: timeline,
});
</script>
</html>