Skip to content

Commit f579d50

Browse files
williamtitus295661williamtitus295661
committed
added timer and dark mode
1 parent 7d06a79 commit f579d50

File tree

3 files changed

+109
-5
lines changed

3 files changed

+109
-5
lines changed

Diff for: ‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="manifest" href="./manifest.json">
1111
</head>
1212
<link rel="stylesheet" href="css/index.css">
13+
1314
</head>
1415
<body>
1516
<div class="front">

Diff for: ‎js/main.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -224,8 +224,8 @@ function examiner(up_number, down_number, sign_of_question, answer_of_student) {
224224
function resultGenerator() {
225225
total_time = end_time - start_time;
226226
time_taken_seconds = parseInt(total_time / 1000);
227-
time_taken_minutes = 00;
228-
time_taken_hours = 00;
227+
time_taken_minutes = '00';
228+
time_taken_hours = '00';
229229

230230
if (time_taken_seconds > 59) {
231231
time_taken_minutes = parseInt(time_taken_seconds / 60);
@@ -471,6 +471,31 @@ function createStartornotpage() {
471471
start_now_btn.addEventListener('click', createTestpage);
472472
}
473473

474+
475+
function startTimer(duration, display) {
476+
let timer = duration, minutes, seconds;
477+
setInterval(function () {
478+
minutes = parseInt(timer / 60, 10);
479+
seconds = parseInt(timer % 60, 10);
480+
481+
minutes = minutes < 10 ? "0" + minutes : minutes;
482+
seconds = seconds < 10 ? "0" + seconds : seconds;
483+
484+
display.textContent = minutes + ":" + seconds;
485+
486+
if (--timer < 0) {
487+
timer = 0;
488+
alert("Time's up!");
489+
// You can add any additional actions here, like submitting the test automatically
490+
}
491+
}, 1000);
492+
}
493+
494+
window.onload = function () {
495+
const timeLimit = 60 * 10; // 10 minutes
496+
const display = document.querySelector('#time');
497+
startTimer(timeLimit, display);
498+
};
474499
// document.querySelector('#difficulty').addEventListener('change', change_max_attr_val())
475500

476501
function change_max_attr_val() {

Diff for: ‎pages/main.html

+81-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,61 @@
99
<link rel="stylesheet" href="../css/basic.css" />
1010
<link rel="shortcut icon" href="../assets/images/Arito_favicon.png" type="image/x-icon" />
1111
<link rel="stylesheet" href="../css/main.css" />
12+
<style>
13+
14+
.dark-mode-toggle {
15+
background-color: #333;
16+
color: #fff;
17+
border: none;
18+
padding: 10px 20px;
19+
font-size: 16px;
20+
cursor: pointer;
21+
border-radius: 5px;
22+
transition: background-color 0.3s, color 0.3s;
23+
}
24+
25+
.dark-mode-toggle:hover {
26+
background-color: #555;
27+
}
28+
29+
.dark-mode .dark-mode-toggle {
30+
background-color: #fff;
31+
color: #333;
32+
}
33+
34+
.dark-mode .dark-mode-toggle:hover {
35+
background-color: #ddd;
36+
}
37+
.dark-mode body {
38+
background-color: #121212;
39+
color:red;
40+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
41+
}
42+
43+
.dark-mode .test_page {
44+
background-color: #1e1e1e;
45+
background-size: 180%;
46+
color: red;
47+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
48+
}
49+
50+
.dark-mode .timer {
51+
font-size: 26px;
52+
color: #ffcc00;
53+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
54+
}
55+
56+
/* Add more dark mode styles as needed */
57+
</style>
1258
<body>
1359

1460

1561
<div class="result_page">
1662
<div class="front_results_page">
1763
<header>
1864
<h1>Result 🧐</h1>
65+
66+
1967
</header>
2068
<div class="results_text_div">
2169

@@ -87,8 +135,10 @@ <h1>Result 🧐</h1>
87135
<header>
88136
<h1 class="test_title"></h1>
89137
<h2 class="question_details">Question: <span class="q_number"></span>/<span class="total_qs"></span> </h2>
90-
</header>
91-
138+
139+
<div class="timer">Time Left: <span id="time">00:00</span></div>
140+
<button id="dark-mode-toggle">Toggle Dark Mode</button>
141+
</header>
92142
<div class="question_container">
93143
<button class="prev_question_btn">&#8249;</button>
94144
<div class="question_div">
@@ -197,7 +247,35 @@ <h1>Fill them!</h1>
197247
<audio src="../assets/audio/final_question.mp3" class="final_question">
198248
<audio src="../assets/audio/click.mp3" class="click_sound">
199249
<audio src="../assets/audio/test_page_bg_music.mp3" class="test_page_bg_music">
200-
250+
<script>
251+
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
252+
document.body.classList.toggle('dark-mode');
253+
});
254+
function startTimer(duration, display) {
255+
let timer = duration, minutes, seconds;
256+
setInterval(function () {
257+
minutes = parseInt(timer / 60, 10);
258+
seconds = parseInt(timer % 60, 10);
259+
260+
minutes = minutes < 10 ? "0" + minutes : minutes;
261+
seconds = seconds < 10 ? "0" + seconds : seconds;
262+
263+
display.textContent = minutes + ":" + seconds;
264+
265+
if (--timer < 0) {
266+
timer = 0;
267+
alert("Time's up!");
268+
// You can add any additional actions here, like submitting the test automatically
269+
}
270+
}, 1000);
271+
}
272+
273+
window.onload = function () {
274+
const timeLimit = 60 * 10; // 10 minutes
275+
const display = document.querySelector('#time');
276+
startTimer(timeLimit, display);
277+
};
278+
</script>
201279
</body>
202280
<script src="../js/main.js"></script>
203281
<script src="../js/basic.js"></script>

0 commit comments

Comments
 (0)