A multiple-choice quiz that shows one question at a time, tracks your score, and displays a results screen.
One container that switches between quiz view and results view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php require_once __DIR__ . '/../promo_banner.php'; ?>
<div class="quiz-box" id="quiz-box">
<div id="progress"></div>
<h2 id="question"></h2>
<div id="options"></div>
<button id="next-btn" style="display:none">Next →</button>
</div>
<div class="quiz-box hidden" id="result-box">
<h2>Quiz Complete!</h2>
<p id="score-text"></p>
<button onclick="location.reload()">Try Again</button>
</div>
<script src="quiz.js"></script>
</body>
</html>Create quiz.js with questions, rendering logic, and score tracking.
const questions = [
{ q: 'What does CSS stand for?', options: ['Cascading Style Sheets', 'Computer Style Sheets', 'Creative Style System', 'Colorful Style Syntax'], ans: 0 },
{ q: 'Which tag creates a hyperlink?', options: ['<link>', '<a>', '<href>', '<url>'], ans: 1 },
{ q: 'What does DOM stand for?', options: ['Document Object Model', 'Data Object Map', 'Display Output Mode', 'Dynamic Object Method'], ans: 0 },
{ q: 'Which method adds an event listener in JS?', options: ['on()', 'listen()', 'addEventListener()', 'attachEvent()'], ans: 2 },
{ q: 'What is the correct syntax for a JS arrow function?', options: ['function => {}', '() => {}', '=> function {}', 'def () =>'], ans: 1 },
];
let current = 0, score = 0, answered = false;
function showQuestion() {
answered = false;
const q = questions[current];
document.getElementById('progress').textContent = `Question ${current + 1} / ${questions.length}`;
document.getElementById('question').textContent = q.q;
document.getElementById('next-btn').style.display = 'none';
document.getElementById('options').innerHTML = q.options.map((opt, i) =>
`<button class="opt" onclick="select(this,${i})">${opt}</button>`
).join('');
}
function select(btn, idx) {
if (answered) return;
answered = true;
const correct = questions[current].ans;
document.querySelectorAll('.opt').forEach((b, i) => {
b.disabled = true;
if (i === correct) b.classList.add('correct');
else if (i === idx) b.classList.add('wrong');
});
if (idx === correct) score++;
document.getElementById('next-btn').style.display = 'inline-block';
}
document.getElementById('next-btn').addEventListener('click', () => {
current++;
if (current < questions.length) { showQuestion(); }
else {
document.getElementById('quiz-box').classList.add('hidden');
document.getElementById('result-box').classList.remove('hidden');
document.getElementById('score-text').textContent = `You scored ${score} out of ${questions.length}`;
}
});
showQuestion();You have a fully working quiz app! Swap in your own questions and share the URL with friends.
Spotted a bug, broken code, or something that doesn't look right? Tell us what's off and we'll fix it.