/
judge_dynamics.html
207 lines (175 loc) · 8.52 KB
/
judge_dynamics.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
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" type="text/css" href="css/canvas.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="exclude.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>
<script type="text/javascript" src="extend_jquery.js"></script>
<script type="text/javascript" src="taskutil.js"></script>
<script type="text/javascript" src="image_preloader.js"></script>
<script type="text/javascript" src="super_task.js"></script>
<script type="text/javascript" src="sequential_task.js"></script>
<script type="text/javascript" src="judge_task.js"></script>
<script type="text/javascript" src="judge_dynamics_task.js"></script>
<script type="text/javascript" src="judge_dynamics.js"></script>
</head>
<body>
<!-- PREAMBLE -->
<span id="pre"></span>
<!-- INSTRUCTIONS -->
<DIV id="instruct" style="" class="task_section">
<div align="center">
<h3>Visual Turing Test: Generating new exemplars (dynamic)</h3>
</div>
<p> The display below shows a handwritten character from a foreign alphabet.
We showed the "target image" of this character to a person and asked them to draw a new example (with a computer mouse). We also gave this same task to a computer program that simulates how people draw a new character.</p>
<p> You will see a short video of each image being drawn. The ink color changes every time the drawer lifts
up the pen, making it easier to track the different pen strokes. Can you tell which is the person's drawing, and which is the computer program's drawing? </p>
<p> You will see a sequence of <span class="ntrials">N</span> displays just like this one below.
In each display, the computer program's drawing is randomly chosen to appear either on the left or the right.
You will always be asked to indicate the computer program's drawing, using your keyboard's arrow keys.
</p>
<p> Different people may have drawn the images in each display.
The length of each video is normalized to be roughly the same, and it should not be a factor in your judgement.
<span id="instruct_feedback">***</span>.
Please answer as accurately as you can.</p>
<center><b>Sample display</b></center>
<div id="demo_screen" align="center" style="border: 1px solid black;">
<br>
<table border="0">
<tr>
<td><center>Target image</center></td>
</tr>
<tr>
<td><div id="demo_itarget"></div></td>
</tr>
</table>
<br>
One video shows a person drawing, and the other video shows the computer program drawing.<br>
<b>Which video shows the computer program drawing?</b>
<br><br>
<table>
<tr>
<td><div id="demo_ileft"></div></td>
<td><div id="demo_ispacer"></div></td>
<td><div id="demo_iright"></div></td>
</tr>
</table>
<br>
<span id="demo_prompt"></span>
<br><br>
</div>
<p><b>Images loaded: <span id="pload">0</span> percent.</b></p>
<div align="center" id="toquiz" style="display:none;">
<button onclick="task.start_quiz();">Continue</button>
</div>
<div align="center" id="return_exp" style="display:none;">
<br><br><div align="center" ><button onclick="task.return_to_exp();">Return to experiment</button></div>
</div>
</DIV>
<!-- INSTRUCTIONS TEST -->
<DIV id="instruct_test" style="display:none;" class="task_section">
<FORM>
<b>Instructions quiz.</b><br><br>
The character in each display is<br>
<input type="radio" name="q1" value="0" class="qq">a number<br>
<input type="radio" name="q1" value="0">a letter from the English alphabet<br>
<input type="radio" name="q1" value="1">a letter from a foreign alphabet<br>
<input type="radio" name="q1" value="0">an Egyptian hieroglph<br><br>
What were people instructed to do with the character in the "target image"?<br>
<input type="radio" name="q2" value="0" class="qq">copy the target image exactly<br>
<input type="radio" name="q2" value="0">draw a new character in the same style<br>
<input type="radio" name="q2" value="1">draw a new example of the character<br><br>
The drawings were produced by<br>
<input type="radio" name="q3" value="0" class="qq">people vs. aliens<br>
<input type="radio" name="q3" value="0">adults vs. children<br>
<input type="radio" name="q3" value="1">people vs. a computer program<br>
<input type="radio" name="q3" value="0">two different computer programs<br><br>
By pressing the arrow keys, you will always be asked to indicate the drawing made by the<br>
<input type="radio" name="q4" value="0" class="qq">person<br>
<input type="radio" name="q4" value="0">alien<br>
<input type="radio" name="q4" value="1">computer program<br>
<input type="radio" name="q4" value="0">child<br><br>
The color of the ink indicates<br>
<input type="radio" name="q5" value="0" class="qq">artistic choices by the drawer<br>
<input type="radio" name="q5" value="0">different types of characters<br>
<input type="radio" name="q5" value="1">different pen strokes<br><br>
The length of each video is<br>
<input type="radio" name="q6" value="1" class="qq">roughly the same for all drawings<br>
<input type="radio" name="q6" value="0">an accurate reflection of how long the drawing took to make<br>
</FORM>
<button onclick="task.check_quiz();">Proceed to task.</button>
</DIV>
<!-- EXPERIMENT SECTION -->
<DIV id="exp" style="display:none;" class="task_section">
<div align="center">
<span id="header"></span><br><br>
</div>
<div id="screen" align="center" style="">
<table border="0">
<tr>
<td><center>Target image</center></td>
</tr>
<tr>
<td><div id="itarget"></div></td>
</tr>
</table>
<br>
One video shows a person drawing, and the other video shows the computer program drawing.<br>
<b>Which video shows the computer program drawing?</b>
<br><br>
<table>
<tr>
<td><div id="ileft"></div></td>
<td><div id="ispacer"></div></td>
<td><div id="iright"></div></td>
</tr>
</table>
</div>
<div align="center">
<span id="message"></span><br>
<span id="prompt"></span><br><br>
<button onclick="task.button_restart_trial();">Watch again</button>
<button onclick="task.review_instructions();">Review instructions</button>
</div>
</DIV>
<!-- SURVEY SECTION -->
<DIV id="survey" style="display:none;" class="task_section">
Your accuracy during the task was <b><span id="acc"></span> percent correct</b>.
<br><br>
What strategy did you use? How were the images drawn by the computer program
different than those drawn by humans? (required)<br>
<textarea id="survey_txt_strategy" rows="5" cols="50" class="survey_txt"></textarea><br><br>
What country do you currently reside in? (required)<br>
<input type="text" id="survey_txt_country" class="survey_txt"><br><br>
Are you right-handed or left-handed? (required)<br>
<input type="radio" name="survey_radio_handed" value="right" class="survey_radio">right-handed
<input type="radio" name="survey_radio_handed" value="left">left-handed<br><br>
If you have more than one response to any of the following questions, please separate your responses by commas (,).
If you have no response, leave the text box blank.<br>
What is your native language? (required) <input type="text" id="survey_txt_native_lang" class="survey_txt"><br>
What other languages can you speak and write? <input type="text" id="survey_txt_write_lang" class="survey_txt"><br>
What other languages can you speak but not write? <input type="text" id="survey_txt_speak_lang" class="survey_txt"><br><br>
Were there any technical problems with the website? (required)<br>
<input type="radio" name="survey_radio_trouble" value="yes" class="survey_radio">Yes
<input type="radio" name="survey_radio_trouble" value="no">No<br>
If yes, please describe the problem as specifically as you can:<br>
<textarea id="survey_txt_trouble" rows="5" cols="50" class="survey_txt"></textarea><br><br>
Do you have any general comments? (optional)<br>
<textarea id="survey_txt_comments" rows="5" cols="50" class="survey_txt"></textarea><br><br>
<div id="check_survey" style="">
<button onclick="task.survey_finished();">Check survey</button>
</div>
<div id="turk_form" style="display:none;">
<form name="myform" id="myform" action="" method="POST">
<input id="myid" type="hidden" name="assignmentId" value="">
<input id="data" type="hidden" name="data" value="">
<input type="submit" name="mysubmit" value="Submit">
</form>
</div>
</DIV>
</body>
</html>