PK

document.addEventListener('DOMContentLoaded', function() {
    let currentQuestion = 0;
    let totalQuestions = 0;
    let quizData = [];
    const quizContainer = document.getElementById('quiz-container');
    const prevBtn = document.getElementById('prev-question');
    const nextBtn = document.getElementById('next-question');
    const submitBtn = document.getElementById('submit-quiz');
    const questionCounter = document.getElementById('question-counter');
    const totalQuestionsSpan = document.getElementById('total-questions');
    const quizResults = document.getElementById('quiz-results');
    const restartContainer = document.getElementById('quiz-restart');
    const restartBtn = document.getElementById('restart-quiz');

    // Initialize quiz
    function initQuiz() {
        showLoading();
        fetch('get_quiz_questions.php')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    quizData = data.questions;
                    totalQuestions = quizData.length;
                    totalQuestionsSpan.textContent = totalQuestions;
                    loadQuestion(currentQuestion);
                } else {
                    throw new Error(data.message || 'Failed to load questions');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                quizContainer.innerHTML = `
                    <div class="alert alert-danger">
                        ${error.message}
                        <button onclick="location.reload()" class="btn btn-sm btn-warning mt-2">
                            Try Again
                        </button>
                    </div>
                `;
            });
    }

    // Show loading state
    function showLoading() {
        quizContainer.innerHTML = `
            <div class="text-center py-5 text-white">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p>Loading quiz questions...</p>
            </div>
        `;
    }

    // Load a question by index
    function loadQuestion(index) {
        if (index < 0 || index >= totalQuestions) return;
        
        currentQuestion = index;
        const question = quizData[index];
        
        // Render the question
        quizContainer.innerHTML = `
            <form class="quiz-question">
                <input type="hidden" name="question_id" value="${question.id}">
                <label class="form-label question">${question.question}</label><br>
                <div class="mb-3">
                    ${['ans1', 'ans2', 'ans3', 'ans4'].map((ans, i) => `
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="quizoption" 
                               id="quizoption-${currentQuestion}-${i}" value="${question[ans]}"
                               ${getStoredAnswer(question.id) === question[ans] ? 'checked' : ''}>
                        <label class="form-check-label" for="quizoption-${currentQuestion}-${i}">
                            ${question[ans]}
                        </label>
                    </div>
                    `).join('')}
                </div>
            </form>
        `;
        
        // Update radio buttons to store answers when changed
        const radioButtons = quizContainer.querySelectorAll('input[type="radio"]');
        radioButtons.forEach(radio => {
            radio.addEventListener('change', function() {
                storeAnswer(question.id, this.value);
            });
        });
        
        updateNavigation();
    }

    // Update navigation buttons state
    function updateNavigation() {
        questionCounter.textContent = `Question ${currentQuestion + 1} of ${totalQuestions}`;
        prevBtn.disabled = currentQuestion === 0;
        
        // For single question submission, always show submit button
        nextBtn.classList.add('d-none');
        submitBtn.classList.remove('d-none');
    }

    // Store answers in localStorage
    function storeAnswer(questionId, answer) {
        const answers = JSON.parse(localStorage.getItem('quizAnswers') || '{}');
        answers[questionId] = answer;
        localStorage.setItem('quizAnswers', JSON.stringify(answers));
    }

    // Get stored answer from localStorage
    function getStoredAnswer(questionId) {
        const answers = JSON.parse(localStorage.getItem('quizAnswers') || '{}');
        return answers[questionId] || null;
    }

    // Submit quiz
    function submitQuiz() {
        const answers = JSON.parse(localStorage.getItem('quizAnswers') || {});
        const currentQuestionId = quizData[currentQuestion].id;
        
        if (!answers[currentQuestionId]) {
            quizResults.innerHTML = `<div class="alert alert-warning">Please select an answer before submitting</div>`;
            return;
        }
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...';
        
        fetch('submit_quiz.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                question_id: currentQuestionId,
                answer: answers[currentQuestionId],
                correct_answer: quizData[currentQuestion].correct_ans
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Display results
                quizResults.innerHTML = `
                    <div class="alert ${data.is_correct ? 'alert-success' : 'alert-danger'}">
                        <h4>${data.is_correct ? 'Correct!' : 'Incorrect'}</h4>
                        <p>Your answer: ${data.user_answer}</p>
                        ${!data.is_correct ? `<p>Correct answer: ${data.correct_answer}</p>` : ''}
                        <p>Points earned: ${data.points}</p>
                    </div>
                `;
                
                // Hide navigation buttons
                document.querySelector('.quiz-navigation').classList.add('d-none');
                
                // Show restart button
                restartContainer.classList.remove('d-none');
                
                // Clear stored answer for this question
                const answers = JSON.parse(localStorage.getItem('quizAnswers') || {});
                delete answers[currentQuestionId];
                localStorage.setItem('quizAnswers', JSON.stringify(answers));
            } else {
                throw new Error(data.message || 'Submission failed');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            quizResults.innerHTML = `
                <div class="alert alert-danger">
                    Failed to submit answer: ${error.message}
                </div>
            `;
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Submit Answer';
        });
    }

    // Restart quiz
    function restartQuiz() {
        // Reset UI
        quizResults.innerHTML = '';
        restartContainer.classList.add('d-none');
        document.querySelector('.quiz-navigation').classList.remove('d-none');
        
        // Reload the question
        loadQuestion(currentQuestion);
    }

    // Event listeners
    prevBtn.addEventListener('click', () => {
        if (currentQuestion > 0) {
            loadQuestion(currentQuestion - 1);
        }
    });

    nextBtn.addEventListener('click', () => {
        if (currentQuestion < totalQuestions - 1) {
            loadQuestion(currentQuestion + 1);
        }
    });

    submitBtn.addEventListener('click', submitQuiz);
    restartBtn.addEventListener('click', restartQuiz);

    // Initialize quiz
    initQuiz();
});

PK 99