Ibrahim-Study/addition

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. 1.Observe the Problem: See the two numbers to be added.
2. 2.Choose Display Mode: At the top, select how you want to see the numbers:
3. 3.Number: Shows only numerals (e.g., 1 and 2).
4. 4.Object: Shows only emojis (e.g., 🍎 and 🍎🍎).
5. 5.Both: Shows numerals in boxes with emojis underneath each.
6. 6.Solve: Determine the sum of the two numbers.
7. 7.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.
8. 8.Feedback: The game will tell you if your answer is "Correct! 🎉" or "Try again! 🤔".
9. 9.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. 1.Fork the repository.
2. 2.Create a new branch for your feature (git checkout -b feature/YourFeature).
3. 3.Commit your changes (git commit -m 'Add some feature').
4. 4.Push to the branch (git push origin feature/YourFeature).
5. 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!