Skip to content

Commit dda4df5

Browse files
tajulafreentajulafreen
authored
Merge pull request #43 from tajulafreen/Quiz_App
50Projects-HTML-CSS-JavaScript : Quiz app
2 parents 45f7f77 + 17e6d58 commit dda4df5

File tree

4 files changed

+237
-0
lines changed

4 files changed

+237
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -452,6 +452,17 @@ In order to run this project you need:
452452
</details>
453453
</li>
454454

455+
<li>
456+
<details>
457+
<summary>Quiz App</summary>
458+
<p>A simple quiz app built using HTML, CSS, and JavaScript. The app presents multiple-choice questions, and the user can select answers to test their knowledge. At the end of the quiz, the user's score is displayed along with an option to restart the quiz.</p>
459+
<ul>
460+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/QuizApp/">Live Demo</a></li>
461+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/Quizapp">Source</a></li>
462+
</ul>
463+
</details>
464+
</li>
465+
455466
</ol>
456467

457468
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/QuizApp/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
<title>Quiz App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="quiz-container">
11+
<h1>Quiz App</h1>
12+
<div id="quiz-box">
13+
<div id="question-container">
14+
<p id="question">Loading question...</p>
15+
</div>
16+
<div id="answer-container">
17+
<button class="answer-btn">Answer 1</button>
18+
<button class="answer-btn">Answer 2</button>
19+
<button class="answer-btn">Answer 3</button>
20+
<button class="answer-btn">Answer 4</button>
21+
</div>
22+
<div id="next-button-container">
23+
<button id="next-btn" disabled>Next</button>
24+
</div>
25+
</div>
26+
<div id="result-container" class="hidden">
27+
<h2>Quiz Completed!</h2>
28+
<p id="score"></p>
29+
<button id="restart-btn">Restart</button>
30+
</div>
31+
</div>
32+
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎Source-Code/QuizApp/script.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
const questions = [
2+
{
3+
question: 'What is the capital of France?',
4+
answers: ['Berlin', 'Madrid', 'Paris', 'Rome'],
5+
correct: 2,
6+
},
7+
{
8+
question: 'Which planet is known as the Red Planet?',
9+
answers: ['Earth', 'Mars', 'Jupiter', 'Saturn'],
10+
correct: 1,
11+
},
12+
{
13+
question: 'What is the largest ocean on Earth?',
14+
answers: ['Atlantic', 'Indian', 'Arctic', 'Pacific'],
15+
correct: 3,
16+
},
17+
{
18+
question: "Who wrote 'Romeo and Juliet'?",
19+
answers: ['Shakespeare', 'Dickens', 'Hemingway', 'Austen'],
20+
correct: 0,
21+
},
22+
];
23+
24+
let currentQuestionIndex = 0;
25+
let score = 0;
26+
27+
const questionElement = document.getElementById('question');
28+
const answerButtons = document.querySelectorAll('.answer-btn');
29+
const nextButton = document.getElementById('next-btn');
30+
const resultContainer = document.getElementById('result-container');
31+
const restartButton = document.getElementById('restart-btn');
32+
const scoreElement = document.getElementById('score');
33+
34+
// Load question and answers
35+
const loadQuestion = () => {
36+
const currentQuestion = questions[currentQuestionIndex];
37+
questionElement.textContent = currentQuestion.question;
38+
39+
answerButtons.forEach((button, index) => {
40+
button.textContent = currentQuestion.answers[index];
41+
button.disabled = false;
42+
button.style.backgroundColor = '#4CAF50'; // Reset button color
43+
});
44+
45+
nextButton.disabled = true; // Disable next button until an answer is selected
46+
};
47+
48+
// Handle answer selection
49+
const handleAnswerClick = (index) => {
50+
const currentQuestion = questions[currentQuestionIndex];
51+
52+
if (index === currentQuestion.correct) {
53+
score += 1;
54+
}
55+
56+
// Disable all buttons after an answer is selected
57+
answerButtons.forEach((button, i) => {
58+
button.disabled = true;
59+
if (i === currentQuestion.correct) {
60+
button.style.backgroundColor = '#4CAF50'; // Correct answer
61+
} else {
62+
button.style.backgroundColor = '#f44336'; // Incorrect answers
63+
}
64+
});
65+
66+
nextButton.disabled = false; // Enable next button
67+
};
68+
69+
// Show quiz result
70+
const showResult = () => {
71+
document.getElementById('quiz-box').classList.add('hidden');
72+
resultContainer.classList.remove('hidden');
73+
scoreElement.textContent = `You scored ${score} out of ${questions.length}`;
74+
};
75+
76+
// Move to next question
77+
const nextQuestion = () => {
78+
currentQuestionIndex += 1;
79+
if (currentQuestionIndex < questions.length) {
80+
loadQuestion();
81+
} else {
82+
showResult();
83+
}
84+
};
85+
86+
// Restart the quiz
87+
const restartQuiz = () => {
88+
currentQuestionIndex = 0;
89+
score = 0;
90+
resultContainer.classList.add('hidden');
91+
document.getElementById('quiz-box').classList.remove('hidden');
92+
loadQuestion();
93+
};
94+
95+
// Add event listeners to answer buttons
96+
answerButtons.forEach((button, index) => {
97+
button.addEventListener('click', () => handleAnswerClick(index));
98+
});
99+
100+
// Add event listener to next button
101+
nextButton.addEventListener('click', nextQuestion);
102+
103+
// Add event listener to restart button
104+
restartButton.addEventListener('click', restartQuiz);
105+
106+
// Start the quiz
107+
loadQuestion();

‎Source-Code/QuizApp/style.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* styles.css */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f4f4f9;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.quiz-container {
13+
background: #fff;
14+
border-radius: 8px;
15+
padding: 20px;
16+
width: 300px;
17+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
18+
}
19+
20+
h1 {
21+
text-align: center;
22+
color: #333;
23+
}
24+
25+
#question-container {
26+
margin-bottom: 20px;
27+
}
28+
29+
#answer-container {
30+
margin-bottom: 20px;
31+
}
32+
33+
.answer-btn {
34+
background-color: #4caf50;
35+
color: white;
36+
padding: 10px;
37+
width: 100%;
38+
margin: 5px 0;
39+
border: none;
40+
border-radius: 5px;
41+
cursor: pointer;
42+
transition: background-color 0.3s;
43+
}
44+
45+
.answer-btn:hover {
46+
background-color: #45a049;
47+
}
48+
49+
#next-btn {
50+
background-color: #008cba;
51+
color: white;
52+
padding: 10px;
53+
width: 100%;
54+
border: none;
55+
border-radius: 5px;
56+
cursor: pointer;
57+
font-size: 16px;
58+
}
59+
60+
#next-btn:disabled {
61+
background-color: #ccc;
62+
}
63+
64+
.hidden {
65+
display: none;
66+
}
67+
68+
#result-container {
69+
text-align: center;
70+
}
71+
72+
#restart-btn {
73+
background-color: #f44336;
74+
color: white;
75+
padding: 10px;
76+
border: none;
77+
border-radius: 5px;
78+
cursor: pointer;
79+
width: 100%;
80+
}
81+
82+
#restart-btn:hover {
83+
background-color: #d32f2f;
84+
}

0 commit comments

Comments
 (0)