Spaces:
Sleeping
Sleeping
| title: Addition Game | |
| emoji: ➕ | |
| colorFrom: green | |
| colorTo: blue | |
| sdk: docker | |
| pinned: false | |
| app_port: 7860 # Assuming Vite default port, adjust if different after changes | |
| # Simple Addition Game ➕ | |
| An interactive educational game designed to teach basic addition (sums up to 5, extendable) to young children. It uses numbers, colorful emojis, or a combination of both to make learning fun and engaging! | |
| ## 🎮 How to Play | |
| The game presents a simple addition problem (e.g., `1 + 2 = ?`). | |
| 1. **Observe the Problem**: See the two numbers to be added. | |
| 2. **Choose Display Mode**: At the top, select how you want to see the numbers: | |
| * **Number**: Shows only numerals (e.g., `1` and `2`). | |
| * **Object**: Shows only emojis (e.g., 🍎 and 🍎🍎). | |
| * **Both**: Shows numerals in boxes with emojis underneath each. | |
| 3. **Solve**: Determine the sum of the two numbers. | |
| 4. **Select Answer**: Click on one of the three answer options provided at the bottom of the screen. One of these options is the correct sum. | |
| 5. **Feedback**: The game will tell you if your answer is "Correct! 🎉" or "Try again! 🤔". | |
| 6. **New Question**: After a correct answer, a new addition problem is automatically generated. | |
| ## ✨ Features | |
| - **Visual Learning**: Uses numbers, a variety of emojis (fruits, animals, objects, etc.), or both to represent numbers. | |
| - **Interactive Display Modes**: Children can switch between seeing problems as numbers, objects, or a combination, catering to different learning preferences. | |
| - **Clear Question Format**: Presents addition problems in a clear, visual layout (e.g., `Num1 + Num2 = ?`). | |
| - **Multiple Choice Answers**: Provides three options, making it easy for young children to select their answer. | |
| - **Immediate Feedback**: Instant confirmation of correct or incorrect answers. | |
| - **Score Tracking**: Keeps a simple score of correct answers. | |
| - **Randomized Questions**: Generates addition problems with numbers from 0 to 5, ensuring the sum does not exceed 5 (configurable). | |
| - **Reduced Zero Probability**: The chance of 0 appearing as an operand is intentionally lowered to provide more varied practice. | |
| - **Responsive Design**: Adapts to different screen sizes (desktop, tablet, mobile). | |
| - **Child-Friendly UI**: Large, easy-to-click buttons and clear, colorful visuals. | |
| ## 🚀 How to Run | |
| This project is built with React (using Vite) and TypeScript. | |
| ### Development Mode | |
| ```bash | |
| # Clone the repository (if you haven't already) | |
| # git clone <repository-url> | |
| # cd <repository-name> | |
| # Install dependencies | |
| npm install | |
| # Start development server | |
| npm run dev | |
| ``` | |
| The game will typically be available at `http://localhost:5173` (Vite's default port). | |
| ### Production Build | |
| ```bash | |
| # Build for production | |
| npm run build | |
| # Preview production build | |
| npm run preview | |
| ``` | |
| ### Docker | |
| If a `Dockerfile` is configured (the one from the previous game might need adjustments for port or build steps if they changed significantly): | |
| ```bash | |
| # Build Docker image (example name) | |
| docker build -t addition-game . | |
| # Run container (example mapping to port 3000 on host) | |
| docker run -p 3000:5173 addition-game | |
| ``` | |
| ## 🎯 Educational Benefits | |
| - **Basic Addition Skills**: Children practice adding numbers with sums typically up to 5 (can be easily extended). | |
| - **Number Recognition**: Reinforces the visual representation of numbers. | |
| - **Object Counting**: Connects numerals with quantities of objects. | |
| - **Problem Solving**: Encourages children to think through and solve simple math problems. | |
| - **Visual-Numeric Association**: Helps bridge the gap between abstract numbers and concrete objects, especially in "Both" mode. | |
| ## 🎨 Emoji Pool | |
| The game uses a diverse pool of emojis to represent objects, including: | |
| 🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷 ⚽ 🏀 🎾 🏈 🎱 🎨 🎭 🎯 🚗 🚕 🚓 🚑 🚁 🚀 | |
| This pool can be easily modified in `src/App.tsx`. | |
| ## 🛠️ Technical Details | |
| ### Technologies Used | |
| - **React** with TypeScript | |
| - **Vite** for build tooling and development server | |
| - **CSS3** for styling | |
| ### Project Structure (Key Files) | |
| ``` | |
| src/ | |
| ├── App.tsx # Main game component, logic, and JSX structure | |
| ├── App.css # Styling for the game | |
| ├── main.tsx # Application entry point | |
| └── index.css # Global styles (if any beyond App.css) | |
| public/ | |
| ├── index.html # HTML template | |
| └── ... # Other static assets like favicons | |
| ``` | |
| ## 📱 Mobile Support | |
| The game is designed to be responsive and playable on various devices, including desktops, tablets, and mobile phones. | |
| ## 🤝 Contributing | |
| Contributions are welcome! Please follow standard Git practices: | |
| 1. Fork the repository. | |
| 2. Create a new branch for your feature (`git checkout -b feature/YourFeature`). | |
| 3. Commit your changes (`git commit -m 'Add some feature'`). | |
| 4. Push to the branch (`git push origin feature/YourFeature`). | |
| 5. Open a Pull Request. | |
| ## 📄 License | |
| This project is typically licensed under the MIT License (please verify if a `LICENSE` file exists or add one as appropriate). | |
| ## 🎓 Age Recommendation | |
| This game is suitable for children typically in **Preschool to early Elementary grades (ages 3-7)** who are beginning to learn: | |
| - Number identification | |
| - Basic counting | |
| - The concept of addition | |
| It can serve as a fun tool for parents and educators to introduce and reinforce these early math skills. | |
| --- | |
| Made with ❤️ for young learners everywhere! | |