forked from dantaeyoung/limelight
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlimelight.html
446 lines (382 loc) · 19.9 KB
/
limelight.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
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Guggenheim Helsinki Now Matchmaker">
<meta property="og:image" content="http://app.designguggenheimhelsinki.org/img/GHN_facebook_Good.png">
<meta property="og:image:width" content="851">
<meta property="og:image:height" content="315">
<link rel="shortcut icon" href="/img/favicon/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-icon-precomposed.png">
<title>Guggenheim Helsinki Now</title>
</head>
<body>
</body>
<template name="baseTemplate">
<div class="h100 flex-container">
<div class="h100 dotcontainer">
{{> yield}}
</div>
</div>
</template>
<template name="point">
<div class="point loading" data-id="{{_id}}" style="left: {{pageCoord coords 'x'}}vw; top: {{pageCoord coords 'y'}}vh;" data-quizTime="{{ quizTime }}" data-quizTakerName="{{quizTakerName}}" data-quizTakerAge="{{quizTakerAge}}">
{{{generateEmoji emoji_id closestFinalist}}}
<span class="quiz-taker-preview">{{quizTakerName}}</span>
<p class="quiz-taker">{{quizTakerName}}<br>{{quizTakerAge}}<br>{{timeFormat quizTime}}</p>
</div>
</template>
<template name="pindrop">
{{ renderBuildingIcons }}
{{#each allpoints}}
{{ >point }}
{{/each}}
<div class="restart corner corner-left corner-bottom">
<img src="/img/playgame.svg">
</div>
<div class="logo corner corner-right corner-bottom">
<img src="/img/GHN_logo.svg">
</div>
<div class="about corner corner-right corner-top sans">
<span data-modal="about">About</span> |
<span data-modal="policy">Policy</span>
<span class="fb_icon icon">
<a href="https://www.facebook.com/sharer/sharer.php?u=app.designguggenheimhelsinki.org%2Fquiz" class="popup">
<img src="/img/fb_icon_black.svg">
</a>
</span>
<span class="twitter_icon icon">
<a href="https://twitter.com/intent/tweet?text=Play%20the%20Guggenheim%20Helsinki%20Now%20Matchmaker%20Game%20and%20find%20the%20building%20for%20you!%20%23guggenheimhki%20app.designguggenheimhelsinki.org%2Fquiz&original_referer=Guggenheim_HKI" class="popup">
<img src="/img/twitter_icon_black.svg">
</a>
</span>
</div>
<div id="modal-about">
<div class="modal-container vcenter">
<div class="close corner corner-top corner-right"><span>✕</span></div>
<div class="modal-content">
<h2 class="aligncenter caps">About</h2>
<div class="container">
<div class="four twelve-s columns">
<h3 class="aligncenter">EN</h3>
<p>If buildings had personalities, which of the six finalists of the Guggenheim Helsinki Design Competition would most closely resemble your own? This experimental game will ask you a series of playful questions to determine an understanding of your personality. Using a custom program developed for Guggenheim Helsinki Now, an exhibition at the Kunsthalle Helsinki from April 24–May 16, 2015, your result will be placed on a map including the six finalist proposals, suggesting your architectural match.</p>
<p>Credits<br>
Hugo Liu, data scientist and taste researcher, Dan Taeyoung, technologist and architect, and Scott Donaldson, technologist and architect.</p>
</div>
<div class="four twelve-s columns">
<h3 class="aligncenter">FI</h3>
<p>Jos rakennuksilla olisi persoonat, mikä kuudesta finalistista muistuttaisi eniten omaasi? Tämä kokeellinen peli pyytää sinua vastaamaan leikkimielisiin kysymyksiin, jotka kuvaavat persoonaasi. Ohjelma sijoittaa sinut kuuden finalistin kartalle, jolloin näet mikä niistä muistuttaa eniten sinua.</p>
<p>Tekijät:<br>
Tieto- ja makututkija Hugo Liu, teknologi ja arkkitehti Dan Taeyoung sekä teknologi ja arkkitehti Scott Donaldson.</p>
</div>
<div class="four twelve-s columns">
<h3 class="aligncenter">SV</h3>
<p>Om byggnader hade personlighet, så vilken av de sex finalisternas skulle närmast påminna om din egen? I det här experimentella spelet ska du svara på några lekfulla frågor om din personlighet. Programmet placerar dig på en karta där också de sex finalisterna är inprickade, och visar vilkenm som mest påminner om dig.</p>
<p>Upphovsmän:<br>
Hugo Liu, datavetenskapsman och smakforskare och Dan Taeyoung, teknolog och arkitekt, och Scott Donaldson, teknolog och arkitekt.</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-policy">
<div class="modal-container vcenter">
<div class="close corner corner-top corner-right"><span>✕</span></div>
<div class="modal-content">
<h2 class="aligncenter caps">Policy</h2>
<div class="container">
<div class="four twelve-s columns">
<h3 class="aligncenter">EN</h3>
<p>By playing The Matchmaker Game and identifying your name, you agree to have your results placed on a map that is accessible online and in the Guggenheim Helsinki Now exhibition, and used in connection with this exhibition and other Guggenheim programs, in any media, by THE Guggenheim and third parties. If you choose to provide your contact information, a link to your results will be sent to you. Please note that The Matchmaker Game is not specifically designed to be used by children. If you are under the age of 13, please obtain permission from your parent or guardian before playing.</p>
</div>
<div class="four twelve-s columns">
<h3 class="aligncenter">FI</h3>
<p>Pelaamalla Matchmaker-peliä ja ilmoittamalla nimesi hyväksyt, että tuloksesi sijoitetaan kartalle, joka on nähtävissä verkossa ja Guggenheim Helsinki Now -näyttelyssä. Lisäksi Guggenheim ja kolmannet osapuolet voivat käyttää tuloksia tämän näyttelyn ja muiden Guggenheim-ohjelmien yhteydessä missä tahansa mediassa. Jos ilmoitat yhteystietosi, sinulle lähetetään linkki omiin tuloksiisi. Ota huomioon, että Matchmaker-peliä ei ole erityisesti suunniteltu lapsille. Jos et ole vielä täyttänyt 13, pyydä vanhempien tai holhoojan lupa pelaamiseen.</p>
</div>
<div class="four twelve-s columns">
<h3 class="aligncenter">SV</h3>
<p>Genom att spela spelet Matchmaker och meddela ditt namn ger du tillstånd till att dina resultat visas på en karta som är tillgänglig online och vid utställningen Guggenheim Helsinki Now och används i anknytning till denna utställning och andra Guggenheimevenemang, i alla medier, av Guggenheimstiftelsen och tredjeparter. Om du väljer att ange dina kontaktuppgifter, kommer du att få en länk till dina resultat. Observera att spelet Matchmaker inte är särskilt anpassat för barn. Be om tillstånd av en förälder eller förmyndare innan du börjar spela, om du är under 13 år.</p>
</div>
</div>
<p class="aligncenter">Website © 2015 The Solomon R. Guggenheim Foundation (SRGF). All rights reserved.</p>
</div>
</div>
</div>
<div id="modal-infobox">
<div class="modal-container vcenter modal-small">
<div class="close corner corner-top corner-right"><span>✕</span></div>
<div class="modal-content">
<div data-quizTakerName data-fill></div>
<div data-quizTakerAge data-fill></div>
<div data-quizTime data-fill></div><br><br>
<p>Share on</p>
<div>
<span class="fb_icon icon">
<a href="https://www.facebook.com/sharer/sharer.php?u=app.designguggenheimhelsinki.org%23quiz" class="popup">
<img src="/img/fb_icon_black.svg">
</a>
</span>
<span class="twitter_icon icon">
<a href="https://twitter.com/intent/tweet?text=Play%20the%20Guggenheim%20Helsinki%20Now%20Matchmaker%20Game%20and%20find%20the%20building%20for%20you!%20%23guggenheimhki%20app.designguggenheimhelsinki.org%2Fquiz" class="popup">
<img src="/img/twitter_icon_black.svg">
</a>
</span>
</div>
</div>
</div>
</div>
</template>
<template name="quiz">
<div class="bg-dummy"></div>
<div id="quiz-container" class="h100 step-{{quizStep}} {{#if isQuizKiosk}}is-quiz-kiosk{{/if}}">
<div class="logo corner corner-right corner-bottom">
<img src="/img/GHN_logo.svg">
</div>
<div id="step" class="step h100">
{{#if no_language_selected}}
<div class="buttons w100 vcenter">
<button type="button" class="language-choice block w100" value="lang.fi">SUOMI</button>
<button type="button" class="language-choice block w100" value="lang.sv">SVENSKA</button>
<button type="button" class="language-choice block w100" value="lang.en">ENGLISH</button>
</div>
{{/if}}
{{#if shouldShowQuestions quizStep}}
{{#with quizQuestionData}}
<div class="vcenter">
<h3 class="question caps bold">{{q_text}}</h3>
<div class="step-container flex-end">
<div class="step-choice">
{{#unless isQuizKiosk}}
<img src="{{quizImages null 1 'mobile'}}">
<div class="caption">{{imgCaption 1}}</div>
{{/unless}}
<button type="button" value="{{a1_id}}">{{a1_text}}</button>
</div>
<div class="step-choice">
{{#unless isQuizKiosk}}
<img src="{{quizImages null 2 'mobile'}}">
<div class="caption">{{imgCaption 2}}</div>
{{/unless}}
<button type="button" value="{{a2_id}}">{{a2_text}}</button>
</div>
</div>
</div>
{{/with}}
{{/if}}
{{#if equals quizStep 12 }}
<div class="vcenter abs w100">
<h3 class="question caps bold {{selectedLanguage}}">
<div class="lang lang.en">My age is between...</div>
<div class="lang lang.fi">Ikäni on...</div>
<div class="lang lang.sv">Min ålder är mellan...</div>
</h3>
<div id="emoji-container" class="cf">
<form>
<select id="quizTakerAge">
<option value="0-10">0-10</option>
<option value="10-20">10-20</option>
<option value="20-30">20-30</option>
<option value="30-40">30-40</option>
<option value="40-50">40-50</option>
<option value="50-60">50-60</option>
<option value="60-70">60-70</option>
<option value="70-80">70-80</option>
<option value="80+">80+</option>
</select>
<div class="{{selectedLanguage}}">
<button class="submit-quizTakerAge block w100 lang lang.en">Submit</button>
<button class="submit-quizTakerAge block w100 lang lang.fi">Lähetä</button>
<button class="submit-quizTakerAge block w100 lang lang.sv">Skicka</button>
</div>
</form>
</div>
</div>
{{/if}}
{{#if equals quizStep 13 }}
<div class="vcenter abs w100">
<h3 class="question caps bold {{selectedLanguage}}">
<div class="lang lang.en">My name is...</div>
<div class="lang lang.fi">Minun nimeni on...</div>
<div class="lang lang.sv">Jag heter...</div>
</h3>
<div id="emoji-container" class="cf">
<form>
<input id="quiz-taker-name" type="text" placeholder="Type here..." class="aligncenter block w100" maxlength="64" required>
<div class="{{selectedLanguage}}">
<button class="submit-quizTakerName block w100 lang lang.en">Submit</button>
<button class="submit-quizTakerName block w100 lang lang.fi">LLLähetä</button>
<button class="submit-quizTakerName block w100 lang lang.sv">Skicka</button>
</div>
</form>
</div>
</div>
{{/if}}
{{#if equals quizStep 14 }}
<div id="emoji-container" class="cf">
<h3 class="question caps bold {{selectedLanguage}}">
<div class="lang lang.en">Today I'm feeling...</div>
<div class="lang lang.fi">Tänään tuntuu tältä...</div>
<div class="lang lang.sv">I dag känner jag mig...</div>
</h3>
{{#each svgKeys}}
<img src="/img/emoji/{{this}}.svg" class="emoji" data-emoji_id="{{this}}">
{{/each}}
</div>
{{/if}}
{{#if equals quizStep 15 }}
<div class="vcenter abs w100">
<h3 class="question caps bold {{selectedLanguage}}">
<div class="lang lang.en">Please send me a link to my results by...</div>
<div class="lang lang.fi">Lähettäkää linkki tuloksiini...</div>
<div class="lang lang.sv">Skicka mig länken till mina resultat per...</div>
</h3>
<div id="emoji-container" class="cf small-inputs">
<form novalidate>
<input id="quiz-taker-email" type="email" placeholder="Email here..." class="aligncenter block w100" required>
<div class="clearfix">
<input id="quiz-taker-updateme" type="checkbox" value="updateme_true">
<div class="{{selectedLanguage}}">
<label for="quiz-taker-updateme" class="lang lang.en">Keep me updated on Guggenheim Helsinki by email</label>
<label for="quiz-taker-updateme" class="lang lang.fi">Haluan vastaanottaa Guggenheim Helsinki -museota koskevia tiedotteita</label>
<label for="quiz-taker-updateme" class="lang lang.sv">Skicka mig aktuell information om Guggenheim Helsingfors per e-post</label>
</div>
</div>
<div class="language {{selectedLanguage}}">
<button class="submit-quizTaker-info block w100 lang lang.en">Submit</button>
<button class="submit-quizTaker-info block w100 lang lang.fi">LLLähetä</button>
<button class="submit-quizTaker-info block w100 lang lang.sv">Skicka</button>
</div>
<button class="skip-quizTaker-info block w100 {{selectedLanguage}}">
<span class="lang lang.en">Skip</span>
<span class="lang lang.sv">Hoppa över</span>
<span class="lang lang.fi">Ohita</span>
</button>
</form>
</div>
</div>
{{/if}}
{{#if equals quizStep 16 }}
<div class="lang lang.fi">Lähettäkää linkki tuloksiini...</div>
<div class="lang lang.sv">Skicka mig länken till mina resultat per...</div>
<h3 class="question caps bold {{selectedLanguage}}">
<div class="lang lang.en">
Thanks for playing! <br />
Visit the screen to your right to see where you landed on the map. <br />
You can share your results with this link: <br />
<div class="bitlyurl"></div>
<div style="display: none; ">Auto-restart in <span class="countdown"></span></div> <!-- countdown plugin requires a selector, so we need to make an invisible DOM element -->
</div>
<div class="lang lang.fi">
Kiitos osallistumisesta! <br />
Tarkista sijaintisi kartalla oikealla olevasta ruudusta.<br />
Voit lähettää tuloksesi tähän linkkiin:<br />
<div class="bitlyurl"></div>
<div style="display: none; ">Automaattinen käynnistys <span class="countdown"></span></div> <!-- countdown plugin requires a selector, so we need to make an invisible DOM element -->
</div>
<div class="lang lang.sv">
Tack för att du spelade! <br />
Gå till skärmen till höger för att se var du hamnade på kartan.<br />
Du kan dela dina resultat med den här länken: <br />
<div class="bitlyurl"></div>
<div style="display: none; ">Startar automatiskt på nytt om <span class="countdown"></span></div> <!-- countdown plugin requires a selector, so we need to make an invisible DOM element -->
</div>
</h3>
{{/if}}
</div>
<div class="corner corner-top corner-left step-counter sans">{{quizStep}}/{{totalSteps}}</div>
{{#unless no_language_selected}}
<div class="restart corner corner-left corner-bottom">
<img class="alignleft" src="/img/restart.svg">
</div>
{{/unless}}
</div>
</template>
<template name="projection">
{{#with projectionSession}}
<!-- We are taker {{taker}}<br/> -->
{{#if equals quizStep 1}} <!-- TO BE STYLED -->
<div class="step aligncenter vcenter">
<h3>VALITSE KIELI JA ALOITA PELI</h3>
<h3>VÄLJ SPRÅK OCH BÖRJA SPELE</h3>
<h3>SELECT LANGUAGE TO START GAME</h3>
</div>
{{/if}}
{{#if equals quizStep 12}} <!-- TO BE STYLED -->
<div class="step aligncenter">
<h3 class="{{selectedLanguage}}">
<div class="lang lang.en">My age is between...</div>
<div class="lang lang.fi">Ikäni on...</div>
<div class="lang lang.sv">Min ålder är mellan...</div>
</h3>
</div>
{{/if}}
{{#if equals quizStep 13}} <!-- TO BE STYLED -->
<div class="step aligncenter">
<h3 class="{{selectedLanguage}}">
<div class="lang lang.en">My name is...</div>
<div class="lang lang.fi">Minun nimeni on...</div>
<div class="lang lang.sv">Jag heter...</div>
</h3>
</div>
{{/if}}
{{#if equals quizStep 14}} <!-- TO BE STYLED -->
<div class="step aligncenter">
<h3 class="{{selectedLanguage}}">
<div class="lang lang.en">Today I'm feeling...</div>
<div class="lang lang.fi">Voin tänään...</div>
<div class="lang lang.sv">I dag känner jag mig...</div>
</h3>
</div>
{{/if}}
{{#if equals quizStep 15}} <!-- TO BE STYLED -->
<div class="step aligncenter">
<h3>ENTER YOUR INFO TO BE EMAILED/TWEETED A LINK TO YOUR RESULTS!</h3>
</div>
{{/if}}
{{#if equals quizStep 16}} <!-- TO BE STYLED -->
<div class="step aligncenter">
THANKS FOR PLAYING! <br />
VISIT THE SCREEN TO YOUR RIGHT TO SEE WHERE YOU LANDED ON THE MAP. <br />
AUTO-RESTART IN <span class="countdown"></span> SECS<br />
</div>
{{ startCountdown }}
{{/if}}
<div id="projection-container" class="h100">
{{#if shouldShowImages quizStep}}
<img src="{{quizImages currentApiData 1 'projection'}}"> <br />
{{/if}}
{{#if notEquals quizStep 1}}
<div class="projection-histogram abs vcenter w100">
{{ #each projectionGuessesSort currentApiData.guesses }}
<div class="histogram-item">
<div class="bar">
<div class="bar-amount-container dib">
<div class="bar-amount" style="height: {{ scoreTest score }}%; background: {{ scoreColorById submission_id}}"></div>
</div>
<div class="dib">{{ scoreTest score }}%</div>
</div>
<img src="/img/building_icons/{{ submission_id }}.svg">
</div>
{{/each}}
</div>
{{/if}}
{{#if shouldShowImages quizStep}}
<img class="corner corner-center corner-bottom" src="{{quizImages currentApiData 2 'projection'}}">
{{/if}}
</div>
<div class="corner corner-top corner-left step-counter sans">{{quizStep}}/{{totalSteps}}</div>
<div class="logo corner corner-right corner-bottom">
<img src="/img/GHN_logo_white.svg">
</div>
{{/with}}
</template>
<template name="header">
meteor header
</template>
<template name="footer">
meteor footer
</template>