JavaScript ā€“ DOM & Building Real Projects
advanced40 XP

Mini Project ā€“ Build Your Own Interactive Quiz!

Put everything together! Build a fully working quiz game with HTML, CSS and JavaScript ā€” questions, answers, scoring and a results screen!

Build a Real Interactive Quiz! šŸ†

Time to put EVERYTHING together ā€” HTML structure, CSS styling, and JavaScript logic ā€” to build a real quiz game that actually works!

What We're Building

A quiz with:

  • ā“ Multiple choice questions
  • āœ… Click to answer and get instant feedback
  • šŸ“Š A score counter
  • šŸŽ‰ A results screen at the end

Step 1: HTML Structure

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Coding Quiz! šŸ§ </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="quiz-container">
    <div id="quiz-screen">
      <div class="progress">
        <span id="q-number">Question 1</span>
        <span id="score-display">Score: 0</span>
      </div>
      <h2 id="question-text">Loading question...</h2>
      <div id="options-container"></div>
    </div>
    
    <div id="results-screen" class="hidden">
      <h1>Quiz Complete! šŸŽ‰</h1>
      <p id="final-score"></p>
      <button id="restart-btn">Play Again! šŸ”„</button>
    </div>
  </div>
  <script src="quiz.js"></script>
</body>
</html>

Step 2: CSS Styling

CSS
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #667eea, #764ba2);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-container {
  background: white;
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: bold;
  color: #7c3aed;
}

h2 { font-size: 22px; margin-bottom: 24px; }

.option-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin: 10px 0;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.option-btn:hover { border-color: #7c3aed; background: #f5f3ff; }
.option-btn.correct { background: #d1fae5; border-color: #059669; }
.option-btn.wrong { background: #fee2e2; border-color: #dc2626; }

.hidden { display: none; }
#final-score { font-size: 24px; margin: 20px 0; }
#restart-btn {
  background: #7c3aed; color: white;
  border: none; border-radius: 12px;
  padding: 14px 32px; font-size: 16px; cursor: pointer;
}

Step 3: JavaScript Logic

JavaScript
const questions = [
  {
    question: "What does HTML stand for?",
    options: ["Hyper Text Markup Language", "High Transfer Mode Language", "Hyper Tool Making Links", "Hot Trending Markup Language"],
    answer: 0   // index of correct option
  },
  {
    question: "Which CSS property changes text colour?",
    options: ["background", "text-color", "color", "font-color"],
    answer: 2
  },
  {
    question: "Which keyword declares a constant in JavaScript?",
    options: ["let", "var", "const", "fixed"],
    answer: 2
  }
];

let currentQ = 0;
let score = 0;

function loadQuestion() {
  const q = questions[currentQ];
  document.getElementById("q-number").textContent = `Question ${currentQ + 1}/${questions.length}`;
  document.getElementById("question-text").textContent = q.question;
  
  const container = document.getElementById("options-container");
  container.innerHTML = "";
  
  q.options.forEach((option, index) => {
    const btn = document.createElement("button");
    btn.className = "option-btn";
    btn.textContent = option;
    btn.addEventListener("click", () => checkAnswer(index));
    container.appendChild(btn);
  });
}

function checkAnswer(selected) {
  const q = questions[currentQ];
  const buttons = document.querySelectorAll(".option-btn");
  
  buttons.forEach(btn => btn.disabled = true);  // disable all
  
  if (selected === q.answer) {
    score++;
    buttons[selected].classList.add("correct");
    document.getElementById("score-display").textContent = `Score: ${score}`;
  } else {
    buttons[selected].classList.add("wrong");
    buttons[q.answer].classList.add("correct");
  }
  
  setTimeout(() => {
    currentQ++;
    if (currentQ < questions.length) {
      loadQuestion();
    } else {
      showResults();
    }
  }, 1500);
}

function showResults() {
  document.getElementById("quiz-screen").classList.add("hidden");
  document.getElementById("results-screen").classList.remove("hidden");
  
  const pct = Math.round((score / questions.length) * 100);
  document.getElementById("final-score").textContent = 
    `You scored ${score}/${questions.length} (${pct}%) šŸŒŸ`;
}

document.getElementById("restart-btn").addEventListener("click", () => {
  currentQ = 0; score = 0;
  document.getElementById("quiz-screen").classList.remove("hidden");
  document.getElementById("results-screen").classList.add("hidden");
  loadQuestion();
});

loadQuestion();  // Start!

šŸŽ‰ You just built a real interactive quiz game using HTML + CSS + JavaScript! Save these three files and open index.html in a browser. That's proper web development! šŸš€

Quick check

01/3

In the quiz project, what does document.createElement('button') do?