Skip to content

Commit e79365c

Browse files
adyasha9adyasha9
committed
added quiz app successfully
1 parent d333e1b commit e79365c

3 files changed

Lines changed: 346 additions & 0 deletions

File tree

‎quiz-app/index.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
font-family: Gotham Rounded;
6+
}
7+
8+
:root {
9+
--hue-neutral: 200;
10+
--hue-wrong: 0;
11+
--hue-correct: 145;
12+
}
13+
14+
body {
15+
--hue: var(--hue-neutral);
16+
padding: 0;
17+
margin: 0;
18+
display: flex;
19+
width: 100vw;
20+
height: 100vh;
21+
justify-content: center;
22+
align-items: center;
23+
background-color: hsl(var(--hue), 100%, 20%);
24+
}
25+
26+
body.correct {
27+
--hue: var(--hue-correct);
28+
}
29+
30+
body.wrong {
31+
--hue: var(--hue-wrong);
32+
}
33+
34+
.container {
35+
width: 800px;
36+
max-width: 80%;
37+
background-color: white;
38+
border-radius: 5px;
39+
padding: 10px;
40+
box-shadow: 0 0 10px 2px;
41+
}
42+
43+
.btn-grid {
44+
display: grid;
45+
grid-template-columns: repeat(2, auto);
46+
gap: 10px;
47+
margin: 20px 0;
48+
}
49+
50+
.btn {
51+
--hue: var(--hue-neutral);
52+
border: 1px solid hsl(var(--hue), 100%, 30%);
53+
background-color: hsl(var(--hue), 100%, 50%);
54+
border-radius: 5px;
55+
padding: 5px 10px;
56+
color: white;
57+
outline: none;
58+
}
59+
60+
.btn:hover {
61+
border-color: black;
62+
}
63+
64+
.btn.correct {
65+
--hue: var(--hue-correct);
66+
color: black;
67+
}
68+
69+
.btn.wrong {
70+
--hue: var(--hue-wrong);
71+
}
72+
73+
.start-btn,
74+
.next-btn {
75+
font-size: 1.5rem;
76+
font-weight: bold;
77+
padding: 10px 20px;
78+
}
79+
80+
.controls {
81+
display: flex;
82+
justify-content: center;
83+
align-items: center;
84+
}
85+
86+
.hide {
87+
display: none;
88+
}

‎quiz-app/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
7+
<meta charset="UTF-8">
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
11+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
12+
13+
<link href="index.css" rel="stylesheet">
14+
15+
<script defer src="index.js"></script>
16+
17+
<title>Quiz App</title>
18+
19+
</head>
20+
21+
<body>
22+
23+
<div class="container">
24+
25+
<div id="question-container" class="hide">
26+
27+
<div id="question">Question</div>
28+
29+
<div id="answer-buttons" class="btn-grid">
30+
31+
<button class="btn">Answer 1</button>
32+
33+
<button class="btn">Answer 2</button>
34+
35+
<button class="btn">Answer 3</button>
36+
37+
<button class="btn">Answer 4</button>
38+
39+
</div>
40+
41+
</div>
42+
43+
<div class="controls">
44+
45+
<button id="start-btn" class="start-btn btn">Start</button>
46+
47+
<button id="next-btn" class="next-btn btn hide">Next</button>
48+
49+
</div>
50+
51+
</div>
52+
53+
</body>
54+
55+
</html>

‎quiz-app/index.js‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
const startButton = document.getElementById('start-btn')
2+
3+
const nextButton = document.getElementById('next-btn')
4+
5+
const questionContainerElement = document.getElementById('question-container')
6+
7+
const questionElement = document.getElementById('question')
8+
9+
const answerButtonsElement = document.getElementById('answer-buttons')
10+
11+
let shuffledQuestions, currentQuestionIndex
12+
13+
startButton.addEventListener('click', startGame)
14+
15+
nextButton.addEventListener('click', () => {
16+
17+
currentQuestionIndex++
18+
19+
setNextQuestion()
20+
21+
})
22+
23+
function startGame() {
24+
25+
startButton.classList.add('hide')
26+
27+
shuffledQuestions = questions.sort(() => Math.random() - .5)
28+
29+
currentQuestionIndex = 0
30+
31+
questionContainerElement.classList.remove('hide')
32+
33+
setNextQuestion()
34+
35+
}
36+
37+
function setNextQuestion() {
38+
39+
resetState()
40+
41+
showQuestion(shuffledQuestions[currentQuestionIndex])
42+
43+
}
44+
45+
function showQuestion(question) {
46+
47+
questionElement.innerText = question.question
48+
49+
question.answers.forEach(answer => {
50+
51+
const button = document.createElement('button')
52+
53+
button.innerText = answer.text
54+
55+
button.classList.add('btn')
56+
57+
if (answer.correct) {
58+
59+
button.dataset.correct = answer.correct
60+
61+
}
62+
63+
button.addEventListener('click', selectAnswer)
64+
65+
answerButtonsElement.appendChild(button)
66+
67+
})
68+
69+
}
70+
71+
function resetState() {
72+
73+
clearStatusClass(document.body)
74+
75+
nextButton.classList.add('hide')
76+
77+
while (answerButtonsElement.firstChild) {
78+
79+
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
80+
81+
}
82+
83+
}
84+
85+
function selectAnswer(e) {
86+
87+
const selectedButton = e.target
88+
89+
const correct = selectedButton.dataset.correct
90+
91+
setStatusClass(document.body, correct)
92+
93+
Array.from(answerButtonsElement.children).forEach(button => {
94+
95+
setStatusClass(button, button.dataset.correct)
96+
97+
})
98+
99+
if (shuffledQuestions.length > currentQuestionIndex + 1) {
100+
101+
nextButton.classList.remove('hide')
102+
103+
} else {
104+
105+
startButton.innerText = 'Restart'
106+
107+
startButton.classList.remove('hide')
108+
109+
}
110+
111+
}
112+
113+
function setStatusClass(element, correct) {
114+
115+
clearStatusClass(element)
116+
117+
if (correct) {
118+
119+
element.classList.add('correct')
120+
121+
} else {
122+
123+
element.classList.add('wrong')
124+
125+
}
126+
127+
}
128+
129+
function clearStatusClass(element) {
130+
131+
element.classList.remove('correct')
132+
133+
element.classList.remove('wrong')
134+
135+
}
136+
137+
const questions = [
138+
139+
{
140+
141+
question: 'What is 2 + 2?',
142+
143+
answers: [
144+
145+
{ text: '4', correct: true },
146+
147+
{ text: '22', correct: false }
148+
149+
]
150+
151+
},
152+
153+
{
154+
155+
question: 'Who is the best YouTuber?',
156+
157+
answers: [
158+
159+
{ text: 'Web Dev Simplified', correct: true },
160+
161+
{ text: 'Traversy Media', correct: true },
162+
163+
{ text: 'Dev Ed', correct: true },
164+
165+
{ text: 'Fun Fun Function', correct: true }
166+
167+
]
168+
169+
},
170+
171+
{
172+
173+
question: 'Is web development fun?',
174+
175+
answers: [
176+
177+
{ text: 'Kinda', correct: false },
178+
179+
{ text: 'YES!!!', correct: true },
180+
181+
{ text: 'Um no', correct: false },
182+
183+
{ text: 'IDK', correct: false }
184+
185+
]
186+
187+
},
188+
189+
{
190+
191+
question: 'What is 4 * 2?',
192+
193+
answers: [
194+
195+
{ text: '6', correct: false },
196+
197+
{ text: '8', correct: true }
198+
199+
]
200+
201+
}
202+
203+
]

0 commit comments

Comments
 (0)