ai6s10/myrepos
Template
1
0
Fork 0
generated from technolyceum/ai6-m2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ai6s10
2025-12-16 07:13:50 +00:00
commit ad6af5360c
36 changed files with 6011 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
quiz_game/docs/.DS_Store vendored Normal file
View File

Binary file not shown.

19
quiz_game/docs/README.md Normal file
View File

@@ -0,0 +1,19 @@
# Project Documentation
This directory contains all the documentation for the Millionaire Quiz Game project.
## Structure
- [/roles](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles) - Role-specific instructions and guidelines for team members
- [/technical-specs](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/technical-specs) - Technical specifications and architecture documents
## Role Documentation
Each team member has their own instruction file:
- [Frontend Developer (Inna)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/frontend-developer-inna.md)
- [Backend Developer (Dima)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/backend-developer-dima.md)
- [Database Designer (Danil)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/database-designer-danil.md)
- [Graphics Designer (Artyom)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/graphics-designer-artyom.md)
These documents contain step-by-step instructions for implementing various parts of the application.

185
quiz_game/docs/roles/backend-developer-dima.md Normal file
View File

@@ -0,0 +1,185 @@
DIMA - BACKEND DEVELOPER MISSION
Your Role: Game Brain Developer | Your File: app.py
💡 What You're Building: You're creating the "brain" of the game - all the rules, scoring, and game logic!
📋 LESSON 1-2: SETUP & PRIZE SYSTEM
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 dima-backend-work
Step 2: Create the Prize Money System (20 minutes)
Open app.py and find these lines around line 13:
# Prize structure (15 levels)
PRIZE_LEVELS = [
100, 200, 300, 500, 1000,
2000, 4000, 8000, 16000, 32000,
64000, 125000, 250000, 500000, 1000000
]
This is already implemented! Notice how the prizes increase as the player progresses through the questions.
Step 3: Review Game Session Management (15 minutes)
Look at the [start_game](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L42-L48) function (around line 42):
```python
@app.route('/start')
def start_game():
# Initialize game session
session['score'] = 0
session['current_question'] = 0
session['lifelines'] = ['fifty_fifty']
session['questions'] = random.sample(questions_data, min(15, len(questions_data)))
return render_template('game.html')
```
This function initializes the game session with:
- Starting score of 0
- Current question index of 0
- One lifeline available: fifty_fifty
- A random selection of up to 15 questions from the database
📋 LESSON 3-4: QUESTION RETRIEVAL & ANSWER VALIDATION
Step 4: Review Question Retrieval (15 minutes)
Check the [get_question](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L50-L66) function (around line 50):
```python
@app.route('/get_question')
def get_question():
current_q_index = session.get('current_question', 0)
# Check if game is over
if current_q_index >= min(15, len(session.get('questions', []))):
return jsonify({
"game_over": True,
"final_score": session.get('score', 0)
})
question_data = session['questions'][current_q_index]
return jsonify({
"question_number": current_q_index + 1,
"question": question_data['question'],
"options": question_data['options'],
"current_prize": PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else 1000000,
"game_over": False
})
```
This function retrieves the current question and formats it for the frontend.
Step 5: Review Answer Validation (20 minutes)
Look at the [check_answer](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L68-L103) function (around line 68):
```python
@app.route('/answer', methods=['POST'])
def check_answer():
data = request.get_json()
answer = data.get('answer', '')
question_info = get_current_question()
if not question_info:
return jsonify({"error": "No more questions"})
question_data, current_q_index = question_info
correct = answer == question_data['correct_answer']
if correct:
session['current_question'] = current_q_index + 1
session['score'] = PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else session.get('score', 0)
# Check if game is won (15th question answered correctly)
game_won = session['current_question'] >= min(15, len(session.get('questions', [])))
return jsonify({
"correct": True,
"correct_answer": question_data['correct_answer'],
"final_score": session['score'],
"game_over": game_won
})
else:
# Game over with last guaranteed prize
final_score = calculate_guaranteed_prize(current_q_index)
return jsonify({
"correct": False,
"correct_answer": question_data['correct_answer'],
"final_score": final_score,
"game_over": True
})
```
Notice the helper functions:
- [get_current_question()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L20-L28) - Gets the current question data from session
- [calculate_guaranteed_prize()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L30-L37) - Calculates prize based on guaranteed levels
📋 LESSON 5-6: LIFELINES & REFACTORING
Step 6: Review Lifeline Implementation (15 minutes)
Check the [use_lifeline](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L105-L133) function (around line 105):
```python
@app.route('/lifeline/<lifeline_name>')
def use_lifeline(lifeline_name):
if lifeline_name != 'fifty_fifty':
return jsonify({"error": "Unknown lifeline"})
if 'fifty_fifty' not in session.get('lifelines', []):
return jsonify({"error": "Lifeline already used"})
question_info = get_current_question()
if not question_info:
return jsonify({"error": "No current question"})
# Remove the lifeline from available lifelines
session['lifelines'].remove('fifty_fifty')
question_data, _ = question_info
correct_answer = question_data['correct_answer']
options = question_data['options']
# Find indices of wrong answers to remove (we need to remove 2)
wrong_indices = [i for i, option in enumerate(options) if option != correct_answer]
# Randomly select 2 wrong indices to remove
indices_to_remove = random.sample(wrong_indices, min(2, len(wrong_indices)))
indices_to_remove.sort(reverse=True) # Sort in descending order for safe removal
return jsonify({
"remove_indices": indices_to_remove
})
```
Notice the improvements:
- Uses list comprehension for finding wrong indices
- Uses helper functions to reduce code duplication
- Has clear error handling
## Database Configuration
The application should connect to the MongoDB database using the following connection string:
```python
MONGO_URI = "mongodb://ai6s3:Student123!@localhost:27017/student_db"
```
This connection string should be set in the application's configuration file or environment variables.
✅ DIMA'S COMPLETION CHECKLIST
☐ Understand the prize system structure
☐ Review game session initialization
☐ Understand question retrieval logic
☐ Review answer validation process
☐ Understand lifeline implementation
☐ Recognize the use of helper functions for DRY code
☐ All code pushed to your branch
☐ Created Pull Request for teacher to review
🎉 Congratulations Dima! You built the entire game backend!

100
quiz_game/docs/roles/database-designer-danil.md Normal file
View File

@@ -0,0 +1,100 @@
DANIL - DATABASE DESIGNER MISSION
Your Role: Question Master | Your File: questions.json
💡 What You're Building: You're creating all the quiz questions about Russian culture!
📋 LESSON 1-2: SETUP & BASIC QUESTIONS
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 danil-database-work
Step 2: Review the Question Format (10 minutes)
Open questions.json and look at the example:
```json
[
{
"question": "What is the capital of Russia?",
"options": ["St. Petersburg", "Moscow", "Kazan", "Sochi"],
"correct_answer": "Moscow"
},
{
"question": "Which Russian author wrote 'War and Peace'?",
"options": ["Dostoevsky", "Tolstoy", "Pushkin", "Chekhov"],
"correct_answer": "Tolstoy"
}
]
```
Each question needs:
- question: The actual question text
- options: 4 possible answers (A, B, C, D)
- correct_answer: The right answer (must match exactly one of the options)
Step 3: Understand the Current Implementation (15 minutes)
Notice that the current implementation:
- Has properly formatted JSON (no comments)
- Has 5 sample questions about Russian culture
- Follows the correct structure for integration with the backend
📋 LESSON 3-4: EXPANDING THE DATABASE
Step 4: Add More Questions (30 minutes)
Add at least 10 more questions to reach a total of 15. Here are some examples:
```json
{
"question": "What is the traditional Russian soup made with beets?",
"options": ["Shchi", "Borscht", "Solyanka", "Ukha"],
"correct_answer": "Borscht"
},
{
"question": "Which Russian ruler was known as 'The Terrible'?",
"options": ["Peter I", "Catherine II", "Ivan IV", "Nicholas II"],
"correct_answer": "Ivan IV"
},
{
"question": "What is the name of the famous Russian ballet company?",
"options": ["Moscow Ballet", "St. Petersburg Ballet", "Bolshoi Ballet", "Russian National Ballet"],
"correct_answer": "Bolshoi Ballet"
}
```
Requirements for new questions:
- Make sure questions cover different aspects of Russian culture (history, literature, food, arts, geography)
- Ensure plausible wrong answers that are not obviously incorrect
- Verify that the correct_answer exactly matches one of the options
## MongoDB Connection Instructions
To connect to the MongoDB database:
- URL: `mongodb://ai6s3:Student123!@localhost:27017/student_db`
- Username: `ai6s3`
- Password: `Student123!`
- Database: `student_db`
To import your JSON data:
1. Save your JSON data in a file named `data.json`
2. Run the following command in terminal:
```bash
mongoimport --uri="mongodb://ai6s3:Student123!@localhost:27017/student_db" --collection=questions --type=json --file=data.json --jsonArray
```
Make sure your JSON data format matches the expected schema for the application.
✅ DANIL'S COMPLETION CHECKLIST
☐ Understand the question format
☐ Review current implementation
☐ Add 10+ more questions about Russian culture
☐ Verify all questions follow the correct structure
☐ Check that correct_answer matches exactly one option
☐ All code pushed to your branch
☐ Created Pull Request for teacher to review
🎉 Congratulations Danil! You built the entire question database!

225
quiz_game/docs/roles/frontend-developer-inna.md Normal file
View File

@@ -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!

319
quiz_game/docs/roles/graphics-designer-artyom.md Normal file
View File

@@ -0,0 +1,319 @@
ARTYOM - GRAPHICS DESIGNER MISSION
Your Role: Visual Designer | Your File: static/style.css
💡 What You're Building: You're making the game look amazing with Russian themes!
📋 LESSON 1-2: SETUP & RUSSIAN COLOR THEME
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 artyom-graphics-work
Step 2: Enhance the Russian Color Theme (30 minutes)
Open static/style.css and find the body section.
DELETE these lines:
body {
background: #1a2a6c;
color: white;
min-height: 100vh;
padding: 20px;
}
TYPE THIS instead:
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
padding: 20px;
font-family: 'Arial', 'Helvetica', sans-serif;
}
Step 3: Make the Header Look Russian (20 minutes)
Find the header section.
DELETE these lines:
header {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: #b21f1f;
border-radius: 8px;
}
TYPE THIS instead:
/* Keep container styling from current implementation */
.container {
background: rgba(255, 255, 255, 0.9);
color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 15px 0;
}
h1 {
color: #1a237e;
text-align: center;
font-size: 2.5rem;
margin: 20px 0;
}
Save and push:
git add static/style.css
git commit -m "feat: enhanced Russian color theme"
git push origin artyom-graphics-work
📋 LESSON 3-4: GAME ELEMENTS STYLING
Step 4: Style the Question Container (25 minutes)
Find the question-container section.
DELETE these lines:
.question-box {
background: rgba(255, 255, 255, 0.9);
color: #333;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.question {
font-size: 1.4rem;
margin-bottom: 15px;
text-align: center;
font-weight: bold;
}
TYPE THIS instead:
.question-container {
background: rgba(255, 255, 255, 0.15);
padding: 25px;
border-radius: 15px;
margin-bottom: 25px;
border: 1px solid rgba(253, 187, 45, 0.3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
}
.question {
font-size: 1.4rem;
margin-bottom: 25px;
text-align: center;
font-weight: bold;
color: #fdbb2d;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.question-number {
color: #fdbb2d;
font-size: 1.1rem;
margin-bottom: 15px;
text-align: center;
font-weight: bold;
}
Step 5: Make Answer Buttons Beautiful (25 minutes)
Find the option styling.
DELETE these lines:
.option {
background: #2196f3;
color: white;
padding: 12px;
border-radius: 5px;
cursor: pointer;
text-align: center;
margin: 5px 0;
transition: background 0.3s;
font-weight: bold;
}
.option:hover {
background: #1976d2;
}
.option.correct {
background: #4caf50;
}
.option.wrong {
background: #f44336;
}
TYPE THIS instead:
.option {
background: linear-gradient(135deg, #fdbb2d, #e6a923);
color: #1a2a6c;
padding: 18px;
border-radius: 10px;
cursor: pointer;
text-align: center;
font-weight: bold;
border: 2px solid #1a2a6c;
transition: all 0.3s ease;
font-size: 1.1rem;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.option:hover {
background: linear-gradient(135deg, #e6a923, #fdbb2d);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.option:active {
transform: translateY(1px);
}
Save and push:
git add static/style.css
git commit -m "feat: enhanced question and option styling"
git push origin artyom-graphics-work
📋 LESSON 5-6: LIFELINES & FINAL TOUCHES
Step 6: Style Lifelines and Game Over Screen (40 minutes)
Find the lifelines section.
DELETE these lines:
.lifelines {
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 8px;
}
.lifeline-buttons {
display: flex;
gap: 10px;
justify-content: center;
}
.lifeline-btn {
background: #1a2a6c;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
TYPE THIS instead:
.result.correct {
background: #c8e6c9;
color: #2e7d32;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.result.incorrect {
background: #ffcdd2;
color: #c62828;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.lifeline {
background: #ff9800;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 15px auto;
font-weight: bold;
transition: background 0.3s;
}
.lifeline:hover {
background: #f57c00;
}
.lifeline:disabled {
background: #ccc;
cursor: not-allowed;
}
Step 7: Make Game Over Screen Epic (20 minutes)
Find the game-over-screen section.
DELETE these lines:
.game-over-screen {
text-align: center;
padding: 30px;
}
TYPE THIS instead:
.game-over-screen {
text-align: center;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 15px 0;
}
.game-over-screen h2 {
color: #d32f2f;
font-size: 2rem;
margin-bottom: 15px;
}
.game-over-screen p {
font-size: 1.2rem;
margin-bottom: 20px;
color: #333;
}
.game-over-screen button {
background: #d32f2f;
color: white;
border: none;
padding: 12px 24px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
.game-over-screen button:hover {
background: #b71c1c;
}
Final push:
git add static/style.css
git commit -m "feat: completed Russian-themed visual design"
git push origin artyom-graphics-work
✅ ARTYOM'S COMPLETION CHECKLIST
☐ Russian flag colors used throughout (white, blue, red, gold)
☐ Gradient backgrounds look professional
☐ Buttons have hover effects and animations
☐ Game elements have shadows and borders
☐ Text is readable with good contrast
☐ Game over screen looks exciting
☐ All code pushed to your branch
☐ Created Pull Request for teacher to review
🎉 Congratulations Artyom! You made the game look amazing!

262
quiz_game/docs/technical-specs/teacher-project-guide.md Normal file
View File

@@ -0,0 +1,262 @@
# Teacher - Complete Project Manager Guide
## YOUR ROLES:
- Team Lead - Guide students through development
- Git Master - Manage repositories and merges
- User Tester - Verify all components work
- Integration Manager - Combine all student work
## PROJECT TIMELINE (6 Lessons)
=========================================
## LESSON 1-2: SETUP & FOUNDATION
=========================================
### STUDENT GOALS:
- Dima: Implement prize money system and game logic in app.py
- Danil: Create first 5 Russian culture questions
- Inna: Make basic question loading and display work
- Artyom: Start Russian color theme in CSS
### TEACHER TASKS:
✅ Setup Verification:
1. Ensure main repo is ready:
https://gitea.techshare.cc/technolyceum/ai6-m2
2. Verify all students have:
- Forked the repository
- Created their role-specific branch
- Made first commit
3. Quick Progress Check (Terminal):
```bash
# Check each student's fork manually in Gitea web interface
# Look for 4 branches:
# - dima-backend-work
# - inna-frontend-work
# - danil-database-work
# - artyom-graphics-work
```
✅ Individual Progress Checks:
```bash
# Temporary check for each student:
git clone [STUDENT-FORK-URL] temp-check
cd temp-check
git checkout [THEIR-BRANCH]
# Dima Check:
grep -A 15 "PRIZE_LEVELS" app.py
# Danil Check:
python3 -c "import json; print('Questions:', len(json.load(open('questions.json'))))"
# Inna Check:
grep -c "function" static/script.js
# Artyom Check:
grep -c "background" static/style.css
cd ..
rm -rf temp-check
```
=========================================
## LESSON 3-4: CORE DEVELOPMENT
=========================================
### STUDENT GOALS:
- Dima: Complete game session management and answer validation
- Danil: 10+ questions completed
- Inna: Answer handling system and lifelines
- Artyom: Enhanced question/option styling
### TEACHER TASKS:
✅ Code Review Workshop:
Show examples of DRY (Don't Repeat Yourself) principles:
**Before (repetitive code):**
```javascript
document.getElementById('q-number').textContent = data.question_number;
document.getElementById('question-text').textContent = data.question;
document.getElementById('prize').textContent = data.current_prize;
```
**After (DRY code with utility functions):**
```javascript
updateElementText('q-number', data.question_number);
updateElementText('question-text', data.question);
updateElementText('prize', data.current_prize);
```
✅ Git Workshop:
```bash
# Help students resolve merge conflicts:
git fetch origin
git checkout main
git pull origin main
git checkout [THEIR-BRANCH]
git merge main
# If conflicts occur:
# 1. Edit conflicted files
# 2. Remove conflict markers
# 3. git add .
# 4. git commit
```
=========================================
## LESSON 5-6: INTEGRATION & TESTING
=========================================
### STUDENT GOALS:
- Dima: Finalize lifelines and error handling
- Danil: Complete 15 questions with difficulty progression
- Inna: Complete game flow and end game screens
- Artyom: Polish all visual elements and animations
### FINAL INTEGRATION:
✅ Integration Steps:
1. Merge all branches to main:
```bash
# On main branch:
git merge dima-backend-work
git merge danil-database-work
git merge inna-frontend-work
git merge artyom-graphics-work
```
2. Resolve any conflicts
3. Test complete game flow:
- Start game from index.html
- Play through all questions
- Test lifelines
- Verify scoring system
- Check end game states
✅ Final Testing Checklist:
- [ ] All 15 questions load correctly
- [ ] Answer validation works
- [ ] Scoring system functions properly
- [ ] Lifelines function correctly
- [ ] Game over states work (win/lose)
- [ ] Restart functionality works
- [ ] Responsive design on different screens
- [ ] No console errors in browser
=========================================
## PROJECT ARCHITECTURE OVERVIEW
=========================================
### File Structure:
```
/ai6-m2
├── app.py # Flask backend (Dima)
├── questions.json # Question database (Danil)
├── static/
│ ├── script.js # Frontend logic (Inna)
│ └── style.css # Styling (Artyom)
├── templates/
│ ├── index.html # Landing page
│ └── game.html # Game interface
├── docs/
│ ├── roles/ # Role-specific instructions
│ └── technical-specs/ # Technical documentation
└── README.md # Project overview
```
### Technical Implementation:
**Backend (app.py):**
- Flask routes for game operations
- Session management for game state
- JSON data handling for questions
- Helper functions for DRY code
**Frontend (script.js):**
- API communication with backend
- DOM manipulation for game interface
- Utility functions for common operations
- Event handling for user interactions
**Database (questions.json):**
- JSON format for easy parsing
- Structured question data with options
- Correct answer validation
**Styling (style.css):**
- Responsive design principles
- Russian-themed color scheme
- Component-based styling approach
=========================================
## TROUBLESHOOTING GUIDE
=========================================
### Common Issues and Solutions:
1. **"TypeError: Cannot read properties of undefined"**
- Usually caused by API returning error instead of data
- Solution: Check backend implementation and JSON formatting
2. **Lifelines not working**
- Check session management for lifeline state
- Verify frontend-backend communication
3. **Scoring issues**
- Verify prize structure in backend
- Check guaranteed level calculations
4. **Git merge conflicts**
- Use systematic approach to resolve conflicts
- Communicate with team members about changes
### Verification Commands:
```bash
# Run the application
export FLASK_APP=app.py
python -m flask run
# Check for syntax errors
python -m py_compile app.py
npx eslint static/script.js
# Validate JSON
python -m json.tool questions.json
```
=========================================
## ASSESSMENT CRITERIA
=========================================
### Technical Skills:
- Code quality and organization (20%)
- Implementation of requirements (30%)
- Problem-solving and debugging (20%)
- Git usage and collaboration (15%)
- Documentation and comments (15%)
### Collaboration:
- Team communication
- Code review participation
- Helpfulness to teammates
- Integration contribution
### Final Product:
- Game functions without errors
- All features implemented
- Visually appealing interface
- Good user experience
🎉 Congratulations on completing the Russian Millionaire Quiz Game project!