forked from ProgrammingHero1/quiz-hero-now-zero
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (167 loc) · 6.56 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Quiz Hero</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./index.js" defer></script>
<!-- You don't need to change noChange.js file. It's fine -->
<script src="./noChange.js" defer></script>
<!-- You don't need to change noChange.js file. It's fine -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
common: ["Rubik", "sans-serif"],
},
},
},
};
</script>
</head>
<body class="bg-white font-common">
<!-- Header/Navbar section start -->
<header class="h-16 flex items-center shadow-sm">
<nav class="flex justify-between items-center w-9/12 mx-auto">
<div class="text-zinc-800 font-bold uppercase">
<h1 class="text-lg">Quiz <span class="text-green-700">HERO</span></h1>
<p class="text-[10px] font-normal capitalize -mt-1">
Get ready to Quiz and be amazed!
</p>
</div>
<button onclick="blog()" class="bg-green-600 font-light text-sm px-5 py-1 rounded text-white">
Blog
</button>
</nav>
</header>
<!-- Header/Navbar section end -->
<!-- Landing page content start -->
<section class="lg:w-9/12 md:w-[90%] w-[95%] mx-auto text-center" id="rulesContainer">
<h1 class="text-center my-8 text-xl">Welcome to Quiz Hero</h1>
<div class="lg:w-[80%] md:w-[90%] w-[90%] mx-auto text-left">
<h1 class="text-md text-gray-800 text-center">Quiz Rules:</h1>
<p class="text-xs italic mt-1 mb-4 text-orange-800 text-center">
Please read all the rules and steps before start.
</p>
<!-- Quiz rules start -->
<ul class="text-sm my-10">
<li class="my-4">
<span class="bg-orange-200 px-2 rounded">Step 1:</span> Click on the
<span class="bg-green-600 text-white px-2 rounded">Start Quiz</span>
button below.
</li>
<li class="my-4">
<span class="bg-orange-200 px-2 rounded">Step 2:</span> After
clicking Start button, you will see a page with 3s count down, wait
until the count is over!
</li>
<li class="my-4">
<span class="bg-orange-200 px-2 rounded">Step 3:</span> You will see
the questions with 4 options for each, and counter will start and
which will count your exam time.
</li>
<li class="my-4">
<span class="bg-orange-200 px-2 rounded">Step 4:</span> You have to
select the correct answer, and you have 60 seconds to answer 6
questions.
</li>
<li class="my-4">
<span class="bg-orange-200 px-2 rounded">Step 5:</span> Click on the
submit quiz button, when you are done with all the answers.
</li>
</ul>
<!-- Quiz rules end -->
</div>
<button class="bg-green-600 px-20 py-2 text-white rounded" id="startQuiz">
Start Quiz
</button>
</section>
<!-- Landing page content start -->
<!-- Top bar of question page start -->
<section class="shadow-sm my-5 py-2 sticky top-0 bg-white z-10 hidden" id="alertContainer">
<div class="w-9/12 mx-auto flex md:flex-row flex-col justify-between items-center">
<div class="text-xs font-normal">
<span class="text-red-700">Attention!</span> You have 60 seconds to
answer 6 questions.
<br />
Please keep an eye on the timer and make sure to answer all questions
before time runs out.
</div>
<!-- Timer part Start -->
<div class="flex items-center">
<p class="mr-2 text-xl text-gray-700">
<i class="fa-solid fa-clock-rotate-left"></i>
</p>
<div class="text-left">
<h1 class="text-green-700 text-xl" id="count">
00:00<sub class="text-xs ml-1">sec</sub>
</h1>
<p class="text-xs -mt-1 text-gray-700">Time Consumed</p>
</div>
</div>
<!-- Timer part end -->
</div>
</section>
<!-- Top bar of question page end -->
<!-- Quiz section start -->
<section class="md:w-9/12 w-[90%] md:flex-row flex-col mx-auto hidden" id="submitContainer">
<!-- Question section start -->
<div class="md:w-[70%] w-full">
<div class="duration-500" id="quizContainer"></div>
</div>
<!-- Question section end -->
<!-- Answer section start -->
<div class="md:w-[30%] w-full shadow-sm">
<div class="mx-2 text-center sticky top-20" id="displayResult">
<div class="mb-8">
<p>Chosen Answers</p>
<div id="answersContainer">
<h1 class="text-xl my-4 text-red-600">No Answers</h1>
</div>
</div>
<h1 class="mt-5 mb-2 text-lg capitalize font-medium text-gray-700">
All Done! Ready to submit your quiz?
</h1>
<button class="bg-green-600 text-white w-full py-2 rounded" id="submit"> Submit Quiz</button>
</div>
</div>
<!-- Answer section end -->
</section>
<!-- Quiz section end -->
<!-- Countdown section start -->
<div class="fixed top-0 left-0 bg-zinc-900 bg-opacity-90 w-full h-full justify-center items-center z-20 hidden"
id="countDownContainer">
<div class="text-center">
<h1 class="text-gray-200 text-3xl mb-5">
<span id="counter">3</span>s
</h1>
<h1 class="text-gray-200 text-xl animate-pulse">
Stay Seated, Stay Sharp. Starting Quiz In a moment!
</h1>
</div>
</div>
<!-- Countdown section end -->
<!-- Footer section start -->
<footer class="py-10 text-center text-sm">
Copyright © 2023 Quiz Hero All Rights Reserved.
</footer>
<!-- Footer section end -->
<!-- Custom JS -->
<script src="js/blog.js"></script>
</body>
</html>
<!--
Author: Assignment by PHero
Update By: Minhazul Abedin Munna
Date: 15 March 2023, 10:12pm
-->