-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquiz.html
399 lines (313 loc) · 12.8 KB
/
quiz.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
<!DOCTYPE html>
<html lang="ja">
<head>
<title>スマートフォンからの脱出 feat.YOYOGI39 | ProjectN</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="stage">
<div id="title">
<img src="assets/img/tlogo.png" class="rogo" alt="YOYOGI39"></a>
<div class="hr"></div>
</div>
<div id="text">
<!-- STAGE1 ここから -->
<div v-if="next['stage0']" id="sectionStage1" class="stage">
<h1 class="window Mrem2">STAGE：1 Twitterの謎</h1>
<h3>
ここが最初のアプリ、Twitterのようだ。
<br />
以下の2問を解けば、次のアプリへの道が開くらしい。
<br />
問題を解き、ロックを解除しよう。
<br />
</h3>
<!-- STAGE1-1 ここから -->
<span id=stage1-1>
<!-- STAGE1-1問題セクション ここから -->
<h2>第1問</h2>
<br />
<h1 class="nazo">
銅鑼 → 17
<br />
味噌 → 35
<br />
空 → ??
<br />
</h1>
<!-- STAGE1-1問題セクション ここまで -->
<!-- STAGE1-1解答入力セクション ここから -->
<div class="frame">
<h2>1問目の答えを入力</h2>
<answer-input v-bind:correct="correctAnswer['stage1']['q1']"
v-on:answer-input="answerInput($event, 'stage1', 1)"></answer-input>
</div>
<!-- STAGE1-1解答入力セクション ここまで -->
<!-- STAGE1-1ヒントセクション ここから -->
<div class="frame">
<h2>ヒント集</h2>
<br />
<h4>謎のヒントと解答は下から確認できる。</h4>
<details>
<summary class="btn-flat-border">第1問 - ヒント</summary>
<br /><br />
カタカナに直そう
</details>
<details>
<summary class="btn-flat-border">第1問 - 解答</summary>
<br /><br />
56
</details>
</div>
<!-- STAGE1-1ヒントセクション ここまで -->
</span>
<!-- STAGE1-1 ここまで -->
<!-- STAGE1-2 ここから -->
<span id="stage1-2">
<!-- STAGE1-2問題セクション ここから -->
<br />
<h2>第2問</h2>
<br />
<h1 class="nazo">
R8 → 2026
<br />
R1 → 2019
<br />
H13 → 2001
<br />
H18 → ????
<br />
</h1>
<!-- STAGE1-2問題セクション ここまで -->
<!-- STAGE1-2解答入力セクション ここから -->
<div class="frame">
<h2>2問目の答えを入力</h2>
<answer-input v-bind:correct="correctAnswer['stage1']['q2']"
v-on:answer-input="answerInput($event, 'stage1', 2)"></answer-input>
</div>
<!-- STAGE1-2解答入力セクション ここまで -->
<!-- STAGE1-2ヒントセクション ここから -->
<div class="frame">
<h2>ヒント集</h2>
<br />
<h4>謎のヒントと解答は下から確認できる。</h4>
<details>
<summary class="btn-flat-border">第2問 - ヒント</summary>
<br /><br />
4桁の数字の後に“年”を付けよう
<br /><br />
<img class="toplogo" src="assets/img/t2h.png" alt="1-2Twitterヒント">
</details>
<details>
<summary class="btn-flat-border">第2問 - 解答</summary>
<br /><br />
2006
</details>
</div>
<!-- STAGE1-2ヒントセクション ここまで -->
</span>
<!-- STAGE1-2 ここまで -->
<!-- STAGE1クリア画面 ここから -->
<section v-bind:class="{isClear:clear['stage1']}" class="section section--clear bgt">
<div class="container">
<div class="clear-message">
<div class="clear-message__title">
<h2>STAGE：1 クリア！</h2>
</div>
<div class="clear-message__content">
<p>Twitterのロックが解除された！</p><br />
<p>次のアプリへ進もう。</p><br />
<button v-on:click="nextStage('stage1')" onclick="location.href='#sectionStage2'"
class="btn-flat-border sousin">次のステージへ</button>
</div>
</div>
</section>
<!-- STAGE1クリア画面 ここまで -->
</div>
<!-- STAGE1 ここまで -->
<!-- STAGE2 ここから -->
<div v-if="next['stage1']" id="sectionStage2" class="stage">
<h1 class="window Mrem2">STAGE：2 YouTubeの謎</h1>
<h3>
ここが2つ目かつ最後のアプリ、YouTubeのようだ。
<br />
Twitterのように以下の2問を解けば、脱出出来るらしい！
<br />
問題を解き、スマホから脱出しよう！
<br /><br />
※2問ともひらがなで回答しよう
<br /><br />
</h3>
<!-- STAGE2-1 ここから -->
<span id="stage2-1">
<!-- STAGE2-1問題セクション ここから -->
<h2>第1問</h2>
<div class="hr Mrem2t"></div>
<img class="toplogo" src="assets/img/y1.png" alt="2-1YouTube問題">
<div class="hr Mrem2b"></div>
<!-- STAGE2問題セクション ここまで -->
<!-- STAGE2解答入力セクション ここから -->
<div class="frame">
<h2>1問目の答えを入力</h2>
<answer-input v-bind:correct="correctAnswer['stage2']['q1']"
v-on:answer-input="answerInput($event, 'stage2', 1)">
</answer-input>
</div>
<!-- STAGE2-1解答入力セクション ここまで -->
<!-- STAGE2-1ヒントセクション ここから -->
<div class="frame">
<h2>ヒント集</h2>
<br />
<h4>謎のヒントと解答は下から確認できる。</h4>
<details>
<summary class="btn-flat-border">第1問 - ヒント</summary>
<br /><br />
<img class="toplogo" src="assets/img/y1h.png" alt="2-1YouTubeヒント">
</details>
<details>
<summary class="btn-flat-border">第1問 - 解答</summary>
<br /><br />
ようつべ
</details>
</div>
<!-- STAGE2-1ヒントセクション ここまで -->
</span>
<!-- STAGE2-1 ここまで -->
<!-- STAGE2-2 ここから -->
<span id="stage2-2">
<!-- STAGE2-2問題セクション ここから -->
<br />
<h2>第2問</h2>
<div class="hr Mrem2t"></div>
<img class="toplogo" src="assets/img/y2.png" alt="2-2YouTube問題">
<div class="hr Mrem2b"></div>
<!-- STAGE2-2問題セクション ここまで -->
<!-- STAGE2-2解答入力セクション ここから -->
<div class="frame">
<h2>2問目の答えを入力</h2>
<answer-input v-bind:correct="correctAnswer['stage2']['q2']"
v-on:answer-input="answerInput($event, 'stage2', 2)">
</answer-input>
</div>
<!-- STAGE2-2解答入力セクション ここまで -->
<!-- STAGE2-2ヒントセクション ここから -->
<div class="frame">
<h2>ヒント集</h2>
<br />
<h4>謎のヒントと解答は下から確認できる。</h4>
<details>
<summary class="btn-flat-border">第2問 - ヒント</summary>
<br /><br />
アイコンの状態に注目
</details>
<details>
<summary class="btn-flat-border">第2問 - 解答</summary>
<br /><br />
うそつき
</details>
</div>
<!-- STAGE2-2ヒントセクション ここまで -->
</span>
<!-- STAGE2-2 ここまで -->
<!-- STAGE2クリア画面 ここから -->
<section v-if="clear['stage2']" v-bind:class="{isClear:clear['stage2']}" class="section section--clear bgt">
<div class="container">
<div class="clear-message">
<div class="clear-message__title">
<h2>STAGE：2 クリア！</h2>
</div>
<div class="clear-message__content">
<p>YouTubeのロックが解除された！</p><br />
<p>さあ、脱出しよう。</p><br />
<button v-on:click="nextStage('stage2')" onclick="location.href='#sectionStage3'"
class="btn-flat-border sousin">次のステージへ</button>
</div>
</div>
</section>
<!-- STAGE2クリア画面 ここまで -->
</div>
<!-- STAGE2 ここまで -->
<!-- STAGE3 ここから -->
<div v-if="next['stage2']" id="sectionStage3" class="stage">
<span id="stage3">
<!-- STAGE3問題セクション ここから -->
<br />
<h3>
全てのロックを解除し無事脱出……？
<br /><br />
<span class="red">「……この私が、素直にそうさせると思いましたか？」</span>
<br /><br />
暴走したAIが立ち塞がってきた。<br />
AIを倒し、今度こそ脱出しよう。
<br /><br />
</h3>
<h1 class="attention Mrem2">FINALSTAGE：最終決戦</h1>
<div class="hr Mrem2t"></div>
<img class="toplogo" src="assets/img/fin.png" alt="main">
<div class="hr Mrem2b"></div>
<!-- STAGE3問題セクション ここまで -->
<!-- STAGE3解答入力セクションここから -->
<div class="frame">
<h2>最終問題の答えを入力</h2>
<answer-input v-bind:correct="correctAnswer['stage3']['q1']"
v-on:answer-input="answerInput($event, 'stage3', 1, 'final')"></answer-input>
</div>
<!-- STAGE3解答入力セクション ここまで -->
<!-- STAGE3ヒントセクション ここから -->
<div class="frame">
<h2>ヒント集</h2>
<br />
<h4>謎のヒントと解答は下から確認できる。</h4>
<details>
<summary class="btn-flat-border">最終問題 - ヒント①</summary>
<br /><br />
赤線1本+黒線3本の計の4本の線、といえば？
</details>
<details>
<summary class="btn-flat-border">最終問題 - ヒント②</summary>
<br /><br />
分数？
</details>
<details>
<summary class="btn-flat-border">最終問題 - ヒント③</summary>
<br /><br />
通分してみよう
</details>
<details>
<summary class="btn-flat-border">最終問題 - ヒント④</summary>
<br /><br />
26個あるものとは？
</details>
<details>
<summary class="btn-flat-border">最終問題 - 解答</summary>
<br /><br />
Twitter
</details>
</div>
<!-- STAGE3ヒントセクション ここまで -->
</span>
</div>
<!-- STAGE3 ここまで -->
</div>
<div id="cr">
<div class="hr Mrem2"></div>
授業主催： N・S高<br />
協力：株式会社SCRAP<br />
企画制作：N・S高生<br />
<br />
「リアル脱出ゲーム」は株式会社SCRAPの登録商標です。
<br /><br />
株式会社SCRAPとN・S高で実施した授業「リアル脱出ゲームの作り方」の一環で<br />
生徒が制作したものであり、<br />
SCRAPが主催/公認するものではありません。
<div class="hr Mrem2"></div>
© 2021 YOYOGI39
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="assets/js/main.js"></script>
</body>
</html>