Skip to content

Commit f619ebf

Browse files
rayenghanmirayenghanmi
committed
quiz
1 parent 5b7452c commit f619ebf

File tree

3 files changed

+215
-0
lines changed

3 files changed

+215
-0
lines changed

‎quiz/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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="styles.css">
8+
</head>
9+
<body>
10+
<div class="quiz-container">
11+
<h1>Test Your Knowledge</h1>
12+
<form id="quiz-form">
13+
<div id="quiz-questions"></div>
14+
<button type="button" id="submit-btn" onclick="checkAnswers()">Submit Answers</button>
15+
</form>
16+
17+
<!-- Result section moved inside the container -->
18+
<div id="result" class="result">
19+
<h2 id="result-message"></h2>
20+
<p id="result-score"></p>
21+
<button onclick="location.reload()">Try Again</button>
22+
</div>
23+
</div>
24+
25+
<script src="quiz.js"></script>
26+
</body>
27+
</html>

‎quiz/quiz.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
const questions = [
2+
{
3+
question: "What is the capital of France?",
4+
answers: ["Paris", "London", "Berlin", "Madrid"]
5+
},
6+
{
7+
question: "What is 2 + 2?",
8+
answers: ["4", "3", "5", "6"]
9+
},
10+
{
11+
question: "What is the largest planet in our solar system?",
12+
answers: ["Jupiter", "Mars", "Earth", "Venus"]
13+
},
14+
{
15+
question: "What is the speed of light?",
16+
answers: ["299,792,458 m/s", "150,000,000 m/s", "300,000 km/s", "299,792 km/s"]
17+
},
18+
{
19+
question: "Who wrote 'Hamlet'?",
20+
answers: ["William Shakespeare", "Charles Dickens", "Leo Tolstoy", "Mark Twain"]
21+
},
22+
{
23+
question: "What is the chemical symbol for water?",
24+
answers: ["H2O", "O2", "CO2", "H2"]
25+
},
26+
{
27+
question: "What is the hardest natural substance on Earth?",
28+
answers: ["Diamond", "Gold", "Iron", "Silver"]
29+
},
30+
{
31+
question: "Which element has the chemical symbol 'O'?",
32+
answers: ["Oxygen", "Hydrogen", "Osmium", "Oganesson"]
33+
},
34+
{
35+
question: "Who painted the Mona Lisa?",
36+
answers: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"]
37+
},
38+
{
39+
question: "Which country is known as the Land of the Rising Sun?",
40+
answers: ["Japan", "China", "South Korea", "Thailand"]
41+
}
42+
];
43+
44+
let score = 0;
45+
46+
// Shuffle function to randomize answers
47+
function shuffle(array) {
48+
for (let i = array.length - 1; i > 0; i--) {
49+
const j = Math.floor(Math.random() * (i + 1));
50+
[array[i], array[j]] = [array[j], array[i]];
51+
}
52+
return array;
53+
}
54+
55+
// Load quiz questions
56+
function loadQuiz() {
57+
const quizQuestionsDiv = document.getElementById('quiz-questions');
58+
quizQuestionsDiv.innerHTML = ''; // Clear any previous content
59+
60+
questions.forEach((q, index) => {
61+
const shuffledAnswers = shuffle([...q.answers]); // Randomize answers
62+
63+
// Generate HTML for each question
64+
let questionBlock = `
65+
<div class="question">
66+
<h3>${q.question}</h3>`;
67+
68+
shuffledAnswers.forEach((answer) => {
69+
questionBlock += `
70+
<label>
71+
<input type="radio" name="question${index}" value="${answer}">
72+
${answer}
73+
</label>`;
74+
});
75+
76+
questionBlock += `</div>`;
77+
quizQuestionsDiv.innerHTML += questionBlock;
78+
});
79+
}
80+
81+
// Check answers and display results
82+
function checkAnswers() {
83+
const form = document.getElementById('quiz-form');
84+
const resultDiv = document.getElementById('result');
85+
const resultMessage = document.getElementById('result-message');
86+
const resultScore = document.getElementById('result-score');
87+
score = 0;
88+
89+
// Validate answers
90+
questions.forEach((q, index) => {
91+
const userAnswer = form[`question${index}`].value;
92+
if (userAnswer === q.answers[0]) { // Check if the selected answer is correct
93+
score += 10; // Each correct answer adds 10 points
94+
}
95+
});
96+
97+
// Hide the quiz form and display the result
98+
form.style.display = 'none';
99+
resultDiv.style.display = 'block'; // Show result div
100+
101+
// Set the result message and score
102+
if (score >= 70) {
103+
resultMessage.textContent = "Congratulations, you passed!";
104+
} else {
105+
resultMessage.textContent = "Better luck next time!";
106+
}
107+
108+
resultScore.textContent = `Your score is: ${score}/100`;
109+
}
110+
111+
// Load quiz on page load
112+
document.addEventListener('DOMContentLoaded', loadQuiz);

‎quiz/styles.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/* Global body styling */
2+
html, body {
3+
margin: 0;
4+
padding: 0;
5+
height: 100%;
6+
overflow: hidden; /* Prevent outer scrollbar */
7+
font-family: 'Arial', sans-serif;
8+
background-color: #f0f4f8;
9+
}
10+
11+
/* Quiz container with scrollable content */
12+
.quiz-container {
13+
background-color: #ffffff;
14+
border-radius: 10px;
15+
padding: 30px;
16+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
17+
width: 100%; /* Responsive width */
18+
max-width: 600px;
19+
margin: auto; /* Center horizontally */
20+
overflow-y: auto; /* Scrollable content */
21+
height: 100vh; /* Take full height of the viewport */
22+
box-sizing: border-box; /* Include padding and border in the element’s total width and height */
23+
}
24+
25+
/* Heading styling */
26+
h1 {
27+
color: #333;
28+
margin-top: 0;
29+
}
30+
31+
/* Ensure that questions area is scrollable if necessary */
32+
#quiz-questions {
33+
margin: 20px 0;
34+
}
35+
36+
/* Each question block styling */
37+
.question {
38+
margin-bottom: 20px;
39+
}
40+
41+
/* Styling for the labels */
42+
label {
43+
display: block;
44+
margin: 5px 0;
45+
font-size: 16px;
46+
}
47+
48+
/* Button styling */
49+
button {
50+
background-color: #4caf50;
51+
color: white;
52+
border: none;
53+
padding: 10px 20px;
54+
border-radius: 5px;
55+
cursor: pointer;
56+
}
57+
58+
/* Button hover effect */
59+
button:hover {
60+
background-color: #45a049;
61+
}
62+
63+
/* Result section */
64+
.result {
65+
display: none; /* Initially hidden */
66+
text-align: center;
67+
padding: 20px;
68+
}
69+
70+
#result h2 {
71+
font-size: 24px;
72+
}
73+
74+
#result p {
75+
font-size: 18px;
76+
}

0 commit comments

Comments
 (0)