diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js
index eac4ce4..bf4264d 100644
--- a/html/kidsai/script-new.js
+++ b/html/kidsai/script-new.js
@@ -513,18 +513,95 @@ class KidsAIExplorer {
this.conversationContainer.appendChild(userBubble);
- // Show user message immediately
+ // Show user message and then AI response
setTimeout(() => {
userBubble.classList.add('visible');
- // Move to next question after a brief pause
- this.currentQuestionIndex++;
+ // Generate contextual AI response based on the answer
+ const aiResponse = this.generateContextualResponse(answer, questionIndex);
+
+ // Add AI response bubble
setTimeout(() => {
- this.askNextQuestion();
+ const responseBubble = document.createElement('div');
+ responseBubble.className = 'chat-message ai-message';
+ responseBubble.innerHTML = `
+
+
+ `;
+
+ this.conversationContainer.appendChild(responseBubble);
+
+ setTimeout(() => {
+ responseBubble.classList.add('visible');
+ responseBubble.scrollIntoView({ behavior: 'smooth' });
+
+ // Move to next question after AI response
+ this.currentQuestionIndex++;
+ setTimeout(() => {
+ this.askNextQuestion();
+ }, 1500);
+ }, 500);
}, 800);
}, 300);
}
+ generateContextualResponse(answer, questionIndex) {
+ const answerLower = answer.toLowerCase();
+ const currentQuestion = this.questions[questionIndex];
+
+ // Analyze the answer and generate a contextual response
+ if (!answer || answer.length < 3 || answerLower.includes('don\'t know') || answerLower.includes('no idea')) {
+ return "That's perfectly okay! Not knowing something is the first step to learning. Let's explore this together! 🌟";
+ }
+
+ // Topic-specific responses based on the question context
+ if (currentQuestion && currentQuestion.toLowerCase().includes('clutch')) {
+ if (answerLower.includes('separate') || answerLower.includes('disconnect') || answerLower.includes('gearbox') || answerLower.includes('engine')) {
+ return "🎯 Excellent! You're absolutely right - the clutch does separate the engine from the gearbox! You clearly understand the basic function. That's a great foundation!";
+ } else if (answerLower.includes('gear') || answerLower.includes('shift')) {
+ return "👍 Yes, exactly! You understand that it's all about changing gears. The clutch is the key component that makes smooth gear changes possible!";
+ } else if (answerLower.includes('pedal') || answerLower.includes('foot') || answerLower.includes('press')) {
+ return "💡 Great observation! Yes, the clutch pedal is how the driver controls it. You're thinking about the practical side of how it works!";
+ } else {
+ return "🤔 Interesting thought! You're on the right track. The clutch is indeed a crucial part of how cars work!";
+ }
+ }
+
+ // Bird/flight topic responses
+ if (currentQuestion && (currentQuestion.toLowerCase().includes('bird') || currentQuestion.toLowerCase().includes('wing') || currentQuestion.toLowerCase().includes('fly'))) {
+ if (answerLower.includes('push') || answerLower.includes('air') || answerLower.includes('lift')) {
+ return "🌟 Fantastic! You understand that it's all about air and creating lift! That's exactly how flight works - you're thinking like a scientist!";
+ } else if (answerLower.includes('feather') || answerLower.includes('airflow')) {
+ return "✨ Brilliant! Feathers and airflow are absolutely key to how birds fly. You're connecting the right concepts!";
+ } else if (answerLower.includes('flap') || answerLower.includes('move') || answerLower.includes('wing')) {
+ return "🎯 Perfect! Wing movement is exactly what creates the forces that allow birds to fly. Great observation!";
+ }
+ }
+
+ // Sky/color topic responses
+ if (currentQuestion && (currentQuestion.toLowerCase().includes('sky') || currentQuestion.toLowerCase().includes('blue') || currentQuestion.toLowerCase().includes('color'))) {
+ if (answerLower.includes('light') || answerLower.includes('scatter') || answerLower.includes('blue')) {
+ return "💙 Excellent! You're thinking about light and how it behaves - that's exactly the scientific principle behind the blue sky!";
+ } else if (answerLower.includes('particle') || answerLower.includes('air') || answerLower.includes('atmosphere')) {
+ return "🔬 Great scientific thinking! The particles in our atmosphere do play a crucial role in what we see!";
+ }
+ }
+
+ // Generic positive responses that acknowledge effort
+ if (answer.length > 20) {
+ return "🌟 Wonderful explanation! I can see you're really thinking deeply about this. Your detailed answer shows great curiosity!";
+ } else if (answer.length > 10) {
+ return "👍 Good thinking! You're on the right track. I like how you're approaching this problem!";
+ } else {
+ return "💡 Nice start! Can you tell me a bit more about what you're thinking?";
+ }
+ }
+
async revealAnswer(question) {
console.log('🎯 Revealing answer for:', question);