-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (144 loc) · 11 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
<!-- Sophie Yiling Yun & Yi-Chia Chen -->
<!DOCTYPE html>
<html lang='en-us' translate='no'>
<head>
<meta charset='utf-8'>
<title>UCLA Experiment</title>
<link rel='icon' href='media/favicon.ico'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Raleway&display=swap' />
<link rel='stylesheet' href='css/style.css' />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.min.js'></script>
<script src='js/func.js'></script>
<script src='js/expt.js'></script>
<script src='js/game.js'></script>
<script src='js/parameters.js'></script>
<script src='js/main.js'></script>
</head>
<body>
<noscript>It seems that JavaScript is disabled in your browser. Please go to settings and enable JavaScript for this experiment.</noscript>
<div class='page-box fixed-box' id='instr-box'>
<p id='instr-text'></p>
<img id='instr-img' src='media/blank.jpg' alt='Image Error: Please contact the experimenter at XXX with the phrase "IMG-ERROR".'></img>
<audio id='sound-test-aud'>
<source src='media/metronome_80bpm_181beats_centered.mp3' preload='auto'/>
Audio Error: Please contact XXX and include your sona ID and the phrase "AUD-ERROR" to receive your credit.
</audio>
<video class='instr-vid' id='game-demo-vid' preload='auto'>
<source src='media/game_demo.mp4' />
Video Error: Please contact XXX and include your sona ID and the phrase "VID-ERROR" to receive your credit.
</video>
<video class='instr-vid' id='tempo-demo-vid' preload='auto'>
<source src='media/tempo_demo.mp4' />
Video Error: Please contact XXX and include your sona ID and the phrase "VID-ERROR" to receive your credit.
</video>
<button class='button instr-button' id='sound-test-play-button'>PLAY</button>
<button class='button instr-button' id='again-button'>AGAIN</button>
<button class='button instr-button' id='next-button'>NEXT</button>
</div>
<!--======== TASK ========-->
<div class='page-box' id='task-box'>
<audio id='metronome'>
<source src='media/metronome_80bpm_181beats_centered.mp3'>
</audio>
<img id='sinewave' src='media/line_customized.png' alt='Image Error: Please contact the experimenter at XXX with the phrase "IMG-ERROR".'></img>
<canvas id='canvas'>CanvasError: Please contact XXX and include your sona ID and the phrase "CANVAS-ERROR" to receive your credit.</canvas>
<div id='end-object'></div>
<div id='canvas-frame'></div>
<div id='start-mark'></div>
<div class='game-text' id='interruption-notice'>Oops! Deviated too much!</div>
<div class='game-text' id='practice-score'></div>
<div class='game-text' id='recognition-q'>Yours or Not?</div>
</div>
<!--======== REST ========-->
<div class='page-box' id='rest-box'>
<p id='rest-text'></p>
</div>
<!--======== DEBRIEFING QUESTION ========-->
<div class='page-box' id='questions-box'>
<div class='question'>
You are almost done! Now please answer these last questions:
</div>
<div class='question'>
<p class='bold'>Please make a guess on the purpose of the experiment</p>
<textarea class='open-ended-text-area' id='purpose'></textarea>
</div>
<div class='question'>
<p class='bold'>What device did you use to control the cursor?</p>
<label><div class='option'><input class='radio' type='radio' name='device' value='mouse' /><p class='option-text'>A computer mouse</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='device' value='pad' /><p class='option-text'>A touchpad (trackpad)</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='device' value='other' /><p class='option-text'>Other</p></div></label>
</div>
<div class='question' id='other-device-question'>
<p class='bold'>Please enter the device you used for controlling the cursor:</p>
<textarea id='other-device'></textarea>
</div>
<div class='question'>
<p class='bold'>Do you currently have a dual-monitor setup where the other monitor was on during the games?</p>
<p class='small-dim'>Please answer YES even if you did not actively use the other monitor.</p>
<label><div class='option'><input class='radio' type='radio' name='monitor' value='0' /><p class='option-text'>No, I don't.</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='monitor' value='1' /><p class='option-text'>Yes, I do.</p></div></label>
</div>
<div class='question'>
<p class='bold'>Was the browser in the full-screen mode during all the games?</p>
<p class='small-dim'>You will receive your credit regardless of what your answer is here. Please be honest for science! Thanks!</p>
<label><div class='option'><input class='radio' type='radio' name='fullscreen' value='0' /><p class='option-text'>No, it wasn't.</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='fullscreen' value='1' /><p class='option-text'>Yes, it was.</p></div></label>
</div>
<div class='question'>
<p class='bold'>Did you complete this experiment seriously throughout (without randomly responding)?</p>
<p class='small-dim'>You will receive your credit regardless of what your answer is here. Please be honest for science! Thanks!</p>
<label><div class='option'><input class='radio' type='radio' name='serious' value='0' /><p class='option-text'>No, I didn't.</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='serious' value='1' /><p class='option-text'>Yes, I did.</p></div></label>
</div>
<div class='question'>
<p class='bold'>Was any part of the procedure unclear? Did you have any problems completing any of the tasks?</p>
<p class='small-dim'>You will receive your credit regardless of what your answer is here. Please be honest for science! Thanks!</p>
<textarea class='open-ended-text-area' id='problems'></textarea>
</div>
<div class='question'>
<p class='bold'>What is your gender?</p>
<label><div class='option'><input class='radio' type='radio' name='gender' value='F' /><p class='option-text'>Female</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='gender' value='M' /><p class='option-text'>Male</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='gender' value='O' /><p class='option-text'>Other</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='gender' value='N' /><p class='option-text'>I would rather not say</p></div></label>
</div>
<div class='question'>
<p class='bold'>What is your age?</p>
<input type='number' id='age' min='0' max='150'/>
</div>
<button class='button' id='debriefing-q-button'>NEXT</button>
<p class='warning' id='q-warning'></p>
</div>
<!--======== MANIPULATION CHECK QUESTIONS ========-->
<div class='page-box' id='manipulation-check-q-box'>
<div class='question'>
Which of the 2 games gives you stronger impression that the yellow ball is alive?
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckAlive' value='physical' /><p class='option-text'>The 1st game</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckAlive' value='social' /><p class='option-text'>The 2nd game</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckAlive' value='same' /><p class='option-text'>No difference</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckAlive' value='forgot' /><p class='option-text'>I can't remember</p></div></label>
</div>
<div class='question'>
Which of the 2 games gives you stronger impression that the yellow ball is acting socially?
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckSocial' value='physical' /><p class='option-text'>The 1st game</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckSocial' value='social' /><p class='option-text'>The 2nd game</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckSocial' value='same' /><p class='option-text'>No difference</p></div></label>
<label><div class='option'><input class='radio' type='radio' name='manipulationCheckSocial' value='forgot' /><p class='option-text'>I can't remember</p></div></label>
</div>
<button class='button' id='manipulation-check-q-button'>SUBMIT</button>
<p class='warning' id='manipulation-check-q-warning'></p>
</div>
<!--======== DEBRIEFING ========-->
<div class='page-box' id='debriefing-box'>
You have finished the experiment! Thank you very much!<br /><br />Whenever you are ready, click END to submit your work. You may read the text below if you are interested in what we are studying.<br />
<button class='button' id='end-button'>END</button>
<br /><br /><br />
<strong>Debriefing Sheet</strong><br /><br />
Thanks for participating in the experiment.<br /><br />
In the games you play, sometimes you see your own movements like what you'd see normally (e.g., you see how your hands move according to how you move it), but sometimes your visual experience deviate from what you command your hand to do and what you feel from the movements of your hand. How much you pick up on the mismatch and how much you perceptual system tolerate the mismatch determine how much weaker you experience the visual feedback as yourself.<br /><br />
What we were testing in these games was how the yellow ball's motion influenced your tolerance for the mismatch. Sometimes the ball appeared to be causally "launched" by the cursor, in a physical manner. Critically, sometimes it appeared to suddenly start moving on it's own when the cursor get near, as if it is avoiding the cursor as in a social interaction. Since we often think of ourselves and our actions in the social terms, compared to the physical terms, we are testing if this tendency translate to different levels of tolerance for the mismatch between what you see and what you feel from your hand movements.<br /><br />
Please don't hesitate to contact the researcher if you have any questions.
</div>
</body>
</html>