add same different

src/App.tsx

@@ -17,6 +17,8 @@ function App() {
   const [gameStep, setGameStep] = useState<GameStep>('step1');
   const [feedback, setFeedback] = useState('');
   const [showFeedback, setShowFeedback] = useState(false);
+  const [buttonLabels, setButtonLabels] = useState({ equal: 'Equal', notEqual: 'Not Equal' });
+  const [questionTitle, setQuestionTitle] = useState('Are they equal?');
 
   // Emoji pools for different categories
   const emojiCategories = {
@@ -27,6 +29,22 @@ function App() {
     stars: ['⭐', '🌟', '💫', '✨', '🌠', '⚡', '🔥', '❄️', '☀️', '🌙']
   };
 
+  // Generate random button labels and question title
+  const generateButtonLabels = () => {
+    const equalOptions = ['Equal', 'Same'];
+    const notEqualOptions = ['Not Equal', 'Different'];
+    
+    return {
+      equal: equalOptions[Math.floor(Math.random() * equalOptions.length)],
+      notEqual: notEqualOptions[Math.floor(Math.random() * notEqualOptions.length)]
+    };
+  };
+
+  const generateQuestionTitle = () => {
+    const titleOptions = ['Are they equal?', 'Are they same?'];
+    return titleOptions[Math.floor(Math.random() * titleOptions.length)];
+  };
+
   // Generate a random question
   const generateQuestion = (): ComparisonQuestion => {
     const categories = Object.keys(emojiCategories) as (keyof typeof emojiCategories)[];
@@ -53,6 +71,10 @@ function App() {
     // Determine second step question type
     const secondStepQuestion: 'more' | 'fewer' = Math.random() < 0.5 ? 'more' : 'fewer';
     
+    // Generate new button labels and question title for this question
+    setButtonLabels(generateButtonLabels());
+    setQuestionTitle(generateQuestionTitle());
+    
     return {
       leftSide,
       rightSide,
@@ -188,7 +210,7 @@ function App() {
       {gameStep === 'step1' || gameStep === 'correct-step1' ? (
         // Step 1: Are they equal?
         <>
-          <h1 className="question-title">Are they equal?</h1>
+          <h1 className="question-title">{questionTitle}</h1>
           
           <div className="comparison-container">
             <div className="side-container">
@@ -210,13 +232,13 @@ function App() {
                 className="answer-btn equal-btn"
                 onClick={() => handleStep1Answer('equal')}
               >
-                Equal
+                {buttonLabels.equal}
               </button>
               <button 
                 className="answer-btn not-equal-btn"
                 onClick={() => handleStep1Answer('not-equal')}
               >
-                Not Equal
+                {buttonLabels.notEqual}
               </button>
             </div>
           )}