From c065dcfb332d5efe7b82d4130e7fb690b7ee1706 Mon Sep 17 00:00:00 2001 From: root Date: Sun, 29 Jun 2025 16:34:18 +0200 Subject: [PATCH] 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 | 118 ++++++++++---------------------------- html/kidsai/style.css | 11 ++++ 2 files changed, 42 insertions(+), 87 deletions(-) diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index a974530..eac4ce4 100644 --- a/html/kidsai/script-new.js +++ b/html/kidsai/script-new.js @@ -232,31 +232,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 = ` -
-

🎉 Great thinking! You've explored this question step by step!

-

Would you like to see how close your thoughts were to the scientific explanation?

- -
- - `; - 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 - const revealSection = document.querySelector('.reveal-section'); - if (revealSection) { - revealSection.style.display = 'block'; - revealSection.scrollIntoView({ behavior: 'smooth' }); - } + // All questions asked, add and show reveal section + const revealDiv = document.createElement('div'); + revealDiv.className = 'reveal-section'; + revealDiv.innerHTML = ` +
+

🎉 Great thinking! You've explored this question step by step!

+

Would you like to see how close your thoughts were to the scientific explanation?

+ +
+ + `; + 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 - let aiResponse = this.generateAIResponse(answer, questionIndex); - - // Add AI response bubble + // Show user message immediately setTimeout(() => { userBubble.classList.add('visible'); - const responseBubble = document.createElement('div'); - responseBubble.className = 'chat-message ai-message'; - responseBubble.innerHTML = ` -
- 🤖 - AI Teacher -
-
-

${aiResponse}

-
- `; - - this.conversationContainer.appendChild(responseBubble); - + // Move to next question after a brief pause + this.currentQuestionIndex++; setTimeout(() => { - responseBubble.classList.add('visible'); - responseBubble.scrollIntoView({ behavior: 'smooth' }); - - // Move to next question after a delay - this.currentQuestionIndex++; - setTimeout(() => { - this.askNextQuestion(); - }, 1500); - }, 500); - }, 800); - } - - 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)]; - } + this.askNextQuestion(); + }, 800); + }, 300); } async revealAnswer(question) { diff --git a/html/kidsai/style.css b/html/kidsai/style.css index d6e3574..faa225a 100755 --- a/html/kidsai/style.css +++ b/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 {