Javascript Tutorial - 1

Javascript Tutorial - 2

Javascript Tutorial - 3

Javascript Tutorial - 4

Javascript Tutorial - 5

JavaScript Questions

Games - Quiz

*
Previous JavaScript question answers 61-80 Callbacks-and-Higher-Order-Functions Next

Javascript: Mini Project: Interactive Quiz App

📘 Instructions: How to Use the Interactive Quiz App

Follow these simple steps to take the quiz:

🟢 Step 1: Read the Question
A question will appear at the top of the quiz box.
Take your time to read and understand it.

🟡 Step 2: Choose an Answer
Below the question, you'll see four options.
Click on the option you think is correct.
Once you click, the app will automatically move to the next question.

🔵 Step 3: Complete All Questions
Continue answering each question one by one.
There is no time limit, so go at your own pace.

🟣 Step 4: View Your Score
After the last question, your final score will be displayed.
You’ll see how many questions you got right out of the total.

🔁 Step 5: Restart the Quiz
Click the Restart Quiz button to try again.
This will reset the quiz and let you improve your score or practice more.

Interactive Quiz App

    Web-Based Quiz App Guide

    🎯 Project Goal

    Build a simple web-based quiz app that:

    Displays multiple-choice questions

    Tracks user answers

    Shows the final score

    Offers feedback after submission

    🛠 Step-by-Step Development

    Step 1: Set Up the HTML Structure
    Create a basic HTML file to hold the quiz interface.

    html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Interactive Quiz App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="quiz-container">
    <h1>Quiz App</h1>
    <div id="question-container">
      <p id="question"></p>
      <ul id="options"></ul>
    </div>
    <button id="next-btn">Next</button>
    <div id="result-container"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

    Step 2: Style the App (Optional but Recommended)
    Create a style.css file to make the app visually appealing.

    css

    body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  text-align: center;
}

.quiz-container {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

#options li {
  list-style: none;
  margin: 10px 0;
  cursor: pointer;
  padding: 10px;
  background-color: #eee;
  border-radius: 5px;
}

#options li:hover {
  background-color: #ddd;
}

#next-btn {
  margin-top: 20px;
  padding: 10px 20px;
}

    Step 3: Add JavaScript Logic
    Create a script.js file to handle quiz functionality.

    javascript

    const questions = [
  {
    question: "What is the capital of France?",
    options: ["Berlin", "Madrid", "Paris", "Rome"],
    answer: 2
  },
  {
    question: "Which planet is known as the Red Planet?",
    options: ["Earth", "Mars", "Jupiter", "Venus"],
    answer: 1
  },
  {
    question: "Who wrote 'Hamlet'?",
    options: ["Charles Dickens", "William Shakespeare", "Mark Twain", "Jane Austen"],
    answer: 1
  }
];

let currentQuestion = 0;
let score = 0;

const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const nextBtn = document.getElementById("next-btn");
const resultEl = document.getElementById("result-container");

function loadQuestion() {
  const q = questions[currentQuestion];
  questionEl.textContent = q.question;
  optionsEl.innerHTML = "";
  q.options.forEach((option, index) => {
    const li = document.createElement("li");
    li.textContent = option;
    li.onclick = () => checkAnswer(index);
    optionsEl.appendChild(li);
  });
}

function checkAnswer(selected) {
  const correct = questions[currentQuestion].answer;
  if (selected === correct) {
    score++;
  }
  currentQuestion++;
  if (currentQuestion < questions.length) {
    loadQuestion();
  } else {
    showResult();
  }
}

function showResult() {
  questionEl.style.display = "none";
  optionsEl.style.display = "none";
  nextBtn.style.display = "none";
  resultEl.innerHTML = `<h2>Your Score: ${score}/${questions.length}</h2>`;
}

nextBtn.onclick = () => {
  loadQuestion();
  nextBtn.style.display = "none";
};

loadQuestion();

    ✅ Final Touches

    You can add more questions to the array.

    Include a "Restart Quiz" button.

    Add timer functionality for each question.

    Store scores using localStorage for persistence.

    Back to Index
    Previous JavaScript question answers 61-80 Callbacks-and-Higher-Order-Functions Next
    *
    *