✅ REFACTOR: Separate AI prompts into external file

- Created ai-responses.js to store all AI response prompts
- Refactored generateContextualResponse() to use external AIResponses object
- Added ai-responses.js script to index.html
- Enhanced brake-specific responses for bicycle and car questions
- Improved maintainability and prevents script corruption during edits
- All contextual responses now centralized in structured object

html/kidsai/ai-responses.js

@@ -0,0 +1,91 @@
+// AI Response Configuration
+// This file contains all the contextual responses for the KidsAI system
+// Separated from main script to prevent corruption during edits
+
+const AIResponses = {
+    // Handle "I don't know" or help-seeking responses
+    helpSeeking: {
+        dontKnow: "That's perfectly fine! 🤗 Not knowing something just means we're about to learn something new together. Let's keep exploring!",
+        whatIsIt: "That's a great question! 😊 That's exactly what we're exploring together - let's discover it step by step!",
+        tellMe: "I love your curiosity! 🌟 Instead of telling you directly, let's think through it together so you can discover it yourself!"
+    },
+
+    // Short answer responses
+    shortAnswers: {
+        yes: {
+            bicycle: "Great! 🚴‍♂️ Since you have bicycle experience, you understand how mechanical controls work. That's perfect for what we're exploring!",
+            general: "Perfect! 🌟 I can see you're following along. Let's dive a bit deeper!",
+            knowledge: "Excellent! 👍 Your knowledge will help us build on these concepts together!"
+        },
+        no: "No problem at all! 😊 That's why we're exploring this together - to discover new things!"
+    },
+
+    // Topic-specific responses
+    bicycle: {
+        brake: {
+            slowDown: "🚴‍♂️ Exactly right! You understand that brakes slow you down and stop you. That's the basic function we need to understand!",
+            technical: "🎯 Great technical thinking! You understand how the brake mechanism works on the wheel!",
+            general: "🤔 Tell me more about what happens when you use bicycle brakes."
+        },
+        mechanics: {
+            pedalChainWheel: "🚴‍♂️ Excellent! You understand the connection between pedals, chain, and wheels. That mechanical connection concept is key!",
+            gearSpeed: "⚙️ Yes! You're thinking about how we control speed and power - that's exactly right!",
+            slowStop: "🚴‍♂️ Right! You understand the basic control functions of bicycles!"
+        }
+    },
+
+    car: {
+        brake: {
+            perfectAnswer: "🎯 EXACTLY! 🚗 Yes, it's the brake system! Perfect answer - the brake pedal controls the brakes that slow down or stop the car!",
+            brakeAndPedal: "🏆 Perfect! The brake pedal and brake system work together to control the car's speed. You nailed it!",
+            justBrake: "🎯 YES! The brakes! You got it exactly right! The brake system is what slows down and stops the car!",
+            wheelTire: "👍 You're thinking about where the braking happens - at the wheels! The brake system applies pressure there.",
+            pedal: "🦶 Good! You're thinking about pedals. Which specific pedal controls stopping?",
+            general: "🤔 What component do you think actually does the slowing down in a car?"
+        },
+        comparison: {
+            engine: "🚗 You're thinking about the engine - that's the power source! But I'm thinking of a specific part that works between the engine and wheels, kind of like how bike pedals connect to the chain.",
+            gearTransmission: "🎯 Great thinking! You're absolutely on the right track with gears and transmission systems!",
+            pedalBrake: "🦶 Good connection! You're thinking about pedals in cars. There are actually multiple pedals that do different things!"
+        },
+        clutch: {
+            perfect: "🎯 Perfect! You know about the clutch! That's exactly what I was thinking of - the component that helps with smooth gear changes!",
+            transmission: "🔧 Excellent! You're thinking about the transmission system. The clutch is the part that connects and disconnects the engine from the gearbox!",
+            separate: "👍 Yes! You understand the separation concept - that's exactly what the clutch does!",
+            different: "💡 Good observation! You're noticing that clutch and brake do different things. That's key insight!",
+            engineTransmission: "🚗 Excellent! You're thinking about the engine and transmission connection - that's exactly what the clutch controls!",
+            general: "🤔 The clutch is quite different from the brake. What do you think it might do instead of slowing down?"
+        },
+        trafficLight: {
+            clutchNeutral: "🚦 Perfect! You understand that something allows the engine to keep running while the car is stopped!",
+            disconnect: "💡 Exactly! Something disconnects the wheels from the engine so it can keep running while stopped!",
+            brakePark: "🛑 You're thinking about stopping the car, which is important! But I'm thinking of how the engine can keep running while the wheels aren't moving."
+        }
+    },
+
+    // Bird flight responses
+    birds: {
+        pushAirLift: "🐦 Fantastic! You understand that it's all about air and creating lift! That's exactly how flight works!",
+        featherAirflow: "✨ Brilliant! Feathers and airflow are absolutely key to how birds fly!",
+        flapMove: "🌟 Perfect! Wing movement creates the forces that allow birds to fly!"
+    },
+
+    // General mechanical understanding
+    mechanical: {
+        connectControl: "🔧 Excellent mechanical thinking! You understand that cars have systems that connect and control different parts!"
+    },
+
+    // Generic responses based on answer quality (last resort)
+    generic: {
+        veryDetailed: "🌟 I appreciate your detailed explanation! You're really working through this systematically.",
+        detailed: "👍 Good thinking! I can see you're considering different aspects of this.",
+        medium: "💭 Interesting! Can you help me understand your reasoning a bit more?",
+        short: "🤔 I see what you're thinking. Can you elaborate on that?",
+        veryShort: "💡 Feel free to share any thoughts - every idea helps us learn!"
+    }
+};
+
+// Export for use in main script
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AIResponses;
+}

html/kidsai/index.html

@@ -1,8 +1,5 @@
 <!DOCTYPE html>
-<ht    <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
+<html lang="en">
-    
-    <link rel="stylesheet" href="style.css?v=20250629-1416">
-    <link rel="stylesheet" href="fallback.css">ang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,7 +19,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
     
-    <link rel="stylesheet" href="style.css?v=20250629-1413">
+    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="fallback.css">
     <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -90,6 +87,20 @@
                     <h3><span class="lightbulb-icon">💡</span> <span data-translate="thinking-title">Let's Think Step by Step!</span></h3>
                 </div>
                 <div id="thinking-steps" class="thinking-steps"></div>
+                <div class="action-buttons hidden" id="action-buttons">
+                    <button id="research-btn" class="action-btn research">
+                        <span class="research-icon">🔍</span>
+                        <span data-translate="research-btn">Research Ideas</span>
+                    </button>
+                    <button id="experiment-btn" class="action-btn experiment">
+                        <span class="experiment-icon">🧪</span>
+                        <span data-translate="experiment-btn">Try Experiments</span>
+                    </button>
+                    <button id="discuss-btn" class="action-btn discuss">
+                        <span class="discuss-icon">💬</span>
+                        <span data-translate="discuss-btn">Discuss with Others</span>
+                    </button>
+                </div>
             </section>
 
             <!-- Suggestions Section -->
@@ -165,10 +176,39 @@
         }, 100);
     </script>
 
-    <!-- jQuery -->
+    <script src="translations.js?v=20250629155100"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+    <script src="ai-responses.js?v=20250629155100"></script>
+    <script src="script-new.js?v=20250629155100"></script>
     
-    <script src="translations.js"></script>
+    <!-- Inline debugging script -->
-    <script src="script.js"></script>
+    <script>
+        console.log('🔧 Inline debug script loaded');
+        
+        window.addEventListener('load', () => {
+            console.log('🔧 Window loaded, checking elements...');
+            const questionInput = document.getElementById('question-input');
+            const askButton = document.getElementById('ask-button');
+            const suggestionCards = document.querySelectorAll('.suggestion-card');
+            
+            console.log('🔧 questionInput:', questionInput);
+            console.log('🔧 askButton:', askButton);
+            console.log('🔧 suggestionCards:', suggestionCards.length);
+            console.log('🔧 window.kidsAI:', window.kidsAI);
+            
+            // Test button click directly
+            if (askButton) {
+                askButton.addEventListener('click', () => {
+                    console.log('🔧 BUTTON CLICKED DIRECTLY!');
+                });
+            }
+            
+            // Test suggestion card clicks
+            suggestionCards.forEach((card, index) => {
+                card.addEventListener('click', () => {
+                    console.log('🔧 SUGGESTION CARD ' + index + ' CLICKED!');
+                });
+            });
+        });
+    </script>
 </body>
 </html>

html/kidsai/script-new.js

@@ -603,86 +603,133 @@ class KidsAIExplorer {
         const currentQuestion = this.questions[questionIndex];
         const questionLower = currentQuestion ? currentQuestion.toLowerCase() : '';
         
+        // Ensure AIResponses is available
+        if (typeof AIResponses === 'undefined') {
+            console.warn('⚠️ AIResponses not loaded, using fallback');
+            return "🌟 Great thinking! Keep exploring - you're doing wonderfully!";
+        }
+        
         // Handle "I don't know" or help-seeking responses
-        if (answerLower.includes('don\'t know') || answerLower.includes('no idea') || 
+        if (answerLower.includes('don\'t know') || answerLower.includes('no idea')) {
-            answerLower.includes('what is it') || answerLower.includes('tell me') ||
+            return AIResponses.helpSeeking.dontKnow;
-            (answerLower === 'no' && questionLower.includes('heard of'))) {
+        }
-            return "That's perfectly fine! 🤗 Not knowing something just means we're about to learn something new together. Let's keep exploring!";
+        if (answerLower.includes('what is it')) {
+            return AIResponses.helpSeeking.whatIsIt;
+        }
+        if (answerLower.includes('tell me')) {
+            return AIResponses.helpSeeking.tellMe;
         }
         
         // Handle very short positive answers like "yes"
         if (answerLower === 'yes' || answerLower === 'yeah' || answerLower === 'yep') {
             if (questionLower.includes('bicycle') || questionLower.includes('pedal')) {
-                return "Great! 🚴‍♂️ Since you understand how bicycles work, you're already thinking about mechanical connections. That's exactly the kind of thinking we need!";
+                return AIResponses.shortAnswers.yes.bicycle;
             } else if (questionLower.includes('heard of') || questionLower.includes('know')) {
-                return "Excellent! 👍 Your knowledge will help us build on these concepts together!";
+                return AIResponses.shortAnswers.yes.knowledge;
             } else {
-                return "Perfect! 🌟 I can see you're following along. Let's dive a bit deeper!";
+                return AIResponses.shortAnswers.yes.general;
             }
         }
         
         // Handle "no" responses
         if (answerLower === 'no' || answerLower === 'nope') {
-            return "No problem at all! 😊 That's why we're exploring this together - to discover new things!";
+            return AIResponses.shortAnswers.no;
         }
         
-        // Topic-specific contextual responses
+        // Topic-specific contextual responses - BICYCLE
         if (questionLower.includes('bicycle') || questionLower.includes('pedal') || questionLower.includes('chain')) {
-            if (answerLower.includes('pedal') || answerLower.includes('chain') || answerLower.includes('wheel')) {
+            if (answerLower.includes('brake') && (answerLower.includes('slow') || answerLower.includes('stop'))) {
-                return "<22>‍♂️ Excellent! You understand the connection between pedals, chain, and wheels. That mechanical connection concept is key!";
+                return AIResponses.bicycle.brake.slowDown;
+            } else if (answerLower.includes('brake')) {
+                return AIResponses.bicycle.brake.technical;
+            } else if (answerLower.includes('pedal') || answerLower.includes('chain') || answerLower.includes('wheel')) {
+                return AIResponses.bicycle.mechanics.pedalChainWheel;
             } else if (answerLower.includes('gear') || answerLower.includes('speed')) {
-                return "👍 Yes! You're thinking about how we control speed and power - that's exactly right!";
+                return AIResponses.bicycle.mechanics.gearSpeed;
+            } else if (answerLower.includes('slow') || answerLower.includes('stop')) {
+                return AIResponses.bicycle.mechanics.slowStop;
             }
         }
         
+        // CAR vs BICYCLE comparison
         if (questionLower.includes('car') && questionLower.includes('bicycle')) {
             if (answerLower.includes('engine')) {
-                return "<22> You're thinking about the engine - that's the power source! But I'm thinking of a specific part that works between the engine and wheels, kind of like how bike pedals connect to the chain.";
+                return AIResponses.car.comparison.engine;
             } else if (answerLower.includes('gear') || answerLower.includes('transmission')) {
-                return "🎯 Great thinking! You're absolutely on the right track with gears and transmission systems!";
+                return AIResponses.car.comparison.gearTransmission;
             } else if (answerLower.includes('pedal') || answerLower.includes('brake')) {
-                return "🦶 Good connection! You're thinking about pedals in cars. There are actually multiple pedals that do different things!";
+                return AIResponses.car.comparison.pedalBrake;
             }
         }
         
+        // CAR BRAKE responses
+        if (questionLower.includes('slow') || questionLower.includes('stop') || questionLower.includes('car')) {
+            if (answerLower.includes('brake') && (answerLower.includes('pedal') || answerLower.includes('system'))) {
+                return AIResponses.car.brake.perfectAnswer;
+            } else if (answerLower.includes('brake') && !answerLower.includes('clutch')) {
+                return AIResponses.car.brake.justBrake;
+            } else if (answerLower.includes('wheel') || answerLower.includes('tire')) {
+                return AIResponses.car.brake.wheelTire;
+            } else if (answerLower.includes('pedal') && !answerLower.includes('brake')) {
+                return AIResponses.car.brake.pedal;
+            }
+        }
+        
+        // CLUTCH responses
         if (questionLower.includes('clutch') || questionLower.includes('gears') || questionLower.includes('switch gears')) {
             if (answerLower.includes('clutch')) {
-                return "🎯 Perfect! You know about the clutch! That's exactly what I was thinking of - the component that helps with smooth gear changes!";
+                return AIResponses.car.clutch.perfect;
             } else if (answerLower.includes('transmission') || answerLower.includes('gearbox')) {
-                return "🔧 Excellent! You're thinking about the transmission system. The clutch is the part that connects and disconnects the engine from the gearbox!";
+                return AIResponses.car.clutch.transmission;
             } else if (answerLower.includes('separate') || answerLower.includes('disconnect')) {
-                return "👍 Yes! You understand the separation concept - that's exactly what the clutch does!";
+                return AIResponses.car.clutch.separate;
+            } else if (answerLower.includes('different') && answerLower.includes('brake')) {
+                return AIResponses.car.clutch.different;
+            } else if (answerLower.includes('engine') && answerLower.includes('transmission')) {
+                return AIResponses.car.clutch.engineTransmission;
+            } else {
+                return AIResponses.car.clutch.general;
             }
         }
         
+        // TRAFFIC LIGHT / ENGINE RUNNING responses
         if (questionLower.includes('traffic light') || questionLower.includes('stopped') || questionLower.includes('engine running')) {
             if (answerLower.includes('clutch') || answerLower.includes('neutral')) {
-                return "🚦 Brilliant! You understand that we need a way to keep the engine running while the car is stopped!";
+                return AIResponses.car.trafficLight.clutchNeutral;
+            } else if (answerLower.includes('disconnect') || answerLower.includes('separate')) {
+                return AIResponses.car.trafficLight.disconnect;
             } else if (answerLower.includes('brake') || answerLower.includes('park')) {
-                return "🛑 You're thinking about stopping the car, which is important! But I'm thinking of how the engine can keep running while the wheels aren't moving.";
+                return AIResponses.car.trafficLight.brakePark;
             }
         }
         
-        // Bird flight responses
+        // BIRD FLIGHT responses
         if (questionLower.includes('bird') || questionLower.includes('wing') || questionLower.includes('fly')) {
             if (answerLower.includes('push') || answerLower.includes('air') || answerLower.includes('lift')) {
-                return "<22> Fantastic! You understand that it's all about air and creating lift! That's exactly how flight works!";
+                return AIResponses.birds.pushAirLift;
             } else if (answerLower.includes('feather') || answerLower.includes('airflow')) {
-                return "✨ Brilliant! Feathers and airflow are absolutely key to how birds fly!";
+                return AIResponses.birds.featherAirflow;
             } else if (answerLower.includes('flap') || answerLower.includes('move')) {
-                return "🌟 Perfect! Wing movement creates the forces that allow birds to fly!";
+                return AIResponses.birds.flapMove;
             }
         }
         
+        // MECHANICAL understanding responses
+        if (answerLower.includes('connect') || answerLower.includes('control')) {
+            return AIResponses.mechanical.connectControl;
+        }
+        
         // Generic responses based on answer quality and engagement
         if (answer.length > 25) {
-            return "🌟 I love your detailed thinking! You're really exploring this concept thoroughly. That kind of curiosity is what leads to great discoveries!";
+            return AIResponses.generic.veryDetailed;
-        } else if (answer.length > 10) {
+        } else if (answer.length > 15) {
-            return "👍 Good observation! I can see you're thinking about this carefully. Your reasoning is developing nicely!";
+            return AIResponses.generic.detailed;
+        } else if (answer.length > 8) {
+            return AIResponses.generic.medium;
         } else if (answer.length > 3) {
-            return "<22> Interesting thought! You're engaging with the concept. Can you help me understand your thinking a bit more?";
+            return AIResponses.generic.short;
         } else {
-            return "🤔 I see you're thinking about this! Feel free to share whatever comes to mind - there are no wrong answers here!";
+            return AIResponses.generic.veryShort;
         }
     }