Skip to content

Commit 32ffb60

Browse files
rayenghanmirayenghanmi
committed
dark mode
1 parent 49de366 commit 32ffb60

File tree

3 files changed

+155
-22
lines changed

3 files changed

+155
-22
lines changed

‎quiz/index.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,22 @@
88
</head>
99
<body>
1010
<div class="quiz-container">
11-
<h1>Test Your Knowledge</h1>
11+
<h1 id="quiz-title">Quiz Time!</h1>
12+
13+
<div id="theme-switcher">
14+
<label for="toggle">Dark Mode</label>
15+
<input type="checkbox" id="toggle">
16+
</div>
17+
1218
<form id="quiz-form">
1319
<div id="quiz-questions"></div>
14-
<button type="button" id="submit-btn" onclick="checkAnswers()">Submit Answers</button>
20+
<button type="button" id="submit-button" onclick="checkAnswers()">Submit</button>
1521
</form>
1622

17-
<!-- Result section moved inside the container -->
18-
<div id="result" class="result">
23+
<div id="result" style="display: none;">
1924
<h2 id="result-message"></h2>
2025
<p id="result-score"></p>
21-
<button onclick="location.reload()">Try Again</button>
26+
<button id="try-again">Try Again</button>
2227
</div>
2328
</div>
2429

‎quiz/quiz.js‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const questions = [
4343

4444
let score = 0;
4545

46-
// Shuffle function to randomize answers
4746
function shuffle(array) {
4847
for (let i = array.length - 1; i > 0; i--) {
4948
const j = Math.floor(Math.random() * (i + 1));
@@ -52,15 +51,13 @@ function shuffle(array) {
5251
return array;
5352
}
5453

55-
// Load quiz questions
5654
function loadQuiz() {
5755
const quizQuestionsDiv = document.getElementById('quiz-questions');
5856
quizQuestionsDiv.innerHTML = ''; // Clear any previous content
5957

6058
questions.forEach((q, index) => {
61-
const shuffledAnswers = shuffle([...q.answers]); // Randomize answers
59+
const shuffledAnswers = shuffle([...q.answers]);
6260

63-
// Generate HTML for each question
6461
let questionBlock = `
6562
<div class="question">
6663
<h3>${q.question}</h3>`;
@@ -78,27 +75,24 @@ function loadQuiz() {
7875
});
7976
}
8077

81-
// Check answers and display results
8278
function checkAnswers() {
8379
const form = document.getElementById('quiz-form');
8480
const resultDiv = document.getElementById('result');
8581
const resultMessage = document.getElementById('result-message');
8682
const resultScore = document.getElementById('result-score');
8783
score = 0;
8884

89-
// Validate answers
9085
questions.forEach((q, index) => {
9186
const userAnswer = form[`question${index}`].value;
92-
if (userAnswer === q.answers[0]) { // Check if the selected answer is correct
93-
score += 10; // Each correct answer adds 10 points
87+
if (userAnswer === q.answers[0]) {
88+
score += 10;
9489
}
9590
});
9691

97-
// Hide the quiz form and display the result
9892
form.style.display = 'none';
99-
resultDiv.style.display = 'block'; // Show result div
93+
resultDiv.style.display = 'block';
94+
resultDiv.classList.add('fade-in');
10095

101-
// Set the result message and score
10296
if (score >= 70) {
10397
resultMessage.textContent = "Congratulations, you passed!";
10498
} else {
@@ -108,5 +102,31 @@ function checkAnswers() {
108102
resultScore.textContent = `Your score is: ${score}/100`;
109103
}
110104

111-
// Load quiz on page load
112-
document.addEventListener('DOMContentLoaded', loadQuiz);
105+
document.addEventListener('DOMContentLoaded', () => {
106+
loadQuiz();
107+
108+
const themeToggle = document.getElementById('toggle');
109+
const body = document.body;
110+
111+
const storedMode = localStorage.getItem('colorMode');
112+
if (storedMode) {
113+
body.classList.toggle('dark-mode', storedMode === 'dark');
114+
themeToggle.checked = storedMode === 'dark';
115+
}
116+
117+
themeToggle.addEventListener('change', () => {
118+
body.classList.toggle('dark-mode');
119+
localStorage.setItem('colorMode', body.classList.contains('dark-mode') ? 'dark' : 'light');
120+
121+
// Ensure quiz container also reflects the dark mode
122+
const quizContainer = document.querySelector('.quiz-container');
123+
quizContainer.classList.toggle('dark-mode', body.classList.contains('dark-mode'));
124+
});
125+
126+
document.getElementById('try-again').addEventListener('click', () => {
127+
loadQuiz();
128+
score = 0;
129+
document.getElementById('quiz-form').style.display = 'block';
130+
document.getElementById('result').style.display = 'none';
131+
});
132+
});

‎quiz/styles.css‎

Lines changed: 112 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ html, body {
55
height: 100%;
66
overflow: hidden; /* Prevent outer scrollbar */
77
font-family: 'Arial', sans-serif;
8-
background-color: #f0f4f8;
8+
background-color: #f0f4f8; /* Light mode background */
9+
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
10+
}
11+
12+
body.dark-mode {
13+
background-color: #121212; /* Dark mode background */
14+
color: #ffffff; /* Dark mode text color */
915
}
1016

1117
/* Quiz container with scrollable content */
@@ -20,14 +26,79 @@ html, body {
2026
overflow-y: auto; /* Scrollable content */
2127
height: 100vh; /* Take full height of the viewport */
2228
box-sizing: border-box; /* Include padding and border in the element’s total width and height */
29+
transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */
2330
}
2431

32+
.quiz-container.dark-mode {
33+
background-color: #1e1e1e; /* Dark mode container background */
34+
}
35+
36+
2537
/* Heading styling */
2638
h1 {
27-
color: #333;
39+
color: #333; /* Light mode color */
2840
margin-top: 0;
2941
}
3042

43+
/* Dark mode heading color */
44+
body.dark-mode h1 {
45+
color: #ffffff; /* Change to white in dark mode */
46+
}
47+
48+
/* Hide scrollbar */
49+
.quiz-container::-webkit-scrollbar {
50+
display: none; /* Hide scrollbar for WebKit browsers */
51+
}
52+
53+
.toggle-label {
54+
display: flex;
55+
align-items: center;
56+
}
57+
58+
.toggle-label input {
59+
display: none; /* Hide the default checkbox */
60+
}
61+
62+
.toggle-switch {
63+
width: 40px;
64+
height: 20px;
65+
background-color: #ccc;
66+
border-radius: 50px;
67+
position: relative;
68+
margin-left: 10px;
69+
cursor: pointer;
70+
transition: background-color 0.3s;
71+
}
72+
73+
.toggle-switch::before {
74+
content: '';
75+
width: 18px;
76+
height: 18px;
77+
background-color: white;
78+
border-radius: 50%;
79+
position: absolute;
80+
left: 2px;
81+
bottom: 1px;
82+
transition: transform 0.3s;
83+
}
84+
85+
input:checked + .toggle-switch {
86+
background-color: #4caf50; /* Color when checked */
87+
}
88+
89+
input:checked + .toggle-switch::before {
90+
transform: translateX(20px); /* Move the toggle */
91+
}
92+
93+
/* Dark mode toggle switch */
94+
input[type="checkbox"]:checked + .toggle-switch {
95+
background: #4caf50; /* Color when checked */
96+
}
97+
98+
input[type="checkbox"]:checked + .toggle-switch::before {
99+
transform: translateX(25px); /* Move switch to the right */
100+
}
101+
31102
/* Ensure that questions area is scrollable if necessary */
32103
#quiz-questions {
33104
margin: 20px 0;
@@ -45,7 +116,7 @@ label {
45116
font-size: 16px;
46117
}
47118

48-
/* Button styling */
119+
/* Button styling with glowing effect */
49120
button {
50121
background-color: #4caf50;
51122
color: white;
@@ -55,25 +126,62 @@ button {
55126
cursor: pointer;
56127
font-size: 16px; /* Optional: Increase font size for better visibility */
57128
margin-top: 20px; /* Add space above the button */
58-
margin-bottom: 50px;
129+
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5), 0 0 20px rgba(76, 175, 80, 0.7), 0 0 30px rgba(76, 175, 80, 0.9); /* Glowing effect */
130+
transition: all 0.3s ease; /* Transition for smooth effects */
59131
}
60132

61133
/* Button hover effect */
62134
button:hover {
63135
background-color: #45a049;
136+
transform: scale(1.05); /* Slightly increase size on hover */
137+
box-shadow: 0 0 10px rgba(76, 175, 80, 1), 0 0 30px rgba(76, 175, 80, 1), 0 0 40px rgba(76, 175, 80, 1); /* Stronger glow on hover */
64138
}
65139

66140
/* Result section */
67141
.result {
68142
display: none; /* Initially hidden */
69143
text-align: center;
70144
padding: 20px;
145+
opacity: 0; /* Start invisible for fade-in effect */
146+
transition: opacity 0.5s ease; /* Fade transition */
71147
}
72148

73149
#result h2 {
74150
font-size: 24px;
151+
color: #333; /* Light mode result color */
152+
}
153+
154+
/* Dark mode result color */
155+
body.dark-mode #result h2 {
156+
color: #ffffff; /* Change to white in dark mode */
75157
}
76158

77159
#result p {
78160
font-size: 18px;
79161
}
162+
163+
/* Fade-in animation */
164+
.fade-in {
165+
opacity: 1; /* Fully visible */
166+
}
167+
168+
/* Additional styles for the quiz title */
169+
h2 {
170+
color: #333;
171+
margin-top: 0;
172+
}
173+
174+
/* Add some animations for the quiz container */
175+
@keyframes fadeIn {
176+
from {
177+
opacity: 0;
178+
}
179+
to {
180+
opacity: 1;
181+
}
182+
}
183+
184+
/* Apply animation to the quiz-container */
185+
.quiz-container {
186+
animation: fadeIn 1s ease-in; /* Fade in effect for quiz container */
187+
}

0 commit comments

Comments
 (0)