Skip to content

Commit 31df631

Browse files
tomarcodinglifetomarcodinglife
committed
updated
1 parent 64a992e commit 31df631

5 files changed

Lines changed: 1011 additions & 32 deletions

File tree

‎26_miniproject/project05/index.html‎

Lines changed: 226 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,234 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Quiz Website</title>
7-
<link rel="stylesheet" href="style.css">
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background: linear-gradient(90deg, #a4d9ff, #f0b3fa);
17+
color: #333;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
height: 100vh;
22+
padding: 1rem;
23+
}
24+
25+
.quiz {
26+
width: 100%;
27+
max-width: 600px;
28+
background-color: #fff;
29+
border-radius: 1rem;
30+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
31+
padding: 2rem;
32+
}
33+
34+
.question {
35+
font-size: 1.5rem;
36+
margin-bottom: 1rem;
37+
}
38+
39+
ul {
40+
list-style: none;
41+
padding: 0;
42+
}
43+
44+
li {
45+
margin: 10px 0;
46+
}
47+
48+
label {
49+
font-size: 1.1rem;
50+
margin-left: 0.5rem;
51+
}
52+
53+
.btns {
54+
text-align: right;
55+
margin-top: 1.5rem;
56+
}
57+
58+
.btn {
59+
background-color: #29b9ad;
60+
color: white;
61+
padding: 10px 20px;
62+
border: none;
63+
border-radius: 6px;
64+
cursor: pointer;
65+
font-size: 1rem;
66+
transition: background-color 0.3s ease;
67+
}
68+
69+
.btn:hover {
70+
background-color: #239c91;
71+
}
72+
73+
@media (max-width: 600px) {
74+
.quiz {
75+
padding: 1rem;
76+
}
77+
.question {
78+
font-size: 1.25rem;
79+
}
80+
}
81+
</style>
882
</head>
983
<body>
10-
<div class="quiz-section">
11-
<div class="quiz">
12-
<h2 class="question" id="question">Quiz Question</h2>
13-
<hr>
14-
<ul>
15-
<li>
16-
<input type="radio" name="answer" class="answer" id="a">
17-
<label for="a" id="option_1">quiz Option</label>
18-
</li>
19-
20-
<li>
21-
<input type="radio" name="answer" class="answer" id="a">
22-
<label for="a" id="option_1">quiz Option</label>
23-
</li>
24-
25-
<li>
26-
<input type="radio" name="answer" class="answer" id="a">
27-
<label for="a" id="option_1">quiz Option</label>
28-
</li>
29-
30-
<li>
31-
<input type="radio" name="answer" class="answer" id="a">
32-
<label for="a" id="option_1">quiz Option</label>
33-
</li>
34-
</ul>
35-
<hr>
36-
<div class="btns">
37-
<button class="btn" id="submit">Submit</button>
38-
</div>
84+
<div class="quiz">
85+
<h2 class="question" id="question">Quiz Question</h2>
86+
<hr>
87+
<ul>
88+
<li>
89+
<input type="radio" name="answer" class="answer" id="a">
90+
<label for="a" id="option_1">Option A</label>
91+
</li>
92+
<li>
93+
<input type="radio" name="answer" class="answer" id="b">
94+
<label for="b" id="option_2">Option B</label>
95+
</li>
96+
<li>
97+
<input type="radio" name="answer" class="answer" id="c">
98+
<label for="c" id="option_3">Option C</label>
99+
</li>
100+
<li>
101+
<input type="radio" name="answer" class="answer" id="d">
102+
<label for="d" id="option_4">Option D</label>
103+
</li>
104+
</ul>
105+
<hr>
106+
<div class="btns">
107+
<button class="btn" id="submit">Submit</button>
39108
</div>
40109
</div>
110+
111+
<script>
112+
const quizData = [
113+
{
114+
question: "What is the capital of France?",
115+
options: {
116+
a: "Berlin",
117+
b: "Madrid",
118+
c: "Paris",
119+
d: "Rome"
120+
},
121+
answer: 2
122+
},
123+
{
124+
question: "Which planet is known as the Red Planet?",
125+
options: {
126+
a: "Earth",
127+
b: "Mars",
128+
c: "Jupiter",
129+
d: "Saturn"
130+
},
131+
answer: 1
132+
},
133+
{
134+
question: "What is the largest ocean on Earth?",
135+
options: {
136+
a: "Atlantic Ocean",
137+
b: "Indian Ocean",
138+
c: "Arctic Ocean",
139+
d: "Pacific Ocean"
140+
},
141+
answer: 3
142+
},
143+
{
144+
question: "Who wrote 'Romeo and Juliet'?",
145+
options: {
146+
a: "Charles Dickens",
147+
b: "William Shakespeare",
148+
c: "Mark Twain",
149+
d: "Jane Austen"
150+
},
151+
answer: 1
152+
},
153+
{
154+
question: "What is the chemical symbol for gold?",
155+
options: {
156+
a: "Au",
157+
b: "Ag",
158+
c: "Pb",
159+
d: "Fe"
160+
},
161+
answer: 0
162+
},
163+
{
164+
question: "Which gas do plants absorb from the atmosphere?",
165+
options: {
166+
a: "Oxygen",
167+
b: "Carbon Dioxide",
168+
c: "Nitrogen",
169+
d: "Hydrogen"
170+
},
171+
answer: 1
172+
}
173+
];
174+
175+
const questionElement = document.getElementById("question");
176+
const optionstag = {
177+
a: document.getElementById("option_1"),
178+
b: document.getElementById("option_2"),
179+
c: document.getElementById("option_3"),
180+
d: document.getElementById("option_4")
181+
};
182+
const answertag = document.querySelectorAll(".answer");
183+
const submitButton = document.getElementById("submit");
184+
185+
let currentQuestion = 0;
186+
let score = 0;
187+
188+
const loadQuiz = () => {
189+
deselectAnswers();
190+
const currentQuizData = quizData[currentQuestion];
191+
questionElement.innerText = currentQuizData.question;
192+
193+
let i = 0;
194+
for (const key in optionstag) {
195+
optionstag[key].innerText = currentQuizData.options[key];
196+
answertag[i].setAttribute('data-index', i);
197+
i++;
198+
}
199+
};
200+
201+
const deselectAnswers = () => {
202+
answertag.forEach(input => input.checked = false);
203+
};
204+
205+
const getSelected = () => {
206+
let selectedIndex = null;
207+
answertag.forEach((input) => {
208+
if (input.checked) {
209+
selectedIndex = parseInt(input.getAttribute('data-index'));
210+
}
211+
});
212+
return selectedIndex;
213+
};
214+
215+
submitButton.addEventListener("click", () => {
216+
const selected = getSelected();
217+
if (selected !== null) {
218+
if (selected === quizData[currentQuestion].answer) {
219+
score++;
220+
}
221+
currentQuestion++;
222+
223+
if (currentQuestion < quizData.length) {
224+
loadQuiz();
225+
} else {
226+
document.querySelector(".quiz").innerHTML = `
227+
<h2>You scored ${score} out of ${quizData.length}</h2>
228+
<button class="btn" onclick="location.reload()">Restart Quiz</button>
229+
`;
230+
}
231+
}
232+
});
233+
234+
loadQuiz();
235+
</script>
41236
</body>
42-
<script src="script.js"></script>
43-
</html>
237+
</html>

0 commit comments

Comments
 (0)