forked from technolyceum/ai6-m2
Updated starter pack
This commit is contained in:
@@ -369,14 +369,12 @@
|
||||
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
<pre># Prize structure (15 levels)
|
||||
PRIZE_LEVELS = [
|
||||
100, 200, 300, 500, 1000,
|
||||
2000, 4000, 8000, 16000, 32000,
|
||||
64000, 125000, 250000, 500000, 1000000
|
||||
]
|
||||
|
||||
GUARANTEED_LEVELS = [5, 10] # First and second guaranteed levels</pre>
|
||||
<pre># 1. This file should contain the game logic for the quiz game
|
||||
# TODO: Import Flask and setup the app
|
||||
# TODO: Define prize levels and guaranteed levels
|
||||
# TODO: Setup game session routes
|
||||
# TODO: Implement question serving functionality
|
||||
# TODO: Add lifeline functionality</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
@@ -419,27 +417,11 @@ def start_game():
|
||||
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
<pre>import json
|
||||
|
||||
@app.route('/get_question')
|
||||
def get_question():
|
||||
# Load questions from the JSON file
|
||||
with open('questions.json', 'r') as f:
|
||||
questions = json.load(f)
|
||||
|
||||
# Get current question number from session
|
||||
question_num = session.get('current_question', 0)
|
||||
|
||||
# Check if game is over
|
||||
if question_num >= len(questions):
|
||||
return {'game_over': True}
|
||||
|
||||
# Return the current question
|
||||
return {
|
||||
'question': questions[question_num]['question'],
|
||||
'options': questions[question_num]['options'],
|
||||
'question_number': question_num + 1
|
||||
}</pre>
|
||||
<pre># 2. This file should contain the database connection and data handling
|
||||
# TODO: Load questions from JSON file
|
||||
# TODO: Implement answer checking functionality
|
||||
# TODO: Handle lifeline requests
|
||||
# TODO: Manage game state and sessions</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
@@ -467,28 +449,12 @@ def get_question():
|
||||
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
<pre>[
|
||||
{
|
||||
"question": "What is the capital of Russia?",
|
||||
"options": [
|
||||
"St. Petersburg",
|
||||
"Moscow",
|
||||
"Kazan",
|
||||
"Novosibirsk"
|
||||
],
|
||||
"correct_answer": 1
|
||||
},
|
||||
{
|
||||
"question": "Which Russian author wrote 'War and Peace'?",
|
||||
"options": [
|
||||
"Fyodor Dostoevsky",
|
||||
"Leo Tolstoy",
|
||||
"Alexander Pushkin",
|
||||
"Anton Chekhov"
|
||||
],
|
||||
"correct_answer": 1
|
||||
}
|
||||
]</pre>
|
||||
<pre>// 1. This file should contain the basic structure of the game page
|
||||
// TODO: Create the main game container
|
||||
// TODO: Add elements for displaying questions and answers
|
||||
// TODO: Include buttons for lifelines
|
||||
// TODO: Add a game over screen
|
||||
// TODO: Link to CSS and JavaScript files</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
@@ -834,37 +800,11 @@ if (window.location.pathname === '/start') {
|
||||
|
||||
<div class="code-block">
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
<pre>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;
|
||||
}
|
||||
});
|
||||
}</pre>
|
||||
<pre>// 2. This file should contain the interactive functionality of the game
|
||||
// TODO: Implement functions to load and display questions
|
||||
// TODO: Add event handlers for answer selection
|
||||
// TODO: Implement lifeline functionality
|
||||
// TODO: Add game flow control (next question, game over)</pre>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
|
||||
876
Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html
Normal file
876
Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html
Normal file
@@ -0,0 +1,876 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Russian Millionaire Quiz Game - Comprehensive Guide</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1a237e;
|
||||
--secondary: #d32f2f;
|
||||
--accent: #ffc107;
|
||||
--light: #f5f5f5;
|
||||
--dark: #212121;
|
||||
--success: #4caf50;
|
||||
--step-bg: #f8f9fa;
|
||||
--step-border: #dee2e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--light);
|
||||
color: var(--dark);
|
||||
line-height: 1.6;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, var(--primary), #283593);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.4rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: var(--step-bg);
|
||||
padding: 1.5rem;
|
||||
border-bottom: 2px solid var(--step-border);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
background: #f9f9f9;
|
||||
border-left: 4px solid var(--primary);
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.file-structure {
|
||||
background: #fff8e1;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
margin: 0.3rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-item:before {
|
||||
content: "📄";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.folder:before {
|
||||
content: "📁";
|
||||
}
|
||||
|
||||
.code-block {
|
||||
position: relative;
|
||||
background: #2d2d2d;
|
||||
color: #f8f8f2;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
overflow-x: auto;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.code-line {
|
||||
position: relative;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
background: #e8f5e9;
|
||||
padding: 1rem;
|
||||
border-left: 4px solid var(--success);
|
||||
margin: 1rem 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.role-header {
|
||||
background: var(--step-bg);
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<div class="logo-icon">🎮</div>
|
||||
<div>
|
||||
<h1>Russian Millionaire Quiz Game</h1>
|
||||
<div class="subtitle">Comprehensive Step-by-Step Guide</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Project Overview</div>
|
||||
<div class="section-content">
|
||||
<div class="file-structure">
|
||||
<h4>Project File Structure:</h4>
|
||||
<div class="file-item folder">russian-millionaire/</div>
|
||||
<div class="file-item">app.py (Main application file)</div>
|
||||
<div class="file-item">questions.json (All quiz questions)</div>
|
||||
<div class="file-item folder">templates/</div>
|
||||
<div class="file-item">index.html (Home page)</div>
|
||||
<div class="file-item">game.html (Game screen)</div>
|
||||
<div class="file-item folder">static/</div>
|
||||
<div class="file-item">style.css (All styling)</div>
|
||||
<div class="file-item">script.js (Game interaction)</div>
|
||||
</div>
|
||||
|
||||
<div class="tip-box">
|
||||
<p><strong>Pro Tip:</strong> All project files are available at <a href="https://gitea.techshare.cc/technolyceum/ai6-m2.git" target="_blank">https://gitea.techshare.cc/technolyceum/ai6-m2.git</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Installation Instructions</div>
|
||||
<div class="section-content">
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 1</div>
|
||||
<h3>Clone the Repository</h3>
|
||||
<p>Open your terminal and run the following command to get the project files:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
git clone https://gitea.techshare.cc/technolyceum/ai6-m2.git
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 2</div>
|
||||
<h3>Navigate to Project Directory</h3>
|
||||
<p>Move into the project directory using:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
cd ai6-m2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 3</div>
|
||||
<h3>Install Requirements</h3>
|
||||
<p>Install the necessary Python packages:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
pip install -r requirements.txt
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Database Setup - Danil</div>
|
||||
<div class="section-content">
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 1</div>
|
||||
<h3>Open Database File</h3>
|
||||
<p>Navigate to the database file at:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
/Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/database-designer-danil.md
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 2</div>
|
||||
<h3>Set Up MongoDB Connection (Lines 1-5)</h3>
|
||||
<p>Add the MongoDB connection information:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// 1. Import MongoDB driver (line 1)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
from pymongo import MongoClient
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
// 2. Connect to MongoDB using the connection URI (line 3-5)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
client = MongoClient('mongodb://localhost:27017/')
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
// 3. Select the appropriate database (line 7)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
db = client['student_db']
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">9</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">10</span>
|
||||
// 4. Select the questions collection (line 9)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">11</span>
|
||||
questions_collection = db['questions']
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">12</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">13</span>
|
||||
// 5. Add error handling for database connection (line 11)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">14</span>
|
||||
try:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">15</span>
|
||||
client.admin.command('ping')
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">16</span>
|
||||
print("Successfully connected to MongoDB!")
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">17</span>
|
||||
except Exception as e:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">18</span>
|
||||
print(f"MongoDB connection error: {e}")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 3</div>
|
||||
<h3>Insert Questions into Database</h3>
|
||||
<p>Add your quiz questions to the database:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// Sample question format
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
question = {
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
// 1. Question text (line 1)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
"question": "What is the capital of Russia?",
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
// 2. Answer options (line 2-5)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
"options": ["Moscow", "St. Petersburg", "Novosibirsk", "Kazan"],
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
// 3. Correct answer index (line 6)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
"correct_answer": 0
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">9</span>
|
||||
}
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">10</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">11</span>
|
||||
// Insert question into collection (line 8)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">12</span>
|
||||
questions_collection.insert_one(question)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Backend Setup - Dima</div>
|
||||
<div class="section-content">
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 1</div>
|
||||
<h3>Open Backend File</h3>
|
||||
<p>Navigate to the backend developer documentation:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
/Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/backend-developer-dima.md
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 2</div>
|
||||
<h3>Set Up Flask Application (Lines 1-6)</h3>
|
||||
<p>Add the Flask setup code:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// 1. Import Flask and PyMongo (line 1-2)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
from flask import Flask, session, redirect, url_for, request, jsonify
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
from flask_pymongo import PyMongo
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
// 2. Connect to MongoDB database (line 4-6)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
app = Flask(__name__)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
app.config['MONGO_URI'] = 'mongodb://localhost:27017/student_db'
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
mongo = PyMongo(app)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 3</div>
|
||||
<h3>Define API Endpoints (Lines 8-14)</h3>
|
||||
<p>Add the API endpoints for getting questions and submitting answers:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// 3. Define API endpoint for getting questions (line 8-10)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
@app.route('/get_question')
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
def get_question():
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
// 1. Get current question number from session
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
question_num = session.get('current_question', 0)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
// 2. Get question from database
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
question = mongo.db.questions.find_one({"question_number": question_num})
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">9</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">10</span>
|
||||
// 3. Format response
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">11</span>
|
||||
if question:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">12</span>
|
||||
return jsonify({
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">13</span>
|
||||
"question": question['question'],
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">14</span>
|
||||
"options": question['options'],
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">15</span>
|
||||
"question_number": question_num,
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">16</span>
|
||||
"current_prize": calculate_prize(question_num)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">17</span>
|
||||
})
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">18</span>
|
||||
else:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">19</span>
|
||||
return jsonify({"game_over": True, "final_score": calculate_final_score()})
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">20</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">21</span>
|
||||
// 4. Define API endpoint for submitting answers (line 12-14)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">22</span>
|
||||
@app.route('/answer', methods=['POST'])
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">23</span>
|
||||
def answer_question():
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">24</span>
|
||||
// 1. Get user's answer
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">25</span>
|
||||
user_answer = request.json.get('answer')
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">26</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">27</span>
|
||||
// 2. Get current question
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">28</span>
|
||||
question_num = session.get('current_question', 0)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">29</span>
|
||||
current_question = mongo.db.questions.find_one({"question_number": question_num})
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">30</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">31</span>
|
||||
// 3. Check if answer is correct
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">32</span>
|
||||
is_correct = current_question['options'][current_question['correct_answer']] == user_answer
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">33</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">34</span>
|
||||
// 4. Update game state
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">35</span>
|
||||
if is_correct:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">36</span>
|
||||
session['current_question'] = question_num + 1
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">37</span>
|
||||
return jsonify({
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">38</span>
|
||||
"correct": True,
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">39</span>
|
||||
"correct_answer": current_question['correct_answer'],
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">40</span>
|
||||
"game_over": question_num + 1 >= TOTAL_QUESTIONS
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">41</span>
|
||||
})
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">42</span>
|
||||
else:
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">43</span>
|
||||
return jsonify({
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">44</span>
|
||||
"correct": False,
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">45</span>
|
||||
"correct_answer": current_question['correct_answer'],
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">46</span>
|
||||
"game_over": True
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">47</span>
|
||||
})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Frontend Setup - Inna</div>
|
||||
<div class="section-content">
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 1</div>
|
||||
<h3>Open Frontend File</h3>
|
||||
<p>Navigate to the frontend developer documentation:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
/Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/frontend-developer-inna.md
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 2</div>
|
||||
<h3>Create HTML Structure (Lines 1-5)</h3>
|
||||
<p>Add the basic HTML structure with game container:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// 1. Create HTML structure with game container (line 1-5)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
<!DOCTYPE html>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
<html lang="en">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
<head>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
<meta charset="UTF-8">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
<title>Russian Quiz</title>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
</head>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">9</span>
|
||||
<body>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">10</span>
|
||||
<div class="container">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">11</span>
|
||||
<h1>Russian Quiz</h1>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">12</span>
|
||||
<div class="score">Prize: <span id="prize">0</span> ₽</div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">13</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">14</span>
|
||||
<div class="question-box">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">15</span>
|
||||
<div class="question-number">Question <span id="q-number">1</span>/5</div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">16</span>
|
||||
<div class="question" id="question-text">Loading...</div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">17</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">18</span>
|
||||
<div class="options" id="options">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">19</span>
|
||||
<!-- Options go here -->
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">21</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 3</div>
|
||||
<h3>Add Game Controls (Lines 17-20)</h3>
|
||||
<p>Add the game control elements:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// 4. Implement game controls and lifelines (line 17-20)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
<button class="lifeline" onclick="useFiftyFifty()">50:50 Lifeline</button>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">3</span>
|
||||
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">4</span>
|
||||
<div class="result" id="result"></div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">6</span>
|
||||
// 5. Add game over screen UI (line 22-25)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">7</span>
|
||||
<div class="game-over" id="game-over" style="display: none;">
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">8</span>
|
||||
<h2>Game Over!</h2>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">9</span>
|
||||
<p>You won: <span id="final-prize">0</span> ₽</p>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">10</span>
|
||||
<button onclick="restartGame()">Play Again</button>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">11</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Final Steps</div>
|
||||
<div class="section-content">
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 1</div>
|
||||
<h3>Start MongoDB</h3>
|
||||
<p>Make sure MongoDB is running:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// Start MongoDB service
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
sudo service mongod start
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 2</div>
|
||||
<h3>Run the Application</h3>
|
||||
<p>Start the Flask application:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
// Run the app
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="line-number">2</span>
|
||||
python app.py
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">STEP 3</div>
|
||||
<h3>Access the Game</h3>
|
||||
<p>Open your browser and go to:</p>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="line-number">1</span>
|
||||
http://localhost:5000/start
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Technolyceum. All rights reserved.</p>
|
||||
<p>For support, contact: techsupport@technolyceum.cc</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
app.py
16
app.py
@@ -1,13 +1,23 @@
|
||||
from flask import Flask, render_template, request, jsonify, session
|
||||
import json
|
||||
import random
|
||||
from pymongo import MongoClient # Added MongoDB support
|
||||
|
||||
# MongoDB connection
|
||||
MONGO_URI = "mongodb://ai6s3:Student123!@localhost:27017/student_db"
|
||||
client = MongoClient(MONGO_URI)
|
||||
db = client.student_db # Connect to student_db database
|
||||
questions_collection = db.questions # Use questions collection
|
||||
|
||||
app = Flask(__name__)
|
||||
app.secret_key = 'quizimoto_secret_key'
|
||||
|
||||
# Load questions from file
|
||||
with open('questions.json', 'r') as f:
|
||||
questions_data = json.load(f)
|
||||
# Load questions from MongoDB
|
||||
try:
|
||||
questions_data = list(questions_collection.find({}))
|
||||
except Exception as e:
|
||||
print(f"Error loading questions from MongoDB: {e}")
|
||||
questions_data = [] # Fallback to empty list if database connection fails
|
||||
|
||||
# Prize structure (15 levels)
|
||||
PRIZE_LEVELS = [
|
||||
|
||||
BIN
docs/.DS_Store
vendored
BIN
docs/.DS_Store
vendored
Binary file not shown.
@@ -163,6 +163,15 @@ Notice the improvements:
|
||||
- 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
|
||||
|
||||
@@ -71,6 +71,23 @@ Requirements for new questions:
|
||||
- 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
|
||||
|
||||
@@ -213,4 +213,13 @@ Notice how they use the utility functions to simplify the code.
|
||||
☐ 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!
|
||||
5
starter_templates/app.py
Normal file
5
starter_templates/app.py
Normal file
@@ -0,0 +1,5 @@
|
||||
// 1. This file should contain the main application logic
|
||||
// TODO: Implement Flask app setup
|
||||
// TODO: Connect to MongoDB database
|
||||
// TODO: Implement game state management
|
||||
// TODO: Create API endpoints for game functionality
|
||||
5
starter_templates/docs/README.md
Normal file
5
starter_templates/docs/README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
// 1. This file should contain project structure documentation
|
||||
// TODO: Describe directory structure
|
||||
// TODO: Document file naming conventions
|
||||
// TODO: Specify documentation standards
|
||||
// TODO: Add contribution guidelines
|
||||
55
starter_templates/docs/roles/backend-developer-dima.md
Normal file
55
starter_templates/docs/roles/backend-developer-dima.md
Normal file
@@ -0,0 +1,55 @@
|
||||
// 1. This file should contain backend API documentation
|
||||
// TODO: Import Flask and PyMongo (line 1-2)
|
||||
from flask import Flask, session, redirect, url_for, request, jsonify
|
||||
from flask_pymongo import PyMongo
|
||||
|
||||
// TODO: Connect to MongoDB database (line 4-6)
|
||||
app = Flask(__name__)
|
||||
app.config['MONGO_URI'] = 'mongodb://localhost:27017/student_db'
|
||||
mongo = PyMongo(app)
|
||||
|
||||
// TODO: Define API endpoint for getting questions (line 8-10)
|
||||
@app.route('/get_question')
|
||||
def get_question():
|
||||
question_num = session.get('current_question', 0)
|
||||
question = mongo.db.questions.find_one({"question_number": question_num})
|
||||
|
||||
if question:
|
||||
return jsonify({
|
||||
"question": question['question'],
|
||||
"options": question['options'],
|
||||
"question_number": question_num,
|
||||
"current_prize": calculate_prize(question_num)
|
||||
})
|
||||
else:
|
||||
return jsonify({"game_over": True, "final_score": calculate_final_score()})
|
||||
|
||||
// TODO: Define API endpoint for submitting answers (line 12-14)
|
||||
@app.route('/answer', methods=['POST'])
|
||||
def answer_question():
|
||||
user_answer = request.json.get('answer')
|
||||
question_num = session.get('current_question', 0)
|
||||
current_question = mongo.db.questions.find_one({"question_number": question_num})
|
||||
|
||||
is_correct = current_question['options'][current_question['correct_answer']] == user_answer
|
||||
|
||||
if is_correct:
|
||||
session['current_question'] = question_num + 1
|
||||
return jsonify({
|
||||
"correct": True,
|
||||
"correct_answer": current_question['correct_answer'],
|
||||
"game_over": question_num + 1 >= TOTAL_QUESTIONS
|
||||
})
|
||||
else:
|
||||
return jsonify({
|
||||
"correct": False,
|
||||
"correct_answer": current_question['correct_answer'],
|
||||
"game_over": True
|
||||
})
|
||||
|
||||
// TODO: Add error handling for database connection (line 16-18)
|
||||
try:
|
||||
mongo.db.command("ping")
|
||||
print("Successfully connected to MongoDB!")
|
||||
except Exception as e:
|
||||
print(f"MongoDB connection error: {e}")
|
||||
19
starter_templates/docs/roles/database-designer-danil.md
Normal file
19
starter_templates/docs/roles/database-designer-danil.md
Normal file
@@ -0,0 +1,19 @@
|
||||
// 1. This file should contain database connection information
|
||||
// TODO: Import MongoDB driver (line 1)
|
||||
import pymongo
|
||||
|
||||
// TODO: Connect to MongoDB using the connection URI (line 3-5)
|
||||
client = pymongo.MongoClient("mongodb://localhost:27017/")
|
||||
|
||||
// TODO: Select the appropriate database (line 7)
|
||||
db = client["student_db"]
|
||||
|
||||
// TODO: Select the questions collection (line 9)
|
||||
questions_collection = db["questions"]
|
||||
|
||||
// TODO: Add error handling for database connection (line 11)
|
||||
try:
|
||||
client.admin.command('ping')
|
||||
print("Successfully connected to MongoDB!")
|
||||
except Exception as e:
|
||||
print(f"MongoDB connection error: {e}")
|
||||
46
starter_templates/docs/roles/frontend-developer-inna.md
Normal file
46
starter_templates/docs/roles/frontend-developer-inna.md
Normal file
@@ -0,0 +1,46 @@
|
||||
// 1. This file should contain frontend implementation instructions
|
||||
|
||||
// TODO: Create HTML structure with game container (line 1-5)
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Russian Quiz</title>
|
||||
</head>
|
||||
|
||||
// TODO: Add question display elements (line 7-10)
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Russian Quiz</h1>
|
||||
<div class="score">Prize: <span id="prize">0</span> ₽</div>
|
||||
|
||||
<div class="question-box">
|
||||
<div class="question-number">Question <span id="q-number">1</span>/5</div>
|
||||
<div class="question" id="question-text">Loading...</div>
|
||||
|
||||
<div class="options" id="options">
|
||||
<!-- Options go here -->
|
||||
</div>
|
||||
|
||||
<div class="result" id="result"></div>
|
||||
</div>
|
||||
|
||||
// TODO: Create answer option buttons (line 12-15)
|
||||
<div class="options" id="options">
|
||||
<!-- Options will be dynamically inserted here -->
|
||||
</div>
|
||||
|
||||
<button class="lifeline" onclick="useFiftyFifty()">50:50 Lifeline</button>
|
||||
|
||||
// TODO: Implement game controls and lifelines (line 17-20)
|
||||
<div class="game-over" id="game-over" style="display: none;">
|
||||
<h2>Game Over!</h2>
|
||||
<p>You won: <span id="final-prize">0</span> ₽</p>
|
||||
<button onclick="restartGame()">Play Again</button>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
</body>
|
||||
|
||||
// TODO: Add game over screen UI (line 22-25)
|
||||
// Game over screen is already included above as part of the main structure
|
||||
5
starter_templates/static/script.js
Normal file
5
starter_templates/static/script.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// 1. This file should contain the game logic
|
||||
// TODO: Implement question loading from API
|
||||
// TODO: Implement answer handling
|
||||
// TODO: Implement lifeline functionality
|
||||
// TODO: Add event listeners for game controls
|
||||
6
starter_templates/static/style.css
Normal file
6
starter_templates/static/style.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* 1. This file should contain basic styling for the game
|
||||
* TODO: Add styles for game container
|
||||
* TODO: Style question display elements
|
||||
* TODO: Style answer options
|
||||
* TODO: Add styles for game controls and lifelines
|
||||
*/
|
||||
5
starter_templates/templates/game.html
Normal file
5
starter_templates/templates/game.html
Normal file
@@ -0,0 +1,5 @@
|
||||
// 1. This file should contain game HTML structure
|
||||
// TODO: Add game container
|
||||
// TODO: Add question display elements
|
||||
// TODO: Add answer options container
|
||||
// TODO: Add game controls and lifelines buttons
|
||||
5
starter_templates/templates/index.html
Normal file
5
starter_templates/templates/index.html
Normal file
@@ -0,0 +1,5 @@
|
||||
// 1. This file should contain the main page structure
|
||||
// TODO: Add welcome message
|
||||
// TODO: Add game start button
|
||||
// TODO: Add instructions section
|
||||
// TODO: Add footer with credits
|
||||
Reference in New Issue
Block a user