technolyceum/ai6-m2
Template
11
0
Fork 6
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplified codes

Browse Source
This commit is contained in:
root
2025-11-27 23:17:03 +03:00
parent 42fa44c3a2
commit cae0d5b946
23 changed files with 2892 additions and 1546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,176 @@
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
✅ 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!

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

@@ -0,0 +1,83 @@
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
✅ 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!

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

@@ -0,0 +1,216 @@
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
🎉 Congratulations Inna! You built the entire game interface!

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