From 0e064c69878de5da7e0dc107715998d31538e7a5 Mon Sep 17 00:00:00 2001 From: root Date: Sun, 29 Jun 2025 14:14:04 +0200 Subject: [PATCH] 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 | 2 +- html/kidsai/script.js | 82 +++++++++++++++++++++--------------------- html/kidsai/server.js | 42 ++++++++++++++-------- html/kidsai/style.css | 9 +++++ 4 files changed, 79 insertions(+), 56 deletions(-) diff --git a/html/kidsai/index.html b/html/kidsai/index.html index 2514bf4..9a9d98e 100755 --- a/html/kidsai/index.html +++ b/html/kidsai/index.html @@ -19,7 +19,7 @@ - + diff --git a/html/kidsai/script.js b/html/kidsai/script.js index fd01863..563f603 100644 --- a/html/kidsai/script.js +++ b/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 = ` +
+
🤖
+
${guidance.conversationalResponse}
+
✨ AI Teacher
+
+ ${isAIQuestion ? ` +
+
+ + +
+
+ ` : ''} + `; + + 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 = ` -
-
🤖
-
${aiResponseText}
-
-
-
- - -
-
- `; - - 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(() => { diff --git a/html/kidsai/server.js b/html/kidsai/server.js index 65f92cf..f8b0893 100644 --- a/html/kidsai/server.js +++ b/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); diff --git a/html/kidsai/style.css b/html/kidsai/style.css index 418392f..093e849 100755 --- a/html/kidsai/style.css +++ b/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; +}