-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (155 loc) · 5.11 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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" />
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index_style.css" />
</head>
<body>
<section id="setting">
<main class="container col-md-8 pt-5">
<div class="row col-md-8 border-bottom rounded-top m-auto p-5">
<h1 class="text-center main-color">Setting Your Quiz</h1>
</div>
<article
class="col-md-8 bg-white m-auto p-4 d-flex flex-column rounded-bottom"
>
<h2 class="main-color pb-2 fs-6">Category</h2>
<select
name="Category"
id="Category"
class="w-100 form-select text-muted mb-3"
>
<option value="9">General Knowledge</option>
<option value="27">Animals</option>
<option value="15">Video Games</option>
<option value="23">History</option>
<option value="21">Sports</option>
<option value="18">Science: Computesr</option>
</select>
<h2 class="main-color pb-2 fs-6">Difficulty</h2>
<ul class="list-unstyled">
<li>
<label for="Easy">
<input
type="radio"
name="Difficulty"
id="Easy"
checked
value="easy"
class="mb-2 form-check-input"
/>
Easy
</label>
</li>
<li>
<label for="Medium">
<input
type="radio"
name="Difficulty"
id="Medium"
value="medium"
class="mb-2 form-check-input"
/>
Medium
</label>
</li>
<li>
<label for="Hard">
<input
type="radio"
name="Difficulty"
id="Hard"
value="hard"
class="form-check-input"
/>
Hard
</label>
</li>
</ul>
<input
class="w-100 form-control mt-3"
type="number"
name="questions"
id="question-num"
placeholder="Number Of questions"
/>
<div class="alert alert-danger mt-3">this input is required</div>
<div class="d-flex justify-content-end">
<button
id="start-btn"
class="btn rounded-pill px-4 py-2 text-white mt-4"
>
Start
</button>
</div>
</article>
</main>
</section>
<section id="quiz">
<main class="container col-md-8 pt-5">
<div class="row col-md-8 border-bottom rounded-top m-auto py-4 px-2">
<h1 class="text-center main-color">Quiz</h1>
<div class="d-flex justify-content-between">
<div>
<button class="btn bg-success correct-answer">Correct</button>
<button class="btn bg-danger incorrect-answer">InCorrect</button>
</div>
<button
id="question-btn"
class="btn rounded-pill px-4 py-2 text-white mt-4"
></button>
</div>
</div>
<article
class="bg-white col-md-8 m-auto p-4 d-flex flex-column rounded-bottom"
>
<div class="d-flex flex-row justify-content-start">
<h2 class="main-color fs-5 pe-1">Q:</h2>
<h2 id="quiz-question" class="main-color fs-5"></h2>
</div>
<div class="pt-2">
<ul id="answers-choices" class="list-unstyled"></ul>
</div>
<div class="d-flex justify-content-end">
<button
id="submit-btn"
class="btn rounded-pill px-4 py-2 text-white mt-4"
>
Submit
</button>
</div>
</article>
</main>
</section>
<section id="finish">
<main class="container col-md-8 pt-5">
<div class="row col-md-8 border-bottom rounded-top m-auto py-4 px-2">
<h1 class="text-center main-color my-4">Finish</h1>
</div>
<article
class="bg-white col-md-8 m-auto p-4 d-flex flex-column rounded-bottom"
>
<div class="d-flex flex-column align-items-center">
<h4 class="main-color">score</h4>
<h4 id="score" class="main-color"></h4>
</div>
<div class="d-flex justify-content-end">
<button
id="try-again-btn"
class="btn rounded-pill px-4 py-2 text-white mt-4"
>
Try Again?
</button>
</div>
</article>
</main>
</section>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/mine.js" type="module"></script>
</body>
</html>