-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (141 loc) · 5.25 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
<!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>QuizMasterJS | Train your brain with our quizes!</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Header Section -->
<header>
<div class="container">
<div class="header-content">
<a href="https://quizmasterjs.netlify.app/" class="logo">
QuizMaster<span class="highlight">JS</span></a
>
<button class="switch-mode">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</button>
</div>
</div>
</header>
<!-- Banner Section -->
<section class="banner">
<div class="banner-left">
<h2 class="banner-title">
Put your knowledge to the test with our brain-busting
<span class="highlight"> JavaScript </span>quizzes!
</h2>
<p class="banner-description">
Our quizzes are designed to challenge even the most knowledgeable
individuals. From easy to hard, we've got something for everyone.
Our quizzes are not only fun but also informative.
</p>
<button id="condition-modal-btn">
Start Quiz
<span> <i class="fa-solid fa-arrow-right-long"></i> </span>
</button>
</div>
<div class="banner-right">
<img src="images/banner.svg" alt="banner image" class="floating" />
</div>
</section>
<!-- Modal Condtion Section -->
<section class="quiz-modal-container">
<div class="quiz-modal-condition glass">
<h2 class="modal-title">Some rules to play this Quizes!</h2>
<div class="modal-conditions">
<p>
1. You will have only
<span class="highlight">10 seconds</span> for each question.
</p>
<p>2. Once you select your answer, it can't be change.</p>
<p>3. You can't select any option once time goes off.</p>
<p>4. You will get points on the basis of your correct answer.</p>
</div>
<div class="condition-actions">
<button class="exit-modal btn">Exit Quiz</button>
<button class="start-quiz btn">Continue</button>
</div>
</div>
</section>
<!-- Question Section -->
<section class="question-section">
<div class="question-container glass">
<div class="question-header">
<div class="time-container">
<div class="time">
<span class="time-count"> 10</span> seconds Left
</div>
</div>
<div class="user-score">
<p><span class="score"> 10</span> points</p>
</div>
</div>
<div class="timeline"></div>
<div class="question-center">
<h2 class="question-text"></h2>
<div class="question-options"></div>
<div class="answer-description"></div>
</div>
<div class="question-footer">
<div class="question-left">
<div class="question-progress-container">
<div class="question-progress"></div>
</div>
<div class="question-progress-text"></div>
</div>
<div class="question-action">
<button class="next-question btn">Next Question</button>
</div>
</div>
</div>
</section>
<!-- Result Section -->
<section class="result-section">
<div class="result-box glass">
<h2 class="result-expression">Congratulations!!!!</h2>
<p class="result-text">You Scored 60 Points</p>
<p class="result-feedback">
<span class="feedback"></span>
</p>
<div class="result-actions">
<button class="restart btn">Restart Quiz</button>
<button class="back-to-home btn">Back to Home</button>
</div>
</div>
</section>
<!-- Canvas || Confetti -->
<canvas id="my-canvas"></canvas>
<!-- loading section -->
<section class="loading-container">
<h2 class="loading-text">Loading...</h2>
<div class="loading-line-box">
<div class="line"></div>
</div>
</section>
<!-- Container end -->
</div>
<!-- Footer Section -->
<footer>
<p class="copyright">Copyright ©2022 Reserved by QuizMasterJS</p>
</footer>
<!-- JS Files -->
<script src="./js/confetti.min.js"></script>
<script src="./js/quiz.js"></script>
<script src="./js/app.js"></script>
<script
src="https://kit.fontawesome.com/8184740b0e.js"
crossorigin="anonymous"
></script>
</body>
</html>