script.js

// Quiz data: array of objects containing questions, options, and correct answers
const quizData = [
    {
        question: "What is the capital of France?",
        options: ["Berlin", "Madrid", "Paris", "Rome"],
        correct: "Paris"
    },
    {
        question: "What is the capital of Latvia?",
        options: ["Riga", "Helsinki", "Oslo", "Amsterdam"],
        correct: "Riga"
    },
    {
        question: "What is the capital of Bulgaria?",
        options: ["Warsaw", "Bucharest", "Sofia", "London"],
        correct: "Sofia"
    },
    {
        question: "What is the capital of Italy?",
        options: ["Athens", "Rome", "Milan", "Moscow"],
        correct: "Rome"
    }
];

// Variables to track the quiz state
let currentQuestionIndex = 0;
let score = 0;

// DOM elements
const questionElement = document.getElementById("question");
const optionsElement = document.getElementById("options");
const scoreElement = document.getElementById("score-value");
const nextButton = document.getElementById("next-btn");
const resultElement = document.getElementById("result");

// Load the first question
loadQuestion();

// Function to load the current question
function loadQuestion() {
    const currentQuestion = quizData[currentQuestionIndex];
    questionElement.textContent = currentQuestion.question;

    // Clear previous options
    optionsElement.innerHTML = "";

      // Create buttons for each option
      currentQuestion.options.forEach(option => {
        const button = document.createElement("button");
        button.textContent = option;
        button.className = "w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition-colors";
        // Add both click and touch support
        button.addEventListener("click", () => selectOption(option));
        button.addEventListener("touchstart", (e) => {
            e.preventDefault(); // Prevent scrolling on touch
            selectOption(option);
        });
        optionsElement.appendChild(button);
    });
    
  // Disable the Next button until an option is selected
  nextButton.disabled = true;
  nextButton.classList.add("opacity-50", "cursor-not-allowed");
}


// Function to handle option selection
function selectOption(selectedOption) {
  const currentQuestion = quizData[currentQuestionIndex];

  // Check if the selected option is correct
  if (selectedOption === currentQuestion.correct) {
    score++;
    scoreElement.textContent = score;
}

// Highlight the correct and incorrect options
const optionButtons = optionsElement.getElementsByTagName("button");
for (let button of optionButtons) {
    if (button.textContent === currentQuestion.correct) {
        button.classList.remove("bg-blue-500", "hover:bg-blue-600");
        button.classList.add("bg-green-500"); // Green for correct
    } else if (button.textContent === selectedOption) {
        button.classList.remove("bg-blue-500", "hover:bg-blue-600");
        button.classList.add("bg-red-500"); // Red for incorrect
    }
    button.disabled = true; // Disable all buttons after selection
}

 // Enable the Next button
 nextButton.disabled = false;
 nextButton.classList.remove("opacity-50", "cursor-not-allowed");
}

// Function to move to the next question or show the result
function nextQuestion() {
 currentQuestionIndex++;

 // Check if there are more questions
 if (currentQuestionIndex < quizData.length) {
     loadQuestion();
 } else {
     showResult();
 }
}

// Function to show the final result
function showResult() {
    questionElement.classList.add("hidden");
    optionsElement.classList.add("hidden");
    nextButton.classList.add("hidden");
    resultElement.classList.remove("hidden");
    resultElement.textContent = Quiz 
}

// Complete! Your final score is ${score} out of ${quizData.length}.;