/
index.html
137 lines (121 loc) · 7.5 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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<head>
<meta charset="UTF-8">
<title>Harry Potter Trivia</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
</head>
</head>
<body>
<div class = "container">
<h1>Harry Potter Trivia</h1>
<br>
<div id = "start">
<button type="button" id="start-button" class="btn btn-secondary btn-lg btn-block">Accio QUESTIONS!</button>
<div id = "play">
<div class = "triviaQuestions" id = "myGame">
<h2 id="timer"></h2>
<br>
<h3>What is the name of the school that Harry attends?</h3>
<div class="form-check form-check-inline" id="question1">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="answerButton1" value="incorrect">
<label class="form-check-label" for="inlineRadio1">Durmstrag</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="answerButton1" value="incorrect">
<label class="form-check-label" for="inlineRadio2">Beaux Batons</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="answerButton1" value="correct">
<label class="form-check-label" for="inlineRadio3">Hogwarts</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="answerButton1" value="incorrect">
<label class="form-check-label" for="inlineRadio4">Ilvermorny</label>
</div>
<h3>What do Herminone Grangers parents do for a living?</h3>
<div class="form-check form-check-inline" id="question2">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="answerButton2" value="correct">
<label class="form-check-label" for="inlineRadio1">They're Dentists</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="answerButton2" value="incorrect">
<label class="form-check-label" for="inlineRadio2">They're Lawyers</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="answerButton2" value="incorrect">
<label class="form-check-label" for="inlineRadio3">They're Aurors</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="answerButton2" value="incorrect">
<label class="form-check-label" for="inlineRadio4">They're Dog Trainers</label>
</div>
<h3>What candy does Harry find a Dumbledor Card in?</h3>
<div class="form-check form-check-inline" id="question3">
<input class="form-check-input" type="radio" name="inlineRadioOptions3" id="answerButton3" value="incorrect">
<label class="form-check-label" for="inlineRadio1">Bernie Bott's Every Flavour Beans</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions3" id="answerButton3" value="incorrect">
<label class="form-check-label" for="inlineRadio2">Pepper Imps</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions3" id="answerButton3" value="incorrect">
<label class="form-check-label" for="inlineRadio3">Fizzing Wizzbies</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions3" id="answerButton3" value="correct">
<label class="form-check-label" for="inlineRadio4">Chocolate Frog</label>
</div>
<h3>What platform does the Hogwarts Express leave from?</h3>
<div class="form-check form-check-inline" id="question4">
<input class="form-check-input" type="radio" name="inlineRadioOptions4" id="answerButton4" value="correct">
<label class="form-check-label" for="inlineRadio4">9 3/4</label>
</div>
<div class="form-check form-check-inline" id="question4">
<input class="form-check-input" type="radio" name="inlineRadioOptions4" id="answerButton4" value="incorrect">
<label class="form-check-label" for="inlineRadio4">12</label>
</div>
<div class="form-check form-check-inline" id="question4">
<input class="form-check-input" type="radio" name="inlineRadioOptions4" id="answerButton4" value="incorrect">
<label class="form-check-label" for="inlineRadio4">19 7/8</label>
</div>
<div class="form-check form-check-inline" id="question4">
<input class="form-check-input" type="radio" name="inlineRadioOptions4" id="answerButton4" value="incorrect">
<label class="form-check-label" for="inlineRadio4">99 1/2</label>
</div>
<h3>What dragon did Harry face in the Tri-Wizard Tournament?</h3>
<div class="form-check form-check-inline" id="question5">
<input class="form-check-input" type="radio" name="inlineRadioOptions5" id="answerButton5" value="correct">
<label class="form-check-label" for="inlineRadio5">A Hungarian Horn Tail</label>
</div>
<div class="form-check form-check-inline" id="question5">
<input class="form-check-input" type="radio" name="inlineRadioOptions5" id="answerButton5" value="incorrect">
<label class="form-check-label" for="inlineRadio5">A Nightfury</label>
</div>
<div class="form-check form-check-inline" id="question5">
<input class="form-check-input" type="radio" name="inlineRadioOptions5" id="answerButton5" value="incorrect">
<label class="form-check-label" for="inlineRadio5">A Deadly Nadder</label>
</div>
<div class="form-check form-check-inline" id="question5">
<input class="form-check-input" type="radio" name="inlineRadioOptions5" id="answerButton5" value="incorrect">
<label class="form-check-label" for="inlineRadio5">A Common Welsh Green</label>
</div>
</div>
<button type="button" id="done-button" class="btn btn-primary btn-lg">I solemly swear I know all the answers</button>
<div id = "results">
<p id = "correctText"></p>
<p id = "incorrectText"></p>
<p id = "unansweredText"></p>
</div>
</div>
<!-- jQuery library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- My JS File-->
<script src="assets/javascript/app.js"></script>
</body>
</html>