-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
108 lines (102 loc) · 3.26 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
<!DOCTYPE html>
<html class="no-js" 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" />
<title>Sorting Hat</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I="
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Courgette&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body id="font-style">
<div class="container grid-x">
<div id="test" class="card cell" style="width: 300px;">
<div class="card-divider float-center">
<header>Welcome to Hogwarts!</header>
</div>
<div class="image">
<img
src="https://www.hypable.com/wp-content/uploads/2018/07/sorting-hat-quiz.jpg"
alt="sorting hat"
/>
</div>
<div class="card-section">
<p class="text-center">
Now that you've been accepted into Hogwarts, it's time to find out
which house will become your home, and get to know some of your
fellow housemates. Click the button below and answer the following
questions to see where the Sorting Hat places you!
</p>
<button
id="beginBtn"
type="button"
class="alert button large row float-center text-10rem"
>
Begin!
</button>
</div>
</div>
</div>
<div id="quiz" style="display: none;">
<div>
<p id="question"></p>
</div>
<ul>
<div id="choices">
<li>
<button
type="button"
class="success button alert button large row float-center text-10rem"
>
<div class="choice" id="A"></div>
</button>
</li>
<li>
<button
type="button"
class="success button alert button large row float-center text-10rem"
>
<div class="choice" id="B"></div>
</button>
</li>
<li>
<button
type="button"
class="success button alert button large row float-center text-10rem"
>
<div class="choice" id="C"></div>
</button>
</li>
</div>
</ul>
</div>
<div id="resultscontainer" style="display: none;">
<div id="results-house">House name</div>
<p class="text-center">These are your housemates:</p>
<div id="results-name"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o="
crossorigin="anonymous"
></script>
<script>
$(document).foundation();
</script>
<script src="script.js"></script>
</body>
</html>