<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Quiz</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; padding: 20px; }
.quiz-container { background: white; width: 90%; max-width: 400px; margin: auto; padding: 20px; border-radius: 10px; box-shadow: 3px 3px 10px gray; text-align: left; }
.question { font-weight: bold; margin: 10px 0; }
.options { margin-left: 15px; }
.options label {
display: block;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px 0;
cursor: pointer;
background: #f9f9f9;
}
.options input { display: none; } /* Hide default radio button */
.options label:hover { background: #e0e0e0; }
.options input:checked + label { background: #28a745; color: white; border-color: #28a745; }
button { background-color: #007bff; color: white; padding: 10px; font-size: 16px; width: 100%; border: none; cursor: pointer; margin-top: 10px; border-radius: 5px; }
#result { font-size: 20px; font-weight: bold; margin-top: 10px; text-align: center; }
#answers { margin-top: 20px; padding: 10px; background: #fff3cd; border-radius: 10px; display: none; }
.correct { color: green; font-weight: bold; }
.wrong { color: red; font-weight: bold; }
</style>
</head>
<body>
<div class="quiz-container">
<h2>Simple Quiz</h2>
<div id="quiz"></div>
<button onclick="submitQuiz()">Submit</button>
<div id="result"></div>
<div id="answers"></div>
<button id="restart" style="display:none;" onclick="restartQuiz()">Restart</button>
</div>
<script>
const questions = [];
function loadQuiz() {
let quizHTML = "";
questions.forEach((item, index) => {
quizHTML += `<div class="question">${index + 1}. ${item.q}</div>`;
quizHTML += `<div class="options">`;
item.a.forEach((option, i) => {
quizHTML += `
<input type="radio" id="q${index}-option${i}" name="q${index}" value="${i}">
<label for="q${index}-option${i}"><b>${String.fromCharCode(65 + i)}.</b> ${option}</label>
`;
});
quizHTML += `</div>`;
});
document.getElementById("quiz").innerHTML = quizHTML;
}
function submitQuiz() {
let score = 0;
let answersHTML = "<h3>Results:</h3>";
questions.forEach((item, index) => {
let selected = document.querySelector(`input[name="q${index}"]:checked`);
let correctAnswer = `<span class="correct">✅ ${String.fromCharCode(65 + item.correct)}. ${item.a[item.correct]}</span>`;
let wrongAnswer = `<span class="wrong">❌ Your Answer: ${selected ? String.fromCharCode(65 + selected.value) + ". " + item.a[selected.value] : "Not Answered"}</span>`;
answersHTML += `<p><b>Q${index + 1}:</b> ${item.q}<br>`;
if (selected && parseInt(selected.value) === item.correct) {
score++;
answersHTML += correctAnswer;
} else {
answersHTML += wrongAnswer + "<br>" + correctAnswer;
}
answersHTML += "</p>";
});
document.getElementById("result").innerHTML = `Score: ${score} / ${questions.length}`;
document.getElementById("answers").innerHTML = answersHTML;
document.getElementById("answers").style.display = "block";
document.getElementById("restart").style.display = "block";
}
function restartQuiz() {
location.reload();
}
// Add your questions below
const quizQuestions = [
{ q: "What is 2 + 2?", a: ["3", "4", "5", "6"], correct: 1 },
{ q: "What is 5 - 3?", a: ["1", "2", "3", "4"], correct: 1 },
{ q: "Which shape has 3 sides?", a: ["Square", "Triangle", "Circle", "Rectangle"], correct: 1 },
{ q: "What color is the sun?", a: ["Blue", "Green", "Yellow", "Red"], correct: 2 },
{ q: "How many legs does a cat have?", a: ["2", "4", "6", "8"], correct: 1 },
{ q: "Which animal barks?", a: ["Cat", "Dog", "Cow", "Sheep"], correct: 1 },
{ q: "How many months are in a year?", a: ["10", "11", "12", "13"], correct: 2 },
{ q: "How many days are in a week?", a: ["5", "6", "7", "8"], correct: 2 },
{ q: "Which fruit is red and round?", a: ["Banana", "Apple", "Grapes", "Pineapple"], correct: 1 },
{ q: "What is the opposite of 'hot'?", a: ["Cold", "Warm", "Dry", "Wet"], correct: 0 },
{ q: "What is the color of the sky?", a: ["Red", "Blue", "Green", "Black"], correct: 1 },
{ q: "How many eyes do humans have?", a: ["1", "2", "3", "4"], correct: 1 },
{ q: "Which planet is closest to the sun?", a: ["Earth", "Venus", "Mars", "Mercury"], correct: 3 },
{ q: "How many wheels does a bicycle have?", a: ["1", "2", "3", "4"], correct: 1 },
{ q: "Which animal says 'meow'?", a: ["Dog", "Cow", "Cat", "Horse"], correct: 2 },
{ q: "Which is heavier: a kilogram of feathers or a kilogram of bricks?", a: ["Feathers", "Bricks", "Both are the same", "None"], correct: 2 },
{ q: "How many arms does an octopus have?", a: ["4", "6", "8", "10"], correct: 2 },
{ q: "Which direction does the sun rise from?", a: ["North", "East", "South", "West"], correct: 1 },
{ q: "What do bees make?", a: ["Milk", "Honey", "Butter", "Juice"], correct: 1 },
{ q: "What color is grass?", a: ["Green", "Blue", "Red", "Yellow"], correct: 0 }
];
questions.push(...quizQuestions);
loadQuiz();
</script>
</body>
</html>
