-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (71 loc) · 2.63 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
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App </title>
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<!-- start Quiz button -->
<div class="start_btn"><button>Start Quiz</button></div>
<!-- Info Box -->
<div class="info_box">
<div class="info-title"><span>Quiz App</span></div>
<div class="info-list">
<h3> Acheived Points in the Quiz App</h3>
<ul>
<li>You need to create a MCQ screen, which will display the question with the choices.</li>
<li>There would be a level of difficulty for questions, show stars on the basis of that.</li>
<li>Whenever you click on the right answer, marked it with green.</li>
<li>Whenever you click on the wrong answer, marked with red.</li>
<li>Whenever you select an answer, “Next Question” button is visible.</li>
<li>There is a top bar which will increment on every next question.</li>
</ul>
<div class="info"></div>
</div>
<div class="buttons">
<button class="quit">Exit Quiz</button>
<button class="restart">Continue</button>
</div>
</div>
<!-- Quiz Box -->
<div class="quiz_box">
<header>
<div class="title">Let's Go</div>
<div class="timer">
<div class="time_left_txt">Level</div>
<div class="timer_sec"></div>
</div>
<div class="time_line"></div>
</header>
<section>
<div class="que_text">
</div>
<div class="option_list">
</div>
</section>
<footer>
<div class="total_que">
</div>
<button class="next_btn">Next</button>
</footer>
</div>
<!-- Result Box -->
<div class="result_box">
<div class="complete_text">You've completed the Quiz!</div>
<div class="score_text">
</div>
<div class="buttons">
<button class="replay">Replay Quiz</button>
<button class="quit">Quit Quiz</button>
</div>
</div>
<!-- FontAweome CDN Link for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="./assets/main.js"></script>
</body>
</html>
</html>