script.js

// DOM Elements
const startScreen = document.getElementById("start-screen");
const quizScreen = document.getElementById("quiz-screen");
const resultScreen = document.getElementById("result-screen");
const startButton = document.getElementById("start-btn");
const questionText = document.getElementById("question-text");
const answersContainer = document.getElementById("answers-container");
const currentQuestionSpan = document.getElementById("current-question");
const totalQuestionsSpan = document.getElementById("total-questions");
const scoreSpan = document.getElementById("score");
const finalScoreSpan = document.getElementById("final-score");
const maxScoreSpan = document.getElementById("max-score");
const resultMessage = document.getElementById("result-message");
const restartButton = document.getElementById("restart-btn");
const progressBar = document.getElementById("progress");

// setting up the quiz using api
const quizUrl =
  "https://opentdb.com/api.php?amount=4&category=18&difficulty=easy&type=multiple";
async function apiQues() {
  try {
    let response = await axios.get(quizUrl);
    let data = await response;
    return data.data.results;
  } catch (er) {
    console.log(er);
  }
}
let quizQuestions = {};
let currentQuestion = "";
// storing the questions before for a smooth experience
apiQues().then((data) => {
  quizQuestions = data;

  totalQuestionsSpan.textContent = quizQuestions.length;
  maxScoreSpan.textContent = quizQuestions.length;
});

// Question state
let currentQuestionIndex = 0;
let score = 0;
let answers = "";

// eventListener
startButton.addEventListener("click", startQuiz);
restartButton.addEventListener("click", restartQuiz);
function startQuiz() {
  console.log("quiz started");
  // reset vars
  currentQuestionIndex = 0;
  score = 0;
  scoreSpan.textContent = score;
  progressBar.style.width = 0 + "%";
  startScreen.classList.remove("active");
  quizScreen.classList.add("active");

  showQuestion();
  showAnswer();
}

async function showQuestion() {
  const progressPercent = (currentQuestionIndex / quizQuestions.length) * 100;
  progressBar.style.width = progressPercent + "%";

  currentQuestion = quizQuestions[currentQuestionIndex].question;
  questionText.textContent = currentQuestion;
  currentQuestionSpan.textContent = currentQuestionIndex + 1;
  //console.log(currentQuestion);
}

async function showAnswer() {
  let currentQ = quizQuestions[currentQuestionIndex]; // pick current question
  answersContainer.innerHTML = "";

  let allAnswers = [...currentQ.incorrect_answers, currentQ.correct_answer];
  allAnswers.sort(() => Math.random() - 0.5); // shuffle answers

  allAnswers.forEach((answer) => {
    let btn = document.createElement("button");
    btn.textContent = answer;

    // add click event on the button
    btn.addEventListener("click", function () {
      if (answer === currentQ.correct_answer) {
        btn.classList.add("correct");
        score++;
        scoreSpan.textContent = score;
      } else {
        btn.classList.add("incorrect"); // red
      }

      // optionally disable all buttons after clicking one answer
      Array.from(answersContainer.children).forEach(
        (btn) => (btn.disabled = true)
      );
      nextQues();
    });

    answersContainer.appendChild(btn);
  });
}

function nextQues() {
  setTimeout(() => {
    currentQuestionIndex++;
    if (currentQuestionIndex < quizQuestions.length) {
      showQuestion();
      showAnswer();
    } else {
      currentQuestionIndex++;
      showResults();
    }
  }, 400);
}
function showResults() {
  resultScreen.classList.add("active");
  quizScreen.classList.remove("active");
  finalScoreSpan.textContent = score;
}
restartButton.addEventListener("click", () => {
  resultScreen.classList.remove("active");
  startScreen.classList.add("active");
  restartQuiz();
});

function restartQuiz() {
  location.reload();
  console.log("quiz restarted");
}