script.js

  const API_URL = "https://opentdb.com/api.php?amount=10&category=21&difficulty=medium&type=multiple";
    const quiz = document.getElementById('quiz');
    const questionEl = document.getElementById('question');
    const answersEl = document.getElementById('answers');
    const nextBtn = document.getElementById('next-btn');
    const resultEl = document.getElementById('result');
    const loadingEl = document.getElementById('loading');
    const errorEl = document.getElementById('error');
    const counterEl = document.getElementById('counter');


    let questions = [];
    let currentIndex = 0;
    let score = 0;

    async function fetchQuestions() {
      try {
        const res = await fetch(API_URL);
        const data = await res.json();
        if (data.results.length === 0) throw new Error("No questions found");
        questions = data.results;
        loadingEl.style.display = "none";
        quiz.style.display = "block";
        showQuestion();
      } catch (err) {
        loadingEl.style.display = "none";
        errorEl.style.display = "block";
      }
    }

    function decodeHTMLEntities(text) {
      const txt = document.createElement("textarea");
      txt.innerHTML = text;
      return txt.value;
    }
  function showQuestion() {
  resetState();
  const currentQuestion = questions[currentIndex];
  counterEl.textContent = `Question ${currentIndex + 1} of ${questions.length}`;
  questionEl.innerHTML = decodeHTMLEntities(currentQuestion.question);

  const answers = [...currentQuestion.incorrect_answers];
  const randomIndex = Math.floor(Math.random() * (answers.length + 1));
  answers.splice(randomIndex, 0, currentQuestion.correct_answer);

  answers.forEach(answer => {
    const btn = document.createElement("div");
    btn.classList.add("answer");
    btn.innerText = decodeHTMLEntities(answer);
    btn.addEventListener("click", () => selectAnswer(btn, currentQuestion.correct_answer));
    answersEl.appendChild(btn);
  });
  }


    function resetState() {
      nextBtn.style.display = "none";
      answersEl.innerHTML = "";
    }

    function selectAnswer(selectedBtn, correctAnswer) {
      const allBtns = answersEl.querySelectorAll(".answer");
      allBtns.forEach(btn => {
        btn.style.pointerEvents = "none";
        if (btn.innerText === decodeHTMLEntities(correctAnswer)) {
          btn.classList.add("correct");
        } else if (btn === selectedBtn) {
          btn.classList.add("wrong");
        }
      });

      if (selectedBtn.innerText === decodeHTMLEntities(correctAnswer)) {
        score++;
      }
      nextBtn.style.display = "block";
    }

    nextBtn.addEventListener("click", () => {
      currentIndex++;
      if (currentIndex < questions.length) {
        showQuestion();
      } else {
        showResult();
      }
    });

    function showResult() {
      quiz.style.display = "none";
      resultEl.style.display = "block";
      resultEl.innerHTML = `You scored ${score} out of ${questions.length}!`;
    }

    fetchQuestions();