forked from smeylan/pilesort
-
Notifications
You must be signed in to change notification settings - Fork 0
/
polysemy_pilesort.html
219 lines (174 loc) · 9.93 KB
/
polysemy_pilesort.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
<!DOCTYPE html>
<html>
<head>
<title> Polysemy Project </title>
<!-- <script src="http://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script> -->
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> -->
<!-- <script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script> -->
<!-- <script> -->
<!-- // Initialize Firebase -->
<!-- var config = { -->
<!-- apiKey: "AIzaSyBZlrlVLYmUQ4R1Or440KsNZnexegtOKPk", -->
<!-- authDomain: "brilliant-heat-3296.firebaseapp.com", -->
<!-- databaseURL: "https://brilliant-heat-3296.firebaseio.com", -->
<!-- storageBucket: "brilliant-heat-3296.appspot.com", -->
<!-- messagingSenderId: "269634635331" -->
<!-- }; -->
<!-- firebase.initializeApp(config); -->
<!-- </script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
<script src="https://cdn.ravenjs.com/3.9.1/raven.min.js"></script>
<script type='text/javascript'>Raven.config('https://[email protected]/124988').install()</script>
<script src="polysemy_pilesort.js" type='text/javascript'></script>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
padding-top: 30px;
text-align: center;
}
.btn-info {
white-space: normal;
}
/* .my-btn { */
/* @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); */
/* @include button-variant(blue, black, blue); */
/* } */
.btn-group {
text-align: center;
}
/* .col-centered{ */
/* float: none; */
/* margin: 0 auto; */
/* } */
.warning{
color: red;
}
.start-centered{
position:absolute;
left:100px;
width: 800px;
}
/* @media (max-width: 760px) { */
/* .btn-responsive { */
/* padding:2px 4px; */
/* font-size:50%; */
/* line-height: 1; */
/* } */
/* } */
#dropzone{
/* margin: auto; */
height: 400px;
background-color: #ccc;
border: 4px transparent;
border-radius: 6px;
margin: 10px auto 30px;
/* margin: 0px; */
padding: 10px;
}
.relevantSentence{
height:120px;
border: 4px transparent;
border-radius: 6px;
margin: 10px auto 10px;
padding: 10px;
background-color: #ccc;
}
#info{
height:150px;
}
.draggable {
border: 3px;
border-radius: 4px;
border-style: solid;
border-color: red;
/* padding-bottom:25px; */
overflow: hidden;
width: 38px;
height: 38px;
position: absolute;
/* left: 200px; */
top: 300px;
z-index: 2;
}
h4{
padding: 0px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="consent" style="text-align:left">
<h4>1. Consent to Participate</h4>
This research is being conducted by Professor Thomas Griffiths, a faculty member at the University of California at Berkeley. Professor Griffiths' lab investigates computational models of human cognition. The study typically takes about 12 minutes.
<br /><br />
If you agree to take part in the research, you will drag and arrange a group of sentences according to the similarity of their meanings. You will receive $.75 for your participation at the end of the session. All of the information that we obtain during the research will be kept confidential, and will not associated with your name in any way.
<br /><br />
Your participation in this research is voluntary. You are free to refuse to take part, and you may stop taking part at any time. You are free to discontinue participation in this study at any time with no penalty. If you have any questions about the research, do not hesitate to contact Stephan Meylan at <a href="mailto:[email protected]">[email protected]</a>. You may also contact us through Amazon Mechanical Turk. If you have any questions about your rights or treatment as a participant in this research project, please contact UC Berkeley\'s Committee for Protection of Human Subjects at (510) 642-7461 or <a href="mailto:[email protected]">[email protected]</a>.
<br /><br />
By selecting the 'Agree to Participate' button below, I acknowledge that I am 18 or older, have read this consent form, and I agree to take part in the research.
<br /><br />
<h4>2. System Requirement</h4>
<br /><br />
Please note that this HIT requires Javascript, and that your computer must be connected to the internet throughout the HIT. Please maximize the browser size for best results.
<br /><br />
<input id="agree" class="btn btn-info btn-responsive" style="color:black;text-align:center" type="button" value="Agree to Participate" />
<input id="decline" class="btn btn-info btn-responsive" style="color:black;text-align:center" type="button" value="Choose not to Participate"/>
</div>
<div id="experiment" class="hidden">
<div id='header'>
<p id='info' class="bg-info center-block lead start-centered" style="font-size:120%; text-align:left">
You will see a total of n sentences that include the word w. Each sentence is represented by a numbered square in the grey canvas below. Drag the squares around in the canvas, such that sentences with similar meanings for w are grouped closer together. Scroll down to see sentence reminders below the canvas.
</p>
<p id='warning' class='warning hidden'style="width:250px;position:absolute;top:220px;left:350px;zIndex:0">Move the current sentence to proceed</p>
</div>
<!-- <div id="buttons" style="margin:20px"> -->
<!-- <div id="buttons" class="start-centered" style="position:absolute;top:370"> -->
<!-- <div class="btn-group btn-group-lg start-centered" style="width:150px;position:absolute;top:200ox"><input class="btn btn-info disabled" id="next" style="color:black" type="button" value="New Sentence" /></div> -->
<div id="nextdiv" class="start-centered" style="width:200px;position:absolute;top:210px;zIndex:2">
<button id='overlay' style="opacity:0">BUTTON</button>
<input class="btn btn-info disabled" id="next" style="color:black" type="button" value="New Sentence" />
<input class="btn btn-info disabled hidden" id="submit" style="color:black" type="button" value="Submit Sorting for This Word" />
</div>
<!-- <div class="start-centered" style="width:200px;position:absolute;top:210px;zIndex:2"><input class="btn btn-info disabled hidden" id="submit" style="color:black" type="button" value="Submit Sorting for This Word" /></div> -->
<div class="start-centered" style="width:100px;position:absolute;top:220px;left:250px;zIndex:0"><p id='trialnum'></p></div>
<!-- </div> -->
<!-- <div id="rainbow"> -->
<div id="dropzone" class="dropzone droppable start-centered" style="background-color: #ccc; top:250px"> </div>
<ul id="sentences" class="ui-helper-reset ui-helper-clearfix">
</ul>
<!-- </div> -->
<div id="label" class="relevantSentence start-centered" style="top:670px">
<h4 id="label-text">No sentence selected</h4>
</div>
<div id="hover" class="relevantSentence start-centered" style="top:800px">
<h4 id="hover-text">Move your cursor close to a number to see the corresponding sentence.</h4>
</div>
</div>
<div id="finishedExperiment" class="hidden">
<div class='bg-info center-block lead'>
<p>
Thank you for participating in the Polysemy experiment! Here is your survey code for Amazon Mechanical Turk:
</p>
<p id="AMTcode"></p>
</div>
</div>
<div id="declinedExperiment" class="hidden">
<div class='bg-info center-block lead'>
<p>
Please use the survey code: 00000000 to return the HIT on Amazon Mechanical Turk, and exit this window. Thank you!
</p>
</div>
</div>
<div id="userExists" class="hidden">
<div class='bg-info center-block lead'>
<p>
This user has already participated in the experiment--please do not participate twice!
Please use the survey code: 11111111 to return the HIT on Amazon Mechanical Turk, and exit this window. Thank you!
</p>
</div>
</div>
</body>
</html>