-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (166 loc) · 5.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<title>QuizApp</title>
</head>
<body>
<!-- UserForm -->
<div class="login_form">
<div class="form animate__animated animate__fadeIn">
<div class="title">Login</div>
<span class="inputs">
<span class="inputf">
<input type="email" class="input" id="uEmail" placeholder="Email" />
<span class="label">Email</span>
<span class="material-icons icon emailIcon animate__animated animate__fadeIn">email</span>
</span>
<span class="inputf">
<input
type="password"
class="input"
id="uPass"
placeholder="Password"
/>
<span class="label">Password</span>
<span
class="material-icons icon showPass animate__animated animate__fadeIn"
onclick="showPass()"
title="Show Password"
>lock</span
>
</span>
</span>
<div class="links">
<a>Forgot Password</a>
<label for="remember">
<input type="checkbox" id="remember" />
Remember Me
</label>
</div>
<div class="hideBtn">
<button type="button" class="btn" onclick="loginForm()">Login</button>
<div class="text">
New user? Create an account
<a id="signUp" onclick="singUp()">Register</a>
</div>
<p
onclick="showPopup()"
id="animate"
class="clickHere animate__animated"
>
Click Here for <span>Email:Pass</span>
</p>
</div>
<div class="emailPass animate__animated animate__fadeIn">
<div>
<span>Email:</span>
<p id="reEmail">ahmed@gmail.com</p>
</div>
<div>
<span>Password:</span>
<p id="rePass">12345</p>
</div>
<button class="btn" onclick="backToForm()">Remembered</button>
</div>
</div>
</div>
<!-- Info Box -->
<div class="info_box">
<div class="info-title"><span>Some Rules of this Quiz</span></div>
<div class="info-list">
<div class="info">
<span>1.</span> You will have only <span>05 seconds</span> per each
question.
</div>
<div class="info">
<span>2.</span> You can't select any option once time goes off.
</div>
<div class="info">
<span>3.</span> Once the quiz starts, you can't minimize the screen or
open other pages.
</div>
<div class="info">
<span>4.</span> If you do that <span>point 3</span>, it will be
considered prohibited.
</div>
<div class="info">
<span>5.</span> If two prohibitions are counted, you will be
eliminated.
</div>
<div class="info">
<span>6.</span> You can't exit from the quiz while you're playing.
</div>
<div class="info">
<span>7.</span> You will earn points based on your correct answers.
</div>
</div>
<div class="buttons">
<button class="quit" onclick="quit()">Exit Quiz</button>
<button class="restart" onclick="enterQuiz()">Continue</button>
</div>
</div>
<!-- Start Quiz Button -->
<div class="startBtn">
<button onclick="startQuiz()">Start Quiz</button>
</div>
<!-- Question Displayed -->
<div class="quiz_container">
<!-- Quiz Titile -->
<header>
<div class="quiz_title">
<p>JavaScript Quiz</p>
</div>
<div class="count_down">
<p>Time Left</p>
<p id="timer">00</p>
</div>
</header>
<!-- Quiz Quesitons/Answer -->
<main id="quizHidden">
<div id="qustionsContainer"></div>
</main>
<!-- Quiz Footer Next Button -->
<footer>
<div class="footer_container">
<div class="qustion_Count">
<span id="qustionNo">1</span>
<p>of</p>
<span>5</span>
<p>Questions</p>
</div>
<div class="next_Btn">
<button onclick="renderQuestions()">Next Que</button>
</div>
</div>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="icon">
<i class="fas fa-crown"></i>
</div>
<div class="complete_text">You've completed the Quiz!</div>
<div class="circular-progress">
<span class="progress-value">0%</span>
</div>
<div class="score_text"></div>
<div class="buttons">
<button class="restart" onclick="restart()">Replay Quiz</button>
<button class="quit" onclick="quit()">Quit Quiz</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>