🧮 Day 43 — Build a Quiz App using JavaScript (Advanced Project)

Hi Guys Welcome to Day 43 🎯 Today, you’re going to apply everything you’ve learned — DOM manipulation, events, loops, arrays, and local storage — to build a fully functional Quiz Application. By the end, you’ll have an interactive quiz that checks answers, tracks scores, and gives results instantly.

🧩 1️⃣ Project Overview

Our quiz will:

• Show one question at a time
• Allow multiple-choice selection
• Keep track of correct answers
• Display final score at the end
• Optionally store scores in localStorage

📄 2️⃣ Basic HTML Structure

<div id="quizApp" class="container">
  <h2>🧠 JavaScript Quiz</h2>
  <div id="questionContainer"></div>
  <button id="nextBtn">Next Question</button>
  <div id="result" style="margin-top:20px;font-weight:600;"></div>
</div>

🎨 3️⃣ Styling the Quiz

body { font-family:Poppins,sans-serif; background:#e3f2fd; }
.container { max-width:500px; margin:auto; background:white; padding:25px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
button { padding:10px 18px; background:#0277bd; color:white; border:none; border-radius:6px; cursor:pointer; }
.option { padding:10px; margin:8px 0; border:1px solid #ddd; border-radius:6px; cursor:pointer; }
.option:hover { background:#e3f2fd; }

⚙️ 4️⃣ JavaScript Logic

Now let’s create the quiz functionality step by step.

const questions = [
  {
    question: "Which keyword declares a variable in JavaScript?",
    options: ["var", "define", "constant", "set"],
    correct: "var"
  },
  {
    question: "What does DOM stand for?",
    options: ["Document Object Model", "Data Object Mode", "Document Oriented Mapping", "Display Object Model"],
    correct: "Document Object Model"
  },
  {
    question: "Which method converts JSON to a JavaScript object?",
    options: ["JSON.parse()", "JSON.stringify()", "JSON.object()", "JSON.convert()"],
    correct: "JSON.parse()"
  }
];

let index = 0;
let score = 0;
const questionContainer = document.getElementById("questionContainer");
const nextBtn = document.getElementById("nextBtn");
const result = document.getElementById("result");

function loadQuestion() {
  const current = questions[index];
  questionContainer.innerHTML = `
    <h3>${current.question}</h3>
    ${current.options.map(opt => `<div class='option'>${opt}</div>`).join("")}
  `;
  document.querySelectorAll(".option").forEach(opt => {
    opt.addEventListener("click", selectOption);
  });
}

function selectOption(e){
  const selected = e.target.textContent;
  if(selected === questions[index].correct){
    e.target.style.background = "#a5d6a7";
    score++;
  } else {
    e.target.style.background = "#ef9a9a";
  }
  document.querySelectorAll(".option").forEach(o => o.style.pointerEvents = "none");
}

nextBtn.addEventListener("click", ()=>{
  index++;
  if(index < questions.length){
    loadQuestion();
  } else {
    questionContainer.innerHTML = "";
    nextBtn.style.display = "none";
    result.innerHTML = `You scored ${score} out of ${questions.length}! 🎉`;
    localStorage.setItem("quizScore", score);
  }
});

loadQuestion();

🧠 5️⃣ Key Concepts Used

• Arrays & Objects to store questions.
• Event Listeners for option clicks.
• Conditionals for correctness checking.
• LocalStorage to save user score.

🧩 6️⃣ Optional Enhancements

• Add a countdown timer per question.
• Display progress percentage or question count.
• Save a leaderboard in localStorage.
• Animate transitions between questions.

🎯 Summary

You’ve now built a mini interactive app that tracks user actions, uses logic, and updates the DOM dynamically. Tomorrow, you’ll take your interactivity skills up a notch by creating a real-time Chat UI simulation using JavaScript events and timing functions.

← Prev Next →