script.js

// Quiz questions
const quizQuestions = [
    {
        question: "What is the capital of France?",
        options: ["London", "Berlin", "Paris", "Madrid"],
        correctAnswer: "Paris"
    },
    {
        question: "Which planet is known as the Red Planet?",
        options: ["Venus", "Mars", "Jupiter", "Saturn"],
        correctAnswer: "Mars"
    },
    {
        question: "What is the largest mammal in the world?",
        options: ["Elephant", "Blue Whale", "Giraffe", "Polar Bear"],
        correctAnswer: "Blue Whale"
    },
    {
        question: "Which language runs in a web browser?",
        options: ["Java", "C", "Python", "JavaScript"],
        correctAnswer: "JavaScript"
    },
    {
        question: "What year was JavaScript launched?",
        options: ["1996", "1995", "1994", "none of the above"],
        correctAnswer: "1995"
    }
];

// DOM elements
const welcomeScreen = document.getElementById('welcome-screen');
const questionScreen = document.getElementById('question-screen');
const resultsScreen = document.getElementById('results-screen');
const startBtn = document.getElementById('start-btn');
const nextBtn = document.getElementById('next-btn');
const restartBtn = document.getElementById('restart-btn');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const currentQuestionElement = document.getElementById('current-question');
const totalQuestionsElement = document.getElementById('total-questions');
const scoreElement = document.getElementById('score');
const finalScoreElement = document.getElementById('final-score');

// Quiz state
let currentQuestionIndex = 0;
let score = 0;
let selectedOption = null;

// Initialize the quiz
function initQuiz() {
    totalQuestionsElement.textContent = quizQuestions.length;
    scoreElement.textContent = `Score: ${score}`;
}

// Start the quiz
function startQuiz() {
    welcomeScreen.classList.add('hidden');
    questionScreen.classList.remove('hidden');
    showQuestion();
}

// Show current question
function showQuestion() {
    const currentQuestion = quizQuestions[currentQuestionIndex];
    questionText.textContent = currentQuestion.question;
    optionsContainer.innerHTML = '';
    
    currentQuestionElement.textContent = currentQuestionIndex + 1;
    
    currentQuestion.options.forEach((option, index) => {
        const optionElement = document.createElement('button');
        optionElement.className = 'w-full text-left p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition';
        optionElement.textContent = option;
        optionElement.dataset.option = option;
        optionElement.addEventListener('click', selectOption);
        optionsContainer.appendChild(optionElement);
    });
    
    nextBtn.classList.add('hidden');
}

// Handle option selection
function selectOption(e) {
    const selectedButton = e.target;
    const options = optionsContainer.querySelectorAll('button');
    
    // Remove selected class from all options
    options.forEach(option => {
        option.classList.remove('bg-indigo-100', 'border-indigo-500');
    });
    
    // Add selected class to clicked option
    selectedButton.classList.add('bg-indigo-100', 'border-indigo-500');
    
    selectedOption = selectedButton.dataset.option;
    
    // Check if answer is correct
    const currentQuestion = quizQuestions[currentQuestionIndex];
    if (selectedOption === currentQuestion.correctAnswer) {
        selectedButton.classList.add('border-green-500');
    } else {
        selectedButton.classList.add('border-red-500');
        // Highlight correct answer
        options.forEach(option => {
            if (option.dataset.option === currentQuestion.correctAnswer) {
                option.classList.add('border-green-500', 'bg-green-50');
            }
        });
    }
    
    // Disable all options after selection
    options.forEach(option => {
        option.disabled = true;
    });
    
    // Show next button
    nextBtn.classList.remove('hidden');
    
    // Update score if correct
    if (selectedOption === currentQuestion.correctAnswer) {
        score++;
        scoreElement.textContent = `Score: ${score}`;
    }
}

// Move to next question or show results
function nextQuestion() {
    currentQuestionIndex++;
    
    if (currentQuestionIndex < quizQuestions.length) {
        showQuestion();
    } else {
        showResults();
    }
}

// Show final results
function showResults() {
    questionScreen.classList.add('hidden');
    resultsScreen.classList.remove('hidden');
    finalScoreElement.textContent = `${score}/${quizQuestions.length}`;
}

// Restart the quiz
function restartQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    scoreElement.textContent = `Score: ${score}`;
    resultsScreen.classList.add('hidden');
    welcomeScreen.classList.remove('hidden');
}

// Event listeners
startBtn.addEventListener('click', startQuiz);
nextBtn.addEventListener('click', nextQuestion);
restartBtn.addEventListener('click', restartQuiz);

// Initialize the quiz
initQuiz();