|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 |
| -<head> |
4 |
| - <meta charset="UTF-8"> |
5 |
| - <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | 6 | <title>Sorting Hat Quiz</title>
|
7 |
| - <link rel="stylesheet" href="styles.css"> |
8 |
| -</head> |
9 |
| -<body> |
10 |
| - |
11 |
| -<div class="image-container"> |
12 |
| - <img src="https://imgs.search.brave.com/6Sffhw0RU1m6DlaxDyoDRRJrLVhXStCPmkCoCG_0A8Y/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5wcm9wcm9mcy5j/b20vaW1hZ2VzL1FN/L3VzZXJfaW1hZ2Vz/LzI1MDM4NTIvUG90/dGVybW9yZS1Ib3Vz/ZS1Tb3J0aW5nLUhh/dC0ud2VicA" |
13 |
| - alt="Hogwarts"> |
14 |
| -</div> |
15 |
| -<div class="spell-container"> |
16 |
| - <div class="spell-internal-container"> |
| 7 | + <link rel="stylesheet" href="styles.css" /> |
| 8 | + <link rel="icon" href="./icons/icon.png" /> |
| 9 | + </head> |
| 10 | + <body> |
| 11 | + <div class="image-container"> |
| 12 | + <img |
| 13 | + src="https://imgs.search.brave.com/6Sffhw0RU1m6DlaxDyoDRRJrLVhXStCPmkCoCG_0A8Y/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5wcm9wcm9mcy5j/b20vaW1hZ2VzL1FN/L3VzZXJfaW1hZ2Vz/LzI1MDM4NTIvUG90/dGVybW9yZS1Ib3Vz/ZS1Tb3J0aW5nLUhh/dC0ud2VicA" |
| 14 | + alt="Hogwarts" |
| 15 | + /> |
| 16 | + </div> |
| 17 | + <div class="spell-container"> |
| 18 | + <div class="spell-internal-container"> |
17 | 19 | <div>
|
18 |
| - <h1>Spell of the day</h1> |
| 20 | + <h1>Spell of the day</h1> |
| 21 | + </div> |
| 22 | + <button id="generateSpellBtn">Today's Spell</button> |
| 23 | + <div class="spell-box"> |
| 24 | + <span id="spellText" class="spell-text"></span> |
19 | 25 | </div>
|
20 |
| - <button id="generateSpellBtn">Today's Spell</button> |
21 |
| - <div class="spell-box"> |
22 |
| - <span id="spellText" class="spell-text"></span> |
| 26 | + </div> |
23 | 27 | </div>
|
24 |
| -</div> |
25 |
| -</div> |
26 |
| -<div class="container"> |
27 |
| - <h1>Which Hogwarts House Do You Belong To?</h1> |
28 |
| - <p>Answer the questions below to find out your house!</p> |
| 28 | + <div class="container"> |
| 29 | + <h1>Which Hogwarts House Do You Belong To?</h1> |
| 30 | + <p>Answer the questions below to find out your house!</p> |
29 | 31 |
|
30 |
| - <form id="quizForm"> |
| 32 | + <form id="quizForm"> |
31 | 33 | <div class="question">
|
32 |
| - <h3>1. What do you value the most?</h3> |
33 |
| - <label><input type="radio" name="q1" value="Gryffindor"> Bravery</label> |
34 |
| - <label><input type="radio" name="q1" value="Ravenclaw"> Knowledge</label> |
35 |
| - <label><input type="radio" name="q1" value="Hufflepuff"> Loyalty</label> |
36 |
| - <label><input type="radio" name="q1" value="Slytherin"> Ambition</label> |
| 34 | + <h3>1. What do you value the most?</h3> |
| 35 | + <label |
| 36 | + ><input type="radio" name="q1" value="Gryffindor" /> Bravery</label |
| 37 | + > |
| 38 | + <label |
| 39 | + ><input type="radio" name="q1" value="Ravenclaw" /> Knowledge</label |
| 40 | + > |
| 41 | + <label |
| 42 | + ><input type="radio" name="q1" value="Hufflepuff" /> Loyalty</label |
| 43 | + > |
| 44 | + <label |
| 45 | + ><input type="radio" name="q1" value="Slytherin" /> Ambition</label |
| 46 | + > |
37 | 47 | </div>
|
38 | 48 | <div class="question">
|
39 |
| - <h3>2. What would you do in a difficult situation?</h3> |
40 |
| - <label><input type="radio" name="q2" value="Gryffindor"> Face it head-on</label> |
41 |
| - <label><input type="radio" name="q2" value="Ravenclaw"> Think it through logically</label> |
42 |
| - <label><input type="radio" name="q2" value="Hufflepuff"> Seek help from friends</label> |
43 |
| - <label><input type="radio" name="q2" value="Slytherin"> Do what benefits you the most</label> |
| 49 | + <h3>2. What would you do in a difficult situation?</h3> |
| 50 | + <label |
| 51 | + ><input type="radio" name="q2" value="Gryffindor" /> Face it |
| 52 | + head-on</label |
| 53 | + > |
| 54 | + <label |
| 55 | + ><input type="radio" name="q2" value="Ravenclaw" /> Think it through |
| 56 | + logically</label |
| 57 | + > |
| 58 | + <label |
| 59 | + ><input type="radio" name="q2" value="Hufflepuff" /> Seek help from |
| 60 | + friends</label |
| 61 | + > |
| 62 | + <label |
| 63 | + ><input type="radio" name="q2" value="Slytherin" /> Do what benefits |
| 64 | + you the most</label |
| 65 | + > |
44 | 66 | </div>
|
45 | 67 | <div class="question">
|
46 |
| - <h3>3. What's your biggest strength?</h3> |
47 |
| - <label><input type="radio" name="q3" value="Gryffindor"> Courage</label> |
48 |
| - <label><input type="radio" name="q3" value="Ravenclaw"> Intelligence</label> |
49 |
| - <label><input type="radio" name="q3" value="Hufflepuff"> Patience</label> |
50 |
| - <label><input type="radio" name="q3" value="Slytherin"> Determination</label> |
| 68 | + <h3>3. What's your biggest strength?</h3> |
| 69 | + <label |
| 70 | + ><input type="radio" name="q3" value="Gryffindor" /> Courage</label |
| 71 | + > |
| 72 | + <label |
| 73 | + ><input type="radio" name="q3" value="Ravenclaw" /> |
| 74 | + Intelligence</label |
| 75 | + > |
| 76 | + <label |
| 77 | + ><input type="radio" name="q3" value="Hufflepuff" /> Patience</label |
| 78 | + > |
| 79 | + <label |
| 80 | + ><input type="radio" name="q3" value="Slytherin" /> |
| 81 | + Determination</label |
| 82 | + > |
51 | 83 | </div>
|
52 | 84 | <div class="question">
|
53 |
| - <h3>4. How do you prefer to spend your free time?</h3> |
54 |
| - <label><input type="radio" name="q4" value="Gryffindor"> Adventuring</label> |
55 |
| - <label><input type="radio" name="q4" value="Ravenclaw"> Reading</label> |
56 |
| - <label><input type="radio" name="q4" value="Hufflepuff"> Helping others</label> |
57 |
| - <label><input type="radio" name="q4" value="Slytherin"> Networking</label> |
| 85 | + <h3>4. How do you prefer to spend your free time?</h3> |
| 86 | + <label |
| 87 | + ><input type="radio" name="q4" value="Gryffindor" /> |
| 88 | + Adventuring</label |
| 89 | + > |
| 90 | + <label |
| 91 | + ><input type="radio" name="q4" value="Ravenclaw" /> Reading</label |
| 92 | + > |
| 93 | + <label |
| 94 | + ><input type="radio" name="q4" value="Hufflepuff" /> Helping |
| 95 | + others</label |
| 96 | + > |
| 97 | + <label |
| 98 | + ><input type="radio" name="q4" value="Slytherin" /> |
| 99 | + Networking</label |
| 100 | + > |
58 | 101 | </div>
|
59 | 102 | <div class="question">
|
60 |
| - <h3>5. What is your ideal pet?</h3> |
61 |
| - <label><input type="radio" name="q5" value="Gryffindor"> A brave dog</label> |
62 |
| - <label><input type="radio" name="q5" value="Ravenclaw"> An intelligent owl</label> |
63 |
| - <label><input type="radio" name="q5" value="Hufflepuff"> A loyal cat</label> |
64 |
| - <label><input type="radio" name="q5" value="Slytherin"> A clever ferret</label> |
| 103 | + <h3>5. What is your ideal pet?</h3> |
| 104 | + <label |
| 105 | + ><input type="radio" name="q5" value="Gryffindor" /> A brave |
| 106 | + dog</label |
| 107 | + > |
| 108 | + <label |
| 109 | + ><input type="radio" name="q5" value="Ravenclaw" /> An intelligent |
| 110 | + owl</label |
| 111 | + > |
| 112 | + <label |
| 113 | + ><input type="radio" name="q5" value="Hufflepuff" /> A loyal |
| 114 | + cat</label |
| 115 | + > |
| 116 | + <label |
| 117 | + ><input type="radio" name="q5" value="Slytherin" /> A clever |
| 118 | + ferret</label |
| 119 | + > |
65 | 120 | </div>
|
66 | 121 | <div class="question">
|
67 |
| - <h3>6. Which of these words resonates with you the most?</h3> |
68 |
| - <label><input type="radio" name="q6" value="Gryffindor"> Fearless</label> |
69 |
| - <label><input type="radio" name="q6" value="Ravenclaw"> Wise</label> |
70 |
| - <label><input type="radio" name="q6" value="Hufflepuff"> Kind</label> |
71 |
| - <label><input type="radio" name="q6" value="Slytherin"> Cunning</label> |
| 122 | + <h3>6. Which of these words resonates with you the most?</h3> |
| 123 | + <label |
| 124 | + ><input type="radio" name="q6" value="Gryffindor" /> Fearless</label |
| 125 | + > |
| 126 | + <label><input type="radio" name="q6" value="Ravenclaw" /> Wise</label> |
| 127 | + <label |
| 128 | + ><input type="radio" name="q6" value="Hufflepuff" /> Kind</label |
| 129 | + > |
| 130 | + <label |
| 131 | + ><input type="radio" name="q6" value="Slytherin" /> Cunning</label |
| 132 | + > |
72 | 133 | </div>
|
73 | 134 | <div class="question">
|
74 |
| - <h3>7. What kind of leader are you?</h3> |
75 |
| - <label><input type="radio" name="q7" value="Gryffindor"> Bold and decisive</label> |
76 |
| - <label><input type="radio" name="q7" value="Ravenclaw"> Thoughtful and strategic</label> |
77 |
| - <label><input type="radio" name="q7" value="Hufflepuff"> Supportive and inclusive</label> |
78 |
| - <label><input type="radio" name="q7" value="Slytherin"> Ambitious and influential</label> |
| 135 | + <h3>7. What kind of leader are you?</h3> |
| 136 | + <label |
| 137 | + ><input type="radio" name="q7" value="Gryffindor" /> Bold and |
| 138 | + decisive</label |
| 139 | + > |
| 140 | + <label |
| 141 | + ><input type="radio" name="q7" value="Ravenclaw" /> Thoughtful and |
| 142 | + strategic</label |
| 143 | + > |
| 144 | + <label |
| 145 | + ><input type="radio" name="q7" value="Hufflepuff" /> Supportive and |
| 146 | + inclusive</label |
| 147 | + > |
| 148 | + <label |
| 149 | + ><input type="radio" name="q7" value="Slytherin" /> Ambitious and |
| 150 | + influential</label |
| 151 | + > |
79 | 152 | </div>
|
80 | 153 | <div class="question">
|
81 |
| - <h3>8. What would you like to be known for?</h3> |
82 |
| - <label><input type="radio" name="q8" value="Gryffindor"> Courageous acts</label> |
83 |
| - <label><input type="radio" name="q8" value="Ravenclaw"> Innovations</label> |
84 |
| - <label><input type="radio" name="q8" value="Hufflepuff"> Kindness</label> |
85 |
| - <label><input type="radio" name="q8" value="Slytherin"> Strategic success</label> |
| 154 | + <h3>8. What would you like to be known for?</h3> |
| 155 | + <label |
| 156 | + ><input type="radio" name="q8" value="Gryffindor" /> Courageous |
| 157 | + acts</label |
| 158 | + > |
| 159 | + <label |
| 160 | + ><input type="radio" name="q8" value="Ravenclaw" /> |
| 161 | + Innovations</label |
| 162 | + > |
| 163 | + <label |
| 164 | + ><input type="radio" name="q8" value="Hufflepuff" /> Kindness</label |
| 165 | + > |
| 166 | + <label |
| 167 | + ><input type="radio" name="q8" value="Slytherin" /> Strategic |
| 168 | + success</label |
| 169 | + > |
86 | 170 | </div>
|
87 | 171 | <div class="question">
|
88 |
| - <h3>9. If you were at Hogwarts, what would be your favorite subject?</h3> |
89 |
| - <label><input type="radio" name="q9" value="Slytherin"> Potions</label> |
90 |
| - <label><input type="radio" name="q9" value="Gryffindor"> Defense Against the Dark Arts</label> |
91 |
| - <label><input type="radio" name="q9" value="Hufflepuff"> Herbology</label> |
92 |
| - <label><input type="radio" name="q9" value="Ravenclaw"> Transfiguration</label> |
| 172 | + <h3> |
| 173 | + 9. If you were at Hogwarts, what would be your favorite subject? |
| 174 | + </h3> |
| 175 | + <label |
| 176 | + ><input type="radio" name="q9" value="Slytherin" /> Potions</label |
| 177 | + > |
| 178 | + <label |
| 179 | + ><input type="radio" name="q9" value="Gryffindor" /> Defense Against |
| 180 | + the Dark Arts</label |
| 181 | + > |
| 182 | + <label |
| 183 | + ><input type="radio" name="q9" value="Hufflepuff" /> |
| 184 | + Herbology</label |
| 185 | + > |
| 186 | + <label |
| 187 | + ><input type="radio" name="q9" value="Ravenclaw" /> |
| 188 | + Transfiguration</label |
| 189 | + > |
93 | 190 | </div>
|
94 | 191 | <div class="question">
|
95 |
| - <h3>10. What is your ideal way to spend a weekend?</h3> |
96 |
| - <label><input type="radio" name="q10" value="Ravenclaw"> Reading a book or learning something new</label> |
97 |
| - <label><input type="radio" name="q10" value="Gryffindor"> Going on an adventure with friends</label> |
98 |
| - <label><input type="radio" name="q10" value="Hufflepuff"> Spending time with loved ones</label> |
99 |
| - <label><input type="radio" name="q10" value="Slytherin"> Working on personal goals or projects</label> |
| 192 | + <h3>10. What is your ideal way to spend a weekend?</h3> |
| 193 | + <label |
| 194 | + ><input type="radio" name="q10" value="Ravenclaw" /> Reading a book |
| 195 | + or learning something new</label |
| 196 | + > |
| 197 | + <label |
| 198 | + ><input type="radio" name="q10" value="Gryffindor" /> Going on an |
| 199 | + adventure with friends</label |
| 200 | + > |
| 201 | + <label |
| 202 | + ><input type="radio" name="q10" value="Hufflepuff" /> Spending time |
| 203 | + with loved ones</label |
| 204 | + > |
| 205 | + <label |
| 206 | + ><input type="radio" name="q10" value="Slytherin" /> Working on |
| 207 | + personal goals or projects</label |
| 208 | + > |
100 | 209 | </div>
|
101 | 210 | <div class="question">
|
102 |
| - <h3>11. What is your biggest fear?</h3> |
103 |
| - <label><input type="radio" name="q11" value="Slytherin"> Failure</label> |
104 |
| - <label><input type="radio" name="q11" value="Gryffindor"> Being powerless</label> |
105 |
| - <label><input type="radio" name="q11" value="Hufflepuff"> Losing those I care about</label> |
106 |
| - <label><input type="radio" name="q11" value="Ravenclaw"> Being average</label> |
| 211 | + <h3>11. What is your biggest fear?</h3> |
| 212 | + <label |
| 213 | + ><input type="radio" name="q11" value="Slytherin" /> Failure</label |
| 214 | + > |
| 215 | + <label |
| 216 | + ><input type="radio" name="q11" value="Gryffindor" /> Being |
| 217 | + powerless</label |
| 218 | + > |
| 219 | + <label |
| 220 | + ><input type="radio" name="q11" value="Hufflepuff" /> Losing those I |
| 221 | + care about</label |
| 222 | + > |
| 223 | + <label |
| 224 | + ><input type="radio" name="q11" value="Ravenclaw" /> Being |
| 225 | + average</label |
| 226 | + > |
107 | 227 | </div>
|
108 | 228 | <div class="question">
|
109 |
| - <h3>12. Which color do you feel most drawn to?</h3> |
110 |
| - <label><input type="radio" name="q12" value="Ravenclaw"> Blue</label> |
111 |
| - <label><input type="radio" name="q12" value="Gryffindor"> Red</label> |
112 |
| - <label><input type="radio" name="q12" value="Hufflepuff"> Yellow</label> |
113 |
| - <label><input type="radio" name="q12" value="Slytherin"> Green</label> |
| 229 | + <h3>12. Which color do you feel most drawn to?</h3> |
| 230 | + <label |
| 231 | + ><input type="radio" name="q12" value="Ravenclaw" /> Blue</label |
| 232 | + > |
| 233 | + <label |
| 234 | + ><input type="radio" name="q12" value="Gryffindor" /> Red</label |
| 235 | + > |
| 236 | + <label |
| 237 | + ><input type="radio" name="q12" value="Hufflepuff" /> Yellow</label |
| 238 | + > |
| 239 | + <label |
| 240 | + ><input type="radio" name="q12" value="Slytherin" /> Green</label |
| 241 | + > |
114 | 242 | </div>
|
115 | 243 | <button type="submit">Get Sorted!</button>
|
116 |
| - </form> |
| 244 | + </form> |
117 | 245 |
|
118 |
| - <div id="result" class="result"></div> |
119 |
| - <img id="houseImage" src="" alt="" style="display:none;"> |
120 |
| -</div> |
| 246 | + <div id="result" class="result"></div> |
| 247 | + <img id="houseImage" src="" alt="" style="display: none" /> |
| 248 | + </div> |
121 | 249 |
|
122 |
| -<script src="script.js"></script> |
123 |
| -</body> |
| 250 | + <script src="script.js"></script> |
| 251 | + </body> |
124 | 252 | </html>
|
0 commit comments