Clean up chat interface: remove clutter and fix UX issues

- Remove unnecessary AI encouragement responses between questions
- Fix reveal answer section appearing too early in conversation
- Improve scrolling behavior - less jumpy, smoother transitions
- Add proper conversation container scrolling with max height
- Remove redundant generateAIResponse method
- Questions now flow naturally without excessive responses
- Reveal button appears only after all questions are completed
- Better focus management and scroll positioning
- Cleaner, more streamlined chat experience

html/kidsai/script-new.js

@@ -233,31 +233,6 @@ class KidsAIExplorer {
         // Start the conversation with the first question
         this.askNextQuestion();
         
-        // Add final reveal button (initially hidden)
-        const revealDiv = document.createElement('div');
-        revealDiv.className = 'reveal-section';
-        revealDiv.style.display = 'none';
-        revealDiv.innerHTML = `
-            <div class="reveal-prompt">
-                <p>🎉 Great thinking! You've explored this question step by step!</p>
-                <p>Would you like to see how close your thoughts were to the scientific explanation?</p>
-                <button class="reveal-btn" onclick="kidsAI.revealAnswer('${guidance.originalQuestion || this.questionInput.value}')">
-                    <span class="btn-icon">🎯</span> Reveal Answer!
-                </button>
-            </div>
-            <div class="answer-content" id="answer-content" style="display: none;"></div>
-        `;
-        conversationContainer.appendChild(revealDiv);
-
-        // Show first question
-        setTimeout(() => {
-            const firstStep = conversationContainer.querySelector('.step-0');
-            if (firstStep) {
-                firstStep.classList.add('visible');
-                firstStep.scrollIntoView({ behavior: 'smooth' });
-            }
-        }, 1000);
-        
         // Scroll to thinking section
         this.thinkingSection.scrollIntoView({ behavior: 'smooth' });
     }
@@ -423,12 +398,25 @@ class KidsAIExplorer {
 
     askNextQuestion() {
         if (this.currentQuestionIndex >= this.questions.length) {
-            // All questions asked, show reveal section
+            // All questions asked, add and show reveal section
-            const revealSection = document.querySelector('.reveal-section');
+            const revealDiv = document.createElement('div');
-            if (revealSection) {
+            revealDiv.className = 'reveal-section';
-                revealSection.style.display = 'block';
+            revealDiv.innerHTML = `
-                revealSection.scrollIntoView({ behavior: 'smooth' });
+                <div class="reveal-prompt">
-            }
+                    <p>🎉 Great thinking! You've explored this question step by step!</p>
+                    <p>Would you like to see how close your thoughts were to the scientific explanation?</p>
+                    <button class="reveal-btn" onclick="kidsAI.revealAnswer('${this.questionInput.value}')">
+                        <span class="btn-icon">🎯</span> Reveal Answer!
+                    </button>
+                </div>
+                <div class="answer-content" id="answer-content" style="display: none;"></div>
+            `;
+            this.conversationContainer.appendChild(revealDiv);
+            
+            setTimeout(() => {
+                revealDiv.classList.add('visible');
+                this.conversationContainer.scrollTop = this.conversationContainer.scrollHeight;
+            }, 500);
             return;
         }
 
@@ -474,14 +462,18 @@ class KidsAIExplorer {
         setTimeout(() => {
             questionBubble.classList.add('visible');
             inputContainer.classList.add('visible');
-            inputContainer.scrollIntoView({ behavior: 'smooth' });
+            
+            // Smooth scroll to bottom of conversation instead of specific element
+            setTimeout(() => {
+                this.conversationContainer.scrollTop = this.conversationContainer.scrollHeight;
+            }, 100);
             
             // Focus on the textarea
             const textarea = document.getElementById(`user-input-${this.currentQuestionIndex}`);
             if (textarea) {
                 textarea.focus();
             }
-        }, 500);
+        }, 300);
     }
 
     submitChatAnswer(questionIndex) {
@@ -521,64 +513,16 @@ class KidsAIExplorer {
         
         this.conversationContainer.appendChild(userBubble);
         
-        // Get AI response
+        // Show user message immediately
-        let aiResponse = this.generateAIResponse(answer, questionIndex);
-        
-        // Add AI response bubble
         setTimeout(() => {
             userBubble.classList.add('visible');
             
-            const responseBubble = document.createElement('div');
+            // Move to next question after a brief pause
-            responseBubble.className = 'chat-message ai-message';
-            responseBubble.innerHTML = `
-                <div class="message-header">
-                    <span class="ai-avatar">🤖</span>
-                    <span class="ai-label">AI Teacher</span>
-                </div>
-                <div class="message-content">
-                    <p>${aiResponse}</p>
-                </div>
-            `;
-            
-            this.conversationContainer.appendChild(responseBubble);
-            
-            setTimeout(() => {
-                responseBubble.classList.add('visible');
-                responseBubble.scrollIntoView({ behavior: 'smooth' });
-                
-                // Move to next question after a delay
             this.currentQuestionIndex++;
             setTimeout(() => {
                 this.askNextQuestion();
-                }, 1500);
-            }, 500);
             }, 800);
-    }
+        }, 300);
-
-    generateAIResponse(answer, questionIndex) {
-        // Generate contextual AI responses similar to the original logic
-        if (!answer || answer.toLowerCase().includes('nothing') || answer.toLowerCase().includes('don\'t know')) {
-            const encouragingResponses = [
-                "🌟 That's perfectly okay! Not knowing something is the first step to learning. Let's explore this together!",
-                "💡 Great honesty! Every expert started by not knowing. Your curiosity is what matters most!",
-                "🚀 Perfect! When we don't know something, it means we're about to discover something amazing!"
-            ];
-            return encouragingResponses[Math.floor(Math.random() * encouragingResponses.length)];
-        } else if (answer.length < 10) {
-            const guidingResponses = [
-                "🎯 Good start! I can see you're thinking about this. Can you tell me a bit more?",
-                "✨ Interesting thought! What makes you think that way?",
-                "🔍 Nice observation! Can you expand on that idea a little?"
-            ];
-            return guidingResponses[Math.floor(Math.random() * guidingResponses.length)];
-        } else {
-            const thoughtfulResponses = [
-                "🌟 Excellent thinking! You're really exploring this well! I love how you're approaching this scientifically.",
-                "💡 Great observation! You're thinking like a real scientist! Your reasoning shows great curiosity.",
-                "🔍 Wonderful insight! You're asking exactly the right questions! Keep that investigative spirit!"
-            ];
-            return thoughtfulResponses[Math.floor(Math.random() * thoughtfulResponses.length)];
-        }
     }
 
     async revealAnswer(question) {

html/kidsai/style.css

@@ -1199,6 +1199,9 @@ body {
 .conversation-container {
     display: flex;
     flex-direction: column;
+    max-height: 600px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
 }
 
 /* Make reveal section part of the chat flow */
@@ -1209,6 +1212,14 @@ body {
     border-radius: 20px;
     color: white;
     text-align: center;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.5s ease-out;
+}
+
+.reveal-section.visible {
+    opacity: 1;
+    transform: translateY(0);
 }
 
 .reveal-prompt p {