Skip to content

Commit 877b64e

Browse files
guneyuralguneyural
authored
quiz app
1 parent f160cec commit 877b64e

File tree

3 files changed

+175
-0
lines changed

3 files changed

+175
-0
lines changed

‎quizApp/app.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
const quizes = [
2+
{
3+
index: 0,
4+
content: "What is 5 times 8 ?",
5+
answers: {a:80, b:45, c:40, d:13},
6+
correct: 'c'
7+
},
8+
{
9+
index: 1,
10+
content: "What is 10 plus 5 ?",
11+
answers: {a: 50,b: 2,c: 5,d: 15},
12+
correct: 'd'
13+
},
14+
{
15+
index: 2,
16+
content: "What is the name of 3.14 ?",
17+
answers: {a: "Archimedes' constant π",b: "Euler's number e",c: "The imaginary unit i",d: "The golden ratio φ"},
18+
correct: 'a'
19+
}
20+
];
21+
22+
let idx = 0;
23+
let point = 0;
24+
25+
const resultModal = document.querySelector('.result-modal');
26+
const question = document.querySelector('#question');
27+
const options = document.querySelectorAll("input[type='radio']");
28+
const allLabels = document.querySelectorAll("label");
29+
const submit = document.querySelector("form input[type='submit']");
30+
31+
const answers = [...options];
32+
const labels = [...allLabels];
33+
34+
//get question from array of objects
35+
let currentQuestion = quizes[idx];
36+
//get the current question in html document
37+
let currentHtmlQuestion = answers[idx];
38+
39+
const getQuestions = () => {
40+
question.innerText = currentQuestion.content;
41+
labels[0].innerText = currentQuestion.answers.a;
42+
labels[1].innerText = currentQuestion.answers.b;
43+
labels[2].innerText = currentQuestion.answers.c;
44+
labels[3].innerText = currentQuestion.answers.d;
45+
}
46+
47+
const removeChecked = () => {
48+
answers.forEach((opt) => {
49+
opt.checked = false;
50+
});
51+
}
52+
53+
getQuestions();
54+
55+
submit.addEventListener("click", (e) => {
56+
e.preventDefault();
57+
idx ++;
58+
59+
if(document.querySelector(`input[type='radio'][value='${currentQuestion.correct}']`).checked) {
60+
point ++;
61+
removeChecked();
62+
}
63+
if(idx > 2) {
64+
getQuestions();
65+
submit.value = "Finish Quiz";
66+
removeChecked();
67+
68+
document.querySelector("#point").innerText = point;
69+
document.querySelector("#quizLength").innerText = quizes.length;
70+
resultModal.style.display = "block";
71+
} else {
72+
currentQuestion = quizes[idx];
73+
currentHtmlQuestion = answers[idx];
74+
75+
getQuestions();
76+
77+
if(document.querySelector(`input[type='radio'][value='${currentQuestion.correct}']`).checked) {
78+
point ++;
79+
}
80+
81+
removeChecked();
82+
}
83+
console.log(point);
84+
});

‎quizApp/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<title>Document</title>
10+
</head>
11+
<body class="bg-light">
12+
<div class="result-modal">
13+
<div class="result-container">
14+
<h1>End Of The Quiz</h1>
15+
<p>You have <span id="point">3</span> correct answer out of <span id="quizLength">3</span></p>
16+
</div>
17+
</div>
18+
19+
<div class="container">
20+
<main class="h-100">
21+
<div class="quiz-card">
22+
<p class="lead" id="question"></p>
23+
<form method="GET" action="/" class="w-100">
24+
<input type="radio" id="answerA" name="answer" value="a">
25+
<label for="answerA" id="a"></label><br>
26+
<input type="radio" id="answerb" name="answer" value="b">
27+
<label for="answerB" id="b"></label><br>
28+
<input type="radio" id="answerC" name="answer" value="c">
29+
<label for="answerC" id="c"></label><br>
30+
<input type="radio" id="answerD" name="answer" value="d">
31+
<label for="answerD" id="d"></label><br>
32+
<div class="mb-5"></div>
33+
<input type="submit" value="Next Question" class="btn btn-outline-primary" />
34+
</form>
35+
</div>
36+
</main>
37+
</div>
38+
<script src="app.js"></script>
39+
</body>
40+
</html>

‎quizApp/style.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body {margin: 0;padding:0;font-family: 'Montserrat', Arial, Helvetica, sans-serif;}
2+
main {display: flex; justify-content: center;}
3+
4+
.quiz-card {
5+
position: relative;
6+
margin-top: 180px;
7+
background: white;
8+
border-radius: 5px;
9+
box-shadow: 1px 1px 8px #555454;
10+
padding: 70px;
11+
width: 45%;
12+
}
13+
14+
input[type="submit"] {
15+
position: absolute;
16+
width: 100%;
17+
left:0;
18+
bottom: 0;
19+
padding: 20px;
20+
}
21+
22+
#question {
23+
font-weight: bold;
24+
font-size: 1.5rem;
25+
letter-spacing: 1px;
26+
text-align: center;
27+
}
28+
29+
.result-modal {
30+
display: none;
31+
position: fixed;
32+
z-index: 1;
33+
top: 0;
34+
left: 0;
35+
background: rgba(0, 0, 0, 0.5);
36+
width: 100%;
37+
height: 100%;
38+
}
39+
40+
.result-container {
41+
background: white;
42+
font-weight: bold;
43+
text-align: center;
44+
width: 40%;
45+
height: 20%;
46+
margin: auto;
47+
margin-top: 200px;
48+
border-radius: 5px;
49+
box-shadow: 1px 1px 8px #555454;
50+
padding: 70px;
51+
}

0 commit comments

Comments
 (0)