Skip to content

Commit 2807604

Browse files
kaal-coderkaal-coder
authored
Merge pull request #53 from aishwarya1735/add-quiz
adding quiz
2 parents f38ffde + 892684c commit 2807604

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎Fronted Projects/quiz/gk.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
const quizDB = [
2+
{
3+
question: "1.Which one of the following river flows between Vindhyan and Satpura ranges?",
4+
a: "Narmada",
5+
b: "mahanadi",
6+
c: "son",
7+
d: "netravati",
8+
ans: "ans1",
9+
},
10+
{
11+
question: "2.The Central Rice Research Station is situated in?",
12+
a: "chennai",
13+
b: "cuttack",
14+
c: "banglore",
15+
d: "quilon",
16+
ans: "ans2",
17+
},
18+
{
19+
question: "3.Who among the following wrote Sanskrit grammar?",
20+
a: "kalidasa",
21+
b: "charak",
22+
c: "panini",
23+
d: "aryabhatt",
24+
ans: "ans3",
25+
},
26+
{
27+
question: "4. Which among the following headstreams meets the Ganges in last?",
28+
a: "Alaknanda",
29+
b: "Pindar",
30+
c: "Mandakini",
31+
d: "Bhagirathi",
32+
ans: "ans4",
33+
},
34+
{
35+
question: "5. Which among the following headstreams meets the Ganges in last?",
36+
a: "Yoga sutra",
37+
b: "panchatantra",
38+
c: "brahmasutra",
39+
d: "ayurveda",
40+
ans: "ans1",
41+
},
42+
];
43+
44+
const question = document.querySelector(".question");
45+
const option1 = document.querySelector("#option1");
46+
const option2 = document.querySelector("#option2");
47+
const option3 = document.querySelector("#option3");
48+
const option4 = document.querySelector("#option4");
49+
const submit = document.querySelector("#submit");
50+
const answers = document.querySelectorAll(".answer");
51+
const showScore = document.querySelector("#showScore");
52+
let questionCount = 0;
53+
let score = 0;
54+
55+
const loadQuestion = () => {
56+
const questionList = quizDB[questionCount];
57+
question.innerText = questionList.question;
58+
option1.innerText = questionList.a;
59+
option2.innerText = questionList.b;
60+
option3.innerText = questionList.c;
61+
option4.innerText = questionList.d;
62+
};
63+
64+
loadQuestion();
65+
66+
const getcheckedAnswer = () => {
67+
let answer;
68+
answers.forEach((current) => {
69+
if (current.checked) {
70+
answer = current.id;
71+
}
72+
});
73+
return answer;
74+
};
75+
76+
const deselectAll = () => {
77+
answers.forEach((current) => (current.checked = false));
78+
};
79+
80+
submit.addEventListener("click", () => {
81+
const checkedAnswer = getcheckedAnswer();
82+
console.log(checkedAnswer);
83+
if (checkedAnswer == quizDB[questionCount].ans) {
84+
score++;
85+
}
86+
questionCount++;
87+
deselectAll();
88+
if (questionCount < quizDB.length) {
89+
loadQuestion();
90+
} else {
91+
showScore.innerHTML = `
92+
<h3> You Scored ${score}/${quizDB.length} </h3>
93+
<button class="btn" onclick="location.reload()">Play Again</button>
94+
`;
95+
showScore.classList.remove("scoreArea");
96+
}
97+
});

‎Fronted Projects/quiz/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Quiz App</title>
9+
</head>
10+
<body>
11+
<div class="main-div">
12+
<div class="inner-div">
13+
<h2 class="question">Question</h2>
14+
<ul>
15+
<li>
16+
<input type="radio" name="answer" id="ans1" class="answer" />
17+
<label for="ans1" id="option1">Answer Option</label>
18+
</li>
19+
<li>
20+
<input type="radio" name="answer" id="ans2" class="answer" />
21+
<label for="ans2" id="option2">Answer Option</label>
22+
</li>
23+
<li>
24+
<input type="radio" name="answer" id="ans3" class="answer" />
25+
<label for="ans3" id="option3">Answer Option</label>
26+
</li>
27+
<li>
28+
<input type="radio" name="answer" id="ans4" class="answer" />
29+
<label for="ans4" id="option4">Answer Option</label>
30+
</li>
31+
</ul>
32+
<button id="submit">Submit</button>
33+
<div id="showScore" class="scoreArea"></div>
34+
</div>
35+
</div>
36+
<script src="gk.js"></script>
37+
</body>
38+
</html>

‎Fronted Projects/quiz/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Exo 2", sans-serif;
7+
font-weight: 300;
8+
}
9+
10+
html {
11+
font-size: 62.5%;
12+
}
13+
14+
.main-div {
15+
width: 100vw;
16+
height: 100vh;
17+
display: grid;
18+
place-items: center;
19+
background-color: rgb(174, 255, 255);
20+
}
21+
22+
.inner-div {
23+
width: 40vw;
24+
background-color: rgb(216, 169, 238);
25+
padding: 3rem 8rem;
26+
border-radius: 1rem;
27+
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
28+
-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
29+
-moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
30+
}
31+
32+
.question {
33+
font-size: 3.5rem;
34+
font-weight: 400;
35+
margin-bottom: 4rem;
36+
}
37+
38+
.inner-div li {
39+
font-size: 2.5rem;
40+
margin-bottom: 1.5rem;
41+
list-style: none;
42+
}
43+
44+
input:hover {
45+
cursor: pointer;
46+
}
47+
48+
#submit,
49+
.btn {
50+
padding: 1rem 3rem;
51+
outline: none;
52+
font-size: 2rem;
53+
font-size: 400;
54+
display: block;
55+
margin: auto;
56+
border: none;
57+
border-radius: 1rem;
58+
text-transform: uppercase;
59+
color: white;
60+
background-color: rgb(122, 122, 255);
61+
margin-top: 4rem;
62+
cursor: pointer;
63+
}
64+
65+
#submit:hover {
66+
background-color: rgb(78, 78, 255);
67+
}
68+
69+
#showScore {
70+
background-color: rgb(240, 240, 240);
71+
margin-top: 3rem;
72+
padding: 3rem 4rem;
73+
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
74+
-webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
75+
-moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7);
76+
}
77+
78+
#showScore h3 {
79+
font-size: 3rem;
80+
text-align: center;
81+
}
82+
83+
.scoreArea {
84+
display: none;
85+
}

0 commit comments

Comments
 (0)