-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
438 lines (421 loc) · 13.6 KB
/
index.html
File metadata and controls
438 lines (421 loc) · 13.6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Movie</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,300&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="intro-container">
<h3 id="type-quiz">Personality Quiz</h3>
<h1 id="headline">FlickPick</h1>
<h4 id="quiz-intro">Quiz Introduction</h4>
<h5 id="quiz-intro-descr">
If you were a fictional character what choices would you make and what
movie should you watch based on that?
</h5>
<div class="start-button-container">
<button id="s-button">Start</button>
</div>
</div>
<div id="q-1-container">
<form id="q-1-form">
<div id="q-1-contain">
<h3 id="q-1-head">
Imagine you find yourself stranded on a lonely and quiet island. You
wake up and begin to look around when you notice in the distance a
blurry figure, who is it and what do you do?
</h3>
</div>
<div id="bodyinputs">
<div></div>
<input
type="radio"
class="inputcircle"
id="romance-1"
name="choice-1"
/>
<label class="options" for="romance-1">
It's my lover. I take in their appearance as I watch them make their
way to me.</label
>
<br />
<input
type="radio"
class="inputcircle"
id="comedy-1"
name="choice-1"
/>
<label class="options" for="comedy-1">
It's a half-horse half-man figure, you start laughing uncontrollably
because you're under the influence of a mushroom you found
earlier.</label
>
<br />
<input
type="radio"
class="inputcircle"
id="horror-1"
name="choice-1"
/>
<label class="options" for="horror-1">
You quickly took cover behind a rock, slowly holding your breath,
and watch as the figure slowly moves passes you.</label
>
<br />
<input
type="radio"
class="inputcircle"
id="action-1"
name="choice-1"
/>
<label class="options" for="action-1">
You grab a sharp rock near you and scope out possible hiding places
to ambush the figure.</label
>
<br />
<button id="next-1">Next</button>
</div>
<p id="error"></p>
</form>
</div>
<div id="q-2-container">
<form id="q-2-form">
<div id="q-2-contain">
<h3 id="q-2-head">
You're camping in the woods when you look up and notice lights from
the sky appear to be getting closer, what is it?
</h3>
</div>
<div id="bodyinputs2">
<input
type="radio"
class="inputcircle2"
id="romance-2"
name="choice-2"
/>
<label class="options2" for="romance-2">
You notice it's the big dipper in the sky, reminding you of your
first time stargazing with the love of your life. You wonder how
they are now.</label
>
<br />
<input
type="radio"
class="inputcircle2"
id="comedy-2"
name="choice-2"
/>
<label class="options2" for="comedy-2">
It's flashlights in the trees from your friends who attack you by
throwing waterballoons filled with paint.</label
>
<br />
<input
type="radio"
class="inputcircle2"
id="horror-2"
name="choice-2"
/>
<label class="options2" for="horror-2">
It appears to be two big eyes staring at you from a branch in the
tree. You take them in and notice their feet are backwards. You
can't look away despite wanting to run.</label
>
<br />
<input
type="radio"
class="inputcircle2"
id="action-2"
name="choice-2"
/>
<label class="options2" for="action-2">
You can't make it out so you take initiative by grabbing flares,
your pocket knife, and anticipate having to defend your life.</label
>
<br />
<button id="next-2">Next</button>
</div>
</form>
</div>
<div id="q-3-container">
<form id="q-3-form">
<div id="q-3-contain">
<h3 id="q-3-head">
It's night time and you're trying to fall asleep but you suddenly
hear a noise, what do you do?
</h3>
</div>
<div id="bodyinputs3">
<input
type="radio"
class="inputcircle3"
id="romance-3"
name="choice-3"
/>
<label class="options3" for="romance-3">
You look up from your book and see it's your partner who just got
back from a red-eye to surprise you on the eve of your
anniversary.</label
>
<br />
<input
type="radio"
class="inputcircle3"
id="comedy-3"
name="choice-3"
/>
<label class="options3" for="comedy-3"
>You look down and see it's your cat with a chinese takeout carton
over their head bumping into everything</label
>
<br />
<input
type="radio"
class="inputcircle3"
id="horror-3"
name="choice-3"
/>
<label class="options3" for="horror-3">
Three knocks and then sratching along your door, you hide under your
covers and try your best to stay still.</label
>
<br />
<input
type="radio"
class="inputcircle3"
id="action-3"
name="choice-3"
/>
<label class="options3" for="action-3">
You grab the weapon by your nightstand, you knew it was only a
matter of time before they found you but you are prepared.
</label>
<br />
<button id="next-3">Next</button>
</div>
</form>
</div>
<div id="q-4-container">
<form id="q-4-form">
<div id="q-4-contain">
<h3 id="q-4-head">
You're swimming on a beach and you notice something out in the
water, what is it?
</h3>
</div>
<div id="bodyinputs4">
<input
type="radio"
class="inputcircles4"
id="romance-4"
name="choice-4"
/>
<label class="options4" for="romance-4">
It's your partner coming out of the water, you take in their
appearance.</label
>
<br />
<input
type="radio"
class="inputcircles4"
id="comedy-4"
name="choice-4"
/>
<label class="options4" for="comedy-4">
You begin to notice it's actually your swimming bottoms floating and
come to realize you're naked.</label
>
<br />
<input
type="radio"
class="inputcircles4"
id="horror-4"
name="choice-4"
/>
<label class="options4" for="horror-4">
You make out a shadow under the water but can't tell what is is
until you notice a gray fin on the surface of the water making it's
way to you fast.</label
>
<br />
<input
type="radio"
class="inputcircles4"
id="action-4"
name="choice-4"
/>
<label class="options4" for="action-4"
>There is something bubbling in the water, you decide to be a hero
and dive deep into the ocean saving the helpless drowning
figure.</label
>
<br />
<button id="next-4">Next</button>
</div>
</form>
</div>
<div id="q-5-container">
<form id="q-5-form">
<div id="q-5-contain">
<h3 id="q-5-head">
You're in the airport waiting to collect your luggage when suddenly
someone bumps into your shoulder and you look up, who is it?
</h3>
</div>
<div id="bodyinputs5">
<input
type="radio"
class="inputcircles5"
id="romance-5"
name="choice-5"
/>
<label class="options5" for="romance-5">
You're star-struck, is this love at first sight? Your soul mate you
wonder?</label
>
<br />
<input
type="radio"
class="inputcircles5"
id="comedy-5"
name="choice-5"
/>
<label class="options5" for="comedy-5"
>The figure in question pulls out a suitcase and opens it, it's
clowns! Clowns one by one start to come out of the bag and circus
music starts to play from their speaker.</label
>
<br />
<input
type="radio"
class="inputcircles5"
id="horror-5"
name="choice-5"
/>
<label class="options5" for="horror-5"
>The mysterious figure was a terrorist holding up a gun, who started
to hold the airport hostage by shooting the area, and you start to
run for your life.</label
>
<br />
<input
type="radio"
class="inputcircles5"
id="action-5"
name="choice-5"
/>
<label class="options5" for="action-5"
>You recognize it was your archnemesis, you throw the luggage at the
them and plan your next attack.</label
>
<br />
<button id="next-5">Next</button>
</div>
</form>
</div>
<div id="q-6-container">
<form id="q-6-form">
<div id="q-2-contain">
<h3 id="q-6-head">
Bonus Question: Visualize yourself trapped in a never ending day
cycle. No matter what the end of the day will reset you to wake up
back to the same day and morning. What shall you do?
</h3>
</div>
<div id="bodyinputs6">
<div id="romance-q6-container">
<input
type="radio"
class="inputcircles6"
id="romance-6"
name="choice-6"
/>
<label class="options6" for="romance-6"
>You live to your dream, searching for the one and only love of
your life, and you spend the rest of the day together before the
reset hits.</label
>
<br />
</div>
<div id="comedy-q6-container">
<input
type="radio"
class="inputcircles6"
id="comedy-6"
name="choice-6"
/>
<label class="options6" for="comedy-6"
>There was no shame to your this path, you proceed to prank,and
fool everyone around you. You made the whole world your enemy..
oops?</label
>
<br />
</div>
<div id="horror-q6-container">
<input
type="radio"
class="inputcircles6"
id="horror-6"
name="choice-6"
/>
<label class="options6" for="horror-6"
>You begin to live your life in pain and agnoy. You are discovery
ways to end this miserable cycle by only testing many ways to
die.</label
>
<br />
</div>
<div id="action-q6-container">
<input
type="radio"
class="inputcircles6"
id="action-6"
name="choice-6"
/>
<label class="options6" for="action-6"
>You live to your best, live to do all the craziest, and the
unimaginable. You sail the seas, fly to the moon, and save lives
around the world everyday.</label
>
<br />
</div>
<button id="next-6">Next</button>
</div>
</form>
</div>
<div id="random-movie">
<img id="randomPoster" />
<h5 id="randomTitle"></h5>
<p id="random-overview"></p>
</div>
<div id="movie-rec-container">
<img id="poster" class="movieRec" />
<h5 id="title" class="movieRec"></h5>
<p id="overview" class="movieRec"></p>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p id="psychoanalysis"></p>
</div>
</div>
<iframe
id="movieVideo"
class="movieRec"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
<script type="module" src="script.js"></script>
</html>