script.js

const questions = [
  {
    question: "5+2=?",
    options: ["7", "8", "9", "10"],
    answer: "7"
  },
  {
    question: "10/2=?",
    options: ["2", "6", "5", "8"],
    answer: "5"
  },
  {
    question: "3*7=?",
    options: ["20", "28", "14", "21"],
    answer: "21"
  },
    {
    question: "8-3=?",
    options: ["2", "5", "4", "6"],
    answer: "5"
  },
  {
    question: "9+4=?",
    options: ["13", "9", "10", "11"],
    answer: "13"
  }
];

let currentQuestion = 0;
let marks = 0;

const questionElement = document.getElementById("questionElement");
const optionsElement = document.getElementById("optionsElement");
const nextButton = document.getElementById("nextButton");
const resultElement = document.getElementById("resultElement");

function loadQuestion() {
  const currentQuiz = questions[currentQuestion];
  questionElement.textContent = currentQuiz.question;
  optionsElement.innerHTML = "";
  currentQuiz.options.forEach(option => {
    const li = document.createElement("li");
    li.innerHTML = `
      <label>
        <input type="radio" name="answer" value="${option}" />
        ${option}
      </label>`;
    optionsElement.appendChild(li);
  });

}
nextButton.addEventListener("click", () => {
  const selected = document.querySelector("input[name='answer']:checked");
  if (!selected) {
    alert("Please select an answer before continuing");
    return;
  }
  const answer = selected.value;
  if (answer === questions[currentQuestion].answer) {
    marks++;
  }
  currentQuestion++;
  if (currentQuestion < questions.length) {
    loadQuestion();
  } else {
      showResult();
    }
  }
);

function showResult() {
   document.getElementById("quizElement").classList.add("hidden");
  resultElement.classList.remove("hidden");
   resultElement.textContent = `You scored ${marks} out of ${questions.length}!`;
}

loadQuestion();