-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame2.html
138 lines (119 loc) · 4.34 KB
/
game2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCQ Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: black; /* Set the background color to black */
color: white; /* Set the text color to white */
}
#quiz-container {
width: 50%;
margin: 0 auto;
}
.question {
margin-bottom: 20px;
background-color: #333; /* Set the background color for each question */
padding: 10px;
border-radius: 10px;
}
.options {
display: flex;
justify-content: center;
}
.option {
margin: 0 10px;
background-color: #555; /* Set the background color for each option */
color: white; /* Set the text color for each option */
padding: 8px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="quiz-container">
<h1>Multiple Choice Quiz</h1>
<div class="question" id="question1">
<p>1. What is the capital of France?</p>
<div class="options">
<button class="option" onclick="checkAnswer(1, 'Paris')">Paris</button>
<button class="option" onclick="checkAnswer(1, 'Berlin')">Berlin</button>
<button class="option" onclick="checkAnswer(1, 'London')">London</button>
</div>
</div>
<div class="question" id="question2">
<p>2. Which planet is known as the Red Planet?</p>
<div class="options">
<button class="option" onclick="checkAnswer(2, 'Mars')">Mars</button>
<button class="option" onclick="checkAnswer(2, 'Jupiter')">Jupiter</button>
<button class="option" onclick="checkAnswer(2, 'Venus')">Venus</button>
</div>
</div>
<div class="question" id="question3">
<p>3. What is the largest mammal on Earth?</p>
<div class="options">
<button class="option" onclick="checkAnswer(3, 'Elephant')">Elephant</button>
<button class="option" onclick="checkAnswer(3, 'Blue Whale')">Blue Whale</button>
<button class="option" onclick="checkAnswer(3, 'Giraffe')">Giraffe</button>
</div>
</div>
<div class="question" id="question4">
<p>4. Which programming language is known for building dynamic web pages?</p>
<div class="options">
<button class="option" onclick="checkAnswer(4, 'Java')">Java</button>
<button class="option" onclick="checkAnswer(4, 'Python')">Python</button>
<button class="option" onclick="checkAnswer(4, 'JavaScript')">JavaScript</button>
</div>
</div>
<div class="question" id="question5">
<p>5. What is the capital of Japan?</p>
<div class="options">
<button class="option" onclick="checkAnswer(5, 'Beijing')">Beijing</button>
<button class="option" onclick="checkAnswer(5, 'Seoul')">Seoul</button>
<button class="option" onclick="checkAnswer(5, 'Tokyo')">Tokyo</button>
</div>
</div>
<div id="result"></div>
</div>
<script>
let score = 0;
function checkAnswer(questionNumber, selectedOption) {
const correctAnswers = {
1: 'Paris',
2: 'Mars',
3: 'Blue Whale',
4: 'JavaScript',
5: 'Tokyo',
};
const questionId = 'question' + questionNumber;
const resultContainer = document.getElementById('result');
for (let i = 1; i <= 3; i++) {
const button = document.getElementById(`question${questionNumber}`).querySelector(`.options button:nth-child(${i})`);
button.disabled = true; // Disable buttons after selection
if (button.textContent === correctAnswers[questionNumber]) {
button.style.backgroundColor = 'green'; // Highlight the correct answer
} else {
button.style.backgroundColor = 'red'; // Highlight the incorrect answers
}
}
if (selectedOption === correctAnswers[questionNumber]) {
score++;
resultContainer.innerHTML = 'Right Answer!';
} else {
resultContainer.innerHTML = 'Sorry, Wrong Answer.';
}
}
</script>
</body>
</html>