Fix conversational flow for exploratory questions

- Modified backend to generate direct conversational AI responses for exploratory questions instead of step-by-step guidance
- Updated frontend to handle new conversationalResponse format
- Exploratory questions now show immediate AI conversation with reply interface
- Added AI teacher badge to conversation bubbles
- Improved user experience with natural dialogue flow
- Updated cache-busting parameter for immediate deployment

html/kidsai/index.html

@@ -19,7 +19,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
     
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css?v=20250629-1413">
     <link rel="stylesheet" href="fallback.css">
     <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">

html/kidsai/script.js

@@ -184,7 +184,43 @@ class KidsAIExplorer {
         `;
         this.thinkingSteps.appendChild(encouragementDiv);
 
-        // Show thinking steps from AI
+        // Handle exploratory questions with conversational response
+        if (guidance.questionType === 'exploratory' && guidance.conversationalResponse) {
+            // Create conversational interface directly
+            const conversationDiv = document.createElement('div');
+            conversationDiv.className = 'ai-conversation';
+            
+            const isAIQuestion = guidance.conversationalResponse.includes('?');
+            
+            conversationDiv.innerHTML = `
+                <div class="ai-guidance-bubble">
+                    <div class="bubble-icon">🤖</div>
+                    <div class="bubble-text">${guidance.conversationalResponse}</div>
+                    <div class="ai-teacher-badge">✨ AI Teacher</div>
+                </div>
+                ${isAIQuestion ? `
+                    <div class="ai-question-reply">
+                        <div class="reply-input-section">
+                            <textarea class="reply-textarea" placeholder="${this.currentLanguage === 'de' ? 'Deine Antwort...' : 'Your answer...'}" rows="3"></textarea>
+                            <button class="reply-btn">
+                                <span class="btn-icon">💬</span>
+                                ${this.currentLanguage === 'de' ? 'Antworten' : 'Reply'}
+                            </button>
+                        </div>
+                    </div>
+                ` : ''}
+            `;
+            
+            this.thinkingSteps.appendChild(conversationDiv);
+            
+            if (isAIQuestion) {
+                this.setupAIConversation(conversationDiv);
+            }
+            
+            return; // Skip the step-by-step logic for exploratory questions
+        }
+
+        // Show thinking steps from AI (for math/factual questions)
         guidance.steps.forEach((step, index) => {
             setTimeout(() => {
                 const stepDiv = document.createElement('div');
@@ -238,46 +274,12 @@ class KidsAIExplorer {
             }, index * 800);
         });
 
-        // For exploratory questions, set up conversation if AI asked a question
-        if (guidance.questionType === 'exploratory') {
-            setTimeout(() => {
-                // Get the full AI response text from guidance
-                const aiResponseText = guidance.steps.map(step => step.text).join(' ');
-                const isAIQuestion = aiResponseText.includes('?');
-                
-                if (isAIQuestion) {
-                    // Add conversation interface
-                    const conversationDiv = document.createElement('div');
-                    conversationDiv.className = 'ai-conversation';
-                    conversationDiv.innerHTML = `
-                        <div class="ai-guidance-bubble">
-                            <div class="bubble-icon">🤖</div>
-                            <div class="bubble-text">${aiResponseText}</div>
-                        </div>
-                        <div class="ai-question-reply">
-                            <div class="reply-input-section">
-                                <textarea class="reply-textarea" placeholder="${this.currentLanguage === 'de' ? 'Deine Antwort...' : 'Your answer...'}" rows="3"></textarea>
-                                <button class="reply-btn">
-                                    <span class="btn-icon">💬</span>
-                                    ${this.currentLanguage === 'de' ? 'Antworten' : 'Reply'}
-                                </button>
-                            </div>
-                        </div>
-                    `;
-                    
-                    this.thinkingSteps.appendChild(conversationDiv);
-                    this.setupAIConversation(conversationDiv);
-                } else {
-                    // No question from AI, just show completion
-                    this.addAnswerRevealSection();
-                }
-            }, guidance.steps.length * 800 + 1000);
-        } else {
-            // For mathematical/factual questions, add "Check My Work" button
-            setTimeout(() => {
+        // For mathematical/factual questions, add "Check My Work" button
+        setTimeout(() => {
+            if (guidance.questionType === 'mathematical' || guidance.questionType === 'factual_simple') {
                 this.addCheckWorkSection(guidance.questionType);
-            }, guidance.steps.length * 800 + 1000);
-        }
+            }
+        }, guidance.steps ? guidance.steps.length * 800 + 1000 : 1000);
 
         // Show the thinking section
         setTimeout(() => {

html/kidsai/server.js

@@ -471,14 +471,14 @@ async function getOpenAIGuidance(question, language) {
             ? `Ein Kind fragt: "${question}". Gib 2-3 konkrete Denkschritte, die spezifisch zu dieser Frage passen. Verwende Beispiele und lass das Kind selbst beobachten oder überlegen.`
             : `A child asks: "${question}". Provide 2-3 concrete thinking steps that are specific to this question. Use examples and have the child observe or think for themselves.`;
     } else {
-        // For exploratory questions, provide specific thinking questions related to the topic
+        // For exploratory questions, provide a conversational AI response
         systemPrompt = isGerman 
-            ? "Du bist ein pädagogischer Assistent für Kinder. Für komplexere Fragen stellst du 2-3 sehr spezifische Denkfragen, die direkt mit dem Thema zusammenhängen. Analysiere die Frage und stelle konkrete, themenspezifische Fragen, die das Kind zum Nachdenken über genau dieses Thema anregen. Keine allgemeinen Fragen!"
-            : "You are an educational assistant for children. For complex questions, provide 2-3 very specific thinking questions that directly relate to the topic. Analyze the question and ask concrete, topic-specific questions that encourage the child to think about exactly this subject. No generic questions!";
+            ? "Du bist ein freundlicher AI-Lehrer für Kinder. Antworte auf ihre Fragen mit einfachen, altersgerechten Erklärungen. Stelle am Ende oft eine Rückfrage, um das Gespräch fortzusetzen und das Kind zum Nachdenken anzuregen. Verwende Emojis und eine warme, einladende Sprache."
+            : "You are a friendly AI teacher for children. Answer their questions with simple, age-appropriate explanations. Often ask a follow-up question at the end to continue the conversation and encourage the child to think. Use emojis and warm, inviting language.";
             
         userPrompt = isGerman 
-            ? `Ein Kind hat gefragt: "${question}". Stelle 2-3 sehr spezifische Fragen, die direkt mit diesem Thema zusammenhängen und das Kind zum Nachdenken über genau dieses Thema anregen. Zum Beispiel für "Wie entstehen Regenbogen?": 1) Was brauchst du für einen Regenbogen (Sonne und was noch?), 2) Welche Farben siehst du in einem Regenbogen?, 3) Wann hast du schon mal einen Regenbogen gesehen?`
-            : `A child asked: "${question}". Provide 2-3 very specific questions that directly relate to this topic and encourage the child to think about exactly this subject. For example for "How do rainbows form?": 1) What do you need for a rainbow (sun and what else?), 2) What colors do you see in a rainbow?, 3) When have you seen a rainbow before?`;
+            ? `Ein Kind fragt: "${question}". Gib eine freundliche, verständliche Antwort und stelle eine Rückfrage, um das Gespräch fortzusetzen.`
+            : `A child asks: "${question}". Give a friendly, understandable answer and ask a follow-up question to continue the conversation.`;
     }
 
     try {
@@ -495,17 +495,29 @@ async function getOpenAIGuidance(question, language) {
         const aiResponse = completion.choices[0]?.message?.content || '';
         console.log('✅ OpenAI response received:', aiResponse.substring(0, 100) + '...');
 
-        // Parse the response into steps
-        const steps = parseOpenAIResponseToSteps(aiResponse, language);
+        if (questionType === 'exploratory') {
+            // For exploratory questions, return conversational response
+            return {
+                type: 'ai-powered',
+                questionType: questionType,
+                conversationalResponse: aiResponse,
+                encouragement: getRandomEncouragement(language),
+                source: 'OpenAI GPT-3.5',
+                showAnswerReveal: false
+            };
+        } else {
+            // Parse the response into steps for math/factual questions
+            const steps = parseOpenAIResponseToSteps(aiResponse, language);
 
-        return {
-            type: 'ai-powered',
-            questionType: questionType,
-            steps: steps,
-            encouragement: getRandomEncouragement(language),
-            source: 'OpenAI GPT-3.5',
-            showAnswerReveal: questionType === 'exploratory' // Only show reveal for complex questions
-        };
+            return {
+                type: 'ai-powered',
+                questionType: questionType,
+                steps: steps,
+                encouragement: getRandomEncouragement(language),
+                source: 'OpenAI GPT-3.5',
+                showAnswerReveal: questionType === 'exploratory' // Only show reveal for complex questions
+            };
+        }
 
     } catch (error) {
         console.log('❌ OpenAI error:', error.message);

html/kidsai/style.css

@@ -1755,3 +1755,12 @@ body {
         max-height: 250px;
     }
 }
+
+/* AI Teacher Badge in Conversation Bubbles */
+.ai-teacher-badge {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-top: 8px;
+    text-align: right;
+    font-style: italic;
+}