Hugging Face's logo

Spaces:
Ibrahim-Study
/
equal-2-step
Sleeping

App Files Community
equal-2-step / README.md
elyor-ml's picture
elyor-ml
equal step 2 game
0b49cb3
preview code
|
raw
history blame contribute delete
5.27 kB
metadata
title: Equal 2-Step Game
emoji: ⚖️
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
app_port: 7860

Equal 2-Step Game ⚖️

An interactive educational game that teaches equality comparison and counting skills through engaging emoji-based questions. Perfect for children learning basic math concepts!

🎮 How to Play

The game consists of two sequential steps that help children develop comparison and counting skills:

Step 1: Equality Check

  • Look at the two sides with emojis
  • Count the items on each side
  • Answer the question: "Are they equal?"
  • Choose between "Equal" or "Not Equal"

Step 2: Comparison (Only if Not Equal)

  • If you correctly answered "Not Equal" in Step 1, you proceed to Step 2
  • The game asks either:
    • "Which side has more?" or
    • "Which side has fewer?"
  • Click on the correct side to answer

Game Flow

  1. Equal sides: Step 1 → Correct answer → New question
  2. Unequal sides: Step 1 → Step 2 → Correct answer → New question

✨ Features

  • Visual Learning: Uses colorful emojis from different categories (animals, fruits, objects, hearts, stars)
  • Two-Step Logic: Teaches both equality and comparison concepts
  • Immediate Feedback: Shows "Correct! 🎉" or "Try again! 🤔" messages
  • Auto-Generated Questions: Random emoji selection and counts (1-10 items)
  • Responsive Design: Works on desktop, tablet, and mobile devices
  • Clean UI: Simple, child-friendly interface with large buttons and clear visuals

🚀 How to Run

Option 1: Development Mode 

# Clone the repository
git clone <repository-url>
cd equal-2-step-game

# Install dependencies
npm install

# Start development server
npm run dev

The game will be available at http://localhost:5173

Option 2: Production Build 

# Build for production
npm run build

# Preview production build
npm run preview

Option 3: Docker 

# Build Docker image
docker build -t equal-2-step-game .

# Run container
docker run -p 3000:3000 equal-2-step-game

The game will be available at http://localhost:3000

🎯 Educational Benefits

  • Counting Skills: Children practice counting objects up to 10
  • Equality Concepts: Understanding when quantities are the same
  • Comparison Skills: Learning "more than" and "fewer than" concepts
  • Visual Recognition: Identifying and categorizing different emoji types
  • Logical Thinking: Following two-step problem-solving processes

🎨 Game Categories

The game uses emojis from 5 different categories:

  • Animals: 🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐸 🐷
  • Fruits: 🍎 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍒 🥝
  • Objects: ⚽ 🏀 🎾 🏈 🎱 🎪 🎨 🎭 🎪 🎯
  • Hearts: 💙 💚 💛 💜 🤍 🖤 🤎 💗 💖 💕
  • Stars: ⭐ 🌟 💫 ✨ 🌠 ⚡ 🔥 ❄️ ☀️ 🌙

🛠️ Technical Details

Technologies Used

  • React 19 with TypeScript
  • Vite for build tooling
  • CSS3 with modern features (Grid, Flexbox, Animations)
  • Docker for deployment

Project Structure 

src/
├── App.tsx          # Main game component
├── App.css          # Game styling
├── main.tsx         # App entry point
└── index.css        # Global styles

public/
├── favicon.svg      # App icon
└── index.html       # HTML template

Game Logic

  • Question Generation: Random emoji selection from categories
  • Count Generation: Random numbers 1-10 for each side
  • Equality Control: 50% chance for equal vs unequal questions
  • Step Control: Step 2 only appears for unequal quantities
  • Safety Checks: Prevents step 2 from showing with equal sides

🎨 Customization

You can easily customize the game by modifying the emoji categories in src/App.tsx:

const emojiCategories = {
  animals: ['🐶', '🐱', ...], // Add your animal emojis
  fruits: ['🍎', '🍊', ...],  // Add your fruit emojis
  // Add more categories...
};

📱 Mobile Support

The game is fully responsive and optimized for:

  • Desktop: Full-featured experience with hover effects
  • Tablet: Touch-friendly interface with optimized sizing
  • Mobile: Compact layout with large touch targets

🚀 Deployment

Hugging Face Spaces

This project is configured for easy deployment to Hugging Face Spaces using Docker.

Other Platforms

The built project can be deployed to any static hosting service:

  • Vercel
  • Netlify
  • GitHub Pages
  • AWS S3
  • And more...

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature-name
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

📄 License

MIT License - feel free to use this project for educational purposes!

🎓 Age Recommendation

This game is designed for children ages 3-8 who are learning:

  • Basic counting (1-10)
  • Equality concepts
  • Comparison skills
  • Visual recognition

Perfect for:

  • Preschool mathematics preparation
  • Kindergarten counting practice
  • Early elementary comparison skills
  • Special education visual learning support

Made with ❤️ for young learners everywhere!