Skip to content

Commit d9cb1e2

Browse files
tajulafreentajulafreen
committedDec 21, 2024
Add the project
1 parent 45f7f77 commit d9cb1e2

File tree

3 files changed

+227
-0
lines changed

3 files changed

+227
-0
lines changed
 

‎Source-Code/QuizApp/index.html

+35
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

+107
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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
}
85+

0 commit comments

Comments
 (0)