Back to Projects Intermediate

Quiz App

Build a multi-question quiz with score tracking. You'll work with arrays of questions, show one at a time, give instant feedback, and display the final score.

HTML, CSS, JavaScript ~1-2 hours to build Free source code

What You'll Learn

How to store quiz questions as an array of objects
How to show and hide sections of a page using JavaScript
How to loop through questions and display each one
How to track scores and count correct answers
How to restart a quiz without refreshing the page

How It Works

Questions are objects stored in an array

Each question is a JavaScript object with a question text, an array of options, and the index of the correct answer. This keeps your data clean and easy to update.

One question shown at a time

We track which question we're on with a variable. When the user answers, we check if it's right, give feedback, and show a Next button.

Immediate feedback makes it engaging

When a user clicks an option, we highlight it green (correct) or red (wrong), show the right answer if needed, then move to the next question.

Source Code

HTML Structure

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="quiz-container">
    <div id="quiz-screen">
      <div class="progress-bar"><div id="progress-fill"></div></div>
      <p id="question-num">Question 1 of 5</p>
      <h2 id="question-text"></h2>
      <div id="options"></div>
      <button id="nextBtn" class="hidden">Next &rarr;</button>
    </div>
    <div id="result-screen" class="hidden">
      <div class="result-icon">&#127881;</div>
      <h2>Quiz Complete!</h2>
      <p>You scored <span id="final-score"></span> out of 5</p>
      <button id="restartBtn">Play Again</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

* { margin:0; padding:0; box-sizing:border-box; }
body { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0d3b8a,#2980b9);
  font-family:'Segoe UI',sans-serif; padding:20px; }
.quiz-container { background:white; border-radius:20px; padding:36px;
  width:100%; max-width:540px; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.progress-bar { background:#e8f0fe; border-radius:50px; height:8px; margin-bottom:20px; overflow:hidden; }
#progress-fill { height:100%; background:#2980b9; border-radius:50px; transition:width 0.4s; }
#question-num { font-size:0.85rem; color:#888; margin-bottom:12px; font-weight:600; }
h2 { font-size:1.2rem; font-weight:700; color:#25265e; margin-bottom:24px; line-height:1.5; }
#options { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.option-btn { text-align:left; padding:14px 18px; border:2px solid #e0e0e0; border-radius:10px;
  background:white; font-size:0.95rem; cursor:pointer; transition:all 0.2s; color:#333; font-weight:500; }
.option-btn:hover:not(:disabled) { border-color:#2980b9; background:#eef4ff; }
.option-btn.correct { background:#e8f8ee; border-color:#27ae60; color:#27ae60; }
.option-btn.wrong { background:#fee8e8; border-color:#e74c3c; color:#e74c3c; }
#nextBtn { width:100%; padding:14px; background:#2980b9; color:white; border:none;
  border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer; }
#nextBtn:hover { background:#1f6aa5; }
.hidden { display:none !important; }
#result-screen { text-align:center; }
.result-icon { font-size:4rem; margin-bottom:16px; }
#result-screen p { font-size:1.1rem; color:#666; margin:12px 0 24px; }
#final-score { font-size:1.5rem; font-weight:800; color:#2980b9; }
#restartBtn { padding:12px 36px; background:#2980b9; color:white; border:none;
  border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; }
#restartBtn:hover { background:#1f6aa5; }

JavaScript Logic

JavaScript

const questions = [
  { question: "Which keyword declares a variable that cannot be reassigned?",
    options: ["var", "let", "const", "static"], correct: 2 },
  { question: "What does DOM stand for?",
    options: ["Document Object Model", "Data Output Method", "Digital Order Map", "Document Order Mode"], correct: 0 },
  { question: "Which method adds an element to the end of an array?",
    options: ["shift()", "unshift()", "push()", "pop()"], correct: 2 },
  { question: "What is the result of typeof null in JavaScript?",
    options: ["null", "undefined", "object", "boolean"], correct: 2 },
  { question: "Which operator checks both value AND type equality?",
    options: ["==", "===", "=", "!="], correct: 1 }
];

let currentQ = 0, score = 0, answered = false;

function loadQuestion() {
  const q = questions[currentQ];
  document.getElementById('question-num').textContent = `Question ${currentQ + 1} of ${questions.length}`;
  document.getElementById('question-text').textContent = q.question;
  document.getElementById('progress-fill').style.width = `${(currentQ / questions.length) * 100}%`;
  document.getElementById('nextBtn').classList.add('hidden');
  answered = false;

  const optionsDiv = document.getElementById('options');
  optionsDiv.innerHTML = '';
  q.options.forEach((opt, i) => {
    const btn = document.createElement('button');
    btn.className = 'option-btn';
    btn.textContent = opt;
    btn.addEventListener('click', () => checkAnswer(i, btn));
    optionsDiv.appendChild(btn);
  });
}

function checkAnswer(selected, btn) {
  if (answered) return;
  answered = true;
  const correct = questions[currentQ].correct;
  document.querySelectorAll('.option-btn').forEach(b => b.disabled = true);
  if (selected === correct) { btn.classList.add('correct'); score++; }
  else { btn.classList.add('wrong'); document.querySelectorAll('.option-btn')[correct].classList.add('correct'); }
  document.getElementById('nextBtn').classList.remove('hidden');
}

document.getElementById('nextBtn').addEventListener('click', () => {
  currentQ++;
  if (currentQ < questions.length) loadQuestion();
  else {
    document.getElementById('quiz-screen').classList.add('hidden');
    document.getElementById('result-screen').classList.remove('hidden');
    document.getElementById('final-score').textContent = score;
  }
});

document.getElementById('restartBtn').addEventListener('click', () => {
  currentQ = 0; score = 0;
  document.getElementById('result-screen').classList.add('hidden');
  document.getElementById('quiz-screen').classList.remove('hidden');
  loadQuestion();
});

loadQuestion();