generated from technolyceum/ai6-m2
876 lines
37 KiB
HTML
876 lines
37 KiB
HTML
<!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> |