-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
executable file
·478 lines (428 loc) · 24.1 KB
/
index.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
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
<!DOCTYPE html>
<html>
<head>
<title>EvoRoom</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,height=device-height" />
<link href="js/sail.js/css/sail.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="css/evoroom.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<script src="js/libs/phonegap-1.2.0.js" type="text/javascript"></script>
<script src="js/libs/barcodescanner.js" type="text/javascript"></script>
<script src="js/sail.js/deps/" type="text/javascript"></script>
<script src="js/sail.js/sail.js"></script>
<script>
Sail.load()
.then('js/sail.js/rollcall.js')
.then('js/evoroom.js')
.thenRun(function() {
return Sail.init(EvoRoom);
});
</script>
</head>
<body>
<header>
<h1>EvoRoom</h1>
</header>
<div id="evoroom">
<!-- ***********************************************SURVEY**************************************************** -->
<div id="loading-page" class="full-text-box" style="display:none">
<div class="title"><b>Loading, please wait...</b></div>
</div>
<div id="student-chosen-organisms" style="display:none">
<img class="first-organism organism-image" src="/images/ant_icon.png" alt="Ant">
<img class="second-organism organism-image" src="/images/civet_icon.png" alt="Civet">
</div>
<div id="log-in-success" class="full-text-box" style="display:none">
<div class="title"><b>Log in successful</b></div>
<div>
To gain entry into our elite team of rainforest ecologists, you must successfully complete this exercise,
demonstrating your knowledge of rainforest ecology, knowledge of your specialist species, problem solving-skills
and ability to work in a team-based environment. This exercise consists of 5 steps and will take approximately
30 minutes to complete.
<br><br>
When you are ready to begin, proceed to the simulation lab (in room 204a) and perform a QR scan with this device.
</div>
<button class="big-button"><b>QR scan</b></button>
</div>
<div id="room-scan-failure" class="full-text-box" style="display:none">
<div class="title"><b>QR code scanning failed</b></div>
<div>
QR scan on room entry failed. Either proceed without scanning or try again.
</div>
<button class="big-error-resolver-button"><b>Enter room</b></button>
<button class="big-button"><b>Scan again</b></button>
</div>
<div id="survey-welcome" class="full-text-box" style="display:none">
<div class="title"><b>Welcome to the simulation lab</b></div>
<div>
There are four different versions the Borneo rainforest ecosystem here. Why do they look different?
What happened to these systems? As part of today's exercise you will work with the others in this room to
figure this out.
<br><br>
But first, to facilitate the problem-solving process, you are asked to look for these species (shown above)
within their speciality, across all four rainforests. This is a divide and conquer strategy for everyone to take
stock of the species are in the rainforest ecosystems.
<br><br>
When you are ready, approach one of the rainforest stations and perform a QR scan.
</div>
<button class="big-button"><b>QR scan</b></button>
</div>
<div id="rainforest-scan-failure" class="full-text-box" style="display:none">
<div class="title"><b>Rainforest QR code scanning failed!</b></div>
<div>
Scanning the QR code of the rainforest failed. Please try again or proceed by pressing the button for the rainforest you are at.
</div>
<button class="small-error-resolver-button" data-rainforest="rainforest_a"><b>Rainforest A</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_b"><b>Rainforest B</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_c"><b>Rainforest C</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_d"><b>Rainforest D</b></button>
<button class="big-button"><b>Scan again</b></button>
</div>
<div id="survey-organisms" class="full-text-box" style="display:none">
<div class="title">
<span><b>Location: </b></span>
<span class="location"><b></b></span>
</div>
<div class="survey-content-box">
<table class="survey-content-table">
<tr>
<th><b>Organism</b></th>
<th><b>Present?</b></th>
</tr>
<tr>
<td class="first-organism">
<span class="first-organism-name"></span>
</td>
<td class="first-organism-radios jquery-radios">
<input type="radio" name="first-organism-yn" id="first-org-yes" class="radio first-radios" value="true" /><label for="first-org-yes">Yes</label>
<input type="radio" name="first-organism-yn" id="first-org-no" class="radio first-radios" value="false" /><label for="first-org-no">No</label>
</td>
</tr>
<tr>
<td class="second-organism">
<span class="second-organism-name"></span>
</td>
<td class="second-organism-radios jquery-radios">
<input type="radio" name="second-organism-yn" id="second-org-yes" class="radio second-radios" value="true" /><label for="second-org-yes">Yes</label>
<input type="radio" name="second-organism-yn" id="second-org-no" class="radio second-radios" value="false" /><label for="second-org-no">No</label>
</td>
<!-- when both radio buttons are pressed, show big button -->
</table>
</div>
<div class="survey-done-text next-rainforest" style="display:none">
Done? Go to the next rainforest and perform a QR scan.
<button class="big-button"><b>QR scan</b></button>
</div>
<div class="survey-done-text finished" style="display:none">
Done? Click next to continue
<button class="small-button"><b>Next</b></button>
</div>
</div>
<!-- *********************************************ROTATION******************************************************* -->
<div id="rotation-intro" class="full-text-box" style="display:none">
<div class="title"><b>Step 1 complete</b></div>
<div>
One of these rainforests display the results from an environmental variable you and your group
members chose to analyze for a report. Your challenge is to eliminate the rainforests that most
likely did NOT result from your variable.
<br><br>
Gather your group members and go to <span class="current-rainforest orange"></span>.
When you have all arrived, perform a QR scan.
</div>
<button class="big-button"><b>QR scan</b></button>
</div>
<div id="rotation-scan-failure" class="full-text-box" style="display:none">
<div class="title"><b>Rainforest QR code scanning failed!</b></div>
<div>
Scanning the QR code of the rainforest failed. Please try again or proceed by pressing the button for the rainforest you are at.
</div>
<button class="small-error-resolver-button" data-rainforest="rainforest_a"><b>Rainforest A</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_b"><b>Rainforest B</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_c"><b>Rainforest C</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_d"><b>Rainforest D</b></button>
<button class="big-button"><b>Scan again</b></button>
</div>
<div id="rotation-note-taker" class="full-text-box" style="display:none">
<div class="title"><b>Location: </b><span class="current-rainforest"></span></div>
<div>
Instructions: Your assignment at this location is to be the note-taker. Discuss the
following questions with your group members and record your answers below.
</div>
<div class="rainforest-choice">
Could this be your rainforest?
<div class="rainforest-choice-radios jquery-radios">
<input type="radio" name="your-rainforest" id="rainforest-choice-yes" class="radio" value="true" /><label for="rainforest-choice-yes">Yes</label>
<input type="radio" name="your-rainforest" id="rainforest-choice-no" class="radio" value="false" /><label for="rainforest-choice-no">No</label>
</div>
</div>
<div class="rainforest-explanation">
Give a brief explanation for your answer.
<textarea class="rainforest-explanation-text-entry"></textarea>
</div>
<button class="small-button"><b>Done</b></button>
</div>
<iframe id="field-guide-frame" class="iframe" src="http://utslearningportfolio.oise.utoronto.ca/?q=node/437" style="display:none"></iframe>
<iframe id="group-page-frame" class="iframe" src="http://utslearningportfolio.oise.utoronto.ca/?q=node/536" style="display:none"></iframe>
<button id="iframe-close-button" style="display:none">Close</button>
<div id="rotation-field-guide" style="display:none">
<div class="full-text-box">
<div class="title"><b>Location: </b><span class="current-rainforest"></span></div>
<div>
<b>Instructions:</b> Your assignment at this location is to look up information in your field guide.
Follow the link below to go to the field guide site.
</div>
<div class="rotation-link">
<div class="field-guide-link">Go to the <b>Field Guide</b></div>
</div>
</div>
</div>
<div id="rotation-prediction" style="display:none">
<div class="full-text-box">
<div class="title"><b>Location: </b><span class="current-rainforest"></span></div>
<div>
<b>Instructions:</b> Your assignment at this location is to look up your prediction.
Follow the link below to go to your group's page.
</div>
<div class="rotation-link">
<div class="group-page-link">Go to your <b>Group's Page</b></div>
</div>
</div>
</div>
<div id="rotation-field-guide-and-prediction" style="display:none">
<div class="full-text-box">
<div class="title"><b>Location: </b><span class="current-rainforest"></span></div>
<div>
<b>Instructions:</b> Your assignment at this location is to look up your prediction and/or your field guide. Follow the links below to
access the information. If another group member is also assigned to look up information, one person should look up the Field Guide, and
the other should look up your Group's Page.
</div>
<div class="rotation-link">
<div class="field-guide-link">Go to the <b>Field Guide</b></div>
<br><br>
<div class="group-page-link">Go to your <b>Group's Page</b></div>
</div>
</div>
</div>
<div id="rotation-next-rainforest" class="full-text-box" style="display:none">
<div class="title"><b>Step 2 in progress</b></div>
<div>
Go to <span class="next-rainforest orange"><b></b></span>.
When you have all arrived, perform a QR scan.
</div>
<button class="big-button"><b>QR scan</b></button>
</div>
<!-- *********************************************SPEED DATING**************************************************** -->
<div id="interview-intro" class="full-text-box" style="display:none">
<div class="title"><b>Step 2 complete</b></div>
<div>
Your next task is to locate these researchers (see below) and find out more information about THEIR rainforests.
After all, how will you know which rainforest is yours if you don't know how the other rainforests came to be?
Maybe you can offer your expertise to help them find their rainforests as well. When you are ready, click on
their names to begin.
</div>
<div class="links">
<div class="first-interviewee">TEMP 1st interviewee</div>
<br><br>
<div class="second-interviewee">TEMP 2nd interviewee</div>
</div>
</div>
<div id="interview" style="display:none">
<div class="suggested-questions">
<div class="title">
<b>Suggested questions:</b>
</div>
<div>1. What is your variable?</div>
<div>2. What speciality are you?</div>
<div>3. Which rainforest do you think is related to your variable? Why?</div>
<div>4. How confident are you and your group members?</div>
<div>5. ...</div>
</div>
<div class="full-text-box">
<div class="title"><b>Interview with <span class="interview-choice"></span></b></div>
<div>
What is your group's variable?
</div>
<div class="dropdown-content-box">
<select class="variable-dropdown dropdown">
<option value="undefined">...</option>
<option value="high-rainfall">High rainfall</option>
<option value="low-rainfall">Low rainfall</option>
<option value="high-sunlight">High sunlight</option>
<option value="low-sunlight">Low sunlight</option>
<option value="high-temperature">High temperature</option>
<option value="low-temperature">Low temperature</option>
<option value="logging">Logging</option>
<option value="conservation">Conservation</option>
<option value="earthquake">Earthquake</option>
<option value="tsunami">Tsunami</option>
</select>
</div>
<div class="interview-content-title">
<b>Notes</b>
</div>
<textarea class="interview-content-text-entry"></textarea>
<button class="small-button"><b>Done</b></button>
</div>
</div>
<div id="group-notes" style="display:none">
<div class="table-wrapper">
<table class="notes-table">
<tr>
<th class="table-header-small"><b>Researcher</b></th>
<th class="table-header-small"><b>Variable</b></th>
<th class="table-header-big"><b>Notes</b></th>
</tr>
<tr>
<td class="researcher 1"></td>
<td class="variable 1"></td>
<td class="notes 1"></td>
</tr>
<tr>
<td class="researcher 2"></td>
<td class="variable 2"></td>
<td class="notes 2"></td>
</tr>
<tr>
<td class="researcher 3"></td>
<td class="variable 3"></td>
<td class="notes 3"></td>
</tr>
<tr>
<td class="researcher 4"></td>
<td class="variable 4"></td>
<td class="notes 4"></td>
</tr>
<tr>
<td class="researcher 5"></td>
<td class="variable 5"></td>
<td class="notes 5"></td>
</tr>
<tr>
<td class="researcher 6"></td>
<td class="variable 6"></td>
<td class="notes 6"></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div class="completion-text">
<b>Step 3 complete</b>
<button class="sync-button"><b>Sync notes with group</b></button>
</div>
<div class="group-notes-content-box">
Discuss amongst group members and rank the rainforests from no. 1 to 4, with no. 1 as the environment
that most likely result from YOUR variable. When you are ready, record your choices.
</div>
<button class="small-button"><b>Rank</b></button>
</div>
<!-- *********************************************FINAL PICKS**************************************************** -->
<div id="final-picks-ranking" class="full-text-box" style="display:none">
<div class="title"><b>Step 4: Rank rainforests</b></div>
<div class="final-picks-content-box">
<table class="final-picks-content-table">
<tr>
<th><b>Rainforests</b></th>
<th><b>Rank</b></th>
</tr>
<tr>
<td>Rainforest A</td>
<td>
<select class="A-dropdown dropdown">
<option value="undefined">...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>Rainforest B</td>
<td>
<select class="B-dropdown dropdown">
<option value="undefined">...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>Rainforest C</td>
<td>
<select class="C-dropdown dropdown">
<option value="undefined">...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>Rainforest D</td>
<td>
<select class="D-dropdown dropdown">
<option value="undefined">...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</div>
<div class="final-picks-done-text">
Done? Click next to continue.
</div>
<button class="small-button"><b>Next</b></button>
</div>
<div id="final-picks-discuss" class="full-text-box" style="display:none">
<div class="title"><b>Step 4: In progress</b></div>
<div>
<b>Instructions: </b>Discuss the following question with your group members and provide your answer below.
</div>
<div class="discussion-content-box question1" style="display:none">
<div value="strategy" class="discussion-content-question">What is your strategy in ranking the rainforests? Describe your process.</div>
<textarea class="discussion-content-text-entry"></textarea>
</div>
<div value="evidence" class="discussion-content-box question2" style="display:none">
<div class="discussion-content-question">Identify at least 3 key pieces of evidence in making your choices.</div>
<textarea class="discussion-content-text-entry"></textarea>
</div>
<div value="additional_info" class="discussion-content-box question3" style="display:none">
<div class="discussion-content-question">Identify key insights from your discussion with the other groups members that helped you make your final rankings.</div>
<textarea class="discussion-content-text-entry"></textarea>
</div>
<button class="small-button"><b>Done</b></button>
</div>
<div id="final-picks-choice" class="full-text-box" style="display:none">
<div class="title"><b>Step 4 almost complete</b></div>
<div>
Go to the rainforest that represents your first choice and perform a QR scan.
</div>
<button class="big-button"><b>QR scan</b></button>
</div>
<div id="final-picks-scan-failure" class="full-text-box" style="display:none">
<div class="title"><b>Rainforest QR code scanning failed!</b></div>
<div>
Scanning the QR code of the rainforest failed. Please try again or proceed by pressing the button for the rainforest you are at.
</div>
<button class="small-error-resolver-button" data-rainforest="rainforest_a"><b>Rainforest A</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_b"><b>Rainforest B</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_c"><b>Rainforest C</b></button>
<button class="small-error-resolver-button" data-rainforest="rainforest_d"><b>Rainforest D</b></button>
<button class="big-button"><b>Scan again</b></button>
</div>
<div id="final-picks-debrief" class="full-text-box" style="display:none">
<div class="title"><b>Step 4 complete</b></div>
<div>
Please wait here for your group debrief.
</div>
</div>
</div>
</body>
</html>