-
Notifications
You must be signed in to change notification settings - Fork 1
/
12-1-13-posted.html
139 lines (114 loc) · 5.64 KB
/
12-1-13-posted.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="mmturkey.0.5.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<!--
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="style-12-1-13-posted.css" />
</head>
<body>
<div class="slide" id="instructions">
<BR>
<BR>
<BR>
<BR>
<p class="block-text">In this survey you'll be asked to judge the quality of descriptions of pictures in order to help improve a system which generates descriptions.</p>
<p class="block-text">There are <span class="numquestions">{{}}</span> questions. The HIT should take around <span id="totaltime">{{}}</span> minutes to complete.</p>
<button type="button" onclick="experiment.intro()">Start</button>
<p class="block-text" id="mustaccept">
You must accept the HIT in order to continue.
</p>
<p class="block-text" id="legal">Legal information: By answering the
following questions, you are participating in a study being performed by
researchers in the Stanford Department of Linguistics. If you have
questions about this research, please contact Daniel Lassiter 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.</p> <BR><BR>
</div>
<div class="slide" id="intro">
<p class="blurb"><b>Instructions</b>
<br><br>In this HIT you will help us improve a system which generates descriptions for pictures. You'll see <span class="numquestions">{{}}</span> questions, each consisting of a picture and a sentence. Your job is to help us determine how good the sentence is as a description of the picture.</p>
<p class="blurb">For example, you might see a picture like this:</p>
<br>
<img style="display: block; margin-left: auto; margin-right: auto; width:380px; height:350px;" src="example.png"></img>
<br>
<br>
<p class="blurb">The description you read might be, for example, "All of the red dots are on the right side", or "There are five red dots".</p>
<br>
<p class="blurb">You should indicate the quality of the description using the slider, which represents a continuous measure of the quality of a description. To help you choose a value, for different locations of the slider you will also see a number between 0 ("<span class="mintxt">{{}}</span>") and 100 ("<span class="maxtxt">{{}}</span>"). The slider will start on a different, randomly chosen number each time.</p>
<div class="questions">
<div id="sliderexamplediv">
<table style="margin:auto;">
<tr>
<td class="mintxt" style="padding-right:5px; width:30px; text-align:center;">{{}}
</td>
<td>
<div id="track0" style="margin:auto; width:300px; background-color:#ccc; height:10px;">
<div id="handle0" style="width:10px; height:15px; background-color:#f00; cursor:move;"></div>
</div>
</td>
<td class="maxtxt" style="padding-left:5px; width:30px; text-align:center;">{{}}
</td>
</tr>
</table>
<p id="debug0"> </p>
</div>
</div>
<p class="blurb">
Sometimes a description will be clearly appropriate or inappropriate, but sometimes it will not. For example, "All of the red dots are on the right side of the picture" is not a great description of this picture, but you might feel that "There are five red dots" is OK (but not great). If so, the latter deserves a middling value.</p>
<p class='blurb'>All such responses are useful information for us. When you feel that a description is clearly appropriate or inappropriate, choose an extreme value. If you feel that a description is somewhat, but not fully, appropriate, indicate your intuition by selecting an intermediate value.
</p>
<p class="blurb">Thank you for helping in our research!</p>
</p>
<button type="button" onclick="this.blur(); experiment.begin();">Start</button>
</div>
<div class="slide" id="stage">
<div class="progress">
<span>Progress:</span>
<div class="bar-wrapper">
<div class="bar"></div>
</div>
</div>
<div id="canvascontainer">
<div class='canvas' id='canvas'></div>
</div>
<div class="questions">
<p class="qtxt"><span id="questiontxt">{{}}</span></p>
<div style="padding: 10px;" class="response" id="sliderdiv">{{}}</div>
<p class="txt" id='slidererror'>
<br>
It looks you haven't moved the slider in response to
<br>
the current question. Please adjust the slider to
<br>
indicate your answer.
</p>
<button id="continue">Continue</button>
</div>
</div>
<div class="slide" id="language">
<p>Final question: what is your native language (the primary language that was spoken at home when you were a child)?</p>
<p>Please enter it below, and then click 'Submit'.</p>
<form id="lgform">
<input type="text" name="lg" id="lgbox"></input>
<button type="button" id="lgsubmit">Submit</button>
</form>
</div>
<div class="slide" id="finished">
You're finished - thanks for participating! Submitting to Mechanical Turk...
</div>
<script type="text/javascript" src="12-1-13-posted.js"></script>
</body>
</html>