-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (165 loc) · 9 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
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage | LogicLab</title>
<link rel="icon" type="image/x-icon" href="/assets/images/game-over-sign.jpg">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel='stylesheet' href="assets/css/style.css">
<link rel="import" href="header.html">
</head>
<body>
<main>
<div id="header"></div>
<!--Introduction Image-->
<section class="hero">
<h2>Know It<br>Or<br>Blow It: <br><span>Quiz</span> Edition</h2>
<p><i>JavaScript: Making the web more 'fun'-ctional since its creation!</i></p>
<a href="#arrow-down">
<ion-icon name="arrow-down-circle" aria-label="Scroll down" class="white-arrow"
style="font-size: 50px;"></ion-icon>
<ion-icon name="arrow-down-circle" aria-label="Scroll down" class="black-arrow"
style="font-size: 50px;"></ion-icon>
</a>
</section>
<!-- Introduction -->
<section class="halfbox">
<div class="halfbox-writing" id="arrow-down">
<p class="subtitle">WELCOME TO OUR CHALLENGING</p>
<h2>JAVASCRIPT QUIZ</h2>
<p>Welcome to an exhilarating quiz adventure like no other! Prepare yourself for a series of
mind-boggling questions that will put your knowledge to the test. With each question, you'll embark
on a journey of discovery, uncovering fascinating facts and expanding your understanding of various
subjects. Get ready to challenge yourself and dive into a world of curiosity!</p>
</div>
<div>
<img src="./assets/images/highscore-board.jpg" alt="A digital highscore board">
</div>
</section>
<!-- Key Features -->
<section class="key-features">
<div class="key-surround">
<h2>KEY FEATURES</h2>
<div class="key-flex">
<div>
<ion-icon name="help-circle-outline" style="font-size: 50px" ;></ion-icon>
<h3><u>Interactive Questions</u></h3>
<p>Engage in a thrilling quiz experience with thought-provoking questions that will keep you on
your toes.</p>
</div>
<div>
<ion-icon name="timer-outline" style="font-size: 50px;"></ion-icon>
<h3><u>Real-Time Feedback</u></h3>
<p>Receive instant feedback on your answers and track your progress throughout the quiz.</p>
</div>
<div>
<ion-icon name="musical-notes-outline" style="font-size: 50px;"></ion-icon>
<h3><u>Exciting Sound Effects</u></h3>
<p>Immerse yourself in the quiz atmosphere with captivating sound effects that enhance your
gaming experience.</p>
</div>
<div>
<ion-icon name="trophy-outline" style="font-size: 50px;"></ion-icon>
<h3><u>High Score Competition</u></h3>
<p>Compete with friends and fellow quiz enthusiasts for the top spot on the leaderboard and
prove your knowledge reigns supreme.</p>
</div>
</div>
</div>
</section>
<!-- Get Started Section -->
<section class="halfbox">
<div>
<img src="./assets/images/game-room-wall-background.jpg" alt="gamer sitting at a chair and computer">
</div>
<div class="halfbox-writing">
<h2>GET STARTED</h2>
<p>Whether you're a trivia aficionado or simply looking for a fun and educational activity, our quiz
will provide hours of entertainment and valuable learning. Are you ready to embark on this thrilling
quiz adventure and put your knowledge to the test? Let the journey begin!
</p>
<a href="#quiz-container" class="halfbox-btn">TAKE THE QUIZ</a>
</div>
</section>
<!-- Quiz Section- -->
<section class="quiz-section">
<div class="quiz-container" id="quiz-container">
<div id="rulesContainer">
<h4 class="quiz-titles" id="quiz-title-rules">RULES</h4>
<p class=quiz-instructions id="quiz-rules">Welcome to the LogicLab's "Know It or Blow It:
Javascript Quiz"! Get ready to
test your knowledge and race against the clock! You have a thrilling 2 minutes to tackle 15
mind-bending questions. But here's the catch: the faster you answer correctly, the higher your
score! Each correct answer will earn you points based on the time you have left. So, think fast,
act
swiftly, and maximize your score! But beware, 15 precious seconds will be snatched away from
your
countdown for every wrong answer. Can you conquer the challenge and rise to the top of the
leaderboard? Get ready to unleash your brainpower and go on an epic quiz adventure!
</p>
<button class="quiz-btn" id="next-btn">NEXT</button>
<button class="quiz-btn" id="view-highscores-btn">VIEW HIGHSCORES</button>
</div>
<div id="countdownContainer" style="display: none;">
<h4 class="quiz-titles" id="quiz-countdown">5, 4, 3, 2, 1...</h4>
<button class="quiz-btn" id="start-btn">START</button>
</div>
<div class="question-one" id="question-one" style="display:none;">
<!-- TESTING TIMER IDEA- -->
<div class="quizCountdown">
<!-- Minute Timer-->
<div class="timeCircle">
<div class="marker min_marker"></div>
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="minCircle"></circle>
</svg>
<div id="minutesDisplay">00 <br><span>MINUTES</span></div>
</div>
<!-- Second Timer-->
<div class="timeCircle">
<div class="marker sec_marker"></div>
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="secCircle"></circle>
</svg>
<div id="secondsDisplay">00 <br><span>SECONDS</span></div>
</div>
<button id="soundToggleBtn">
<ion-icon name="volume-high-outline"></ion-icon>
</button>
<h2 class="finishMessage">Thank You For<br><span>Playing</span></h2>
</div>
<h2 id="question"></h2>
<div id="answers">
<button class="answer"></button>
<button class="answer"></button>
<button class="answer"></button>
<button class="answer"></button>
</div>
<div id="feedback" style="display: none;">
<p id="feedbackMessage"></p>
</div>
<div id="feedbackPopup" class="feedback-popup" style="display: none;">
<p id="feedbackPopupMessage"></p>
</div>
</div>
<div id="endContainer" style="display: none;">
<h1>Congratulations! You've completed the quiz ⭐️!</h1>
<p>Your score: <span id="endScore"></span></p>
<form id="initialsForm">
<label for="initialsInput">Enter your initials:</label>
<input type="text" id="initialsInput" maxlength="3">
<button type="submit">Submit</button>
<div id="submitMessage">Score submitted! Thank you for playing ⭐️!</div>
</form>
</div>
</div>
</section>
<script src=" assets/javascript/script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</main>
</body>
</html>