generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
100 lines (89 loc) · 4.05 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
<!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">
<meta name="description" content="A chemistry based informative Quiz for all.">
<meta name="keywords" content="Chemistry, matter, elements, atmosphere, universe">
<link href="assets/css/style.css" rel="stylesheet">
<title>⚛ Chem Around Us</title>
</head>
<body>
<!--header that will appear on each part of the quiz-->
<header>
<h1 class="heading">
⚛ CHEM AROUND US
</h1>
</header>
<!--Landing page with game rules and username entry-->
<section id="landing">
<div class="intro-area">
<div class="intro">
<h2>Welcome to "CHEM AROUND US" Quiz !!</h2>
<p>A fun and fact filled questionnaire that will challenge your knowledge about the chemistry we are
surrounded with.
<br> <br>
This quiz consists of Multiple Choice Questions. Use your best guess and click on the
answer. Right answers will appear green and wrong ones in red. Scores will appear right away.
<br> <br>
Ready to challenge yourself? </p>
<form id="username-form">
<label for="username-field">Enter your Username:</strong></label>
<input type="text" name="username" id="username-field" class="username-info" placeholder="Username">
<br>
<label for="username-submit">Click:</label>
<input type="submit" value="Submit" id="username-submit">
<br>
<span id="error-msg" class="hide"></span>
</form>
</div>
</div>
<div class="btn-area">
<button data-type="start" id="btn-start" class="hide" onclick="letsBegin()"> Let's Begin!!</button>
</div>
</section>
<!--Quiz-box where the MCQs will be loaded with a live-score display and status-->
<section id="quiz-box" class="hide">
<div class="question-area">
<span id="live-score"></span>
<h4 id="question">Question</h4>
<ul id="options">
<li class="option"><button id="option0" onclick="scoreCalc(this)">Option 1</button></li>
<li class="option"><button id="option1" onclick="scoreCalc(this)">Option 2</button></li>
<li class="option"><button id="option2" onclick="scoreCalc(this)">Option 3</button></li>
<li class="option"><button id="option3" onclick="scoreCalc(this)">Option 4</button></li>
</ul>
<span id="q-number"></span>
</div>
<div class="btn-area">
<button data-type="next" id="btn-next" >Next</button>
</div>
</section>
<!--Result area displays the user's final score, a message for the user and a rating area for feedback-->
<section id="result" class="hide">
<div id="result-area">
<h4 id="score-title">Your score is:</h4>
<h2 id="score">Ö Ö - Please attempt answering!</h2>
<h4> Remember your reward is Precious Knowledge!!
<br>
and scores are mere numbers..</h4>
<br>
<div class="rating">
<h4>Did you enjoy playing the quiz? Rate us please!!</h4>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<button class="star">☆</button>
<h3 class="choice">0 of 5</h3>
</div>
</div>
<div class="btn-area">
<button type="reset" id="back-to-quiz" onclick="backToQuiz()">Back to Quiz Start</button>
</div>
</section>
<!--JavaScript link-->
<script src="assets/js/script.js"></script>
</body>
</html>