generated from technolyceum/ai6-m2
1098 lines
41 KiB
HTML
1098 lines
41 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 - Student Portal</title>
|
|
<style>
|
|
:root {
|
|
--primary: #1a237e;
|
|
--secondary: #d32f2f;
|
|
--accent: #ffc107;
|
|
--light: #f5f5f5;
|
|
--dark: #212121;
|
|
--success: #4caf50;
|
|
}
|
|
|
|
* {
|
|
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;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, var(--primary), #283593);
|
|
color: white;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.logo-icon {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.role-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.role-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.role-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.role-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.role-title {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.role-desc {
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.role-btn {
|
|
background-color: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.7rem 1.5rem;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.role-btn:hover {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.content-section {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 2rem;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid var(--light);
|
|
}
|
|
|
|
.back-btn {
|
|
background-color: var(--secondary);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.step {
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
border-left: 4px solid var(--primary);
|
|
background-color: #f9f9f9;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.step-title {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.code-block {
|
|
position: relative;
|
|
background: #2d2d2d;
|
|
color: #f8f8f2;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin: 1rem 0;
|
|
overflow-x: auto;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.copy-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.3rem 0.7rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.explanation {
|
|
background: #e3f2fd;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin: 1rem 0;
|
|
border-left: 4px solid var(--primary);
|
|
}
|
|
|
|
.file-structure {
|
|
background: #fff8e1;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.file-item {
|
|
margin: 0.5rem 0;
|
|
padding-left: 1.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.file-item:before {
|
|
content: "📄";
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.folder:before {
|
|
content: "📁";
|
|
}
|
|
|
|
.tip-box {
|
|
background: #e8f5e9;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin: 1rem 0;
|
|
border-left: 4px solid var(--success);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
margin-top: 2rem;
|
|
background: var(--dark);
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.role-selector {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo">
|
|
<div class="logo-icon">🎮</div>
|
|
<div>
|
|
<h1>Russian Millionaire Quiz Game</h1>
|
|
<div class="subtitle">6-Lesson Project - Student Learning Portal</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div id="role-selection" class="role-selector">
|
|
<div class="role-card" onclick="showSection('project-overview')">
|
|
<div class="role-icon">📋</div>
|
|
<h3 class="role-title">Project Overview</h3>
|
|
<p class="role-desc">Understand the complete project structure and goals</p>
|
|
<button class="role-btn">View Overview</button>
|
|
</div>
|
|
|
|
<div class="role-card" onclick="showSection('backend')">
|
|
<div class="role-icon">⚙️</div>
|
|
<h3 class="role-title">Backend Developer</h3>
|
|
<p class="role-desc">Dima - Game logic, sessions, and prize system</p>
|
|
<button class="role-btn">Start Coding</button>
|
|
</div>
|
|
|
|
<div class="role-card" onclick="showSection('database')">
|
|
<div class="role-icon">🗃️</div>
|
|
<h3 class="role-title">Database Manager</h3>
|
|
<p class="role-desc">Danil - Questions and answers in JSON format</p>
|
|
<button class="role-btn">Start Coding</button>
|
|
</div>
|
|
|
|
<div class="role-card" onclick="showSection('frontend')">
|
|
<div class="role-icon">🎨</div>
|
|
<h3 class="role-title">Frontend Developer</h3>
|
|
<p class="role-desc">Inna - User interface and game interaction</p>
|
|
<button class="role-btn">Start Coding</button>
|
|
</div>
|
|
|
|
<div class="role-card" onclick="showSection('graphics')">
|
|
<div class="role-icon">🎨</div>
|
|
<h3 class="role-title">Graphics Designer</h3>
|
|
<p class="role-desc">Artyom - Styling and Russian visual theme</p>
|
|
<button class="role-btn">Start Coding</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROJECT OVERVIEW SECTION -->
|
|
<div id="project-overview" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Project Overview & Structure</h2>
|
|
<button class="back-btn" onclick="showRoleSelection()">← Back to Roles</button>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">What We're Building</h3>
|
|
<p>We're creating a "Who Wants to Be a Millionaire?" style quiz game with a Russian cultural theme. Players answer increasingly difficult questions to win virtual prize money.</p>
|
|
|
|
<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>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">How Flask Works</h3>
|
|
<p>Flask is a web framework that lets us create web applications with Python. Think of it as a restaurant:</p>
|
|
|
|
<div class="explanation">
|
|
<p><strong>app.py</strong> = The restaurant kitchen (prepares everything)</p>
|
|
<p><strong>Routes</strong> = The menu (different pages/actions)</p>
|
|
<p><strong>Templates</strong> = The dining area (what customers see)</p>
|
|
<p><strong>Static files</strong> = Decorations and utensils (CSS, JavaScript, images)</p>
|
|
</div>
|
|
|
|
<p>When a user visits our website, Flask serves the appropriate template and handles any requests, like when a player answers a question.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Development Workflow</h3>
|
|
<p>We'll follow this process over 6 lessons:</p>
|
|
|
|
<div class="tip-box">
|
|
<p><strong>Lessons 1-2:</strong> Setup & foundation - Get basic structure working</p>
|
|
<p><strong>Lessons 3-4:</strong> Core development - Implement main features</p>
|
|
<p><strong>Lessons 5-6:</strong> Completion & testing - Polish and fix issues</p>
|
|
</div>
|
|
|
|
<p>Each student has a specific role, but we'll integrate all our work at the end to create a complete, functional game!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BACKEND DEVELOPER SECTION -->
|
|
<div id="backend" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Backend Developer - Dima</h2>
|
|
<button class="back-btn" onclick="showRoleSelection()">← Back to Roles</button>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 1: Prize System Setup</h3>
|
|
<p>First, let's set up the prize money levels. Players earn more money for each correct answer.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<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">
|
|
<p><strong>What this does:</strong> Creates a list of prize amounts that players can win. Each number represents the prize for answering that question correctly. The amounts increase as questions get harder.</p>
|
|
<p><strong>GUARANTEED_LEVELS:</strong> These are safety nets - if a player gets a question wrong after one of these levels, they still win the prize from that level.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 2: Game Session Setup</h3>
|
|
<p>We need to track each player's game session - what question they're on, their prize money, etc.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>from flask import Flask, session, redirect, url_for
|
|
|
|
app = Flask(__name__)
|
|
app.secret_key = 'your_secret_key_here' # Needed for sessions
|
|
|
|
@app.route('/start')
|
|
def start_game():
|
|
# Initialize a new game session
|
|
session['current_question'] = 0
|
|
session['score'] = 0
|
|
session['lifelines'] = ['fifty_fifty'] # Only one lifeline implemented
|
|
return redirect(url_for('game_screen'))</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> Creates a "/start" route that begins a new game. It resets the player's progress to zero and gives them one lifeline: fifty_fifty.</p>
|
|
<p><strong>Session:</strong> Like a digital backpack that remembers your game progress as you play.</p>
|
|
<p><strong>Routes:</strong> Different web addresses that do different things in our app.</p>
|
|
<p><strong>Note:</strong> Although the original plan included multiple lifelines, the current implementation only includes the fifty_fifty lifeline for simplicity.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 3: Question Serving</h3>
|
|
<p>We need to send questions to the player one by one as they progress.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<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">
|
|
<p><strong>What this does:</strong> Reads the questions from the JSON file and sends the appropriate question based on how far the player has progressed.</p>
|
|
<p><strong>JSON:</strong> A file format that stores data in an organized way, like a digital filing cabinet.</p>
|
|
<p><strong>Session.get():</strong> Safely checks what question the player is currently on.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tip-box">
|
|
<p><strong>Pro Tip:</strong> Test your backend by running <code>python app.py</code> and visiting http://localhost:5000/start in your browser!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DATABASE MANAGER SECTION -->
|
|
<div id="database" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Database Manager - Danil</h2>
|
|
<button class="back-btn" onclick="showRoleSelection()">← Back to Roles</button>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 1: Understanding JSON Structure</h3>
|
|
<p>Our "database" is a JSON file that stores all the quiz questions, options, and correct answers.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<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">
|
|
<p><strong>What this does:</strong> Creates a list of question objects. Each question has:</p>
|
|
<ul>
|
|
<li><strong>question:</strong> The actual question text</li>
|
|
<li><strong>options:</strong> List of 4 possible answers</li>
|
|
<li><strong>correct_answer:</strong> The index (0-3) of the right answer</li>
|
|
</ul>
|
|
<p><strong>Important:</strong> The correct_answer uses 0-based indexing, so 0 = first option, 1 = second option, etc.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 2: Creating Russian Culture Questions</h3>
|
|
<p>Create questions about Russian history, culture, geography, and famous people.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>{
|
|
"question": "What is the name of the famous Russian ballet company?",
|
|
"options": [
|
|
"Moscow Dance Theater",
|
|
"St. Petersburg Ballet",
|
|
"Bolshoi Ballet",
|
|
"Russian National Ballet"
|
|
],
|
|
"correct_answer": 2
|
|
},
|
|
|
|
{
|
|
"question": "Which Russian ruler was known as 'The Great' and modernized Russia?",
|
|
"options": [
|
|
"Ivan the Terrible",
|
|
"Catherine the Great",
|
|
"Peter the Great",
|
|
"Alexander II"
|
|
],
|
|
"correct_answer": 2
|
|
},
|
|
|
|
{
|
|
"question": "What is the traditional Russian soup made with beets?",
|
|
"options": [
|
|
"Shchi",
|
|
"Borscht",
|
|
"Solyanka",
|
|
"Ukha"
|
|
],
|
|
"correct_answer": 1
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> Adds culturally relevant questions to our game. Make sure:</p>
|
|
<ul>
|
|
<li>Questions get progressively harder</li>
|
|
<li>Wrong answers are plausible (sound like they could be right)</li>
|
|
<li>Answers are factually accurate</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 3: Complete Question Set</h3>
|
|
<p>We need 15 questions total, with increasing difficulty.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>// Example of a harder question for later in the game
|
|
{
|
|
"question": "In which year did the Soviet Union dissolve?",
|
|
"options": [
|
|
"1989",
|
|
"1991",
|
|
"1993",
|
|
"1985"
|
|
],
|
|
"correct_answer": 1
|
|
},
|
|
|
|
{
|
|
"question": "What is the name of the Russian equivalent of NASA?",
|
|
"options": [
|
|
"Russian Space Agency",
|
|
"Soviet Space Program",
|
|
"Roscosmos",
|
|
"Kosmonavtika"
|
|
],
|
|
"correct_answer": 2
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> Adds more challenging questions for the higher prize levels. These should require more specific knowledge.</p>
|
|
<p><strong>Tip:</strong> Use a mix of history, geography, culture, science, and arts questions to make the game interesting!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tip-box">
|
|
<p><strong>Pro Tip:</strong> Validate your JSON at <a href="https://jsonlint.com" target="_blank">jsonlint.com</a> to catch any syntax errors!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FRONTEND DEVELOPER SECTION -->
|
|
<div id="frontend" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Frontend Developer - Inna</h2>
|
|
<button class="back-btn" onclick="showRoleSelection()">← Back to Roles</button>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 1: Basic Game HTML Structure</h3>
|
|
<p>Create the main game screen where questions will be displayed.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Russian Quiz - Game</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<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>
|
|
|
|
<button class="lifeline" onclick="useFiftyFifty()">50:50 Lifeline</button>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
|
</body>
|
|
</html></pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> Creates the basic structure of our game page with:</p>
|
|
<ul>
|
|
<li>A header with the game title and prize display</li>
|
|
<li>A container for the question and answer options</li>
|
|
<li>A button for the 50:50 lifeline</li>
|
|
<li>A game over screen that appears when the game ends</li>
|
|
</ul>
|
|
<p><strong>URL_FOR:</strong> A Flask function that creates the correct path to our CSS and JavaScript files.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 2: Utility Functions for DRY Code</h3>
|
|
<p>Create utility functions to avoid repeating code and make our application more maintainable.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>// 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';
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> These utility functions follow the DRY (Don't Repeat Yourself) principle:</p>
|
|
<ul>
|
|
<li><strong>apiRequest():</strong> Handles all API calls with consistent error handling</li>
|
|
<li><strong>updateElementText():</strong> Simplifies updating text content of elements</li>
|
|
<li><strong>toggleElementVisibility():</strong> Standardizes showing/hiding elements</li>
|
|
</ul>
|
|
<p><strong>DRY Principle:</strong> Writing code once and reusing it makes applications easier to maintain and less error-prone.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 3: JavaScript - Loading Questions</h3>
|
|
<p>Use JavaScript to fetch questions from the backend and display them.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>let currentQuestion = null;
|
|
|
|
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));
|
|
}
|
|
|
|
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';
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong></p>
|
|
<ul>
|
|
<li><strong>apiRequest():</strong> Uses our utility function to fetch questions from the backend</li>
|
|
<li><strong>displayQuestion():</strong> Updates the UI with the received question data</li>
|
|
<li><strong>Utility functions:</strong> Uses our helper functions to simplify DOM manipulation</li>
|
|
</ul>
|
|
<p><strong>Event Handling:</strong> Makes the answer options clickable by assigning onclick handlers.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 4: Answer Selection & Game Flow</h3>
|
|
<p>Handle what happens when a player selects an answer.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>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));
|
|
}
|
|
|
|
function endGame(score) {
|
|
updateElementText('final-prize', score);
|
|
toggleElementVisibility('game-over', true);
|
|
toggleElementVisibility('question-box', false);
|
|
toggleElementVisibility('lifeline', false);
|
|
}
|
|
|
|
function restartGame() {
|
|
window.location.href = '/start';
|
|
}
|
|
|
|
// Start the game when page loads
|
|
if (window.location.pathname === '/start') {
|
|
loadQuestion();
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong></p>
|
|
<ul>
|
|
<li><strong>selectAnswer():</strong> Sends the chosen answer to the backend for checking</li>
|
|
<li><strong>Visual feedback:</strong> Shows if the answer was correct or incorrect</li>
|
|
<li><strong>Game flow:</strong> Progresses to the next question or ends the game based on the result</li>
|
|
<li><strong>endGame():</strong> Displays the final score and game over screen</li>
|
|
</ul>
|
|
<p><strong>setTimeout():</strong> Adds a delay before progressing to give players time to see the result.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 5: Lifeline Implementation</h3>
|
|
<p>Implement the 50:50 lifeline that removes two wrong answers.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<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">
|
|
<p><strong>What this does:</strong></p>
|
|
<ul>
|
|
<li><strong>Disables the button:</strong> Prevents using the lifeline multiple times</li>
|
|
<li><strong>API call:</strong> Requests the backend to determine which options to remove</li>
|
|
<li><strong>Hides options:</strong> Visually removes two wrong answer options from the screen</li>
|
|
</ul>
|
|
<p><strong>Error handling:</strong> Gracefully handles errors and re-enables the button if the lifeline fails.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GRAPHICS DESIGNER SECTION -->
|
|
<div id="graphics" class="content-section">
|
|
<div class="section-header">
|
|
<h2>Graphics Designer - Artyom</h2>
|
|
<button class="back-btn" onclick="showRoleSelection()">← Back to Roles</button>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 1: Russian Color Theme</h3>
|
|
<p>Create a color scheme inspired by the Russian flag and traditional colors.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>/* Russian Color Theme */
|
|
:root {
|
|
--russian-white: #ffffff;
|
|
--russian-blue: #1a3b8b;
|
|
--russian-red: #d52b1e;
|
|
--russian-gold: #daa520;
|
|
--russian-dark: #0a1a3a;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--russian-blue), var(--russian-dark));
|
|
color: var(--russian-white);
|
|
font-family: 'Arial', sans-serif;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.game-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
color: var(--russian-dark);
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(to right, var(--russian-blue), var(--russian-red));
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong> Establishes a color palette based on the Russian flag colors and applies them to our game:</p>
|
|
<ul>
|
|
<li><strong>CSS Variables:</strong> Define colors once, use everywhere (easy to change later)</li>
|
|
<li><strong>Gradients:</strong> Create smooth color transitions for visual appeal</li>
|
|
<li><strong>Box Shadow:</strong> Adds depth to elements so they don't look flat</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 2: Question and Option Styling</h3>
|
|
<p>Style the question display and answer options to be clear and attractive.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>.question-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.question {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
padding: 20px;
|
|
background-color: var(--russian-white);
|
|
border: 3px solid var(--russian-gold);
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.options {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.option {
|
|
padding: 15px 20px;
|
|
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
|
|
border: 2px solid var(--russian-blue);
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
color: var(--russian-dark);
|
|
}
|
|
|
|
.option:hover {
|
|
background: linear-gradient(to bottom, #e9ecef, #dee2e6);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.option:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Answer feedback styles */
|
|
.option.correct {
|
|
background: linear-gradient(to bottom, #d4edda, #c3e6cb);
|
|
border-color: #28a745;
|
|
color: #155724;
|
|
}
|
|
|
|
.option.wrong {
|
|
background: linear-gradient(to bottom, #f8d7da, #f1b0b7);
|
|
border-color: #dc3545;
|
|
color: #721c24;
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong></p>
|
|
<ul>
|
|
<li><strong>Grid Layout:</strong> Arranges answer options in two columns</li>
|
|
<li><strong>Hover Effects:</strong> Makes buttons feel interactive</li>
|
|
<li><strong>Transitions:</strong> Creates smooth animations for state changes</li>
|
|
<li><strong>Feedback Colors:</strong> Green for correct answers, red for incorrect</li>
|
|
</ul>
|
|
<p><strong>CSS Grid:</strong> Modern way to create responsive layouts without complex calculations.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3 class="step-title">Step 3: Lifeline and Prize Styling</h3>
|
|
<p>Style the lifeline buttons and prize display to match the Russian theme.</p>
|
|
|
|
<div class="code-block">
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
<pre>.lifelines {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.lifeline {
|
|
padding: 10px 20px;
|
|
background: linear-gradient(to bottom, var(--russian-gold), #b8860b);
|
|
color: var(--russian-dark);
|
|
border: none;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.lifeline:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.lifeline:disabled {
|
|
background: linear-gradient(to bottom, #6c757d, #495057);
|
|
color: #adb5bd;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.prize-display {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--russian-gold);
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Responsive design for mobile */
|
|
@media (max-width: 768px) {
|
|
.options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.game-container {
|
|
margin: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.question {
|
|
font-size: 1.2rem;
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<p><strong>What this does:</strong></p>
|
|
<ul>
|
|
<li><strong>Flexbox:</strong> Centers the lifeline buttons horizontally</li>
|
|
<li><strong>Golden Gradient:</strong> Makes lifeline buttons stand out</li>
|
|
<li><strong>Disabled State:</strong> Shows when lifelines have been used</li>
|
|
<li><strong>Responsive Design:</strong> Adapts layout for mobile devices</li>
|
|
</ul>
|
|
<p><strong>Media Queries:</strong> Apply different styles based on screen size - crucial for mobile users!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Russian Millionaire Quiz Game - Student Learning Portal</p>
|
|
<p>Created for Technolyceum AI6 Module 2 Project</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Show the selected section and hide role selection
|
|
function showSection(sectionId) {
|
|
document.getElementById('role-selection').style.display = 'none';
|
|
|
|
// Hide all content sections
|
|
const sections = document.querySelectorAll('.content-section');
|
|
sections.forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
|
|
// Show the selected section
|
|
document.getElementById(sectionId).classList.add('active');
|
|
|
|
// Scroll to top
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
// Show role selection and hide all content sections
|
|
function showRoleSelection() {
|
|
document.getElementById('role-selection').style.display = 'grid';
|
|
|
|
// Hide all content sections
|
|
const sections = document.querySelectorAll('.content-section');
|
|
sections.forEach(section => {
|
|
section.classList.remove('active');
|
|
});
|
|
|
|
// Scroll to top
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
// Copy code to clipboard
|
|
function copyCode(button) {
|
|
const codeBlock = button.parentElement;
|
|
const code = codeBlock.querySelector('pre').textContent;
|
|
|
|
navigator.clipboard.writeText(code).then(() => {
|
|
// Visual feedback
|
|
const originalText = button.textContent;
|
|
button.textContent = 'Copied!';
|
|
button.style.background = 'var(--success)';
|
|
|
|
setTimeout(() => {
|
|
button.textContent = originalText;
|
|
button.style.background = '';
|
|
}, 2000);
|
|
}).catch(err => {
|
|
console.error('Failed to copy: ', err);
|
|
alert('Failed to copy code. Please select and copy manually.');
|
|
});
|
|
}
|
|
|
|
// Show project overview by default
|
|
window.onload = function() {
|
|
showSection('project-overview');
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |