Skip to content

Commit dc9ac8b

Browse files
solygambassolygambas
committed
add quiz app
1 parent 97e2866 commit dc9ac8b

File tree

3 files changed

+192
-0
lines changed

3 files changed

+192
-0
lines changed

Diff for: ‎46-quiz app/index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Quiz App</title>
8+
</head>
9+
<body>
10+
<div class="quiz-container" id="quiz">
11+
<div class="quiz-header">
12+
<h2 id="question">Question</h2>
13+
<ul>
14+
<li>
15+
<input type="radio" name="answer" id="a" class="answer" />
16+
<label for="a" id="a_text">Question</label>
17+
</li>
18+
<li>
19+
<input type="radio" name="answer" id="b" class="answer" />
20+
<label for="b" id="b_text">Question</label>
21+
</li>
22+
<li>
23+
<input type="radio" name="answer" id="c" class="answer" />
24+
<label for="c" id="c_text">Question</label>
25+
</li>
26+
<li>
27+
<input type="radio" name="answer" id="d" class="answer" />
28+
<label for="d" id="d_text">Question</label>
29+
</li>
30+
</ul>
31+
</div>
32+
<button id="submit">Submit</button>
33+
</div>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

Diff for: ‎46-quiz app/script.js

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const quizData = [
2+
{
3+
question: "Which language runs in a web browser?",
4+
a: "Java",
5+
b: "C",
6+
c: "Python",
7+
d: "JavaScript",
8+
correct: "d",
9+
},
10+
{
11+
question: "What does CSS stand for?",
12+
a: "Central Style Sheets",
13+
b: "Cascading Style Sheets",
14+
c: "Cascading Simple Sheets",
15+
d: "Cars SUVs Sailboats",
16+
correct: "b",
17+
},
18+
{
19+
question: "What does HTML stand for?",
20+
a: "Hypertext Markup Language",
21+
b: "Hypertext Markdown Language",
22+
c: "Hyperloop Machine Language",
23+
d: "Helicopters Terminals Motorboats Lamborginis",
24+
correct: "a",
25+
},
26+
{
27+
question: "What year was JavaScript launched?",
28+
a: "1996",
29+
b: "1995",
30+
c: "1994",
31+
d: "none of the above",
32+
correct: "b",
33+
},
34+
];
35+
36+
const quiz = document.getElementById("quiz");
37+
const answerElements = document.querySelectorAll(".answer");
38+
const questionElement = document.getElementById("question");
39+
const a_text = document.getElementById("a_text");
40+
const b_text = document.getElementById("b_text");
41+
const c_text = document.getElementById("c_text");
42+
const d_text = document.getElementById("d_text");
43+
const submitButton = document.getElementById("submit");
44+
45+
let currentQuiz = 0;
46+
let score = 0;
47+
48+
const deselectAnswers = () => {
49+
answerElements.forEach((answer) => (answer.checked = false));
50+
};
51+
52+
const getSelected = () => {
53+
let answer;
54+
answerElements.forEach((answerElement) => {
55+
if (answerElement.checked) answer = answerElement.id;
56+
});
57+
return answer;
58+
};
59+
60+
const loadQuiz = () => {
61+
deselectAnswers();
62+
const currentQuizData = quizData[currentQuiz];
63+
questionElement.innerText = currentQuizData.question;
64+
a_text.innerText = currentQuizData.a;
65+
b_text.innerText = currentQuizData.b;
66+
c_text.innerText = currentQuizData.c;
67+
d_text.innerText = currentQuizData.d;
68+
};
69+
70+
loadQuiz();
71+
72+
submitButton.addEventListener("click", () => {
73+
const answer = getSelected();
74+
if (answer) {
75+
if (answer === quizData[currentQuiz].correct) score++;
76+
currentQuiz++;
77+
if (currentQuiz < quizData.length) loadQuiz();
78+
else {
79+
quiz.innerHTML = `
80+
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
81+
<button onclick="location.reload()">Reload</button>
82+
`;
83+
}
84+
}
85+
});

Diff for: ‎46-quiz app/style.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #b8c6db;
9+
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
10+
font-family: "Poppins", sans-serif;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
}
18+
19+
.quiz-container {
20+
background-color: #fff;
21+
border-radius: 10px;
22+
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
23+
width: 600px;
24+
max-width: 95vw;
25+
overflow: hidden;
26+
}
27+
28+
.quiz-header {
29+
padding: 4rem;
30+
}
31+
32+
h2 {
33+
padding: 1rem;
34+
text-align: center;
35+
margin: 0;
36+
}
37+
38+
ul {
39+
list-style-type: none;
40+
padding: 0;
41+
}
42+
43+
ul li {
44+
font-size: 1.2rem;
45+
margin: 1rem 0;
46+
}
47+
48+
ul li label {
49+
cursor: pointer;
50+
}
51+
52+
button {
53+
background-color: #8e44ad;
54+
color: #fff;
55+
border: none;
56+
display: block;
57+
width: 100%;
58+
cursor: pointer;
59+
font-size: 1.1rem;
60+
font-family: inherit;
61+
padding: 1.3rem;
62+
}
63+
64+
button:hover {
65+
background-color: #732d91;
66+
}
67+
68+
button:focus {
69+
outline: none;
70+
background-color: #5e3370;
71+
}

0 commit comments

Comments
 (0)