README.md

metadata

title: Addition Game
emoji: ➕
colorFrom: green
colorTo: blue
sdk: docker
pinned: false
app_port: 7860

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

# 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

# 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):

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