Added astroid game

quiz_game/static/script.js

@@ -0,0 +1,149 @@
+// 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();
+}

quiz_game/static/style.css

@@ -0,0 +1,109 @@
+/* style.css */
+body {
+    font-family: Arial, sans-serif;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #f0f0f0;
+}
+
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+h1 {
+    color: #1a237e;
+    text-align: center;
+}
+
+.score {
+    text-align: center;
+    font-size: 1.2em;
+    margin: 10px 0;
+    color: #d32f2f;
+}
+
+.question-box {
+    background: #e3f2fd;
+    padding: 15px;
+    border-radius: 8px;
+    margin: 15px 0;
+}
+
+.question-number {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.question {
+    font-size: 1.1em;
+    margin-bottom: 15px;
+}
+
+.options {
+    display: grid;
+    gap: 8px;
+}
+
+.option {
+    background: #2196f3;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    text-align: center;
+}
+
+.option:hover {
+    background: #1976d2;
+}
+
+.option.correct {
+    background: #4caf50;
+}
+
+.option.wrong {
+    background: #f44336;
+}
+
+.result {
+    margin-top: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    display: none;
+}
+
+.result.correct {
+    background: #c8e6c9;
+    color: #2e7d32;
+}
+
+.result.incorrect {
+    background: #ffcdd2;
+    color: #c62828;
+}
+
+.start-btn, .lifeline {
+    background: #ff9800;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: block;
+    margin: 10px auto;
+}
+
+.lifeline:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.game-over {
+    text-align: center;
+    padding: 20px;
+}