diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index 99785a7..b356dc4 100644 --- a/html/kidsai/script-new.js +++ b/html/kidsai/script-new.js @@ -677,10 +677,20 @@ class KidsAIExplorer { this.scrollToBottomSmoothly(); }, 100); - // Add choice buttons again for further exploration - setTimeout(() => { - this.addContinueChoiceButtons(); - }, 2000); + // Check if the response contains a question that needs an answer + const hasQuestion = data.response.includes('?'); + + if (hasQuestion) { + // Add input area for user to respond to the deeper exploration question + setTimeout(() => { + this.addDeeperExplorationInputArea(); + }, 1500); + } else { + // No question, just add choice buttons again + setTimeout(() => { + this.addContinueChoiceButtons(); + }, 2000); + } } else { throw new Error(data.error || 'Failed to get deeper exploration'); } @@ -708,76 +718,25 @@ class KidsAIExplorer { this.scrollToBottomSmoothly(); }, 100); + // This fallback has a question, so add input area setTimeout(() => { - this.addContinueChoiceButtons(); - }, 2000); + this.addDeeperExplorationInputArea(); + }, 1500); } } - // Handle choice to continue to next question - continueToNextQuestion() { - // Remove choice buttons - const choiceContainer = document.querySelector('.choice-container'); - if (choiceContainer) { - choiceContainer.remove(); - } - - // Move to next question - this.currentQuestionIndex++; - this.askNextQuestion(); - } - - // Ask the next question in the conversation - askNextQuestion() { - console.log('β askNextQuestion called, currentQuestionIndex:', this.currentQuestionIndex); - - if (!this.questions || this.currentQuestionIndex >= this.questions.length) { - console.log('β All questions completed'); - this.showCompletionMessage(); - return; - } - - const question = this.questions[this.currentQuestionIndex]; - - // Add AI question bubble - const questionBubble = document.createElement('div'); - questionBubble.className = 'chat-message ai-message'; - questionBubble.innerHTML = ` -
- - `; - - this.conversationContainer.appendChild(questionBubble); - - // Show question with animation - setTimeout(() => { - questionBubble.classList.add('visible'); - this.scrollToBottomSmoothly(); - }, 100); - - // Add input area for user response - setTimeout(() => { - this.addUserInputArea(); - }, 1000); - } - - // Add input area for user to respond - addUserInputArea() { + // Add input area specifically for deeper exploration questions + addDeeperExplorationInputArea() { const inputContainer = document.createElement('div'); - inputContainer.className = 'user-input-container'; + inputContainer.className = 'user-input-container deeper-exploration'; inputContainer.innerHTML = `π ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}