Generate code for a basic interactive quiz using HTML, CSS, and vanilla JavaScript. The quiz should:
Here's a simple interactive quiz implemented using HTML, CSS, and vanilla JavaScript. The code includes a start button to begin the quiz, a reset button to restart it, and visual feedback for correct and incorrect answers. All the code is combined into a single HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.quiz-container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.question {
margin-bottom: 20px;
}
.options {
list-style-type: none;
padding: 0;
}
.options li {
margin: 10px 0;
}
.correct {
background-color: #c8e6c9;
}
.incorrect {
background-color: #ffccbc;
}
.hidden {
display: none;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.start-btn {
background-color: #4CAF50;
color: white;
}
.reset-btn {
background-color: #f44336;
color: white;
}
.score {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>Interactive Quiz</h1>
<div id="quiz" class="hidden">
<div class="question" id="question-container"></div>
<ul class="options" id="options-container"></ul>
<button id="next-btn" class="hidden">Next</button>
</div>
<button id="start-btn" class="start-btn">Start Quiz</button>
<div id="result" class="hidden">
<h2>Your Score: <span id="score"></span></h2>
<div id="correct-answers"></div>
<button id="reset-btn" class="reset-btn">Reset Quiz</button>
</div>
</div>
<script>
const questions = [
{
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Lisbon"],
answer: "Paris"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Mars", "Jupiter", "Saturn"],
answer: "Mars"
},
{
question: "What is the largest ocean on Earth?",
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
answer: "Pacific Ocean"
}
];
let currentQuestionIndex = 0;
let score = 0;
const startBtn = document.getElementById('start-btn');
const quizContainer = document.getElementById('quiz');
const questionContainer = document.getElementById('question-container');
const optionsContainer = document.getElementById('options-container');
const nextBtn = document.getElementById('next-btn');
const resultContainer = document.getElementById('result');
const scoreDisplay = document.getElementById('score');
const correctAnswersDisplay = document.getElementById('correct-answers');
const resetBtn = document.getElementById('reset-btn');
startBtn.addEventListener('click', startQuiz);
nextBtn.addEventListener('click', () => {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResult();
}
});
resetBtn.addEventListener('click', resetQuiz);
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
startBtn.classList.add('hidden');
quizContainer.classList.remove('hidden');
resultContainer.classList.add('hidden');
showQuestion();
}
function showQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionContainer.textContent = currentQuestion.question;
optionsContainer.innerHTML = '';
currentQuestion.options.forEach(option => {
const li = document.createElement('li');
li.textContent = option;
li.addEventListener('click', () => selectAnswer(option, currentQuestion.answer));
optionsContainer.appendChild(li);
});
nextBtn.classList.add('hidden');
}
function selectAnswer(selectedOption, correctAnswer) {
const options = optionsContainer.querySelectorAll('li');
options.forEach(option => {
option.classList.remove('correct', 'incorrect');
if (option.textContent === correctAnswer) {
option.classList.add('correct');
} else if (option.textContent === selectedOption) {
option.classList.add('incorrect');
}
});
if (selectedOption === correctAnswer) {
score++;
}
nextBtn.classList.remove('hidden');
}
function showResult() {
quizContainer.classList.add('hidden');
resultContainer.classList.remove('hidden');
scoreDisplay.textContent = `${score} out of ${questions.length}`;
correctAnswersDisplay.innerHTML = questions.map((q, index) =>
`<p>Q${index + 1}: ${q.question} <br> Your answer: ${q.answer === q.options.find(o => o === q.answer) ? q.answer : 'Incorrect'}</p>`
).join('');
}
function resetQuiz() {
resultContainer.classList.add('hidden');
startBtn.classList.remove('hidden');
}
</script>
</body>
</html>
You can copy and paste this code into an HTML file and open it in a web browser to see the interactive quiz in action!