myrepoes/quiz_game/static/script.js

// script.js
let currentQuestion = null;

// Utility function for making API requests
function apiRequest(url, options = {}) {
    return fetch(url, options)
        .then(response => response.json())
        .catch(error => {
            console.error('Error:', error);
            throw error;
        });
}

// Utility function for updating element text content
function updateElementText(id, text) {
    const element = document.getElementById(id);
    if (element) {
        element.textContent = text;
    }
}

// Utility function for showing/hiding elements
function toggleElementVisibility(id, show = true) {
    const element = document.getElementById(id);
    if (element) {
        element.style.display = show ? 'block' : 'none';
    }
}

function loadQuestion() {
    apiRequest('/get_question')
        .then(data => {
            if (data.game_over) {
                endGame(data.final_score);
                return;
            }
            
            currentQuestion = data;
            displayQuestion(data);
        })
        .catch(error => console.error('Error:', error));
}

function displayQuestion(data) {
    updateElementText('q-number', data.question_number);
    updateElementText('question-text', data.question);
    updateElementText('prize', data.current_prize);
    
    const optionsContainer = document.getElementById('options');
    optionsContainer.innerHTML = '';
    
    data.options.forEach((option, index) => {
        const optionElement = document.createElement('div');
        optionElement.className = 'option';
        optionElement.textContent = option;
        optionElement.onclick = () => selectAnswer(option);
        optionsContainer.appendChild(optionElement);
    });
    
    // Reset result display
    toggleElementVisibility('result', false);
    const result = document.getElementById('result');
    if (result) {
        result.className = 'result';
    }
}

function selectAnswer(answer) {
    apiRequest('/answer', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ answer: answer })
    })
    .then(data => {
        const result = document.getElementById('result');
        if (result) {
            result.style.display = 'block';
            
            if (data.correct) {
                result.textContent = 'Correct!';
                result.className = 'result correct';
                
                setTimeout(() => {
                    if (data.game_over) {
                        endGame(data.final_score);
                    } else {
                        loadQuestion();
                    }
                }, 1500);
            } else {
                result.textContent = `Wrong! Correct answer: ${data.correct_answer}`;
                result.className = 'result incorrect';
                
                setTimeout(() => {
                    endGame(data.final_score);
                }, 2000);
            }
        }
    })
    .catch(error => console.error('Error:', error));
}

function useFiftyFifty() {
    const lifelineBtn = document.querySelector('.lifeline');
    if (lifelineBtn) {
        lifelineBtn.disabled = true;
    }
    
    apiRequest('/lifeline/fifty_fifty')
        .then(data => {
            if (data.error) {
                alert(data.error);
                if (lifelineBtn) {
                    lifelineBtn.disabled = false;
                }
                return;
            }
            
            // Hide two wrong options
            const options = document.querySelectorAll('.option');
            data.remove_indices.forEach(index => {
                if (options[index]) {
                    options[index].style.display = 'none';
                }
            });
        })
        .catch(error => {
            console.error('Error:', error);
            if (lifelineBtn) {
                lifelineBtn.disabled = false;
            }
        });
}

function endGame(score) {
    updateElementText('final-prize', score);
    toggleElementVisibility('game-over', true);
    toggleElementVisibility('question-box', false);
    toggleElementVisibility('lifeline', false);
}

function restartGame() {
    window.location.href = '/start';
}

// Start the game when page loads
if (window.location.pathname === '/start') {
    loadQuestion();
}