From 402d6d9f05df5942bb238bcffb08792bf53a2844 Mon Sep 17 00:00:00 2001
From: root <root>
Date: Mon, 30 Jun 2025 11:05:34 +0200
Subject: [PATCH] Fix missing askNextQuestion and related methods

- Re-add askNextQuestion() method that was accidentally removed
- Re-add continueToNextQuestion() method for flow control
- Re-add addUserInputArea() for regular chat input
- Re-add submitChatAnswer() for regular answer submission
- Resolves TypeError: this.askNextQuestion is not a function
- Restores complete chat conversation flow functionality
---
 html/kidsai/script-new.js | 132 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)

diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js
index b356dc4..6afc393 100644
--- a/html/kidsai/script-new.js
+++ b/html/kidsai/script-new.js
@@ -900,6 +900,138 @@ class KidsAIExplorer {
         }
     }
 
+    // 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 = `
+            <div class="message-header">
+                <span class="ai-avatar">🤖</span>
+                <span class="ai-label">${this.getTranslation('ai-teacher') || 'AI Teacher'}</span>
+            </div>
+            <div class="message-content">
+                <p>${question}</p>
+            </div>
+        `;
+
+        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() {
+        const inputContainer = document.createElement('div');
+        inputContainer.className = 'user-input-container';
+        inputContainer.innerHTML = `
+            <div class="input-prompt">
+                <p>💭 ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}</p>
+            </div>
+            <div class="input-area">
+                <textarea id="chat-input" placeholder="${this.getTranslation('type-thoughts') || 'Type your thoughts here...'}" 
+                          rows="3" style="width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #e2e8f0; font-size: 14px;"></textarea>
+                <button onclick="kidsAI.submitChatAnswer()" class="submit-btn" style="margin-top: 10px; padding: 10px 20px; background: #4ade80; color: white; border: none; border-radius: 8px; cursor: pointer;">
+                    ${this.getTranslation('submit') || 'Submit'} 🚀
+                </button>
+            </div>
+        `;
+
+        this.conversationContainer.appendChild(inputContainer);
+
+        // Show input area with animation
+        setTimeout(() => {
+            inputContainer.classList.add('visible');
+            this.scrollToBottomSmoothly();
+            
+            // Focus on textarea
+            const textarea = inputContainer.querySelector('#chat-input');
+            if (textarea) {
+                textarea.focus();
+            }
+        }, 200);
+    }
+
+    // Submit chat answer
+    submitChatAnswer() {
+        const textarea = document.getElementById('chat-input');
+        if (!textarea) {
+            console.error('❌ Chat input not found');
+            return;
+        }
+
+        const answer = textarea.value.trim();
+        if (!answer) {
+            const message = this.getTranslation('write-thoughts') || 'Please write down your thoughts! 🤔';
+            this.showMessage(message, 'warning');
+            return;
+        }
+
+        // Add user message bubble
+        const userBubble = document.createElement('div');
+        userBubble.className = 'chat-message user-message';
+        userBubble.innerHTML = `
+            <div class="message-header">
+                <span class="user-avatar">👤</span>
+                <span class="user-label">${this.getTranslation('you') || 'You'}</span>
+            </div>
+            <div class="message-content">
+                <p>${answer}</p>
+            </div>
+        `;
+
+        // Remove input container and add user message
+        const inputContainer = document.querySelector('.user-input-container');
+        if (inputContainer) {
+            inputContainer.remove();
+        }
+
+        this.conversationContainer.appendChild(userBubble);
+
+        // Show user message with animation
+        setTimeout(() => {
+            userBubble.classList.add('visible');
+            this.scrollToBottomSmoothly();
+        }, 100);
+
+        // Generate AI response
+        setTimeout(() => {
+            this.generateChatAIResponse(answer, this.currentQuestionIndex);
+        }, 500);
+    }
+
     // Show completion message when all questions are done
     showCompletionMessage() {
         const completionBubble = document.createElement('div');