HTML

<div id="quiz"></div>
<div id="results"></div>
<button type="submit">Submit</button>

#quiz {
  width: 500px;
  margin: 0 auto;
}

#results {
  width: 500px;
  margin: 0 auto;
}

JavaScript

// Create an array of quiz questions
const questions = [
  {
    question: "What is the capital of France?",
    answers: ["Paris", "London", "Rome", "Berlin"],
    correctAnswer: "Paris",
  },
  {
    question: "What is the largest ocean in the world?",
    answers: ["Pacific Ocean", "Atlantic Ocean", "Indian Ocean", "Arctic Ocean"],
    correctAnswer: "Pacific Ocean",
  },
  {
    question: "What is the square root of 16?",
    answers: ["2", "4", "8", "16"],
    correctAnswer: "4",
  },
];

// Create a variable to track the current question index
let currentQuestionIndex = 0;

// Display the current quiz question
function displayQuestion() {
  const question = questions[currentQuestionIndex];
  const quizContainer = document.getElementById("quiz");

  quizContainer.innerHTML = `
    <h2>${question.question}</h2>
    <ul>
      ${question.answers.map((answer) => `<li><input type="radio" name="answer" value="${answer}">${answer}</li>`).join("")}
    </ul>
  `;
}

// Check the user's answer and provide feedback
function checkAnswer() {
  const quizContainer = document.getElementById("quiz");
  const selectedAnswer = quizContainer.querySelector('input[name="answer"]:checked');

  if (selectedAnswer) {
    const correctAnswer = questions[currentQuestionIndex].correctAnswer;

    if (selectedAnswer.value === correctAnswer) {
      alert("Correct!");
    } else {
      alert("Incorrect. The correct answer is " + correctAnswer);
    }

    // Move to the next question
    currentQuestionIndex++;

    if (currentQuestionIndex < questions.length) {
      displayQuestion();
    } else {
      // The quiz is over
      showResults();
    }
  } else {
    alert("Please select an answer.");
  }
}

// Display the quiz results
function showResults() {
  const resultsContainer = document.getElementById("results");

  let score = 0;
  for (let i = 0; i < questions.length; i++) {
    const question = questions[i];
    const correctAnswer = question.correctAnswer;

    if (localStorage.getItem(`question-${i}`) === correctAnswer) {
      score++;
    }
  }

  resultsContainer.innerHTML = `
    <h2>Quiz Results</h2>
    <p>You scored ${score} out of ${questions.length} questions correctly.</p>
  `;
}

// Add an event listener to the submit button to check the user's answer
document.querySelector("button[type='submit']").addEventListener("click", checkAnswer);

// Display the first quiz question
displayQuestion();