forked from crishernandezmaps/liqen-medialab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
381 lines (315 loc) · 13.6 KB
/
form.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
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
---
layout: page
title: "Human sensor tool"
permalink: /form/
order: 4
---
<div class="splash-screen bg-inverse text-xs-center">
<br><br>
<h2 class="en">Instructions</h2>
<p>liQen is a project aim to discover territorial controversies in different cities around the world. Thanks for taking the time to cooperate.</p>
<ol>
<li>Before starting, please have a moment to calibrate your audition to this place in particular. Just place yourself quitely in this spot for five minutes.</li>
<li>After that, please identify activities sorrunding you inspecting and visualizing elements from your nearest environment</li>
<li>Now, let's get into the questions!</li>
</ol>
<div class="text-center">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</div>
<form action="https://liqen-pre.herokuapp.com/metrics" method="post">
<!-- Location -->
<fieldset class="form-group" id="choose-sensor">
<legend>Choose the nearest sensor</legend>
<button type="button" class="btn btn-primary btn-xs" id="get-location" disabled>Detect automatically</button>
<span class="text-danger" id="location-not-available" >You need to configure your device</span>
<span id="nearest-sensor" hidden>Nearest sensor: <strong id="nearest-sensor-text">Medialab Prado - </strong></span>
<p>Or choose it manually:</p>
<div class="radio">
<label>
<input type="radio" name="sensor_id" id="sensor_id-london" value="3593">
London
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sensor_id" id="sensor_id-madrid" value="170">
Madrid
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sensor_id" id="sensor_id-santiago" value="3683">
Santiago de Chile
</label>
</div>
<input type="hidden" value="" id="latitude" name="latitude">
<input type="hidden" value="" id="longitude" name="longitude">
<input type="hidden" value="" id="sensor-id-calc" name="sensor_id_calc">
</fieldset>
<!-- q 1 -->
<fieldset class="form-group">
<legend class="en">From where did you come?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="procedence" id="procedence-home" value="home">
From Your house
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="procedence" id="procedence-transit" value="transit">
From Commuting
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="procedence" id="procedence-other" value="other">
Other
</label>
</div>
</fieldset>
<!-- q 2 -->
<fieldset class="form-group">
<legend class="en">About the environmental noise...</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noise-disturbance" id="noise-disturbance-0" value="0">
It does not bother me
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noise-disturbance" id="noise-disturbance-1" value="1">
It does bother me
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noise-disturbance" id="noise-disturbance-2" value="2">
Very annoying
</label>
</div>
</fieldset>
<!-- q 3 -->
<fieldset class="form-group">
<legend class="en">Which is the source of the noise?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="source" id="source-motor" value="motor">
Motorize vehicles
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="source" id="source-roadworks" value="roadworks">
Works on the street
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="source" id="source-leisure" value="leisure">
Leisure activities (sports games, street artist, etc.)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="source" id="source-unknown" value="unknown">
Unkwon
</label>
</div>
</fieldset>
<!-- q 4 -->
<fieldset class="form-group">
<legend class="en">According to you, this area is?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noisy-area" id="noisy-area-0" value="0">
Quiet
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noisy-area" id="noisy-area-1" value="1">
Slightly noisy
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noisy-area" id="noisy-area-2" value="2">
Noisy but I can tolerate it
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noisy-area" id="noisy-area-3" value="3">
Noisy
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="noisy-area" id="noisy-area-4" value="4">
Particularly noise
</label>
</div>
</fieldset>
<!-- q 5 -->
<fieldset class="form-group">
<legend class="en">Do you considere that falling asleep in this area must be...?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sleep-quality" id="sleep-quality-2" value="2">
Easy
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sleep-quality" id="sleep-quality-1" value="1">
Hard
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sleep-quality" id="sleep-quality-0" value="0">
Impossible
</label>
</div>
</fieldset>
<!-- q 6 -->
<fieldset class="form-group">
<legend class="en">Could you work on an environment with this level of noise?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="for-working-here" id="for-working-here-yes" value="yes">
Yes
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="for-working-here" id="for-working-here-no" value="no">
No
</label>
</div>
</fieldset>
<!-- q 7 -->
<fieldset class="form-group">
<legend class="en">About your <strong>residencial area</strong>, would you say the noise there is:</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="at-home" id="at-home-better" value="better">
Less than here
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="at-home" id="at-home-same" value="same">
Same as here
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="at-home" id="at-home-worse" value="worse">
More than here
</label>
</div>
</fieldset>
<!-- q 8 -->
<fieldset class="form-group">
<legend class="en">Do you think the noise here is...</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="continuous" id="continuous-yes" value="yes">
Permanent
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="continuous" id="continuous-no" value="no">
Intermittent
</label>
</div>
</fieldset>
<!-- q 9 -->
<fieldset class="form-group">
<legend class="en">Would you considere living in this area?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="for-living-here" id="live-here-yes" value="yes">
Yes
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="for-living-here" id="live-here-no" value="no">
No
</label>
</div>
</fieldset>
<!-- q 10 -->
<fieldset class="form-group">
<legend class="en">Do you think the noise in this area during the day is...?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="other-time" id="other-time-better" value="better">
Less than now
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="other-time" id="other-time-same" value="same">
Same is now
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="other-time" id="other-time-worse" value="worse">
More than now
</label>
</div>
</fieldset>
<!-- q 11 -->
<fieldset class="form-group">
<legend class="en">In comparission with the starting moment of this survey, the noise now is...?</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="thirty-mins" id="thirty-mins-better" value="better">
Less than before
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="thirty-mins" id="thirty-mins-same" value="same">
Equal than before
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="thirty-mins" id="thirty-mins-worse" value="worse">
More than before
</label>
</div>
</fieldset>
<!--
<fieldset class="form-group">
<legend>Your location</legend>
Before you send your answers, please give us your current location to find out your nearest sensor
<p>
<button type="button" class="btn btn-primary" id="get-location">
Give geo-location
</button>
</p>
<p id="nearest-sensor" class="en" hidden>Nearest sensor: <span id="nearest-sensor-text" class="font-weight-bold"></span></p>
</fieldset>
<input type="hidden" value="" id="latitude" name="latitude">
<input type="hidden" value="" id="longitude" name="longitude">
<input type="hidden" value="" id="sensor-id" name="sensor_id_calc">
-->
<fieldset class="form-group">
<legend>Disclosure</legend>
This is a research project run by a group of citizens. Your answers would never be public or know by a third party, just the general result.
<p class="text-center">
<button type="submit" class="btn btn-primary">Send</button>
</p>
</fieldset>
</form>
<script src="{{ "/form/js/geo.js" | prepend: site.baseurl | prepend: site.url }}"></script>