-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexperiment.html
345 lines (257 loc) · 12 KB
/
experiment.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
<!-- ## Code -->
<html>
<head>
<title>Form/Concept experiment </title>
<!-- Include the [jQuery library](http://jquery.com/), which helps you manipulate HTML elements from JS. -->
<script src="jquery-1.11.2.min.js"></script>
<!-- [mmturkey]: http://github.com/longouyang/mmturkey -->
<script src="mmturkey-0.6.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="lib/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="lib/colorpicker/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="lib/colorpicker/layout.css" />
</head>
<body>
<script type='text/javascript' src='lib/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='lib/jquery-ui.js'></script>
<script type="text/javascript" src="lib/colorpicker/colorpicker.js"></script>
<script type="text/javascript" src="lib/eye.js"></script>
<script type="text/javascript" src="lib/colorpicker/colorpicker.js"></script>
<script type='text/javascript' src='lib/raphael.js'></script>
<script type='text/javascript' src='ecosystem.js'></script>
<script type="text/javascript" src="lib/eye.js"></script>
<script type="text/javascript" src="lib/utils.js"></script>
<script type="text/javascript" src="lib/colorpicker/layout.js?ver=1.0.2"></script>
<!-- The s slide. -->
<div class="slide" id="instructions">
<div style="width: 500px; margin: 0 auto; text-align: center; background-color: #8C1516; padding: 20px 15px 10px 10px">
<img src="images/stanford.png" height="46" width="360" alt="Stanford University">
</div>
<p id='logo-text'>Stanford Language and Cognition Lab</p>
<p class="block-text">
This is an experiment that tests aspects of human word learning. The experiment involves audio sequences. Please make sure that no music is played in the background. Put your headphones on or make sure you are in a quiet environment.
</p>
<!-- Button to start the experiment. <code>this.blur()</code> removes the focus from the button, if the user pressed the button by using the keyboard, rather than the mouse. -->
<button type="button" onclick="this.blur(); experiment.next()">Start</button>
<!-- Legal blurb that we're required to show. -->
<!--<p class="block-text"><br> <b> Note: you won't be able to preview this HIT before accepting it because it's so short. </b></p>-->
<p class="block-text" id="legal">By answering the following questions, you are participating in a study being performed by cognitive scientists in the Stanford Department of Psychology. If you have questions about this research, please contact us at <a href="mailto://[email protected].">[email protected]</a>. You must be at least 18 years old to participate. Your participation in this research is voluntary. You may decline to answer any or all of the following questions. You may decline further participation, at any time, without adverse consequences. Your anonymity is assured; the researchers who have requested your participation will not receive any personal information about you. Note however that we have recently been made aware that your public Amazon.com profile can be accessed via your worker ID if you do not choose to opt out. If you would like to opt out of this feature, you may follow instructions available <a href="https://www.amazon.com/gp/help/customer/display.html?nodeId=16465241">here</a>.</p>
</div>
<!-- The stage norm-->
<div class="slide" id="stage_discrim" style="display:table;">
<audio id='sound_left_d' autoplay='autoplay'></audio>
<audio id='sound_right_d' autoplay='autoplay'></audio>
<table id="hello_d" width="80%" border="0" cellspacing="20" cellpadding="0" align="center">
<tr>
<td valign="top">
<div id="word_left_d">
</div>
<div id="word_right_d">
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="answer_left_d">
<p id="same_d" align="center"><font size="6">Same</font></p>
</div>
<div id="answer_right_d">
<p id="diff_d" align="center"><font size="6">Different</font></p>
</div>
</td>
</tr>
</table>
</div>
<!-- Learning phase -->
<div class="slide" id="stage" style="display:table;">
<audio id='sound_left' autoplay='autoplay'></audio>
<audio id='sound_right' autoplay='autoplay'></audio>
<table id="hello" width="80%" border="0" cellspacing="20" cellpadding="0" align="center">
<tr>
<td valign="top">
<div id="word_left">
</div>
<div id="word_right">
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="alien">
<p id="pic_alien" align="center"></p>
</div>
</td>
</tr>
<tr>
<td>
<div id="intruct_text0">
<p class="question-text" id="instruct_dynamic">{{}}</p>
</div>
</td>
</tr>
</table>
</div>
<!-- Testing phase -->
<div class="slide" id="Testing" style="display:table;">
<audio id='sound' autoplay='autoplay'></audio>
<table id="hello1" width="80%" border="0" cellspacing="20" cellpadding="0" align="center">
<tr>
<td valign="top">
<div id="word_l">
</div>
<div id="word_r">
</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="alienT">
<p id="pic_alienT" align="center"></p>
</div>
</td>
</tr>
<tr>
<td>
<div id="intruct_text">
<p class="question-text">Select the right object!</p>
</div>
</td>
</tr>
</table>
</div>
<!-- Instructions for real 1 -->
<div class="slide" id="Task_instructions">
<br>
<p id="MyTask" align="center">{{}}</p>
<table align="center">
<tr>
<td>
<p><center><img src='images/alien1.png' height='120' width='200'></center> </p>
</td>
</tr>
<tr>
<td align="center">
<button type="button" id="nextButton_choice" onClick="this.blur(); experiment.next()"> Continue</button>
</td>
<tr><td align="center">
</td></tr>
</table>
</div>
<!-- Instructions for test items (uses key press instead of click)-->
<div class="slide" id="Task_instructions_test">
<br>
<p id="MyTask_test" class="block-text" align="center">{{}}</p>
<table align="center">
<tr>
<td>
<p><center><img src='images/alien1.png' height='120' width='200'></center> </p>
</td>
</tr>
<tr>
<td align="center">
<p class="question-text">Press <span class='space-next'>Space</span></p>
</td>
<tr><td align="center">
</td></tr>
</table>
</div>
<!-- Experiment with the scale of objects beforehand-->
<div class="slide" id="scale_slide">
<p id="my_scale_inst" class="block-text" align="center">{{}}</p>
<table align="center">
<tr>
<td>
</td>
<td align="center">
<div id="category"></div>
</td>
<td></td>
</tr>
<tr>
<td>prototype 1</td>
<td align="center">
<div class='slider' id='prop'></div>
</td>
<td>prototype 2</td>
</tr>
<tr>
<td></td>
<td align="center">
<button type="button" onClick="this.blur(); experiment.next()"> Continue</button>
</td>
<td></td>
</tr>
</table>
</div>
<!-- Briefing-->
<div class="slide" id="briefing">
<br><p><center>You have finished the experiment. Thank you for your participation!<br> Before submitting the data, please answer the following questions. <br>The answers are totally confidential and will not affect the approval of your HIT</center></p>
<p><b>What is your age?</b></p>
<p>
<select name="age" id="age" form="demographics">
<option value="">Choose an age</option>
<option value="0-10"> 0-10</option>
<option value="20-29">10-19</option>
<option value="20-29">20-29</option>
<option value="30-39">30-39</option>
<option value="40-49">40-49</option>
<option value="50-59">50-59</option>
<option value="60-69">60-69</option>
<option value="70-79">70-79</option>
<option value="80-89">80-89</option>
<option value=">90">90+</option>
</select>
</p>
<p><b>What is your gender?</b></p>
<p>
<select name="gender" id="gender" form="demographics">
<option value="">Choose a gender</option>
<option value="M">Female</option>
<option value="F">Male</option>
<option value="O">Other</option>
</select>
</p>
<p><b>Is English your native (fisrt) language?</b></p>
<p>
<select name="native" id="native" form="demographics">
<option value="">Choose an answer</option>
<option value="yes">Yes</option>
<option value="No">No</option>
</select>
</p>
<p><b>Were you exposed to one of these languages in your early childhood: Arabic or Hindi? (whether or not you ended up speaking the language) </b></p>
<p>
<select name="second" id="second" form="demographics">
<option value="">Choose an answer</option>
<option value="yes">Yes</option>
<option value="No">No</option>
</select>
</p>
<p><b>Did you experience any technical problem with the experiment at any point?</b></p>
<p>
<select name="problem" id="problem" form="demographics">
<option value="">Choose a response</option>
<option value="No">No problem</option>
<option value="Yes">Yes I had a problem</option>
</select>
</p>
<p><b>If you answered Yes to the previous question, can you explain what kind of technical problem did you have?</b></p>
<p>
<textarea type="text" id="ifproblem" style="width:100%" name="problemExp"></textarea>
</p>
<p><b>[Optional] Do you have any comment about the experiment? (too long? too complicated?,...) </b></p>
<p>
<textarea type="text" id="comment" style="width:100%" name="comment"></textarea>
</p>
<center><button type="button" id="nextButton_brief" onClick=" this.blur(); experiment.next()"> Submit the results!</button></center>
</div>
<!-- The finish slide. -->
<div class="slide" id="finished">
You're finished - thanks for participating! Submitting to Mechanical Turk...
</div>
<!-- Include the <a href="experiment.html">JavaScript file for the experiment</a>. As written, that script immediately executes commands, so we include it here at the end of the HTML file to ensure that resources referenced by the script actually exist. For instance, one of the immediately executed commands is <code>showSlide("instructions")</code>. If we loaded experiment.js, say, in the <code>head</code> section, <code>showSlide("instructions")</code> would fail because the <code>instructions</code> slide doesn't exist yet. It is possible to load the script in <code>head</code> but you have to ensure that any immediately executed commands, if they rely on potentially uninitialized HTML elements, are _delayed_ until the page is ready, using either [window.onload][onload] or jQuery's more robust [$(document).ready()][domReady] -->
<!-- [onload]: https://developer.mozilla.org/en/DOM/window.onload -->
<!-- [domReady]: http://api.jquery.com/ready/ -->
<script src="experiment.js"></script>
</body>
</html>