Initial commit

2025-12-16 07:24:55 +00:00
commit 617378aa2b
36 changed files with 5997 additions and 0 deletions
--- a/quiz_game/docs/roles/frontend-developer-inna.md
+++ b/quiz_game/docs/roles/frontend-developer-inna.md
@@ -0,0 +1,225 @@
+INNA - FRONTEND DEVELOPER MISSION
+Your Role: Game Interface Designer | Your Files: templates/ and static/script.js
+
+💡 What You're Building: You're creating what players see and click on!
+
+📋 LESSON 1-2: SETUP & BASIC GAME FLOW
+
+Step 1: Fork and Clone (10 minutes)
+1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2
+2. Click the "Fork" button (creates your copy)
+3. Copy your forked repository URL
+4. Open Terminal and type:
+   git clone [YOUR-FORKED-URL-HERE]
+   cd ai6-m2
+   git checkout -b inna-frontend-work
+
+Step 2: Review Question Loading (15 minutes)
+Open static/script.js and look at the [loadQuestion](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L9-L19) function:
+
+```javascript
+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));
+}
+```
+
+Notice how it uses the [apiRequest](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L5-L12) utility function for cleaner code.
+
+Step 3: Review Question Display (15 minutes)
+Look at the [displayQuestion](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L21-L41) function:
+
+```javascript
+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';
+    }
+}
+```
+
+Notice the utility functions:
+- [updateElementText()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L14-L19) - Simplifies updating element text
+- [toggleElementVisibility()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L21-L27) - Standardizes showing/hiding elements
+
+📋 LESSON 3-4: ANSWER HANDLING & LIFELINES
+
+Step 4: Review Answer Selection (15 minutes)
+Check the [selectAnswer](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L43-L72) function:
+
+```javascript
+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));
+}
+```
+
+Step 5: Review Lifeline Implementation (15 minutes)
+Look at the [useFiftyFifty](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L74-L100) function:
+
+```javascript
+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;
+            }
+        });
+}
+```
+
+Notice the improvements:
+- Uses the [apiRequest](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L5-L12) utility function
+- Has proper error handling with element checks
+- Cleaner, more maintainable code
+
+Step 6: Review Utility Functions (10 minutes)
+At the top of script.js, notice the utility functions that make the code DRY:
+
+```javascript
+// 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';
+    }
+}
+```
+
+📋 LESSON 5-6: GAME FLOW COMPLETION
+
+Step 7: Review Game End and Restart (10 minutes)
+Look at the [endGame](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L102-L108) and [restartGame](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L110-L112) functions:
+
+```javascript
+function endGame(score) {
+    updateElementText('final-prize', score);
+    toggleElementVisibility('game-over', true);
+    toggleElementVisibility('question-box', false);
+    toggleElementVisibility('lifeline', false);
+}
+
+function restartGame() {
+    window.location.href = '/start';
+}
+```
+
+Notice how they use the utility functions to simplify the code.
+
+✅ INNA'S COMPLETION CHECKLIST
+☐ Review question loading implementation
+☐ Understand question display logic
+☐ Review answer handling process
+☐ Understand lifeline implementation
+☐ Recognize utility functions for DRY code
+☐ Review game flow completion
+☐ All code pushed to your branch
+☐ Created Pull Request for teacher to review
+
+## Connection Requirements
+
+The frontend communicates with the backend API, which must be properly configured with the MongoDB connection string:
+```python
+MONGO_URI = "mongodb://ai6s3:Student123!@localhost:27017/student_db"
+```
+
+Ensure the backend developer has correctly configured this connection string in the application's configuration.
+
+🎉 Congratulations Inna! You built the entire game interface!