JS Project — Interactive Quiz App

A full quiz app in one HTML file — questions about learning on Rishtaara, score tracking, next button, and final results screen.

What you will build

A full quiz app in one HTML file — questions about learning on Rishtaara, score tracking, next button, and final results screen.

Copy everything below into one file, save as quiz.html, and open in your browser.

Real-life example: This project is like a mini game show in your browser — you host, ask questions, count points, and announce the winner at the end.

Complete Quiz App — HTML + CSS + JS

Paste this entire block. Change questions to make your own quiz for friends or school.

Real-life example: Sharing this file with classmates is like passing a board game — everyone can play the same quiz on any laptop.

quiz.html — full copy-paste project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rishtaara Learning Quiz</title>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: system-ui, sans-serif;
      background: linear-gradient(135deg, #ecfeff, #f0fdf4);
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .quiz {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
      max-width: 480px;
      width: 100%;
      padding: 1.5rem;
    }
    h1 { color: #0891b2; font-size: 1.4rem; margin-top: 0; }
    .progress { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; }
    .question { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
    .options { display: flex; flex-direction: column; gap: 0.5rem; }
    .option {
      padding: 0.75rem 1rem;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #f8fafc;
      cursor: pointer;
      text-align: left;
      font-size: 1rem;
      transition: border-color 0.2s, background 0.2s;
    }
    .option:hover { border-color: #0891b2; background: #ecfeff; }
    .option.selected { border-color: #0891b2; background: #cffafe; }
    .option.correct { border-color: #16a34a; background: #dcfce7; }
    .option.wrong { border-color: #dc2626; background: #fee2e2; }
    .actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; }
    button {
      flex: 1;
      padding: 0.75rem;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      cursor: pointer;
    }
    #next-btn { background: #0891b2; color: #fff; }
    #next-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    #restart-btn { background: #e2e8f0; color: #334155; display: none; }
    .result { text-align: center; display: none; }
    .result.show { display: block; }
    .score-big { font-size: 2.5rem; font-weight: 700; color: #0891b2; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <div class="quiz">
    <div id="quiz-screen">
      <h1>Rishtaara Learning Quiz</h1>
      <p class="progress" id="progress">Question 1 of 4</p>
      <p class="question" id="question"></p>
      <div class="options" id="options"></div>
      <div class="actions">
        <button type="button" id="next-btn" disabled>Next</button>
        <button type="button" id="restart-btn">Play again</button>
      </div>
    </div>
    <div class="result" id="result-screen">
      <h1>Well done!</h1>
      <p class="score-big" id="final-score">0/4</p>
      <p id="result-message">Keep learning on Rishtaara.</p>
      <button type="button" id="result-restart">Try again</button>
    </div>
  </div>

  <script>
    const questions = [
      {
        q: "Which language makes web pages interactive?",
        options: ["HTML", "CSS", "JavaScript", "JSON"],
        answer: 2,
      },
      {
        q: "Which keyword declares a constant in modern JS?",
        options: ["var", "let", "const", "static"],
        answer: 2,
      },
      {
        q: "What does JSON.parse do?",
        options: [
          "Turns object to string",
          "Turns JSON string to object",
          "Saves to localStorage",
          "Fetches from API",
        ],
        answer: 1,
      },
      {
        q: "What is the best way to select one element in modern JS?",
        options: [
          "getElementByTag",
          "querySelector",
          "getAll",
          "findElement",
        ],
        answer: 1,
      },
    ];

    let current = 0;
    let score = 0;
    let selected = null;
    let answered = false;

    const progressEl = document.querySelector("#progress");
    const questionEl = document.querySelector("#question");
    const optionsEl = document.querySelector("#options");
    const nextBtn = document.querySelector("#next-btn");
    const restartBtn = document.querySelector("#restart-btn");
    const quizScreen = document.querySelector("#quiz-screen");
    const resultScreen = document.querySelector("#result-screen");
    const finalScoreEl = document.querySelector("#final-score");
    const resultMessageEl = document.querySelector("#result-message");

    function renderQuestion() {
      answered = false;
      selected = null;
      nextBtn.disabled = true;
      nextBtn.textContent = current === questions.length - 1 ? "Finish" : "Next";
      restartBtn.style.display = "none";

      const q = questions[current];
      progressEl.textContent = `Question ${current + 1} of ${questions.length}`;
      questionEl.textContent = q.q;
      optionsEl.innerHTML = "";

      q.options.forEach((text, index) => {
        const btn = document.createElement("button");
        btn.type = "button";
        btn.className = "option";
        btn.textContent = text;
        btn.addEventListener("click", () => selectOption(index, btn));
        optionsEl.appendChild(btn);
      });
    }

    function selectOption(index, btn) {
      if (answered) return;
      selected = index;
      document.querySelectorAll(".option").forEach((o) => o.classList.remove("selected"));
      btn.classList.add("selected");
      nextBtn.disabled = false;
    }

    function showAnswerColors() {
      const q = questions[current];
      const buttons = document.querySelectorAll(".option");
      buttons.forEach((btn, i) => {
        if (i === q.answer) btn.classList.add("correct");
        else if (i === selected) btn.classList.add("wrong");
      });
    }

    function nextQuestion() {
      if (selected === null) return;

      if (!answered) {
        if (selected === questions[current].answer) score++;
        answered = true;
        showAnswerColors();
        nextBtn.textContent = current === questions.length - 1 ? "See results" : "Next";
        return;
      }

      current++;
      if (current >= questions.length) {
        showResults();
      } else {
        renderQuestion();
      }
    }

    function showResults() {
      quizScreen.classList.add("hidden");
      resultScreen.classList.add("show");
      finalScoreEl.textContent = `${score}/${questions.length}`;
      const pct = (score / questions.length) * 100;
      resultMessageEl.textContent =
        pct === 100
          ? "Perfect score! You are ready for React."
          : pct >= 75
            ? "Great job! Review missed topics and try again."
            : "Keep practicing — Rishtaara courses are here for you.";
    }

    function restart() {
      current = 0;
      score = 0;
      quizScreen.classList.remove("hidden");
      resultScreen.classList.remove("show");
      renderQuestion();
    }

    nextBtn.addEventListener("click", nextQuestion);
    restartBtn.addEventListener("click", restart);
    document.querySelector("#result-restart").addEventListener("click", restart);

    renderQuestion();
  </script>
</body>
</html>

How the quiz works

Questions live in an array. renderQuestion builds buttons. selectOption tracks your pick. nextQuestion checks the answer, colors correct/wrong, then moves on.

Real-life example: The quiz is a vending machine — you pick a snack (answer), the machine checks stock (correct key), then serves the next item or your receipt (final score).

Add more objects to the questions array to grow the quiz.
Save high scores with localStorage for a bonus challenge.
Style with your own colors — practice CSS from the HTML & CSS course.

What's next

You finished the JavaScript advanced track. Keep building — frameworks make bigger apps easier.

Real-life example: Vanilla JS is like learning to walk. React is like getting a bicycle — same destination, faster on long journeys.

React course: /learn/web-development/react-complete-guide
MCQ practice: /mcq/javascript-mcq
Interview prep: /interview/javascript-interview