ai6s2/mypepoes
Template
1
0
Fork 0
generated from technolyceum/ai6-m2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ai6s2
2025-12-16 07:20:26 +00:00
commit 7352cc04e5
36 changed files with 5997 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
quiz_game/From_concept_to_release.html Normal file
View File

@@ -0,0 +1,535 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Russian Millionaire Quiz Game!</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(90deg, #1a2a6c, #b21f1f);
border-radius: 15px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
h2 {
color: #fdbb2d;
margin: 20px 0 15px;
border-bottom: 2px solid #fdbb2d;
padding-bottom: 5px;
}
.slide {
display: none;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-in;
}
.active {
display: block;
}
.content {
line-height: 1.6;
font-size: 1.2rem;
}
.role-box {
background: linear-gradient(135deg, #1a2a6c, #b21f1f);
padding: 15px;
border-radius: 10px;
margin: 15px 0;
border-left: 5px solid #fdbb2d;
}
.role-title {
font-weight: bold;
color: #fdbb2d;
font-size: 1.3rem;
}
.role-desc {
margin-top: 10px;
}
.btn-container {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
button {
background: linear-gradient(135deg, #1a2a6c, #b21f1f);
color: white;
border: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
button:active {
transform: translateY(1px);
}
.progress-bar {
height: 10px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(90deg, #1a2a6c, #fdbb2d);
width: 0%;
transition: width 0.5s;
}
.slide-counter {
text-align: center;
margin-top: 10px;
font-size: 1rem;
color: #fdbb2d;
}
.game-preview {
display: flex;
justify-content: center;
margin: 20px 0;
}
.game-screen {
width: 300px;
height: 200px;
background-color: #1a2a6c;
border-radius: 10px;
padding: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.question-box {
background-color: #fdbb2d;
color: #1a2a6c;
padding: 10px;
border-radius: 5px;
text-align: center;
font-weight: bold;
margin-bottom: 15px;
}
.option {
background-color: white;
color: #1a2a6c;
padding: 8px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
}
.option:hover {
background-color: #b21f1f;
color: white;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.highlight {
color: #fdbb2d;
font-weight: bold;
}
.russian-flag {
display: inline-block;
width: 20px;
height: 15px;
background: linear-gradient(to bottom, white 33%, blue 33%, blue 66%, red 66%);
margin: 0 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Build a Russian Millionaire Quiz Game!</h1>
<p>From Concept to Release in 30 Minutes</p>
</header>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<!-- Slide 1: Introduction -->
<div class="slide active" id="slide1">
<h2>Welcome, Future Game Developers!</h2>
<div class="content">
<p>Today we're going to create our very own "Who Wants to Be a Millionaire" style quiz game with a Russian twist!</p>
<p>We'll use Python Flask for the website and DeepSeek AI to help with our questions.</p>
<p>By the end of this class, you'll understand how games are made from start to finish!</p>
<div class="game-preview">
<div class="game-screen">
<div class="question-box">What is the capital of Russia?</div>
<div class="option">A. St. Petersburg</div>
<div class="option">B. Moscow <span class="russian-flag"></span></div>
<div class="option">C. Kazan</div>
<div class="option">D. Sochi</div>
</div>
</div>
<p>Let's get started on our game development journey!</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 1 of 8</div>
</div>
<!-- Slide 2: Concept & Research -->
<div class="slide" id="slide2">
<h2>Stage 1: Concept & Research</h2>
<div class="content">
<p>Every great game starts with an idea! Our concept is:</p>
<p class="highlight">"A 'Who Wants to Be a Millionaire' style quiz about Russian culture, history, and fun facts!"</p>
<p>Our research tasks:</p>
<ul>
<li>Learn about the original Millionaire game format</li>
<li>Research interesting Russian trivia</li>
<li>Study how Flask websites work</li>
<li>Explore how AI can help create questions</li>
</ul>
<div class="role-box">
<div class="role-title">Research Specialist</div>
<div class="role-desc">This person will find fun Russian facts and help create our question database.</div>
</div>
<p>Who wants to be our Research Specialist?</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 2 of 8</div>
</div>
<!-- Slide 3: User Stories -->
<div class="slide" id="slide3">
<h2>Stage 2: User Stories</h2>
<div class="content">
<p>User stories help us understand what our players will do in the game:</p>
<ul>
<li>"As a player, I want to see multiple choice questions"</li>
<li>"As a player, I want lifelines like 50:50 and Ask the Audience"</li>
<li>"As a player, I want to see my score increase as I answer correctly"</li>
<li>"As a player, I want fun Russian-themed graphics and sounds"</li>
</ul>
<p>These stories help us plan what features to build!</p>
<div class="game-preview">
<div class="game-screen">
<div class="question-box">Which Russian composer wrote 'Swan Lake'?</div>
<div class="option">A. Tchaikovsky <span class="russian-flag"></span></div>
<div class="option">B. Rachmaninoff</div>
<div class="option">C. Shostakovich</div>
<div class="option">D. Stravinsky</div>
<div style="margin-top: 10px; font-size: 0.8rem;">
Lifelines: 50:50 | Ask AI | Phone a Friend
</div>
</div>
</div>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 3 of 8</div>
</div>
<!-- Slide 4: Task Allocation -->
<div class="slide" id="slide4">
<h2>Stage 3: Task Allocation</h2>
<div class="content">
<p>Now let's divide the work! We have 4 important roles:</p>
<div class="role-box">
<div class="role-title">Backend Developer</div>
<div class="role-desc">Creates the game logic using Python Flask and connects to the DeepSeek API.</div>
</div>
<div class="role-box">
<div class="role-title">Database Designer</div>
<div class="role-desc">Builds the question database using JSON and works with the Research Specialist.</div>
</div>
<div class="role-box">
<div class="role-title">Frontend Developer</div>
<div class="role-desc">Designs the game screens using HTML, CSS, and JavaScript.</div>
</div>
<div class="role-box">
<div class="role-title">Graphics & Sound Artist</div>
<div class="role-desc">Creates Russian-themed visuals, icons, and sound effects for the game.</div>
</div>
<p>Which role sounds most interesting to you?</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 4 of 8</div>
</div>
<!-- Slide 5: Alpha Development -->
<div class="slide" id="slide5">
<h2>Stage 4: Alpha Development</h2>
<div class="content">
<p>In the Alpha stage, we build the basic version of our game:</p>
<ul>
<li>Backend Developer: Sets up Flask server and basic game routes</li>
<li>Database Designer: Creates JSON file with first 5 Russian trivia questions</li>
<li>Frontend Developer: Builds the question screen with 4 answer options</li>
<li>Graphics Artist: Creates simple Russian-themed background and buttons</li>
</ul>
<p>Our Alpha version will have:</p>
<ul>
<li>Basic question display</li>
<li>Answer selection</li>
<li>Simple scoring</li>
<li>Russian color theme (white, blue, red)</li>
</ul>
<p>Let's build our foundation!</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 5 of 8</div>
</div>
<!-- Slide 6: Beta Development -->
<div class="slide" id="slide6">
<h2>Stage 5: Beta Development</h2>
<div class="content">
<p>In the Beta stage, we add more features and polish:</p>
<ul>
<li>Backend Developer: Implements lifelines and connects to DeepSeek API</li>
<li>Database Designer: Expands to 15 questions with difficulty levels</li>
<li>Frontend Developer: Adds lifeline buttons and score display</li>
<li>Graphics Artist: Creates matryoshka doll icons and Russian landmark images</li>
</ul>
<p>Our Beta version will have:</p>
<ul>
<li>All 15 questions with increasing difficulty</li>
<li>50:50 and "Ask AI" lifelines</li>
<li>Better visuals with Russian themes</li>
<li>Sound effects for correct/incorrect answers</li>
</ul>
<div class="game-preview">
<div class="game-screen">
<div class="question-box">What is the traditional Russian doll called?</div>
<div class="option">A. Babushka</div>
<div class="option">B. Matryoshka <span class="russian-flag"></span></div>
<div class="option">C. Krasnaya</div>
<div class="option">D. Kukla</div>
<div style="margin-top: 10px; font-size: 0.8rem; text-align: center;">
Score: 1,000 RUB | Lifelines: <span style="color: #fdbb2d">50:50</span> | Ask AI |
</div>
</div>
</div>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 6 of 8</div>
</div>
<!-- Slide 7: Production & Testing -->
<div class="slide" id="slide7">
<h2>Stage 6: Production & Testing</h2>
<div class="content">
<p>Time to test our game and fix any issues!</p>
<p>Testing tasks:</p>
<ul>
<li>Play the game multiple times to find bugs</li>
<li>Check if all questions display correctly</li>
<li>Test the lifelines - do they work properly?</li>
<li>Make sure the scoring system is accurate</li>
<li>Verify the AI integration gives helpful hints</li>
</ul>
<p>After testing, we'll:</p>
<ul>
<li>Fix any problems we find</li>
<li>Add final polish to graphics and sounds</li>
<li>Prepare for our game launch!</li>
</ul>
<p>Who wants to be our Chief Tester?</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<div class="slide-counter">Slide 7 of 8</div>
</div>
<!-- Slide 8: Release & Celebration -->
<div class="slide" id="slide8">
<h2>Stage 7: Release & Celebration!</h2>
<div class="content">
<p>Congratulations! Our Russian Millionaire Quiz Game is ready!</p>
<p>What we've accomplished:</p>
<ul>
<li>Created a working quiz game with 15 Russian trivia questions</li>
<li>Built a Flask website with game logic</li>
<li>Integrated DeepSeek AI for lifelines</li>
<li>Designed Russian-themed graphics and sounds</li>
<li>Tested and polished our game</li>
</ul>
<p>Now it's time to:</p>
<ul>
<li>Share our game with friends and family</li>
<li>Celebrate our success!</li>
<li>Think about what game we want to make next</li>
</ul>
<div class="game-preview">
<div class="game-screen" style="text-align: center; display: flex; flex-direction: column; justify-content: center;">
<div style="font-size: 1.5rem; color: #fdbb2d; margin-bottom: 10px;">YOU WIN!</div>
<div>1,000,000 RUB</div>
<div style="margin-top: 15px; font-size: 0.9rem;">Congratulations, Millionaire!</div>
</div>
</div>
<p>Great job, game developers! You've successfully created your first AI-powered quiz game!</p>
</div>
<div class="btn-container">
<button onclick="prevSlide()">Previous</button>
<button onclick="restartPresentation()">Start Over</button>
</div>
<div class="slide-counter">Slide 8 of 8</div>
</div>
</div>
<script>
let currentSlide = 1;
const totalSlides = 8;
function updateProgress() {
const progress = (currentSlide / totalSlides) * 100;
document.getElementById('progress').style.width = `${progress}%`;
}
function showSlide(n) {
// Hide all slides
const slides = document.getElementsByClassName('slide');
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
// Show the current slide
document.getElementById(`slide${n}`).classList.add('active');
// Update progress bar
updateProgress();
}
function nextSlide() {
if (currentSlide < totalSlides) {
currentSlide++;
showSlide(currentSlide);
}
}
function prevSlide() {
if (currentSlide > 1) {
currentSlide--;
showSlide(currentSlide);
}
}
function restartPresentation() {
currentSlide = 1;
showSlide(currentSlide);
}
// Initialize the presentation
document.addEventListener('DOMContentLoaded', function() {
showSlide(1);
updateProgress();
});
</script>
</body>
</html>