equal step 2 game

Dockerfile

@@ -23,5 +23,5 @@ RUN npm install -g serve
 COPY --from=build /app/dist ./dist
 
 # Expose port and start server
-EXPOSE 3000
-CMD ["serve", "-s", "dist", "-l", "3000"] 
+EXPOSE 7860
+CMD ["serve", "-s", "dist", "-l", "7860"] 

README.md

@@ -1,185 +1,191 @@
 ---
-title: Equal =
-emoji: 📊
+title: Equal 2-Step Game
+emoji: ⚖️
 colorFrom: blue
-colorTo: gray
+colorTo: purple
 sdk: docker
 pinned: false
-app_port: 3000
+app_port: 7860
 ---
-# Colorful Semantics - To Whom? Game
 
-A learning game that teaches sentence structure through colorful semantic components.
+# Equal 2-Step Game ⚖️
 
-## Features
+An interactive educational game that teaches equality comparison and counting skills through engaging emoji-based questions. Perfect for children learning basic math concepts!
 
-- Interactive game for learning "to whom" sentence components
-- Visual and animated feedback for correct answers
-- Support for both images and videos
-- Customizable questions and answers
+## 🎮 How to Play
 
-## How to Play
+The game consists of **two sequential steps** that help children develop comparison and counting skills:
 
-1. Look at the image/video and read the colored sentence parts
-2. Choose the correct "to whom" option from the choices below
-3. The game will animate the correct answer to the pink box
-4. Continue to the next question automatically
+### 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"**
 
-## Adding New Questions
+### 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
 
-1. Add your image or video to the `public/media` folder
-2. Edit the `public/questions.json` file to add a new question:
+### Game Flow
+1. **Equal sides**: Step 1 → Correct answer → New question
+2. **Unequal sides**: Step 1 → Step 2 → Correct answer → New question
 
-```json
-{
-  "file": "media/your_image.jpg",
-  "who": "The boy",
-  "doing": "is giving",
-  "what": "a book",
-  "to_whom": "to the teacher",
-  "distractors": ["to Mom", "to the dog", "to Grandma"]
-}
-```
+## ✨ Features
 
-3. Each question needs the following fields:
+- **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
 
-   - `file`: Path to the media file (jpg, png, or mp4)
-   - `who`: The subject of the sentence
-   - `doing`: The verb phrase
-   - `what`: The object
-   - `to_whom`: The correct answer (recipient)
-   - `distractors`: Array of incorrect options
-4. Restart the application to see your new questions
+## 🚀 How to Run
 
-## Development
+### Option 1: Development Mode
 
 ```bash
+# 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
+
+```bash
 # Build for production
 npm run build
+
+# Preview production build
+npm run preview
+```
+
+### Option 3: Docker
+
+```bash
+# 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
 ```
 
-## Making sentences
-
-The words used for subject and to whome:
-
-## subjects and to whom
-
-Blippi
-Zaki
-Harun
-Rashid
-Kazwa
-Bilal
-honeybee
-dinasaour
-boy
-girl
-man
-woman
-lady
-children
-kids
-cat
-dog
-mouse
-tiger
-witch
-elephent
-Mustafo
-Muhammad
-Hidoyat
-Sardor
-Ulugbek
-Policeman
-Nurse
-Pilot
-Florist
-Builder
-Teacher
-Doctor
-Dentist
-Binman
-Postman
-Firefighter
-Lollypop lady
-Gardner
-Mechanic
-Painter
-Lifeguard
-librarian
-bus driver
-cook / chef
-barber
-Farmer
-Astronaut
-Paramedic
-
-### verbs
-
-read
-drink
-case
-sit
-buy
-jump
-hold
-cry
-ride
-wash
-fly
-eat
-dry
-play
-climb
-scratch
-cut
-brush
-bounce
-argue
-work
-fight
-practice
-throw
-take
-bring
-take
-wipe
-drink
-
-## what
-
-flower
-icecream
-pen
-pencil
-socks
-underwear
-coat
-wellies
-shoes
-spoon
-fork
-food
-bread
-butter
-salt
-chilly
-bathroom
-towel
-coffee
-tea
-milk
-almond
-monkey nuts
-upstairs
-downstairs
-
-## License
-
-MIT
+### 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`:
+
+```typescript
+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!

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Colorful Semantics - To Whom?</title>
+    <title>Equal 2-Step Game</title>
   </head>
   <body>
     <div id="root"></div>

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "verbs-past",
-  "version": "0.0.0",
+  "name": "equal-2-step-game",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "verbs-past",
-      "version": "0.0.0",
+      "name": "equal-2-step-game",
+      "version": "1.0.0",
       "dependencies": {
         "react": "^19.0.0",
         "react-dom": "^19.0.0"

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "colorful-semantics-game",
+  "name": "equal-2-step-game",
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "description": "An educational game for teaching sentence structure using colorful semantics",
+  "description": "A 2-step educational game for teaching equality comparison using emojis",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/App.css

@@ -1,15 +1,16 @@
-.colorful-semantics {
-  max-width: 1100px;
-  margin: 0 0 0 auto;
-  padding: 2rem;
-  text-align: center;
-  font-family: 'Arial', sans-serif;
+/* Main container */
+.equal-game {
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
+  padding: 2rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: 'Arial', sans-serif;
 }
 
+/* Loading state */
 .loading {
   display: flex;
   justify-content: center;
@@ -17,132 +18,265 @@
   height: 100vh;
   font-size: 1.5rem;
   font-weight: bold;
+  color: white;
+}
+
+/* Question title */
+.question-title {
+  font-size: 3rem;
+  font-weight: bold;
+  color: white;
+  text-align: center;
+  margin-bottom: 2rem;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 
-.media-container {
-  position: relative;
-  width: 100%;
-  max-width: 900px;
-  height: 55vh;
-  max-height: 500px;
-  margin: 0 auto 3rem;
+/* Comparison container */
+.comparison-container {
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 3rem;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+
+/* Side container */
+.side-container {
+  background: white;
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+  min-width: 300px;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
-  background-color: #f0f0f0;
+  gap: 1rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.game-media {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
+.side-container.clickable {
+  cursor: pointer;
 }
 
-.semantic-boxes {
+.side-container.clickable:hover {
+  transform: scale(1.05);
+  box-shadow: 0 12px 35px rgba(0,0,0,0.2);
+}
+
+/* Emoji grid */
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
+  gap: 8px;
+  max-width: 300px;
+  justify-items: center;
+}
+
+.emoji-item {
+  font-size: 2rem;
+  display: block;
+  animation: popIn 0.3s ease-out;
+}
+
+@keyframes popIn {
+  0% {
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Count display */
+.count-display {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #333;
+  background: #f0f0f0;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
   display: flex;
-  gap: 1rem;
+  align-items: center;
   justify-content: center;
-  flex-wrap: nowrap;
-  margin-bottom: 2rem;
+  border: 3px solid #ddd;
 }
 
-.semantic-box {
-  /* Let width grow/shrink based on content so long phrases stay on one line */
-  width: auto;
-  min-width: 140px;
-  padding: 1.4rem 1.6rem;
-  border-radius: 10px;
-  border: 3px solid #000;
-  font-size: 1.6rem;
+/* VS divider */
+.vs-divider {
+  font-size: 2rem;
   font-weight: bold;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+  color: white;
+  background: rgba(255,255,255,0.2);
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
   display: flex;
-  justify-content: center;
   align-items: center;
-  min-height: 90px;
-  text-align: center;
-  white-space: nowrap; /* prevent text from wrapping to a new line */
+  justify-content: center;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
 }
 
-.options-container {
+/* Answer buttons for step 1 */
+.answer-buttons {
   display: flex;
-  gap: 1rem;
+  gap: 2rem;
   justify-content: center;
   flex-wrap: wrap;
-  margin-top: 2rem;
 }
 
-.option {
-  background-color: #d3d3d3;
-  border: 3px solid #000;
-  border-radius: 8px;
-  padding: 1rem 1.5rem;
-  font-size: 1.3rem;
+.answer-btn {
+  padding: 1.5rem 3rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+  border: none;
+  border-radius: 15px;
   cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s;
-  min-width: 140px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  min-width: 150px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
 }
 
-.option:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.flying-option {
-  padding: 0.8rem 1.2rem;
-  border: 2px solid #000;
-  border-radius: 6px;
-  font-size: 1.1rem;
-  pointer-events: none;
-  z-index: 100;
-  min-width: 120px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-  white-space: nowrap;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.equal-btn {
+  background: linear-gradient(45deg, #4CAF50, #45a049);
+  color: white;
 }
 
-.feedback-message {
-  color: #ff3c3c;
+.equal-btn:hover {
+  background: linear-gradient(45deg, #45a049, #4CAF50);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+.not-equal-btn {
+  background: linear-gradient(45deg, #f44336, #d32f2f);
+  color: white;
+}
+
+.not-equal-btn:hover {
+  background: linear-gradient(45deg, #d32f2f, #f44336);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+/* Step 2 instruction */
+.step2-instruction {
   font-size: 1.2rem;
-  font-weight: bold;
-  margin-top: 1.5rem;
-  min-height: 28px;
+  color: white;
+  text-align: center;
+  margin-top: 1rem;
+  background: rgba(255,255,255,0.1);
+  padding: 1rem 2rem;
+  border-radius: 10px;
+  backdrop-filter: blur(10px);
 }
 
-.big-question {
+/* Feedback message */
+.feedback-message {
   position: fixed;
-  right: 220px;
-  top: 30%;
-  font-size: 6rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  color: #333;
+  font-size: 2rem;
   font-weight: bold;
-  color: #FF69B4;
-  text-align: left;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-  z-index: 10;
+  padding: 2rem 3rem;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+  z-index: 1000;
+  animation: feedbackPop 0.5s ease-out;
 }
 
+@keyframes feedbackPop {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+  80% {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* Responsive design */
 @media (max-width: 768px) {
-  .semantic-boxes {
-    flex-wrap: wrap;
-    align-items: center;
+  .question-title {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
   }
   
-  .semantic-box {
-    width: 80%;
+  .comparison-container {
+    gap: 2rem;
+    flex-direction: column;
   }
   
-  .options-container {
+  .side-container {
+    min-width: 250px;
+    max-width: 300px;
+    padding: 1.5rem;
+  }
+  
+  .vs-divider {
+    width: 60px;
+    height: 60px;
+    font-size: 1.5rem;
+  }
+  
+  .emoji-item {
+    font-size: 1.5rem;
+  }
+  
+  .count-display {
+    width: 60px;
+    height: 60px;
+    font-size: 2rem;
+  }
+  
+  .answer-buttons {
     flex-direction: column;
     align-items: center;
+    gap: 1rem;
+  }
+  
+  .answer-btn {
+    padding: 1rem 2rem;
+    font-size: 1.2rem;
+    min-width: 200px;
+  }
+  
+  .feedback-message {
+    font-size: 1.5rem;
+    padding: 1.5rem 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .equal-game {
+    padding: 1rem;
+  }
+  
+  .question-title {
+    font-size: 1.5rem;
+  }
+  
+  .side-container {
+    min-width: 200px;
+    max-width: 250px;
+    padding: 1rem;
+  }
+  
+  .emoji-grid {
+    max-width: 200px;
   }
   
-  .option {
-    width: 80%;
+  .emoji-item {
+    font-size: 1.2rem;
   }
 }

src/App.tsx

@@ -1,286 +1,261 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import './App.css'
 
-// Question interface
-interface Question {
-  file: string;
-  who: string;
-  doing: string;
-  what: string;
-  to_whom: string;
-  distractors: string[];
+// Game question structure
+interface ComparisonQuestion {
+  leftSide: string[];
+  rightSide: string[];
+  isEqual: boolean;
+  secondStepQuestion: 'more' | 'fewer';
 }
 
-// State for one round
-interface GameState {
-  frames: string[];
-  frameIndex: number;
-  who: string;
-  doing: string;
-  what: string;
-  answer: string;
-  choices: string[];
-}
+// Game states
+type GameStep = 'step1' | 'step2' | 'correct-step1' | 'correct-step2';
 
 function App() {
-  const [questions, setQuestions] = useState<Question[]>([]);
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-  const [gameState, setGameState] = useState<GameState | null>(null);
-  const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
-  const [feedbackMsg, setFeedbackMsg] = useState('');
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [animationElement, setAnimationElement] = useState<{ content: string, position: { x: number, y: number } } | null>(null);
-  const [isFilled, setIsFilled] = useState(false);
-  
-  const wrongMessages = ["Wrong, try again", "Not correct, try again", "Error, come again"];
-  const animationRef = useRef<HTMLDivElement>(null);
-  const destinationRef = useRef<HTMLDivElement>(null);
-  
-  // Colors
-  const ORANGE = "#FF8C00";
-  const YELLOW = "#F0E61E";
-  const GREEN = "#00B900";
-  const PINK = "#FF69B4";
-  
-  // Load questions on mount
-  useEffect(() => {
-    const loadQuestions = async () => {
-      try {
-        const response = await fetch('/questions.json');
-        if (!response.ok) {
-          throw new Error('Failed to load questions');
-        }
-        const data: Question[] = await response.json();
-        // Shuffle questions
-        const shuffled = [...data].sort(() => Math.random() - 0.5);
-        setQuestions(shuffled);
-      } catch (error) {
-        console.error('Error loading questions:', error);
-      }
-    };
+  const [currentQuestion, setCurrentQuestion] = useState<ComparisonQuestion | null>(null);
+  const [gameStep, setGameStep] = useState<GameStep>('step1');
+  const [feedback, setFeedback] = useState('');
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  // Emoji pools for different categories
+  const emojiCategories = {
+    animals: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐸', '🐷'],
+    fruits: ['🍎', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍒', '🥝'],
+    objects: ['⚽', '🏀', '🎾', '🏈', '🎱', '🎪', '🎨', '🎭', '🎪', '🎯'],
+    hearts: ['💙', '💚', '💛', '💜', '🤍', '🖤', '🤎', '💗', '💖', '💕'],
+    stars: ['⭐', '🌟', '💫', '✨', '🌠', '⚡', '🔥', '❄️', '☀️', '🌙']
+  };
+
+  // Generate a random question
+  const generateQuestion = (): ComparisonQuestion => {
+    const categories = Object.keys(emojiCategories) as (keyof typeof emojiCategories)[];
+    const selectedCategory = categories[Math.floor(Math.random() * categories.length)];
+    const emojis = emojiCategories[selectedCategory];
     
-    loadQuestions();
+    // Pick a random emoji for this question
+    const emoji = emojis[Math.floor(Math.random() * emojis.length)];
     
-    // Set up window resize handler
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
+    // Generate counts (1-10)
+    const leftCount = Math.floor(Math.random() * 10) + 1;
+    let rightCount = Math.floor(Math.random() * 10) + 1;
     
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  
-  // Prepare game state when questions load or change
-  useEffect(() => {
-    if (questions.length > 0) {
-      prepareRound(questions[currentQuestionIndex]);
+    // 50% chance of making them equal
+    const shouldBeEqual = Math.random() < 0.5;
+    if (shouldBeEqual) {
+      rightCount = leftCount;
     }
-  }, [questions, currentQuestionIndex]);
-  
-  // Handle video/image frame updates
-  useEffect(() => {
-    if (!gameState || !gameState.frames.length) return;
     
-    const frameInterval = setInterval(() => {
-      if (!isAnimating && !isFilled) {
-        setGameState(prev => {
-          if (!prev) return prev;
-          const nextIndex = (prev.frameIndex + 1) % prev.frames.length;
-          return { ...prev, frameIndex: nextIndex };
-        });
-      }
-    }, 100); // Adjust frame rate as needed
+    // Create arrays with repeated emoji
+    const leftSide = Array(leftCount).fill(emoji);
+    const rightSide = Array(rightCount).fill(emoji);
     
-    return () => clearInterval(frameInterval);
-  }, [gameState, isAnimating, isFilled]);
-  
-  // Process animation completion and next question timing
+    // Determine second step question type
+    const secondStepQuestion: 'more' | 'fewer' = Math.random() < 0.5 ? 'more' : 'fewer';
+    
+    return {
+      leftSide,
+      rightSide,
+      isEqual: leftCount === rightCount,
+      secondStepQuestion
+    };
+  };
+
+  // Initialize with first question
   useEffect(() => {
-    if (isFilled) {
-      const timer = setTimeout(() => {
-        // Move to next question
-        setCurrentQuestionIndex(prev => (prev + 1) % questions.length);
-        setIsFilled(false);
-        setFeedbackMsg('');
-        setAnimationElement(null);
-      }, 1000);
-      
-      return () => clearTimeout(timer);
-    }
-  }, [isFilled, questions.length]);
-  
-  // Animation effect
+    setCurrentQuestion(generateQuestion());
+  }, []);
+
+  // Safety effect: if we're in step 2 but sides are equal, generate new question
   useEffect(() => {
-    if (isAnimating && animationElement && animationRef.current && destinationRef.current) {
-      const destRect = destinationRef.current.getBoundingClientRect();
-      const targetPosition = {
-        x: destRect.left + destRect.width / 2,
-        y: destRect.top + destRect.height / 2
-      };
-      
-      const anim = animationRef.current;
-      anim.style.transition = 'transform 500ms linear';
-      anim.style.transform = `translate(${targetPosition.x - animationElement.position.x}px, ${targetPosition.y - animationElement.position.y}px)`;
-      
-      const handleAnimationEnd = () => {
-        setIsAnimating(false);
-        setIsFilled(true);
-      };
-      
-      anim.addEventListener('transitionend', handleAnimationEnd);
-      return () => anim.removeEventListener('transitionend', handleAnimationEnd);
+    if (currentQuestion && 
+        (gameStep === 'step2' || gameStep === 'correct-step2') && 
+        currentQuestion.leftSide.length === currentQuestion.rightSide.length) {
+      // Generate new question and go back to step 1
+      setTimeout(() => {
+        setCurrentQuestion(generateQuestion());
+        setGameStep('step1');
+      }, 1000);
     }
-  }, [isAnimating, animationElement]);
-  
-  // Prepare a new game round
-  const prepareRound = (question: Question) => {
-    const choices = [question.to_whom, ...question.distractors];
-    // Shuffle choices
-    const shuffledChoices = [...choices].sort(() => Math.random() - 0.5);
-    
-    // Determine if media is image or video
-    const isVideo = question.file.endsWith('.mp4');
-    const frames = isVideo 
-      ? [question.file] // For simplicity, we'll just use the path for videos
-      : [question.file]; // Same for images
+  }, [currentQuestion, gameStep]);
+
+  // Handle step 1 answer (equal/not equal)
+  const handleStep1Answer = (answer: 'equal' | 'not-equal') => {
+    if (!currentQuestion) return;
     
-    setGameState({
-      frames,
-      frameIndex: 0,
-      who: question.who,
-      doing: question.doing,
-      what: question.what,
-      answer: question.to_whom,
-      choices: shuffledChoices
-    });
+    const isCorrect = (answer === 'equal') === currentQuestion.isEqual;
     
-    setFeedbackMsg('');
-    setIsAnimating(false);
-    setAnimationElement(null);
-    setIsFilled(false);
+    if (isCorrect) {
+      setFeedback('Correct! 🎉');
+      setShowFeedback(true);
+      setGameStep('correct-step1');
+      
+      // If they correctly identified as "equal", generate new question
+      // If they correctly identified as "not equal", proceed to step 2
+      if (answer === 'equal') {
+        // Generate new question after delay
+        setTimeout(() => {
+          setCurrentQuestion(generateQuestion());
+          setGameStep('step1');
+          setShowFeedback(false);
+          setFeedback('');
+        }, 2000);
+      } else {
+        // Proceed to step 2 only if they are NOT equal
+        setTimeout(() => {
+          setGameStep('step2');
+          setShowFeedback(false);
+          setFeedback('');
+        }, 1500);
+      }
+    } else {
+      setFeedback('Try again! 🤔');
+      setShowFeedback(true);
+      setTimeout(() => {
+        setShowFeedback(false);
+        setFeedback('');
+      }, 1000);
+    }
   };
-  
-  // Handle option selection
-  const handleOptionClick = (option: string, event: React.MouseEvent<HTMLDivElement>) => {
-    if (isAnimating || isFilled || !gameState) return;
+
+  // Handle step 2 answer (more/fewer)
+  const handleStep2Answer = (answer: 'left' | 'right') => {
+    if (!currentQuestion) return;
     
-    const rect = event.currentTarget.getBoundingClientRect();
-    const position = {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2
-    };
+    const leftCount = currentQuestion.leftSide.length;
+    const rightCount = currentQuestion.rightSide.length;
     
-    if (option === gameState.answer) {
-      // Correct answer
-      setAnimationElement({
-        content: option,
-        position
-      });
-      setIsAnimating(true);
-      setFeedbackMsg('');
-    } else {
-      // Wrong answer
-      setFeedbackMsg(wrongMessages[Math.floor(Math.random() * wrongMessages.length)]);
+    // Safety check: if sides are equal, this shouldn't happen in step 2
+    if (leftCount === rightCount) {
+      // Generate new question and go back to step 1
+      setCurrentQuestion(generateQuestion());
+      setGameStep('step1');
+      return;
     }
-  };
-  
-  // Render current media (image or video)
-  const renderMedia = () => {
-    if (!gameState || !gameState.frames.length) return null;
     
-    const currentFrame = gameState.frames[gameState.frameIndex];
-    const isVideo = currentFrame.endsWith('.mp4');
+    let isCorrect = false;
     
-    if (isVideo) {
-      return (
-        <video
-          className="game-media"
-          src={currentFrame}
-          autoPlay
-          loop
-          muted
-        />
-      );
+    if (currentQuestion.secondStepQuestion === 'more') {
+      if (leftCount > rightCount && answer === 'left') isCorrect = true;
+      if (rightCount > leftCount && answer === 'right') isCorrect = true;
+    } else { // fewer
+      if (leftCount < rightCount && answer === 'left') isCorrect = true;
+      if (rightCount < leftCount && answer === 'right') isCorrect = true;
+    }
+    
+    if (isCorrect) {
+      setFeedback('Excellent! 🌟');
+      setShowFeedback(true);
+      setGameStep('correct-step2');
+      
+      // Generate new question after delay
+      setTimeout(() => {
+        setCurrentQuestion(generateQuestion());
+        setGameStep('step1');
+        setShowFeedback(false);
+        setFeedback('');
+      }, 2000);
     } else {
-      return (
-        <img
-          className="game-media"
-          src={currentFrame}
-          alt="Game visual"
-        />
-      );
+      setFeedback('Try again! 🤔');
+      setShowFeedback(true);
+      setTimeout(() => {
+        setShowFeedback(false);
+        setFeedback('');
+      }, 1000);
     }
   };
-  
-  if (!gameState) {
-    return <div className="loading">Loading questions...</div>;
+
+  // Render emoji grid
+  const renderEmojiSide = (emojis: string[], side: 'left' | 'right') => {
+    const gridClass = `emoji-grid ${side}`;
+    return (
+      <div className={gridClass}>
+        {emojis.map((emoji, index) => (
+          <span key={index} className="emoji-item">
+            {emoji}
+          </span>
+        ))}
+      </div>
+    );
+  };
+
+  if (!currentQuestion) {
+    return <div className="loading">Loading...</div>;
   }
-  
+
   return (
-    <div className="colorful-semantics">
-      <div className="big-question">To whom?</div>
-      <div className="media-container">
-        {renderMedia()}
-      </div>
-      
-      <div className="semantic-boxes">
-        {/* Who - Orange */}
-        <div className="semantic-box" style={{ backgroundColor: ORANGE }}>
-          {gameState.who}
-        </div>
-        
-        {/* Doing - Yellow */}
-        <div className="semantic-box" style={{ backgroundColor: YELLOW }}>
-          {gameState.doing}
-        </div>
-        
-        {/* What - Green */}
-        <div className="semantic-box" style={{ backgroundColor: GREEN }}>
-          {gameState.what}
-        </div>
-        
-        {/* To Whom - Pink */}
-        <div 
-          className="semantic-box" 
-          style={{ backgroundColor: PINK }}
-          ref={destinationRef}
-        >
-          {isFilled ? gameState.answer : "to whom?"}
-        </div>
-      </div>
-      
-      <div className="options-container">
-        {!isFilled && gameState.choices.map((option, index) => (
-          <div
-            key={index}
-            className="option"
-            onClick={(e) => handleOptionClick(option, e)}
-          >
-            {option}
+    <div className="equal-game">
+      {gameStep === 'step1' || gameStep === 'correct-step1' ? (
+        // Step 1: Are they equal?
+        <>
+          <h1 className="question-title">Are they equal?</h1>
+          
+          <div className="comparison-container">
+            <div className="side-container">
+              {renderEmojiSide(currentQuestion.leftSide, 'left')}
+              <div className="count-display">{currentQuestion.leftSide.length}</div>
+            </div>
+            
+            <div className="vs-divider">VS</div>
+            
+            <div className="side-container">
+              {renderEmojiSide(currentQuestion.rightSide, 'right')}
+              <div className="count-display">{currentQuestion.rightSide.length}</div>
+            </div>
           </div>
-        ))}
-      </div>
-      
-      {feedbackMsg && (
-        <div className="feedback-message">{feedbackMsg}</div>
+          
+          {gameStep === 'step1' && (
+            <div className="answer-buttons">
+              <button 
+                className="answer-btn equal-btn"
+                onClick={() => handleStep1Answer('equal')}
+              >
+                Equal
+              </button>
+              <button 
+                className="answer-btn not-equal-btn"
+                onClick={() => handleStep1Answer('not-equal')}
+              >
+                Not Equal
+              </button>
+            </div>
+          )}
+        </>
+      ) : (
+        // Step 2: Which side has more/fewer? (Only if sides are NOT equal)
+        currentQuestion.leftSide.length !== currentQuestion.rightSide.length ? (
+          <>
+            <h1 className="question-title">
+              Which side has {currentQuestion.secondStepQuestion}?
+            </h1>
+            
+            <div className="comparison-container">
+              <div className="side-container clickable" onClick={() => handleStep2Answer('left')}>
+                {renderEmojiSide(currentQuestion.leftSide, 'left')}
+                <div className="count-display">{currentQuestion.leftSide.length}</div>
+              </div>
+              
+              <div className="vs-divider">VS</div>
+              
+              <div className="side-container clickable" onClick={() => handleStep2Answer('right')}>
+                {renderEmojiSide(currentQuestion.rightSide, 'right')}
+                <div className="count-display">{currentQuestion.rightSide.length}</div>
+              </div>
+            </div>
+            
+            <div className="step2-instruction">
+              Click on the side with {currentQuestion.secondStepQuestion} items
+            </div>
+          </>
+        ) : (
+          // If somehow we get to step 2 with equal sides, generate new question
+          <div className="loading">Generating new question...</div>
+        )
       )}
       
-      {isAnimating && animationElement && (
-        <div 
-          className="flying-option"
-          ref={animationRef}
-          style={{ 
-            backgroundColor: PINK,
-            position: 'fixed',
-            left: animationElement.position.x,
-            top: animationElement.position.y,
-            transform: 'translate(-50%, -50%)'
-          }}
-        >
-          {animationElement.content}
+      {showFeedback && (
+        <div className="feedback-message">
+          {feedback}
         </div>
       )}
     </div>