Mathematics Quiz
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
.quiz-container {
max-width: 800px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #ffe6f1; /* Pink background */
}
.question {
margin-bottom: 15px;
}
.answers button {
display: block;
margin: 5px 0;
padding: 10px;
background-color: #d7ebf9; /* Light blue background */
border: 2px solid #cccccc;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
color: #000; /* Ensures text is visible on light blue */
width: 100%; /* Adjusts width for smaller screens */
}
.answers button:hover {
background-color: #b5d9f4; /* Slightly darker blue on hover */
}
.correct {
background-color: #d4edda; /* Green for correct answers */
border-color: #28a745;
color: #155724;
}
.incorrect {
background-color: #f8d7da; /* Red for incorrect answers */
border-color: #dc3545;
color: #721c24;
}
.result {
margin-top: 20px;
font-weight: bold;
color: green;
}
/* Responsive styles for mobile */
@media (max-width: 768px) {
.answers button {
font-size: 16px;
padding: 12px;
}
}
Mathematics Quiz
const quizData = [
{ question: "What is 5 + 3?", answers: ["6", "7", "8", "9"], correct: "8" },
{ question: "What is 12 ÷ 4?", answers: ["2", "3", "4", "5"], correct: "3" },
{ question: "What is 7 × 6?", answers: ["42", "36", "48", "40"], correct: "42" },
{ question: "What is the square root of 49?", answers: ["5", "6", "7", "8"], correct: "7" },
{ question: "What is 15% of 200?", answers: ["20", "25", "30", "35"], correct: "30" },
];
// Dynamically add 37 more questions
for (let i = 1; i {
const questionDiv = document.createElement('div');
questionDiv.classList.add('question');
questionDiv.innerHTML = `
${index + 1}. ${data.question}
`;
const answersDiv = document.createElement('div');
answersDiv.classList.add('answers');
data.answers.forEach(answer => {
const button = document.createElement('button');
button.textContent = answer;
button.onclick = () => {
if (answer === data.correct) {
score++;
button.classList.add('correct');
button.innerHTML += " ✓"; // Green tick
} else {
button.classList.add('incorrect');
button.innerHTML += " ✗"; // Red cross
}
button.parentElement.querySelectorAll('button').forEach(b => b.disabled = true);
};
answersDiv.appendChild(button);
});
questionDiv.appendChild(answersDiv);
quiz.appendChild(questionDiv);
});
// Handle submit
submitButton.onclick = () => {
const percentage = ((score / quizData.length) * 100).toFixed(2);
result.textContent = `Your score: ${score}/${quizData.length} (${percentage}%)`;
submitButton.disabled = true;
};
