From dd33d45f4695c3a58155f6841bdfbe1bf5292301 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 28 Nov 2025 10:58:38 +0300 Subject: [PATCH] Updated starter pack --- ..._Game_Project-Student Learning_Portal.html | 104 +-- ...ionaire_Quiz_Game_Comprehensive_Guide.html | 876 ++++++++++++++++++ app.py | 16 +- docs/.DS_Store | Bin 6148 -> 6148 bytes docs/roles/backend-developer-dima.md | 9 + docs/roles/database-designer-danil.md | 17 + docs/roles/frontend-developer-inna.md | 9 + starter_templates/app.py | 5 + starter_templates/docs/README.md | 5 + .../docs/roles/backend-developer-dima.md | 55 ++ .../docs/roles/database-designer-danil.md | 19 + .../docs/roles/frontend-developer-inna.md | 46 + starter_templates/static/script.js | 5 + starter_templates/static/style.css | 6 + starter_templates/templates/game.html | 5 + starter_templates/templates/index.html | 5 + 16 files changed, 1097 insertions(+), 85 deletions(-) create mode 100644 Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html create mode 100644 starter_templates/app.py create mode 100644 starter_templates/docs/README.md create mode 100644 starter_templates/docs/roles/backend-developer-dima.md create mode 100644 starter_templates/docs/roles/database-designer-danil.md create mode 100644 starter_templates/docs/roles/frontend-developer-inna.md create mode 100644 starter_templates/static/script.js create mode 100644 starter_templates/static/style.css create mode 100644 starter_templates/templates/game.html create mode 100644 starter_templates/templates/index.html diff --git a/Quiz_Game_Project-Student Learning_Portal.html b/Quiz_Game_Project-Student Learning_Portal.html index 8473533..325d8b8 100644 --- a/Quiz_Game_Project-Student Learning_Portal.html +++ b/Quiz_Game_Project-Student Learning_Portal.html @@ -369,14 +369,12 @@
- 
# 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
+ 
# 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
@@ -419,27 +417,11 @@ def start_game():
- 
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
-    }
+ 
# 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
@@ -467,28 +449,12 @@ def get_question():
- 
[
-  {
-    "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
-  }
-]
+ 
// 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
@@ -834,37 +800,11 @@ if (window.location.pathname === '/start') {
- 
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;
-            }
-        });
-}
+ 
// 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)
diff --git a/Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html b/Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html new file mode 100644 index 0000000..e62436e --- /dev/null +++ b/Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html @@ -0,0 +1,876 @@ + + + + + + Russian Millionaire Quiz Game - Comprehensive Guide + + + +
+
+ +
+ +
+
Project Overview
+
+
+

Project File Structure:

+
russian-millionaire/
+
app.py (Main application file)
+
questions.json (All quiz questions)
+
templates/
+
index.html (Home page)
+
game.html (Game screen)
+
static/
+
style.css (All styling)
+
script.js (Game interaction)
+
+ +
+

Pro Tip: All project files are available at https://gitea.techshare.cc/technolyceum/ai6-m2.git

+
+
+
+ +
+
Installation Instructions
+
+
+
STEP 1
+

Clone the Repository

+

Open your terminal and run the following command to get the project files:

+
+
+ 1 + git clone https://gitea.techshare.cc/technolyceum/ai6-m2.git +
+
+
+ +
+
STEP 2
+

Navigate to Project Directory

+

Move into the project directory using:

+
+
+ 1 + cd ai6-m2 +
+
+
+ +
+
STEP 3
+

Install Requirements

+

Install the necessary Python packages:

+
+
+ 1 + pip install -r requirements.txt +
+
+
+
+
+ +
+
Database Setup - Danil
+
+
+
STEP 1
+

Open Database File

+

Navigate to the database file at:

+
+
+ 1 + /Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/database-designer-danil.md +
+
+
+ +
+
STEP 2
+

Set Up MongoDB Connection (Lines 1-5)

+

Add the MongoDB connection information:

+
+
+ 1 + // 1. Import MongoDB driver (line 1) +
+
+ 2 + from pymongo import MongoClient +
+
+ 3 + +
+
+ 4 + // 2. Connect to MongoDB using the connection URI (line 3-5) +
+
+ 5 + client = MongoClient('mongodb://localhost:27017/') +
+
+ 6 + +
+
+ 7 + // 3. Select the appropriate database (line 7) +
+
+ 8 + db = client['student_db'] +
+
+ 9 + +
+
+ 10 + // 4. Select the questions collection (line 9) +
+
+ 11 + questions_collection = db['questions'] +
+
+ 12 + +
+
+ 13 + // 5. Add error handling for database connection (line 11) +
+
+ 14 + try: +
+
+ 15 + client.admin.command('ping') +
+
+ 16 + print("Successfully connected to MongoDB!") +
+
+ 17 + except Exception as e: +
+
+ 18 + print(f"MongoDB connection error: {e}") +
+
+
+ +
+
STEP 3
+

Insert Questions into Database

+

Add your quiz questions to the database:

+
+
+ 1 + // Sample question format +
+
+ 2 + question = { +
+
+ 3 + // 1. Question text (line 1) +
+
+ 4 + "question": "What is the capital of Russia?", +
+
+ 5 + // 2. Answer options (line 2-5) +
+
+ 6 + "options": ["Moscow", "St. Petersburg", "Novosibirsk", "Kazan"], +
+
+ 7 + // 3. Correct answer index (line 6) +
+
+ 8 + "correct_answer": 0 +
+
+ 9 + } +
+
+ 10 + +
+
+ 11 + // Insert question into collection (line 8) +
+
+ 12 + questions_collection.insert_one(question) +
+
+
+
+
+ +
+
Backend Setup - Dima
+
+
+
STEP 1
+

Open Backend File

+

Navigate to the backend developer documentation:

+
+
+ 1 + /Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/backend-developer-dima.md +
+
+
+ +
+
STEP 2
+

Set Up Flask Application (Lines 1-6)

+

Add the Flask setup code:

+
+
+ 1 + // 1. Import Flask and PyMongo (line 1-2) +
+
+ 2 + from flask import Flask, session, redirect, url_for, request, jsonify +
+
+ 3 + from flask_pymongo import PyMongo +
+
+ 4 + +
+
+ 5 + // 2. Connect to MongoDB database (line 4-6) +
+
+ 6 + app = Flask(__name__) +
+
+ 7 + app.config['MONGO_URI'] = 'mongodb://localhost:27017/student_db' +
+
+ 8 + mongo = PyMongo(app) +
+
+
+ +
+
STEP 3
+

Define API Endpoints (Lines 8-14)

+

Add the API endpoints for getting questions and submitting answers:

+
+
+ 1 + // 3. Define API endpoint for getting questions (line 8-10) +
+
+ 2 + @app.route('/get_question') +
+
+ 3 + def get_question(): +
+
+ 4 + // 1. Get current question number from session +
+
+ 5 + question_num = session.get('current_question', 0) +
+
+ 6 + +
+
+ 7 + // 2. Get question from database +
+
+ 8 + question = mongo.db.questions.find_one({"question_number": question_num}) +
+
+ 9 + +
+
+ 10 + // 3. Format response +
+
+ 11 + if question: +
+
+ 12 + return jsonify({ +
+
+ 13 + "question": question['question'], +
+
+ 14 + "options": question['options'], +
+
+ 15 + "question_number": question_num, +
+
+ 16 + "current_prize": calculate_prize(question_num) +
+
+ 17 + }) +
+
+ 18 + else: +
+
+ 19 + return jsonify({"game_over": True, "final_score": calculate_final_score()}) +
+
+ 20 + +
+
+ 21 + // 4. Define API endpoint for submitting answers (line 12-14) +
+
+ 22 + @app.route('/answer', methods=['POST']) +
+
+ 23 + def answer_question(): +
+
+ 24 + // 1. Get user's answer +
+
+ 25 + user_answer = request.json.get('answer') +
+
+ 26 + +
+
+ 27 + // 2. Get current question +
+
+ 28 + question_num = session.get('current_question', 0) +
+
+ 29 + current_question = mongo.db.questions.find_one({"question_number": question_num}) +
+
+ 30 + +
+
+ 31 + // 3. Check if answer is correct +
+
+ 32 + is_correct = current_question['options'][current_question['correct_answer']] == user_answer +
+
+ 33 + +
+
+ 34 + // 4. Update game state +
+
+ 35 + if is_correct: +
+
+ 36 + session['current_question'] = question_num + 1 +
+
+ 37 + return jsonify({ +
+
+ 38 + "correct": True, +
+
+ 39 + "correct_answer": current_question['correct_answer'], +
+
+ 40 + "game_over": question_num + 1 >= TOTAL_QUESTIONS +
+
+ 41 + }) +
+
+ 42 + else: +
+
+ 43 + return jsonify({ +
+
+ 44 + "correct": False, +
+
+ 45 + "correct_answer": current_question['correct_answer'], +
+
+ 46 + "game_over": True +
+
+ 47 + }) +
+
+
+
+
+ +
+
Frontend Setup - Inna
+
+
+
STEP 1
+

Open Frontend File

+

Navigate to the frontend developer documentation:

+
+
+ 1 + /Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/starter_templates/docs/roles/frontend-developer-inna.md +
+
+
+ +
+
STEP 2
+

Create HTML Structure (Lines 1-5)

+

Add the basic HTML structure with game container:

+
+
+ 1 + // 1. Create HTML structure with game container (line 1-5) +
+
+ 2 + +
+
+ 3 + +
+
+ 4 + +
+
+ 5 + +
+
+ 6 + Russian Quiz +
+
+ 7 + +
+
+ 8 + +
+
+ 9 + +
+
+ 10 +
+
+
+ 11 +

Russian Quiz

+
+
+ 12 +
Prize: 0 ₽
+
+
+ 13 + +
+
+ 14 +
+
+
+ 15 +
Question 1/5
+
+
+ 16 +
Loading...
+
+
+ 17 + +
+
+ 18 +
+
+
+ 19 + +
+
+ 20 +
+
+
+ 21 +
+
+
+
+ +
+
STEP 3
+

Add Game Controls (Lines 17-20)

+

Add the game control elements:

+
+
+ 1 + // 4. Implement game controls and lifelines (line 17-20) +
+
+ 2 + +
+
+ 3 + +
+
+ 4 +
+
+
+ 5 +
+
+
+ 6 + // 5. Add game over screen UI (line 22-25) +
+
+ 7 + +
+ 8 +

Game Over!

+
+
+ 9 +

You won: 0 ₽

+
+
+ 10 + +
+
+ 11 +
+
+
+
+
+
+ +
+
Final Steps
+
+
+
STEP 1
+

Start MongoDB

+

Make sure MongoDB is running:

+
+
+ 1 + // Start MongoDB service +
+
+ 2 + sudo service mongod start +
+
+
+ +
+
STEP 2
+

Run the Application

+

Start the Flask application:

+
+
+ 1 + // Run the app +
+
+ 2 + python app.py +
+
+
+ +
+
STEP 3
+

Access the Game

+

Open your browser and go to:

+
+
+ 1 + http://localhost:5000/start +
+
+
+
+
+ +
+

© 2025 Technolyceum. All rights reserved.

+

For support, contact: techsupport@technolyceum.cc

+
+
+ + \ No newline at end of file diff --git a/app.py b/app.py index 0fc17dc..4183bd8 100644 --- a/app.py +++ b/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 = [ diff --git a/docs/.DS_Store b/docs/.DS_Store index a565689de842ae81156e4c0d241fcd5c1365fdf0..5b8e43425130f01cc048f98210719d9f3fadaad4 100644 GIT binary patch delta 155 zcmZoMXfc=|&e%S&P>hv>fq{WzVxfo(6OaJ{AexbZL4bjwIHfo_Cn-NahjC(|h6PBR zm7$0spCN}K6-f>#%+F8)6iQ~uV8~<01k#B>CAtj73DIVUMUKL;qvz`z7185lrnfLMS5 pA;0mW8T-Ts`J34}1UMK~H(vbCJeglaQ4pju0ZCWGW=E03%m6wL7mEM@ diff --git a/docs/roles/backend-developer-dima.md b/docs/roles/backend-developer-dima.md index ac25990..49ee568 100644 --- a/docs/roles/backend-developer-dima.md +++ b/docs/roles/backend-developer-dima.md @@ -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 diff --git a/docs/roles/database-designer-danil.md b/docs/roles/database-designer-danil.md index 7514241..121c5c7 100644 --- a/docs/roles/database-designer-danil.md +++ b/docs/roles/database-designer-danil.md @@ -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 diff --git a/docs/roles/frontend-developer-inna.md b/docs/roles/frontend-developer-inna.md index 7b8526d..94ef866 100644 --- a/docs/roles/frontend-developer-inna.md +++ b/docs/roles/frontend-developer-inna.md @@ -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! \ No newline at end of file diff --git a/starter_templates/app.py b/starter_templates/app.py new file mode 100644 index 0000000..8c447e2 --- /dev/null +++ b/starter_templates/app.py @@ -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 \ No newline at end of file diff --git a/starter_templates/docs/README.md b/starter_templates/docs/README.md new file mode 100644 index 0000000..f8b660f --- /dev/null +++ b/starter_templates/docs/README.md @@ -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 \ No newline at end of file diff --git a/starter_templates/docs/roles/backend-developer-dima.md b/starter_templates/docs/roles/backend-developer-dima.md new file mode 100644 index 0000000..273a1e8 --- /dev/null +++ b/starter_templates/docs/roles/backend-developer-dima.md @@ -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}") \ No newline at end of file diff --git a/starter_templates/docs/roles/database-designer-danil.md b/starter_templates/docs/roles/database-designer-danil.md new file mode 100644 index 0000000..2e99dd2 --- /dev/null +++ b/starter_templates/docs/roles/database-designer-danil.md @@ -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}") \ No newline at end of file diff --git a/starter_templates/docs/roles/frontend-developer-inna.md b/starter_templates/docs/roles/frontend-developer-inna.md new file mode 100644 index 0000000..070178c --- /dev/null +++ b/starter_templates/docs/roles/frontend-developer-inna.md @@ -0,0 +1,46 @@ +// 1. This file should contain frontend implementation instructions + +// TODO: Create HTML structure with game container (line 1-5) + + + + + Russian Quiz + + +// TODO: Add question display elements (line 7-10) + +
+

Russian Quiz

+
Prize: 0 ₽
+ +
+
Question 1/5
+
Loading...
+ +
+ +
+ +
+
+ +// TODO: Create answer option buttons (line 12-15) +
+ +
+ + + +// TODO: Implement game controls and lifelines (line 17-20) + + + + + +// TODO: Add game over screen UI (line 22-25) +// Game over screen is already included above as part of the main structure \ No newline at end of file diff --git a/starter_templates/static/script.js b/starter_templates/static/script.js new file mode 100644 index 0000000..ddc4447 --- /dev/null +++ b/starter_templates/static/script.js @@ -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 \ No newline at end of file diff --git a/starter_templates/static/style.css b/starter_templates/static/style.css new file mode 100644 index 0000000..76822f4 --- /dev/null +++ b/starter_templates/static/style.css @@ -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 + */ \ No newline at end of file diff --git a/starter_templates/templates/game.html b/starter_templates/templates/game.html new file mode 100644 index 0000000..1028931 --- /dev/null +++ b/starter_templates/templates/game.html @@ -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 \ No newline at end of file diff --git a/starter_templates/templates/index.html b/starter_templates/templates/index.html new file mode 100644 index 0000000..98a7f54 --- /dev/null +++ b/starter_templates/templates/index.html @@ -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 \ No newline at end of file