Build a Quiz App
⚡ JavaScriptProject: build an interactive quiz application with JavaScript.
0/4 completed
Project: Quiz App
Build an interactive quiz that asks questions, checks answers, and shows the score.
Requirements
- Display one question at a time
- Show 4 multiple choice buttons
- Highlight correct/incorrect answers
- Show score at the end
- Allow restarting the quiz
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial; max-width: 500px; margin: 40px auto; padding: 20px; }
h1 { color: #5E256D; text-align: center; }
.question { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; }
.options button {
display: block; width: 100%; padding: 12px; margin: 8px 0;
border: 2px solid #e2e8f0; border-radius: 8px;
background: white; cursor: pointer; font-size: 1rem; text-align: left;
}
.options button:hover { border-color: #5E256D; background: #faf5ff; }
.correct { background: #dcfce7 !important; border-color: #22c55e !important; }
.wrong { background: #fef2f2 !important; border-color: #ef4444 !important; }
.score { text-align: center; font-size: 1.5rem; font-weight: 700; color: #5E256D; }
</style>
</head>
<body>
<h1>Quiz Time!</h1>
<div id="quiz"></div>
<script>
const questions = [
{ q: "What is 2 + 2?", opts: ["3","4","5","6"], ans: 1 },
{ q: "Capital of Nigeria?", opts: ["Lagos","Abuja","Kano","Benin"], ans: 1 },
{ q: "HTML stands for?", opts: ["Hyper Text","Home Tool","High Tech","None"], ans: 0 },
{ q: "Largest planet?", opts: ["Earth","Mars","Jupiter","Saturn"], ans: 2 }
];
let current = 0, score = 0;
function showQuestion() {
if (current >= questions.length) {
document.getElementById("quiz").innerHTML = '<div class="score">Score: '+score+"/"+questions.length+'</div><br><button onclick="restart()">Restart</button>';
return;
}
let q = questions[current];
let html = '<div class="question">'+(current+1)+". "+q.q+'</div><div class="options">';
q.opts.forEach((opt, i) => {
html += '<button onclick="check('+i+')">'+opt+"</button>";
});
html += "</div>";
document.getElementById("quiz").innerHTML = html;
}
function check(i) {
let btns = document.querySelectorAll(".options button");
btns.forEach((b, idx) => {
b.disabled = true;
if (idx === questions[current].ans) b.classList.add("correct");
if (idx === i && idx !== questions[current].ans) b.classList.add("wrong");
});
if (i === questions[current].ans) score++;
current++;
setTimeout(showQuestion, 1000);
}
function restart() { current = 0; score = 0; showQuestion(); }
showQuestion();
</script>
</body>
</html>
🚀 Project
Build a Quiz App
Project: build an interactive quiz application with JavaScript.
Requirements
🚀 Start Project
- 1. Display one question at a time
- 2. Four multiple-choice buttons
- 3. Highlight correct/incorrect answers
- 4. Show final score
- 5. Allow restarting the quiz