commit 4f3a38d4efd40e5c8b235d7e77bab11c6862b1fb Author: ai6s4 Date: Tue Dec 16 07:22:51 2025 +0000 Initial commit diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..6d4577e Binary files /dev/null and b/.DS_Store differ diff --git a/AI-Powered Joke Bot _ Student Thesis.html b/AI-Powered Joke Bot _ Student Thesis.html new file mode 100644 index 0000000..95ec2ec --- /dev/null +++ b/AI-Powered Joke Bot _ Student Thesis.html @@ -0,0 +1,1017 @@ + + + + + + AI-Powered Joke Bot | Student Thesis + + + + +
+ +
+
+
+

AI-Powered Joke Bot

+

Bringing Humor to Digital Conversations

+
+ +
+
+ Student Thesis Project +
+ +
+ Supervisor: Dr. Johnson +
+ +
+ Student Developer: [Your Name] +
+ +
+ Academic Year 2025-2026 +
+
+
+
+ + +
+
+

Project Overview

+

An intelligent bot that understands and generates humor

+
+ +
+

Project Description

+

An AI-powered bot that generates, categorizes, and delivers jokes based on user preferences, mood, and context. Designed to bring lightheartedness to digital interactions and demonstrate natural language understanding capabilities.

+ +
+

Thesis Focus: Exploring how AI can understand and generate humor while maintaining appropriateness and cultural sensitivity.

+
+
+ +

Key Features

+ +
+
+
1
+
+ Context-Aware Humor - Generates jokes based on user preferences, time of day, and conversation context +
+
+ +
+
2
+
+ Multiple Categories - Supports various joke types including puns, one-liners, knock-knock jokes, and dad jokes +
+
+ +
+
3
+
+ Learning System - Adapts to user preferences by tracking which jokes get the best reactions +
+
+
+
+ + +
+

How Users Interact

+

Simple commands for instant humor

+ +

Basic Commands

+

Users can request jokes using intuitive commands and natural language.

+ +
+

Example 1: Random joke

+
+ User: /joke
+ Bot: "Why don't scientists trust atoms? Because they make up everything!" +
+ +

Example 2: Category-specific

+
+ User: /pun
+ Bot: "I told my computer I needed a break... now it won't stop sending me Kit-Kat ads." +
+ +

Example 3: Mood-based

+
+ User: I need a pick-me-up
+ Bot: "Here's something light: What do you call fake spaghetti? An impasta!" +
+
+ +
+

Joke Generation Example

+
+ "Why did the AI cross the road?" +
+
+ "To optimize the chicken's pathfinding algorithm!" +
+
+
+ + +
+

Joke Categories & Types

+

Diverse humor for different tastes

+ +

Supported Categories

+ +
+
+
๐Ÿ˜„
+
One-Liners
+
+ +
+
๐Ÿ‘จโ€๐Ÿ‘ง
+
Dad Jokes
+
+ +
+
๐Ÿ””
+
Knock-Knock
+
+ +
+
๐Ÿ“š
+
Puns
+
+ +
+
๐Ÿค–
+
Tech Humor
+
+ +
+
๐ŸŽ“
+
Academic
+
+
+ +

Context Awareness

+

The bot considers:

+
    +
  • Time of day (morning vs. evening jokes)
    • +
  • User's previous reactions
    • +
  • Cultural appropriateness
    • +
  • Current events (when relevant)
    • +
  • User's stated mood or preference
    • +
+
+ + +
+

Technology Stack

+

Modern AI and development tools

+ +
+

Core Technologies

+ +
+
๐Ÿค–
+
+ Natural Language Processing + GPT-based models for understanding context and generating appropriate humor +
+
+ +
+
๐Ÿ’ฌ
+
+ Telegram Bot API + Platform for deployment and user interaction +
+
+ +
+
๐Ÿ—„๏ธ
+
+ Database + Storing joke collections, user preferences, and interaction history +
+
+ +
+
โš™๏ธ
+
+ Python Backend + FastAPI or Django for bot logic and API management +
+
+
+ +

AI Components

+
    +
  • Sentiment analysis for mood detection
    • +
  • Context understanding from conversation history
    • +
  • Joke appropriateness filtering
    • +
  • Personalized recommendation algorithms
    • +
  • Feedback learning system
    • +
+
+ + +
+

Research & Evaluation

+

Measuring humor effectiveness and AI capabilities

+ +

Research Questions

+
+

1. Can AI consistently generate humor that humans find funny?

+

2. How does contextual awareness affect joke reception?

+

3. What metrics best measure "successful" AI-generated humor?

+
+ +

Evaluation Methods

+
    +
  • User satisfaction surveys (1-5 ratings)
    • +
  • Laughter/amusement detection in follow-up messages
    • +
  • A/B testing different joke generation approaches
    • +
  • Long-term engagement tracking
    • +
  • Cultural appropriateness assessments
    • +
+ +

Expected Contributions

+
+

To AI Research: Insights into humor generation and natural language understanding.

+

To Practical Applications: A framework for creating engaging, personality-driven chatbots.

+

To Human-Computer Interaction: Understanding how humor affects user engagement.

+
+
+ + +
+
+

Future Possibilities

+

Expanding the bot's capabilities and applications

+
+ +
+

Expansion Opportunities

+ +
+
๐ŸŒ
+
+ Multilingual Support + Generate and understand jokes in multiple languages +
+
+ +
+
๐ŸŽญ
+
+ Personality Customization + Allow users to select joke styles (sarcastic, wholesome, witty, etc.) +
+
+ +
+
๐Ÿ“Š
+
+ Joke Analytics + Track which jokes perform best and identify humor patterns +
+
+ +
+
๐Ÿค
+
+ Collaborative Joke Creation + Allow users to co-create jokes with the AI +
+
+ +
+
๐ŸŽฎ
+
+ Gamification + Add joke-telling games and humor challenges +
+
+ +
+
๐ŸŽจ
+
+ Visual Humor + Generate memes and visual jokes using image generation AI +
+
+
+ +
+

Academic Value: This project contributes to understanding AI's creative capabilities and human-AI interaction dynamics.

+

Practical Applications: Beyond entertainment, humor-generation AI has applications in mental health, education, and customer service.

+
+
+ + +
+ + +
+ 7 of 7 +
+
+
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/AI-Powered Joke Bot _ Student Thesis_files/css2 b/AI-Powered Joke Bot _ Student Thesis_files/css2 new file mode 100644 index 0000000..d3daecf --- /dev/null +++ b/AI-Powered Joke Bot _ Student Thesis_files/css2 @@ -0,0 +1,315 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* cyrillic-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} +/* cyrillic */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Inter'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.html b/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.html new file mode 100644 index 0000000..78ee197 --- /dev/null +++ b/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.html @@ -0,0 +1,257 @@ + + + + + + Building a Telegram Joke Bot: A Student Project + + + +
+

Building a Telegram Joke Bot: A Student Project

+ +
+
Supervisor: Bob Santos
+
+ Developers: ะ”ะฐัˆัƒะฝะธะฝ ะ”ะผะธั‚ั€ะธะน, ะ•ั€ะพั…ะธะฝ ะ”ะฐะฝะธะธะป, ะžะฒะณะฐะฝะพะฒะฐ ะ˜ะฝะฝะฐ, ะŸะพะปะบะพะฒะฝะธะบะพะฒ ะั€ั‚ั‘ะผ +
+
+ +

Introduction

+

A group of students created a Telegram joke bot as a school project. A Telegram bot is a small computer program that can send and receive messages automatically. This particular bot tells jokes to people who message it. The students wanted to make something fun that could bring smiles to people's faces while learning about computer programming.

+ +

Aim

+

The goal of this project was to create a simple, working bot that could:

+ + +

Method

+

The students used these steps to build their bot:

+
    +
  1. Choose Python: They picked Python because it's a beginner-friendly programming language.
    2. +
  2. Use Telegram's Tools: They connected to Telegram's Bot API, which lets programs send and receive messages.
    3. +
  3. Write the Code: They wrote about 30 lines of code that make the bot work.
    4. +
  4. Add Jokes: They created a list of three funny jokes for the bot to tell.
    5. +
  5. Test the Bot: They tested the bot to make sure it worked correctly.
    6. +
+ +

Results

+

The students successfully created a working Telegram bot with these features:

+ + +

Conclusion

+

The students learned that creating technology doesn't have to be complicated. With just basic programming skills, they built a bot that can make people happy. This project showed them that coding is not just about math and logicโ€”it's also a creative tool. They proved that even simple programs can have real value and bring joy to people.

+ +

Future Possibilities

+

This bot could be improved in many ways:

+ + +
+

Addendum: Complete Bot Code

+

Here is the complete Python code for the Telegram joke bot:

+ +
+ Note: For security reasons, the actual bot token has been removed. When using this code, you should replace "YOUR_BOT_TOKEN_HERE" with your actual bot token from @BotFather. +
+ +
from telegram import Update +from telegram.ext import Application, CommandHandler, ContextTypes +import random + +JOKE_LIST = [ + "Why did the robot go to school? To recharge his brain! ๐Ÿ”‹", + "Knock knock!\nWho's there?\nLettuce!\nLettuce who?\nLettuce in!", + "Why don't eggs tell jokes? They'd crack each other up! ๐Ÿฅš" +] + +async def start(update: Update, context: ContextTypes.DEFAULT_TYPE): + await update.message.reply_text("Hi! Type /joke for a funny joke! ๐Ÿ˜„") + +async def send_joke(update: Update, context: ContextTypes.DEFAULT_TYPE): + joke = random.choice(JOKE_LIST) + await update.message.reply_text(joke) + +def main(): + # ๐Ÿ”‘ REPLACE THIS with your bot token from @BotFather + BOT_TOKEN = "YOUR_BOT_TOKEN_HERE" + + app = Application.builder().token(BOT_TOKEN).build() + app.add_handler(CommandHandler("start", start)) + app.add_handler(CommandHandler("joke", send_joke)) + print("Bot is running... Press Ctrl+C to stop.") + app.run_polling() + +if __name__ == "__main__": + main()
+ +

The code is organized in a simple way:

+
    +
  1. It imports necessary tools (like the Telegram library and random number generator)
    2. +
  2. It creates a list of jokes
    3. +
  3. It makes two functions: one for the /start command and one for the /joke command
    4. +
  4. It connects to Telegram using a special bot token
    5. +
  5. It starts the bot and keeps it running
    6. +
+
+
+ + \ No newline at end of file diff --git a/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.pdf b/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.pdf new file mode 100644 index 0000000..dc24e32 Binary files /dev/null and b/Thesis_AI6_Building a Telegram Joke Bot_ A Student Project.pdf differ diff --git a/android_game.py b/android_game.py new file mode 100644 index 0000000..b6ac2d6 --- /dev/null +++ b/android_game.py @@ -0,0 +1,21 @@ +# asteroid_game.py - Starter Template +import turtle +import random + +# === SETUP THE GAME WINDOW === + + +# === CREATE PLAYER === + + +# === GAME VARIABLES === + + +# === FUNCTIONS === + + +# === TEST CODE === +# Uncomment this to test: +# draw_player() +# screen.update() +# turtle.done() \ No newline at end of file diff --git a/quiz_game/From_concept_to_release.html b/quiz_game/From_concept_to_release.html new file mode 100644 index 0000000..3114344 --- /dev/null +++ b/quiz_game/From_concept_to_release.html @@ -0,0 +1,535 @@ + + + + + + Build a Russian Millionaire Quiz Game! + + + +
+
+

Build a Russian Millionaire Quiz Game!

+

From Concept to Release in 30 Minutes

+
+ +
+
+
+ + +
+

Welcome, Future Game Developers!

+
+

Today we're going to create our very own "Who Wants to Be a Millionaire" style quiz game with a Russian twist!

+

We'll use Python Flask for the website and DeepSeek AI to help with our questions.

+

By the end of this class, you'll understand how games are made from start to finish!

+ +
+
+
What is the capital of Russia?
+
A. St. Petersburg
+
B. Moscow
+
C. Kazan
+
D. Sochi
+
+
+ +

Let's get started on our game development journey!

+
+ +
+ + +
+
Slide 1 of 8
+
+ + +
+

Stage 1: Concept & Research

+
+

Every great game starts with an idea! Our concept is:

+

"A 'Who Wants to Be a Millionaire' style quiz about Russian culture, history, and fun facts!"

+ +

Our research tasks:

+
    +
  • Learn about the original Millionaire game format
    • +
  • Research interesting Russian trivia
    • +
  • Study how Flask websites work
    • +
  • Explore how AI can help create questions
    • +
+ +
+
Research Specialist
+
This person will find fun Russian facts and help create our question database.
+
+ +

Who wants to be our Research Specialist?

+
+ +
+ + +
+
Slide 2 of 8
+
+ + +
+

Stage 2: User Stories

+
+

User stories help us understand what our players will do in the game:

+ +
    +
  • "As a player, I want to see multiple choice questions"
    • +
  • "As a player, I want lifelines like 50:50 and Ask the Audience"
    • +
  • "As a player, I want to see my score increase as I answer correctly"
    • +
  • "As a player, I want fun Russian-themed graphics and sounds"
    • +
+ +

These stories help us plan what features to build!

+ +
+
+
Which Russian composer wrote 'Swan Lake'?
+
A. Tchaikovsky
+
B. Rachmaninoff
+
C. Shostakovich
+
D. Stravinsky
+
+ Lifelines: 50:50 | Ask AI | Phone a Friend +
+
+
+
+ +
+ + +
+
Slide 3 of 8
+
+ + +
+

Stage 3: Task Allocation

+
+

Now let's divide the work! We have 4 important roles:

+ +
+
Backend Developer
+
Creates the game logic using Python Flask and connects to the DeepSeek API.
+
+ +
+
Database Designer
+
Builds the question database using JSON and works with the Research Specialist.
+
+ +
+
Frontend Developer
+
Designs the game screens using HTML, CSS, and JavaScript.
+
+ +
+
Graphics & Sound Artist
+
Creates Russian-themed visuals, icons, and sound effects for the game.
+
+ +

Which role sounds most interesting to you?

+
+ +
+ + +
+
Slide 4 of 8
+
+ + +
+

Stage 4: Alpha Development

+
+

In the Alpha stage, we build the basic version of our game:

+ +
    +
  • Backend Developer: Sets up Flask server and basic game routes
    • +
  • Database Designer: Creates JSON file with first 5 Russian trivia questions
    • +
  • Frontend Developer: Builds the question screen with 4 answer options
    • +
  • Graphics Artist: Creates simple Russian-themed background and buttons
    • +
+ +

Our Alpha version will have:

+
    +
  • Basic question display
    • +
  • Answer selection
    • +
  • Simple scoring
    • +
  • Russian color theme (white, blue, red)
    • +
+ +

Let's build our foundation!

+
+ +
+ + +
+
Slide 5 of 8
+
+ + +
+

Stage 5: Beta Development

+
+

In the Beta stage, we add more features and polish:

+ +
    +
  • Backend Developer: Implements lifelines and connects to DeepSeek API
    • +
  • Database Designer: Expands to 15 questions with difficulty levels
    • +
  • Frontend Developer: Adds lifeline buttons and score display
    • +
  • Graphics Artist: Creates matryoshka doll icons and Russian landmark images
    • +
+ +

Our Beta version will have:

+
    +
  • All 15 questions with increasing difficulty
    • +
  • 50:50 and "Ask AI" lifelines
    • +
  • Better visuals with Russian themes
    • +
  • Sound effects for correct/incorrect answers
    • +
+ +
+
+
What is the traditional Russian doll called?
+
A. Babushka
+
B. Matryoshka
+
C. Krasnaya
+
D. Kukla
+
+ Score: 1,000 RUB | Lifelines: 50:50 | Ask AI | +
+
+
+
+ +
+ + +
+
Slide 6 of 8
+
+ + +
+

Stage 6: Production & Testing

+
+

Time to test our game and fix any issues!

+ +

Testing tasks:

+
    +
  • Play the game multiple times to find bugs
    • +
  • Check if all questions display correctly
    • +
  • Test the lifelines - do they work properly?
    • +
  • Make sure the scoring system is accurate
    • +
  • Verify the AI integration gives helpful hints
    • +
+ +

After testing, we'll:

+
    +
  • Fix any problems we find
    • +
  • Add final polish to graphics and sounds
    • +
  • Prepare for our game launch!
    • +
+ +

Who wants to be our Chief Tester?

+
+ +
+ + +
+
Slide 7 of 8
+
+ + +
+

Stage 7: Release & Celebration!

+
+

Congratulations! Our Russian Millionaire Quiz Game is ready!

+ +

What we've accomplished:

+
    +
  • Created a working quiz game with 15 Russian trivia questions
    • +
  • Built a Flask website with game logic
    • +
  • Integrated DeepSeek AI for lifelines
    • +
  • Designed Russian-themed graphics and sounds
    • +
  • Tested and polished our game
    • +
+ +

Now it's time to:

+
    +
  • Share our game with friends and family
    • +
  • Celebrate our success!
    • +
  • Think about what game we want to make next
    • +
+ +
+
+
YOU WIN!
+
1,000,000 RUB
+
Congratulations, Millionaire!
+
+
+ +

Great job, game developers! You've successfully created your first AI-powered quiz game!

+
+ +
+ + +
+
Slide 8 of 8
+
+
+ + + + \ No newline at end of file diff --git a/quiz_game/PULL_REQUEST_TEMPLATE.md b/quiz_game/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..103e59d --- /dev/null +++ b/quiz_game/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,44 @@ +## Student Submission + +**Name:** +**Role:** [Backend/Frontend/Database/Graphics] +**Lesson:** [1/2/3] + +## Changes Made + +### Role-Specific Checklist: + +#### Backend Developer (Dima) +- [ ] Prize structure implemented (15 levels) +- [ ] Game session management +- [ ] Answer validation logic +- [ ] Lifeline functionality (50:50, Phone Friend) +- [ ] All routes working + +#### Frontend Developer (Inna) +- [ ] Question display working +- [ ] Answer selection handling +- [ ] Prize ladder updates +- [ ] Lifeline buttons functional +- [ ] Game flow complete + +#### Database Designer (Danil) +- [ ] 150 Russian culture questions +- [ ] Increasing difficulty progression +- [ ] Plausible wrong answers +- [ ] Categories: history, geography, culture, entertainment + +#### Graphics Artist (Artyom) +- [ ] Russian color theme applied +- [ ] Enhanced styling from basic template +- [ ] Visual improvements +- [ ] Visual assets including logo +- [ ] Audio assets including sound effects +- [ ] Consistent design + +## Testing Performed +- [ ] My component works independently +- [ ] No errors in console +- [ ] Responsive design checked + +## Questions/Blockers \ No newline at end of file diff --git a/quiz_game/Quiz_Game_Project-Student Learning_Portal.html b/quiz_game/Quiz_Game_Project-Student Learning_Portal.html new file mode 100644 index 0000000..325d8b8 --- /dev/null +++ b/quiz_game/Quiz_Game_Project-Student Learning_Portal.html @@ -0,0 +1,1098 @@ + + + + + + Russian Millionaire Quiz Game - Student Portal + + + +
+ +
+ +
+
+
+
๐Ÿ“‹
+

Project Overview

+

Understand the complete project structure and goals

+ +
+ +
+
โš™๏ธ
+

Backend Developer

+

Dima - Game logic, sessions, and prize system

+ +
+ +
+
๐Ÿ—ƒ๏ธ
+

Database Manager

+

Danil - Questions and answers in JSON format

+ +
+ +
+
๐ŸŽจ
+

Frontend Developer

+

Inna - User interface and game interaction

+ +
+ +
+
๐ŸŽจ
+

Graphics Designer

+

Artyom - Styling and Russian visual theme

+ +
+
+ + +
+
+

Project Overview & Structure

+ +
+ +
+

What We're Building

+

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.

+ +
+

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)
+
+
+ +
+

How Flask Works

+

Flask is a web framework that lets us create web applications with Python. Think of it as a restaurant:

+ +
+

app.py = The restaurant kitchen (prepares everything)

+

Routes = The menu (different pages/actions)

+

Templates = The dining area (what customers see)

+

Static files = Decorations and utensils (CSS, JavaScript, images)

+
+ +

When a user visits our website, Flask serves the appropriate template and handles any requests, like when a player answers a question.

+
+ +
+

Development Workflow

+

We'll follow this process over 6 lessons:

+ +
+

Lessons 1-2: Setup & foundation - Get basic structure working

+

Lessons 3-4: Core development - Implement main features

+

Lessons 5-6: Completion & testing - Polish and fix issues

+
+ +

Each student has a specific role, but we'll integrate all our work at the end to create a complete, functional game!

+
+
+ + +
+
+

Backend Developer - Dima

+ +
+ +
+

Step 1: Prize System Setup

+

First, let's set up the prize money levels. Players earn more money for each correct answer.

+ +
+ + 
# 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
+
+ +
+

What this does: 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.

+

GUARANTEED_LEVELS: These are safety nets - if a player gets a question wrong after one of these levels, they still win the prize from that level.

+
+
+ +
+

Step 2: Game Session Setup

+

We need to track each player's game session - what question they're on, their prize money, etc.

+ +
+ + 
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'))
+
+ +
+

What this does: Creates a "/start" route that begins a new game. It resets the player's progress to zero and gives them one lifeline: fifty_fifty.

+

Session: Like a digital backpack that remembers your game progress as you play.

+

Routes: Different web addresses that do different things in our app.

+

Note: Although the original plan included multiple lifelines, the current implementation only includes the fifty_fifty lifeline for simplicity.

+
+
+ +
+

Step 3: Question Serving

+

We need to send questions to the player one by one as they progress.

+ +
+ + 
# 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
+
+ +
+

What this does: Reads the questions from the JSON file and sends the appropriate question based on how far the player has progressed.

+

JSON: A file format that stores data in an organized way, like a digital filing cabinet.

+

Session.get(): Safely checks what question the player is currently on.

+
+
+ +
+

Pro Tip: Test your backend by running python app.py and visiting http://localhost:5000/start in your browser!

+
+
+ + +
+
+

Database Manager - Danil

+ +
+ +
+

Step 1: Understanding JSON Structure

+

Our "database" is a JSON file that stores all the quiz questions, options, and correct answers.

+ +
+ + 
// 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
+
+ +
+

What this does: Creates a list of question objects. Each question has:

+
    +
  • question: The actual question text
    • +
  • options: List of 4 possible answers
    • +
  • correct_answer: The index (0-3) of the right answer
    • +
+

Important: The correct_answer uses 0-based indexing, so 0 = first option, 1 = second option, etc.

+
+
+ +
+

Step 2: Creating Russian Culture Questions

+

Create questions about Russian history, culture, geography, and famous people.

+ +
+ + 
{
+  "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
+}
+
+ +
+

What this does: Adds culturally relevant questions to our game. Make sure:

+
    +
  • Questions get progressively harder
    • +
  • Wrong answers are plausible (sound like they could be right)
    • +
  • Answers are factually accurate
    • +
+
+
+ +
+

Step 3: Complete Question Set

+

We need 15 questions total, with increasing difficulty.

+ +
+ + 
// 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
+}
+
+ +
+

What this does: Adds more challenging questions for the higher prize levels. These should require more specific knowledge.

+

Tip: Use a mix of history, geography, culture, science, and arts questions to make the game interesting!

+
+
+ +
+

Pro Tip: Validate your JSON at jsonlint.com to catch any syntax errors!

+
+
+ + +
+
+

Frontend Developer - Inna

+ +
+ +
+

Step 1: Basic Game HTML Structure

+

Create the main game screen where questions will be displayed.

+ +
+ + 
<!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>
+
+ +
+

What this does: Creates the basic structure of our game page with:

+
    +
  • A header with the game title and prize display
    • +
  • A container for the question and answer options
    • +
  • A button for the 50:50 lifeline
    • +
  • A game over screen that appears when the game ends
    • +
+

URL_FOR: A Flask function that creates the correct path to our CSS and JavaScript files.

+
+
+ +
+

Step 2: Utility Functions for DRY Code

+

Create utility functions to avoid repeating code and make our application more maintainable.

+ +
+ + 
// 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';
+    }
+}
+
+ +
+

What this does: These utility functions follow the DRY (Don't Repeat Yourself) principle:

+
    +
  • apiRequest(): Handles all API calls with consistent error handling
    • +
  • updateElementText(): Simplifies updating text content of elements
    • +
  • toggleElementVisibility(): Standardizes showing/hiding elements
    • +
+

DRY Principle: Writing code once and reusing it makes applications easier to maintain and less error-prone.

+
+
+ +
+

Step 3: JavaScript - Loading Questions

+

Use JavaScript to fetch questions from the backend and display them.

+ +
+ + 
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';
+    }
+}
+
+ +
+

What this does:

+
    +
  • apiRequest(): Uses our utility function to fetch questions from the backend
    • +
  • displayQuestion(): Updates the UI with the received question data
    • +
  • Utility functions: Uses our helper functions to simplify DOM manipulation
    • +
+

Event Handling: Makes the answer options clickable by assigning onclick handlers.

+
+
+ +
+

Step 4: Answer Selection & Game Flow

+

Handle what happens when a player selects an answer.

+ +
+ + 
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();
+}
+
+ +
+

What this does:

+
    +
  • selectAnswer(): Sends the chosen answer to the backend for checking
    • +
  • Visual feedback: Shows if the answer was correct or incorrect
    • +
  • Game flow: Progresses to the next question or ends the game based on the result
    • +
  • endGame(): Displays the final score and game over screen
    • +
+

setTimeout(): Adds a delay before progressing to give players time to see the result.

+
+
+ +
+

Step 5: Lifeline Implementation

+

Implement the 50:50 lifeline that removes two wrong answers.

+ +
+ + 
// 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)
+
+ +
+

What this does:

+
    +
  • Disables the button: Prevents using the lifeline multiple times
    • +
  • API call: Requests the backend to determine which options to remove
    • +
  • Hides options: Visually removes two wrong answer options from the screen
    • +
+

Error handling: Gracefully handles errors and re-enables the button if the lifeline fails.

+
+
+
+ + +
+
+

Graphics Designer - Artyom

+ +
+ +
+

Step 1: Russian Color Theme

+

Create a color scheme inspired by the Russian flag and traditional colors.

+ +
+ + 
/* 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;
+}
+
+ +
+

What this does: Establishes a color palette based on the Russian flag colors and applies them to our game:

+
    +
  • CSS Variables: Define colors once, use everywhere (easy to change later)
    • +
  • Gradients: Create smooth color transitions for visual appeal
    • +
  • Box Shadow: Adds depth to elements so they don't look flat
    • +
+
+
+ +
+

Step 2: Question and Option Styling

+

Style the question display and answer options to be clear and attractive.

+ +
+ + 
.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;
+}
+
+ +
+

What this does:

+
    +
  • Grid Layout: Arranges answer options in two columns
    • +
  • Hover Effects: Makes buttons feel interactive
    • +
  • Transitions: Creates smooth animations for state changes
    • +
  • Feedback Colors: Green for correct answers, red for incorrect
    • +
+

CSS Grid: Modern way to create responsive layouts without complex calculations.

+
+
+ +
+

Step 3: Lifeline and Prize Styling

+

Style the lifeline buttons and prize display to match the Russian theme.

+ +
+ + 
.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;
+    }
+}
+
+ +
+

What this does:

+
    +
  • Flexbox: Centers the lifeline buttons horizontally
    • +
  • Golden Gradient: Makes lifeline buttons stand out
    • +
  • Disabled State: Shows when lifelines have been used
    • +
  • Responsive Design: Adapts layout for mobile devices
    • +
+

Media Queries: Apply different styles based on screen size - crucial for mobile users!

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/quiz_game/README.md b/quiz_game/README.md new file mode 100644 index 0000000..3f10ba0 --- /dev/null +++ b/quiz_game/README.md @@ -0,0 +1,13 @@ +# Quizimoto - Russian Millionaire Quiz Game + +## Team Roles: +- **Dima**: Backend Developer (app.py) +- **Inna**: Frontend Developer (templates/, static/script.js) +- **Danil**: Database Designer (questions.json) +- **Artyom**: Graphics/UX Designer (static/style.css, visual design) + +## Development Instructions: +1. Each team member focuses on their designated files +2. Commit and push changes regularly +3. Test your components independently +4. Collaborate on integration issues diff --git a/quiz_game/Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html b/quiz_game/Russian_Millionaire_Quiz_Game_Comprehensive_Guide.html new file mode 100644 index 0000000..e62436e --- /dev/null +++ b/quiz_game/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 +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/quiz_game/__pycache__/app.cpython-313.pyc b/quiz_game/__pycache__/app.cpython-313.pyc new file mode 100644 index 0000000..ca34215 Binary files /dev/null and b/quiz_game/__pycache__/app.cpython-313.pyc differ diff --git a/quiz_game/app.py b/quiz_game/app.py new file mode 100644 index 0000000..4183bd8 --- /dev/null +++ b/quiz_game/app.py @@ -0,0 +1,151 @@ +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 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 = [ + 100, 200, 300, 500, 1000, + 2000, 4000, 8000, 16000, 32000, + 64000, 125000, 250000, 500000, 1000000 +] + +GUARANTEED_LEVELS = [5, 10] # First and second guaranteed levels + +def get_current_question(): + """Get current question data from session""" + current_q_index = session.get('current_question', 0) + questions = session.get('questions', []) + + if current_q_index >= len(questions): + return None + + return questions[current_q_index], current_q_index + +def calculate_guaranteed_prize(current_index): + """Calculate the guaranteed prize based on current question index""" + final_score = 0 + for level in sorted(GUARANTEED_LEVELS, reverse=True): + if current_index + 1 >= level: + final_score = PRIZE_LEVELS[level - 1] if level <= len(PRIZE_LEVELS) else 0 + break + return final_score + +@app.route('/') +def index(): + return render_template('index.html') + +@app.route('/start') +def start_game(): + # Initialize game session + session['score'] = 0 + session['current_question'] = 0 + session['lifelines'] = ['fifty_fifty'] + session['questions'] = random.sample(questions_data, min(15, len(questions_data))) # Select up to 15 random questions + return render_template('game.html') + +@app.route('/get_question') +def get_question(): + current_q_index = session.get('current_question', 0) + + # Check if game is over (15 questions answered or no more questions) + if current_q_index >= len(session.get('questions', [])) or current_q_index >= 15: + return jsonify({ + "game_over": True, + "final_score": session.get('score', 0) + }) + + question_data = session['questions'][current_q_index] + + return jsonify({ + "question_number": current_q_index + 1, + "question": question_data['question'], + "options": question_data['options'], + "current_prize": PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else 1000000, + "game_over": False + }) + +@app.route('/answer', methods=['POST']) +def check_answer(): + data = request.get_json() + answer = data.get('answer', '') + + question_info = get_current_question() + if not question_info: + return jsonify({"error": "No more questions"}) + + question_data, current_q_index = question_info + correct = answer == question_data['correct_answer'] + + if correct: + session['current_q_index'] = current_q_index + 1 + session['score'] = PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else session.get('score', 0) + + # Check if game is won (15th question answered correctly) + game_won = session['current_question'] >= min(15, len(session.get('questions', []))) + + return jsonify({ + "correct": True, + "correct_answer": question_data['correct_answer'], + "final_score": session['score'], + "game_over": game_won + }) + else: + # Game over with last guaranteed prize + final_score = calculate_guaranteed_prize(current_q_index) + + return jsonify({ + "correct": False, + "correct_answer": question_data['correct_answer'], + "final_score": final_score, + "game_over": True + }) + +@app.route('/lifeline/') +def use_lifeline(lifeline_name): + if lifeline_name != 'fifty_fifty': + return jsonify({"error": "Unknown lifeline"}) + + if 'fifty_fifty' not in session.get('lifelines', []): + return jsonify({"error": "Lifeline already used"}) + + question_info = get_current_question() + if not question_info: + return jsonify({"error": "No current question"}) + + # Remove the lifeline from available lifelines + session['lifelines'].remove('fifty_fifty') + + question_data, _ = question_info + correct_answer = question_data['correct_answer'] + options = question_data['options'] + + # Find indices of wrong answers to remove (we need to remove 2) + wrong_indices = [i for i, option in enumerate(options) if option != correct_answer] + + # Randomly select 2 wrong indices to remove + indices_to_remove = random.sample(wrong_indices, min(2, len(wrong_indices))) + indices_to_remove.sort(reverse=True) # Sort in descending order for safe removal + + return jsonify({ + "remove_indices": indices_to_remove + }) + +if __name__ == '__main__': + app.run(debug=True) \ No newline at end of file diff --git a/quiz_game/docs/.DS_Store b/quiz_game/docs/.DS_Store new file mode 100644 index 0000000..5b8e434 Binary files /dev/null and b/quiz_game/docs/.DS_Store differ diff --git a/quiz_game/docs/README.md b/quiz_game/docs/README.md new file mode 100644 index 0000000..f8941a8 --- /dev/null +++ b/quiz_game/docs/README.md @@ -0,0 +1,19 @@ +# Project Documentation + +This directory contains all the documentation for the Millionaire Quiz Game project. + +## Structure + +- [/roles](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles) - Role-specific instructions and guidelines for team members +- [/technical-specs](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/technical-specs) - Technical specifications and architecture documents + +## Role Documentation + +Each team member has their own instruction file: + +- [Frontend Developer (Inna)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/frontend-developer-inna.md) +- [Backend Developer (Dima)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/backend-developer-dima.md) +- [Database Designer (Danil)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/database-designer-danil.md) +- [Graphics Designer (Artyom)](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/docs/roles/graphics-designer-artyom.md) + +These documents contain step-by-step instructions for implementing various parts of the application. \ No newline at end of file diff --git a/quiz_game/docs/roles/backend-developer-dima.md b/quiz_game/docs/roles/backend-developer-dima.md new file mode 100644 index 0000000..49ee568 --- /dev/null +++ b/quiz_game/docs/roles/backend-developer-dima.md @@ -0,0 +1,185 @@ +DIMA - BACKEND DEVELOPER MISSION +Your Role: Game Brain Developer | Your File: app.py + +๐Ÿ’ก What You're Building: You're creating the "brain" of the game - all the rules, scoring, and game logic! + +๐Ÿ“‹ LESSON 1-2: SETUP & PRIZE SYSTEM + +Step 1: Fork and Clone (10 minutes) +1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2 +2. Click the "Fork" button (creates your copy) +3. Copy your forked repository URL +4. Open Terminal and type: + git clone [YOUR-FORKED-URL-HERE] + cd ai6-m2 + git checkout -b dima-backend-work + +Step 2: Create the Prize Money System (20 minutes) +Open app.py and find these lines around line 13: + +# Prize structure (15 levels) +PRIZE_LEVELS = [ + 100, 200, 300, 500, 1000, + 2000, 4000, 8000, 16000, 32000, + 64000, 125000, 250000, 500000, 1000000 +] + +This is already implemented! Notice how the prizes increase as the player progresses through the questions. + +Step 3: Review Game Session Management (15 minutes) +Look at the [start_game](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L42-L48) function (around line 42): + +```python +@app.route('/start') +def start_game(): + # Initialize game session + session['score'] = 0 + session['current_question'] = 0 + session['lifelines'] = ['fifty_fifty'] + session['questions'] = random.sample(questions_data, min(15, len(questions_data))) + return render_template('game.html') +``` + +This function initializes the game session with: +- Starting score of 0 +- Current question index of 0 +- One lifeline available: fifty_fifty +- A random selection of up to 15 questions from the database + +๐Ÿ“‹ LESSON 3-4: QUESTION RETRIEVAL & ANSWER VALIDATION + +Step 4: Review Question Retrieval (15 minutes) +Check the [get_question](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L50-L66) function (around line 50): + +```python +@app.route('/get_question') +def get_question(): + current_q_index = session.get('current_question', 0) + + # Check if game is over + if current_q_index >= min(15, len(session.get('questions', []))): + return jsonify({ + "game_over": True, + "final_score": session.get('score', 0) + }) + + question_data = session['questions'][current_q_index] + + return jsonify({ + "question_number": current_q_index + 1, + "question": question_data['question'], + "options": question_data['options'], + "current_prize": PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else 1000000, + "game_over": False + }) +``` + +This function retrieves the current question and formats it for the frontend. + +Step 5: Review Answer Validation (20 minutes) +Look at the [check_answer](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L68-L103) function (around line 68): + +```python +@app.route('/answer', methods=['POST']) +def check_answer(): + data = request.get_json() + answer = data.get('answer', '') + + question_info = get_current_question() + if not question_info: + return jsonify({"error": "No more questions"}) + + question_data, current_q_index = question_info + correct = answer == question_data['correct_answer'] + + if correct: + session['current_question'] = current_q_index + 1 + session['score'] = PRIZE_LEVELS[current_q_index] if current_q_index < len(PRIZE_LEVELS) else session.get('score', 0) + + # Check if game is won (15th question answered correctly) + game_won = session['current_question'] >= min(15, len(session.get('questions', []))) + + return jsonify({ + "correct": True, + "correct_answer": question_data['correct_answer'], + "final_score": session['score'], + "game_over": game_won + }) + else: + # Game over with last guaranteed prize + final_score = calculate_guaranteed_prize(current_q_index) + + return jsonify({ + "correct": False, + "correct_answer": question_data['correct_answer'], + "final_score": final_score, + "game_over": True + }) +``` + +Notice the helper functions: +- [get_current_question()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L20-L28) - Gets the current question data from session +- [calculate_guaranteed_prize()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L30-L37) - Calculates prize based on guaranteed levels + +๐Ÿ“‹ LESSON 5-6: LIFELINES & REFACTORING + +Step 6: Review Lifeline Implementation (15 minutes) +Check the [use_lifeline](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/app.py#L105-L133) function (around line 105): + +```python +@app.route('/lifeline/') +def use_lifeline(lifeline_name): + if lifeline_name != 'fifty_fifty': + return jsonify({"error": "Unknown lifeline"}) + + if 'fifty_fifty' not in session.get('lifelines', []): + return jsonify({"error": "Lifeline already used"}) + + question_info = get_current_question() + if not question_info: + return jsonify({"error": "No current question"}) + + # Remove the lifeline from available lifelines + session['lifelines'].remove('fifty_fifty') + + question_data, _ = question_info + correct_answer = question_data['correct_answer'] + options = question_data['options'] + + # Find indices of wrong answers to remove (we need to remove 2) + wrong_indices = [i for i, option in enumerate(options) if option != correct_answer] + + # Randomly select 2 wrong indices to remove + indices_to_remove = random.sample(wrong_indices, min(2, len(wrong_indices))) + indices_to_remove.sort(reverse=True) # Sort in descending order for safe removal + + return jsonify({ + "remove_indices": indices_to_remove + }) +``` + +Notice the improvements: +- Uses list comprehension for finding wrong indices +- 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 +โ˜ Understand question retrieval logic +โ˜ Review answer validation process +โ˜ Understand lifeline implementation +โ˜ Recognize the use of helper functions for DRY code +โ˜ All code pushed to your branch +โ˜ Created Pull Request for teacher to review + +๐ŸŽ‰ Congratulations Dima! You built the entire game backend! \ No newline at end of file diff --git a/quiz_game/docs/roles/database-designer-danil.md b/quiz_game/docs/roles/database-designer-danil.md new file mode 100644 index 0000000..121c5c7 --- /dev/null +++ b/quiz_game/docs/roles/database-designer-danil.md @@ -0,0 +1,100 @@ +DANIL - DATABASE DESIGNER MISSION +Your Role: Question Master | Your File: questions.json + +๐Ÿ’ก What You're Building: You're creating all the quiz questions about Russian culture! + +๐Ÿ“‹ LESSON 1-2: SETUP & BASIC QUESTIONS + +Step 1: Fork and Clone (10 minutes) +1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2 +2. Click the "Fork" button (creates your copy) +3. Copy your forked repository URL +4. Open Terminal and type: + git clone [YOUR-FORKED-URL-HERE] + cd ai6-m2 + git checkout -b danil-database-work + +Step 2: Review the Question Format (10 minutes) +Open questions.json and look at the example: + +```json +[ + { + "question": "What is the capital of Russia?", + "options": ["St. Petersburg", "Moscow", "Kazan", "Sochi"], + "correct_answer": "Moscow" + }, + { + "question": "Which Russian author wrote 'War and Peace'?", + "options": ["Dostoevsky", "Tolstoy", "Pushkin", "Chekhov"], + "correct_answer": "Tolstoy" + } +] +``` + +Each question needs: +- question: The actual question text +- options: 4 possible answers (A, B, C, D) +- correct_answer: The right answer (must match exactly one of the options) + +Step 3: Understand the Current Implementation (15 minutes) +Notice that the current implementation: +- Has properly formatted JSON (no comments) +- Has 5 sample questions about Russian culture +- Follows the correct structure for integration with the backend + +๐Ÿ“‹ LESSON 3-4: EXPANDING THE DATABASE + +Step 4: Add More Questions (30 minutes) +Add at least 10 more questions to reach a total of 15. Here are some examples: + +```json + { + "question": "What is the traditional Russian soup made with beets?", + "options": ["Shchi", "Borscht", "Solyanka", "Ukha"], + "correct_answer": "Borscht" + }, + { + "question": "Which Russian ruler was known as 'The Terrible'?", + "options": ["Peter I", "Catherine II", "Ivan IV", "Nicholas II"], + "correct_answer": "Ivan IV" + }, + { + "question": "What is the name of the famous Russian ballet company?", + "options": ["Moscow Ballet", "St. Petersburg Ballet", "Bolshoi Ballet", "Russian National Ballet"], + "correct_answer": "Bolshoi Ballet" + } +``` + +Requirements for new questions: +- Make sure questions cover different aspects of Russian culture (history, literature, food, arts, geography) +- 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 +โ˜ Add 10+ more questions about Russian culture +โ˜ Verify all questions follow the correct structure +โ˜ Check that correct_answer matches exactly one option +โ˜ All code pushed to your branch +โ˜ Created Pull Request for teacher to review + +๐ŸŽ‰ Congratulations Danil! You built the entire question database! \ No newline at end of file diff --git a/quiz_game/docs/roles/frontend-developer-inna.md b/quiz_game/docs/roles/frontend-developer-inna.md new file mode 100644 index 0000000..94ef866 --- /dev/null +++ b/quiz_game/docs/roles/frontend-developer-inna.md @@ -0,0 +1,225 @@ +INNA - FRONTEND DEVELOPER MISSION +Your Role: Game Interface Designer | Your Files: templates/ and static/script.js + +๐Ÿ’ก What You're Building: You're creating what players see and click on! + +๐Ÿ“‹ LESSON 1-2: SETUP & BASIC GAME FLOW + +Step 1: Fork and Clone (10 minutes) +1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2 +2. Click the "Fork" button (creates your copy) +3. Copy your forked repository URL +4. Open Terminal and type: + git clone [YOUR-FORKED-URL-HERE] + cd ai6-m2 + git checkout -b inna-frontend-work + +Step 2: Review Question Loading (15 minutes) +Open static/script.js and look at the [loadQuestion](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L9-L19) function: + +```javascript +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)); +} +``` + +Notice how it uses the [apiRequest](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L5-L12) utility function for cleaner code. + +Step 3: Review Question Display (15 minutes) +Look at the [displayQuestion](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L21-L41) function: + +```javascript +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'; + } +} +``` + +Notice the utility functions: +- [updateElementText()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L14-L19) - Simplifies updating element text +- [toggleElementVisibility()](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L21-L27) - Standardizes showing/hiding elements + +๐Ÿ“‹ LESSON 3-4: ANSWER HANDLING & LIFELINES + +Step 4: Review Answer Selection (15 minutes) +Check the [selectAnswer](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L43-L72) function: + +```javascript +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)); +} +``` + +Step 5: Review Lifeline Implementation (15 minutes) +Look at the [useFiftyFifty](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L74-L100) function: + +```javascript +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; + } + }); +} +``` + +Notice the improvements: +- Uses the [apiRequest](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L5-L12) utility function +- Has proper error handling with element checks +- Cleaner, more maintainable code + +Step 6: Review Utility Functions (10 minutes) +At the top of script.js, notice the utility functions that make the code DRY: + +```javascript +// 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'; + } +} +``` + +๐Ÿ“‹ LESSON 5-6: GAME FLOW COMPLETION + +Step 7: Review Game End and Restart (10 minutes) +Look at the [endGame](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L102-L108) and [restartGame](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict_repos/ai6-m2/static/script.js#L110-L112) functions: + +```javascript +function endGame(score) { + updateElementText('final-prize', score); + toggleElementVisibility('game-over', true); + toggleElementVisibility('question-box', false); + toggleElementVisibility('lifeline', false); +} + +function restartGame() { + window.location.href = '/start'; +} +``` + +Notice how they use the utility functions to simplify the code. + +โœ… INNA'S COMPLETION CHECKLIST +โ˜ Review question loading implementation +โ˜ Understand question display logic +โ˜ Review answer handling process +โ˜ Understand lifeline implementation +โ˜ Recognize utility functions for DRY code +โ˜ Review game flow completion +โ˜ 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/quiz_game/docs/roles/graphics-designer-artyom.md b/quiz_game/docs/roles/graphics-designer-artyom.md new file mode 100644 index 0000000..e0bb500 --- /dev/null +++ b/quiz_game/docs/roles/graphics-designer-artyom.md @@ -0,0 +1,319 @@ +ARTYOM - GRAPHICS DESIGNER MISSION +Your Role: Visual Designer | Your File: static/style.css + +๐Ÿ’ก What You're Building: You're making the game look amazing with Russian themes! + +๐Ÿ“‹ LESSON 1-2: SETUP & RUSSIAN COLOR THEME + +Step 1: Fork and Clone (10 minutes) +1. Go to: https://gitea.techshare.cc/technolyceum/ai6-m2 +2. Click the "Fork" button (creates your copy) +3. Copy your forked repository URL +4. Open Terminal and type: + git clone [YOUR-FORKED-URL-HERE] + cd ai6-m2 + git checkout -b artyom-graphics-work + +Step 2: Enhance the Russian Color Theme (30 minutes) +Open static/style.css and find the body section. + +DELETE these lines: + +body { + background: #1a2a6c; + color: white; + min-height: 100vh; + padding: 20px; +} + +TYPE THIS instead: + +body { + background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); + color: white; + min-height: 100vh; + padding: 20px; + font-family: 'Arial', 'Helvetica', sans-serif; +} + +Step 3: Make the Header Look Russian (20 minutes) +Find the header section. + +DELETE these lines: + +header { + text-align: center; + margin-bottom: 20px; + padding: 15px; + background: #b21f1f; + border-radius: 8px; +} + +TYPE THIS instead: + +/* Keep container styling from current implementation */ +.container { + background: rgba(255, 255, 255, 0.9); + color: #333; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + margin: 15px 0; +} + +h1 { + color: #1a237e; + text-align: center; + font-size: 2.5rem; + margin: 20px 0; +} + +Save and push: + git add static/style.css + git commit -m "feat: enhanced Russian color theme" + git push origin artyom-graphics-work + +๐Ÿ“‹ LESSON 3-4: GAME ELEMENTS STYLING + +Step 4: Style the Question Container (25 minutes) +Find the question-container section. + +DELETE these lines: + +.question-box { + background: rgba(255, 255, 255, 0.9); + color: #333; + padding: 15px; + border-radius: 8px; + margin: 15px 0; + box-shadow: 0 2px 5px rgba(0,0,0,0.2); +} + +.question { + font-size: 1.4rem; + margin-bottom: 15px; + text-align: center; + font-weight: bold; +} + +TYPE THIS instead: + +.question-container { + background: rgba(255, 255, 255, 0.15); + padding: 25px; + border-radius: 15px; + margin-bottom: 25px; + border: 1px solid rgba(253, 187, 45, 0.3); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + backdrop-filter: blur(10px); +} + +.question { + font-size: 1.4rem; + margin-bottom: 25px; + text-align: center; + font-weight: bold; + color: #fdbb2d; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); +} + +.question-number { + color: #fdbb2d; + font-size: 1.1rem; + margin-bottom: 15px; + text-align: center; + font-weight: bold; +} + +Step 5: Make Answer Buttons Beautiful (25 minutes) +Find the option styling. + +DELETE these lines: + +.option { + background: #2196f3; + color: white; + padding: 12px; + border-radius: 5px; + cursor: pointer; + text-align: center; + margin: 5px 0; + transition: background 0.3s; + font-weight: bold; +} + +.option:hover { + background: #1976d2; +} + +.option.correct { + background: #4caf50; +} + +.option.wrong { + background: #f44336; +} + +TYPE THIS instead: + +.option { + background: linear-gradient(135deg, #fdbb2d, #e6a923); + color: #1a2a6c; + padding: 18px; + border-radius: 10px; + cursor: pointer; + text-align: center; + font-weight: bold; + border: 2px solid #1a2a6c; + transition: all 0.3s ease; + font-size: 1.1rem; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); +} + +.option:hover { + background: linear-gradient(135deg, #e6a923, #fdbb2d); + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); +} + +.option:active { + transform: translateY(1px); +} + +Save and push: + git add static/style.css + git commit -m "feat: enhanced question and option styling" + git push origin artyom-graphics-work + +๐Ÿ“‹ LESSON 5-6: LIFELINES & FINAL TOUCHES + +Step 6: Style Lifelines and Game Over Screen (40 minutes) +Find the lifelines section. + +DELETE these lines: + +.lifelines { + background: rgba(255, 255, 255, 0.1); + padding: 15px; + border-radius: 8px; +} + +.lifeline-buttons { + display: flex; + gap: 10px; + justify-content: center; +} + +.lifeline-btn { + background: #1a2a6c; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; +} + +TYPE THIS instead: + +.result.correct { + background: #c8e6c9; + color: #2e7d32; + padding: 10px; + border-radius: 5px; + margin: 10px 0; +} + +.result.incorrect { + background: #ffcdd2; + color: #c62828; + padding: 10px; + border-radius: 5px; + margin: 10px 0; +} + +.lifeline { + background: #ff9800; + color: white; + border: none; + padding: 12px 20px; + border-radius: 5px; + cursor: pointer; + display: block; + margin: 15px auto; + font-weight: bold; + transition: background 0.3s; +} + +.lifeline:hover { + background: #f57c00; +} + +.lifeline:disabled { + background: #ccc; + cursor: not-allowed; +} + +Step 7: Make Game Over Screen Epic (20 minutes) +Find the game-over-screen section. + +DELETE these lines: + +.game-over-screen { + text-align: center; + padding: 30px; +} + +TYPE THIS instead: + +.game-over-screen { + text-align: center; + padding: 30px; + background: white; + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + margin: 15px 0; +} + +.game-over-screen h2 { + color: #d32f2f; + font-size: 2rem; + margin-bottom: 15px; +} + +.game-over-screen p { + font-size: 1.2rem; + margin-bottom: 20px; + color: #333; +} + +.game-over-screen button { + background: #d32f2f; + color: white; + border: none; + padding: 12px 24px; + border-radius: 5px; + font-size: 1rem; + cursor: pointer; + transition: background 0.3s; +} + +.game-over-screen button:hover { + background: #b71c1c; +} + +Final push: + git add static/style.css + git commit -m "feat: completed Russian-themed visual design" + git push origin artyom-graphics-work + +โœ… ARTYOM'S COMPLETION CHECKLIST +โ˜ Russian flag colors used throughout (white, blue, red, gold) +โ˜ Gradient backgrounds look professional +โ˜ Buttons have hover effects and animations +โ˜ Game elements have shadows and borders +โ˜ Text is readable with good contrast +โ˜ Game over screen looks exciting +โ˜ All code pushed to your branch +โ˜ Created Pull Request for teacher to review + +๐ŸŽ‰ Congratulations Artyom! You made the game look amazing! \ No newline at end of file diff --git a/quiz_game/docs/technical-specs/teacher-project-guide.md b/quiz_game/docs/technical-specs/teacher-project-guide.md new file mode 100644 index 0000000..a290800 --- /dev/null +++ b/quiz_game/docs/technical-specs/teacher-project-guide.md @@ -0,0 +1,262 @@ +# Teacher - Complete Project Manager Guide + +## YOUR ROLES: +- Team Lead - Guide students through development +- Git Master - Manage repositories and merges +- User Tester - Verify all components work +- Integration Manager - Combine all student work + +## PROJECT TIMELINE (6 Lessons) + +========================================= + +## LESSON 1-2: SETUP & FOUNDATION +========================================= + +### STUDENT GOALS: +- Dima: Implement prize money system and game logic in app.py +- Danil: Create first 5 Russian culture questions +- Inna: Make basic question loading and display work +- Artyom: Start Russian color theme in CSS + +### TEACHER TASKS: + +โœ… Setup Verification: +1. Ensure main repo is ready: + https://gitea.techshare.cc/technolyceum/ai6-m2 + +2. Verify all students have: + - Forked the repository + - Created their role-specific branch + - Made first commit + +3. Quick Progress Check (Terminal): +```bash +# Check each student's fork manually in Gitea web interface +# Look for 4 branches: +# - dima-backend-work +# - inna-frontend-work +# - danil-database-work +# - artyom-graphics-work +``` + +โœ… Individual Progress Checks: +```bash +# Temporary check for each student: +git clone [STUDENT-FORK-URL] temp-check +cd temp-check +git checkout [THEIR-BRANCH] + +# Dima Check: +grep -A 15 "PRIZE_LEVELS" app.py + +# Danil Check: +python3 -c "import json; print('Questions:', len(json.load(open('questions.json'))))" + +# Inna Check: +grep -c "function" static/script.js + +# Artyom Check: +grep -c "background" static/style.css + +cd .. +rm -rf temp-check +``` + +========================================= + +## LESSON 3-4: CORE DEVELOPMENT +========================================= + +### STUDENT GOALS: +- Dima: Complete game session management and answer validation +- Danil: 10+ questions completed +- Inna: Answer handling system and lifelines +- Artyom: Enhanced question/option styling + +### TEACHER TASKS: + +โœ… Code Review Workshop: +Show examples of DRY (Don't Repeat Yourself) principles: + +**Before (repetitive code):** +```javascript +document.getElementById('q-number').textContent = data.question_number; +document.getElementById('question-text').textContent = data.question; +document.getElementById('prize').textContent = data.current_prize; +``` + +**After (DRY code with utility functions):** +```javascript +updateElementText('q-number', data.question_number); +updateElementText('question-text', data.question); +updateElementText('prize', data.current_prize); +``` + +โœ… Git Workshop: +```bash +# Help students resolve merge conflicts: +git fetch origin +git checkout main +git pull origin main +git checkout [THEIR-BRANCH] +git merge main + +# If conflicts occur: +# 1. Edit conflicted files +# 2. Remove conflict markers +# 3. git add . +# 4. git commit +``` + +========================================= + +## LESSON 5-6: INTEGRATION & TESTING +========================================= + +### STUDENT GOALS: +- Dima: Finalize lifelines and error handling +- Danil: Complete 15 questions with difficulty progression +- Inna: Complete game flow and end game screens +- Artyom: Polish all visual elements and animations + +### FINAL INTEGRATION: + +โœ… Integration Steps: +1. Merge all branches to main: +```bash +# On main branch: +git merge dima-backend-work +git merge danil-database-work +git merge inna-frontend-work +git merge artyom-graphics-work +``` + +2. Resolve any conflicts + +3. Test complete game flow: + - Start game from index.html + - Play through all questions + - Test lifelines + - Verify scoring system + - Check end game states + +โœ… Final Testing Checklist: +- [ ] All 15 questions load correctly +- [ ] Answer validation works +- [ ] Scoring system functions properly +- [ ] Lifelines function correctly +- [ ] Game over states work (win/lose) +- [ ] Restart functionality works +- [ ] Responsive design on different screens +- [ ] No console errors in browser + +========================================= + +## PROJECT ARCHITECTURE OVERVIEW +========================================= + +### File Structure: +``` +/ai6-m2 +โ”œโ”€โ”€ app.py # Flask backend (Dima) +โ”œโ”€โ”€ questions.json # Question database (Danil) +โ”œโ”€โ”€ static/ +โ”‚ โ”œโ”€โ”€ script.js # Frontend logic (Inna) +โ”‚ โ””โ”€โ”€ style.css # Styling (Artyom) +โ”œโ”€โ”€ templates/ +โ”‚ โ”œโ”€โ”€ index.html # Landing page +โ”‚ โ””โ”€โ”€ game.html # Game interface +โ”œโ”€โ”€ docs/ +โ”‚ โ”œโ”€โ”€ roles/ # Role-specific instructions +โ”‚ โ””โ”€โ”€ technical-specs/ # Technical documentation +โ””โ”€โ”€ README.md # Project overview +``` + +### Technical Implementation: + +**Backend (app.py):** +- Flask routes for game operations +- Session management for game state +- JSON data handling for questions +- Helper functions for DRY code + +**Frontend (script.js):** +- API communication with backend +- DOM manipulation for game interface +- Utility functions for common operations +- Event handling for user interactions + +**Database (questions.json):** +- JSON format for easy parsing +- Structured question data with options +- Correct answer validation + +**Styling (style.css):** +- Responsive design principles +- Russian-themed color scheme +- Component-based styling approach + +========================================= + +## TROUBLESHOOTING GUIDE +========================================= + +### Common Issues and Solutions: + +1. **"TypeError: Cannot read properties of undefined"** + - Usually caused by API returning error instead of data + - Solution: Check backend implementation and JSON formatting + +2. **Lifelines not working** + - Check session management for lifeline state + - Verify frontend-backend communication + +3. **Scoring issues** + - Verify prize structure in backend + - Check guaranteed level calculations + +4. **Git merge conflicts** + - Use systematic approach to resolve conflicts + - Communicate with team members about changes + +### Verification Commands: + +```bash +# Run the application +export FLASK_APP=app.py +python -m flask run + +# Check for syntax errors +python -m py_compile app.py +npx eslint static/script.js + +# Validate JSON +python -m json.tool questions.json +``` + +========================================= + +## ASSESSMENT CRITERIA +========================================= + +### Technical Skills: +- Code quality and organization (20%) +- Implementation of requirements (30%) +- Problem-solving and debugging (20%) +- Git usage and collaboration (15%) +- Documentation and comments (15%) + +### Collaboration: +- Team communication +- Code review participation +- Helpfulness to teammates +- Integration contribution + +### Final Product: +- Game functions without errors +- All features implemented +- Visually appealing interface +- Good user experience + +๐ŸŽ‰ Congratulations on completing the Russian Millionaire Quiz Game project! \ No newline at end of file diff --git a/quiz_game/gitea passwords.rtf b/quiz_game/gitea passwords.rtf new file mode 100644 index 0000000..766008e --- /dev/null +++ b/quiz_game/gitea passwords.rtf @@ -0,0 +1,36 @@ +{\rtf1\ansi\ansicpg1252\cocoartf2818 +\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 .SFNS-Regular_wdth_opsz110000_GRAD_wght2580000;} +{\colortbl;\red255\green255\blue255;\red19\green21\blue25;\red255\green255\blue255;} +{\*\expandedcolortbl;;\cssrgb\c9412\c10980\c12941;\cssrgb\c100000\c100000\c100000;} +\paperw11900\paperh16840\margl1440\margr1440\vieww11900\viewh14080\viewkind1 +\deftab720 +\pard\pardeftab720\partightenfactor0 + +\f0\b\fs32 \cf2 \cb3 \expnd0\expndtw0\kerning0 +Inna\ +ai6s4\ +ai6s4@ict.ru\ +\pard\pardeftab720\partightenfactor0 +\cf2 Passwords: Student123!\ +\ +\cf2 \ +\pard\pardeftab720\partightenfactor0 +\cf2 Daniel\ +ai6s3\ +ai6s3@ict.ru\ +\pard\pardeftab720\partightenfactor0 +\cf2 Passwords: Student123!\cf2 \ +\pard\pardeftab720\partightenfactor0 +\cf2 \ +\ +Artyom\ +ai6s2\ +ai6s2@ict.ru\ +\pard\pardeftab720\partightenfactor0 +\cf2 Passwords: Student123!\cf2 \ +\pard\pardeftab720\partightenfactor0 +\cf2 \ +Dima\ +ai6s1\ +ai6s1@ict.ru\ +Passwords: Student123!} \ No newline at end of file diff --git a/quiz_game/questions.json b/quiz_game/questions.json new file mode 100644 index 0000000..aa3aaee --- /dev/null +++ b/quiz_game/questions.json @@ -0,0 +1,27 @@ +[ + { + "question": "What is the capital of Russia?", + "options": ["St. Petersburg", "Moscow", "Kazan", "Sochi"], + "correct_answer": "Moscow" + }, + { + "question": "Which Russian author wrote 'War and Peace'?", + "options": ["Dostoevsky", "Tolstoy", "Pushkin", "Chekhov"], + "correct_answer": "Tolstoy" + }, + { + "question": "What is the traditional Russian soup made with beets?", + "options": ["Shchi", "Borscht", "Solyanka", "Ukha"], + "correct_answer": "Borscht" + }, + { + "question": "Which Russian ruler was known as 'The Terrible'?", + "options": ["Peter I", "Catherine II", "Ivan IV", "Nicholas II"], + "correct_answer": "Ivan IV" + }, + { + "question": "What is the name of the famous Russian ballet company?", + "options": ["Moscow Ballet", "St. Petersburg Ballet", "Bolshoi Ballet", "Russian National Ballet"], + "correct_answer": "Bolshoi Ballet" + } +] \ No newline at end of file diff --git a/quiz_game/requirements.txt b/quiz_game/requirements.txt new file mode 100644 index 0000000..7b5701b --- /dev/null +++ b/quiz_game/requirements.txt @@ -0,0 +1,2 @@ +# requirements.txt +Flask==2.3.3 \ No newline at end of file diff --git a/quiz_game/starter_templates/app.py b/quiz_game/starter_templates/app.py new file mode 100644 index 0000000..8c447e2 --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/docs/README.md b/quiz_game/starter_templates/docs/README.md new file mode 100644 index 0000000..f8b660f --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/docs/roles/backend-developer-dima.md b/quiz_game/starter_templates/docs/roles/backend-developer-dima.md new file mode 100644 index 0000000..273a1e8 --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/docs/roles/database-designer-danil.md b/quiz_game/starter_templates/docs/roles/database-designer-danil.md new file mode 100644 index 0000000..e6e003a --- /dev/null +++ b/quiz_game/starter_templates/docs/roles/database-designer-danil.md @@ -0,0 +1,45 @@ +// 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}") + +// 2. Database population instructions (new section) +// TODO: Create function to insert questions into database (line 13-25) +def insert_questions(): + questions = [ + { + "question_number": 0, + "question": "What is the capital of Russia?", + "options": ["Moscow", "Saint Petersburg", "Novosibirsk", "Yekaterinburg"], + "correct_answer": 0 + }, + { + "question_number": 1, + "question": "Which river is the longest in Russia?", + "options": ["Volga", "Yenisey", "Ob", "Amur"], + "correct_answer": 1 + } + ] + + # Insert questions into collection + db.questions.insert_many(questions) + print("Questions inserted successfully!") + +// TODO: Call insert_questions function (line 27) +if __name__ == "__main__":: + insert_questions() \ No newline at end of file diff --git a/quiz_game/starter_templates/docs/roles/frontend-developer-inna.md b/quiz_game/starter_templates/docs/roles/frontend-developer-inna.md new file mode 100644 index 0000000..070178c --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/static/script.js b/quiz_game/starter_templates/static/script.js new file mode 100644 index 0000000..ddc4447 --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/static/style.css b/quiz_game/starter_templates/static/style.css new file mode 100644 index 0000000..76822f4 --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/templates/game.html b/quiz_game/starter_templates/templates/game.html new file mode 100644 index 0000000..1028931 --- /dev/null +++ b/quiz_game/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/quiz_game/starter_templates/templates/index.html b/quiz_game/starter_templates/templates/index.html new file mode 100644 index 0000000..98a7f54 --- /dev/null +++ b/quiz_game/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 diff --git a/quiz_game/static/script.js b/quiz_game/static/script.js new file mode 100644 index 0000000..c051f66 --- /dev/null +++ b/quiz_game/static/script.js @@ -0,0 +1,149 @@ +// script.js +let currentQuestion = null; + +// 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'; + } +} + +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'; + } +} + +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 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; + } + }); +} + +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(); +} \ No newline at end of file diff --git a/quiz_game/static/style.css b/quiz_game/static/style.css new file mode 100644 index 0000000..bc60293 --- /dev/null +++ b/quiz_game/static/style.css @@ -0,0 +1,109 @@ +/* style.css */ +body { + font-family: Arial, sans-serif; + max-width: 600px; + margin: 0 auto; + padding: 20px; + background: #f0f0f0; +} + +.container { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +h1 { + color: #1a237e; + text-align: center; +} + +.score { + text-align: center; + font-size: 1.2em; + margin: 10px 0; + color: #d32f2f; +} + +.question-box { + background: #e3f2fd; + padding: 15px; + border-radius: 8px; + margin: 15px 0; +} + +.question-number { + font-weight: bold; + margin-bottom: 10px; +} + +.question { + font-size: 1.1em; + margin-bottom: 15px; +} + +.options { + display: grid; + gap: 8px; +} + +.option { + background: #2196f3; + color: white; + padding: 10px; + border-radius: 5px; + cursor: pointer; + text-align: center; +} + +.option:hover { + background: #1976d2; +} + +.option.correct { + background: #4caf50; +} + +.option.wrong { + background: #f44336; +} + +.result { + margin-top: 10px; + padding: 10px; + border-radius: 5px; + text-align: center; + display: none; +} + +.result.correct { + background: #c8e6c9; + color: #2e7d32; +} + +.result.incorrect { + background: #ffcdd2; + color: #c62828; +} + +.start-btn, .lifeline { + background: #ff9800; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + display: block; + margin: 10px auto; +} + +.lifeline:disabled { + background: #ccc; + cursor: not-allowed; +} + +.game-over { + text-align: center; + padding: 20px; +} \ No newline at end of file diff --git a/quiz_game/templates/game.html b/quiz_game/templates/game.html new file mode 100644 index 0000000..2a867fc --- /dev/null +++ b/quiz_game/templates/game.html @@ -0,0 +1,37 @@ + + + + + + + Russian Quiz - Game + + + +
+

Russian Quiz

+
Prize: 0 โ‚ฝ
+ +
+
Question 1/5
+
Loading...
+ +
+ +
+ +
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/quiz_game/templates/index.html b/quiz_game/templates/index.html new file mode 100644 index 0000000..0591a67 --- /dev/null +++ b/quiz_game/templates/index.html @@ -0,0 +1,23 @@ + + + + + + + Russian Quiz Game + + + +
+

Russian Quiz

+

Answer questions about Russian culture!

+ +
+ + + + \ No newline at end of file