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 {