Fix translation errors and improve conversation flow

- Add proper German fallbacks for all user-facing text
- Fix 'Share your thoughts', 'Submit', 'You' translations
- Improve context sent to AI with originalTopic and context type
- Reset conversation state properly to prevent duplicate messages
- Add better German translations for welcome messages and fallback questions
- Improve choice button translations and prompts
- Fix weird AI responses by providing better context to server

html/kidsai/script-new.js

@@ -237,12 +237,13 @@ class KidsAIExplorer {
         // Show thinking section
         this.thinkingSection.classList.remove('hidden');
         
-        // Clear previous content
+        // Clear previous content completely
         this.thinkingSteps.innerHTML = '';
         
-        // Initialize conversation state
+        // Reset conversation state
         this.currentStep = 0;
         this.userAnswers = [];
+        this.currentQuestionIndex = 0;
         
         // Create conversation container
         const conversationContainer = document.createElement('div');
@@ -254,9 +255,9 @@ class KidsAIExplorer {
         welcomeStep.className = 'conversation-step visible';
         
         // Get translations before creating HTML to avoid context issues
-        const encouragementText = guidance.encouragement || this.getTranslation('default-encouragement') || "Great question! Let's explore this together step by step! 🚀";
-        const detectiveHelpText = this.getTranslation('detective-help') || "Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️";
-        const aiTeacherText = this.getTranslation('ai-teacher') || "AI Teacher";
+        const encouragementText = guidance.encouragement || this.getTranslation('default-encouragement') || (this.currentLanguage === 'de' ? "Fantastische Frage! Lass uns das gemeinsam Schritt für Schritt erforschen! 🚀" : "Great question! Let's explore this together step by step! 🚀");
+        const detectiveHelpText = this.getTranslation('detective-help') || (this.currentLanguage === 'de' ? "Anstatt dir die Antwort gleich zu geben, helfe ich dir dabei, wie ein Detektiv zu denken! 🕵️" : "Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️");
+        const aiTeacherText = this.getTranslation('ai-teacher') || (this.currentLanguage === 'de' ? "KI-Lehrer" : "AI Teacher");
         
         welcomeStep.innerHTML = `
             <div class="ai-message">
@@ -274,15 +275,14 @@ class KidsAIExplorer {
 
         // Add thinking questions as interactive steps
         const questions = guidance.steps ? guidance.steps.map(step => step.text) : guidance.questions || [
-            "What do you already know about this topic?",
-            "What do you think might be the reason for this?",
-            "Can you think of any examples or similar situations?"
+            this.currentLanguage === 'de' ? "Was weißt du bereits über dieses Thema?" : "What do you already know about this topic?",
+            this.currentLanguage === 'de' ? "Was denkst du, könnte der Grund dafür sein?" : "What do you think might be the reason for this?",
+            this.currentLanguage === 'de' ? "Kannst du dir Beispiele oder ähnliche Situationen vorstellen?" : "Can you think of any examples or similar situations?"
         ];
 
         // Create chat interface
         this.conversationContainer = conversationContainer;
         this.questions = questions;
-        this.currentQuestionIndex = 0;
         
         // Start the conversation with the first question
         this.askNextQuestion();
@@ -506,7 +506,10 @@ class KidsAIExplorer {
                 ? this.questions[questionIndex] 
                 : 'the current question';
 
-            console.log('📤 Sending chat request to /api/respond-to-answer:', { answer, currentQuestion });
+            // Get the original topic for better context
+            const originalQuestion = this.questionInput ? this.questionInput.value.trim() : '';
+
+            console.log('📤 Sending chat request to /api/respond-to-answer:', { answer, currentQuestion, originalQuestion });
 
             // Call server API for contextual response
             const response = await fetch('/api/respond-to-answer', {
@@ -517,8 +520,10 @@ class KidsAIExplorer {
                 body: JSON.stringify({
                     answer: answer,
                     question: currentQuestion,
+                    originalTopic: originalQuestion,
                     language: this.currentLanguage,
-                    stepIndex: questionIndex
+                    stepIndex: questionIndex,
+                    context: 'guided_learning_conversation'
                 })
             });
 
@@ -592,16 +597,16 @@ class KidsAIExplorer {
 
     addContinueChoiceButtons() {
         // Get translations before creating HTML to avoid context issues
-        const exploreDeeperText = this.getTranslation('explore-deeper') || "I want to explore this deeper";
-        const continueLearningText = this.getTranslation('continue-learning') || "Continue with next topic";
-        const tellMeMoreText = this.getTranslation('tell-me-more') || "Tell me more! 🤔";
-        const nextQuestionText = this.getTranslation('next-question') || "Next question! ➡️";
+        const exploreDeeperText = this.getTranslation('explore-deeper') || (this.currentLanguage === 'de' ? "Ich möchte das tiefer erforschen" : "I want to explore this deeper");
+        const continueLearningText = this.getTranslation('continue-learning') || (this.currentLanguage === 'de' ? "Mit dem nächsten Thema fortfahren" : "Continue with next topic");
+        const tellMeMoreText = this.getTranslation('tell-me-more') || (this.currentLanguage === 'de' ? "Erzähl mir mehr! 🤔" : "Tell me more! 🤔");
+        const nextQuestionText = this.getTranslation('next-question') || (this.currentLanguage === 'de' ? "Nächste Frage! ➡️" : "Next question! ➡️");
         
         const choiceContainer = document.createElement('div');
         choiceContainer.className = 'choice-container';
         choiceContainer.innerHTML = `
             <div class="choice-prompt">
-                <p>💭 ${exploreDeeperText} oder ${continueLearningText}?</p>
+                <p>💭 ${exploreDeeperText} ${this.currentLanguage === 'de' ? 'oder' : 'or'} ${continueLearningText}?</p>
             </div>
             <div class="choice-buttons">
                 <button class="choice-btn explore-btn" onclick="kidsAI.exploreCurrentTopicDeeper()">
@@ -731,13 +736,13 @@ class KidsAIExplorer {
         inputContainer.className = 'user-input-container deeper-exploration';
         inputContainer.innerHTML = `
             <div class="input-prompt">
-                <p>💭 ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}</p>
+                <p>💭 ${this.getTranslation('share-thoughts') || (this.currentLanguage === 'de' ? 'Teile deine Gedanken mit:' : 'Share your thoughts:')}</p>
             </div>
             <div class="input-area">
-                <textarea id="deeper-chat-input" placeholder="${this.getTranslation('type-thoughts') || 'Type your thoughts here...'}" 
+                <textarea id="deeper-chat-input" placeholder="${this.getTranslation('type-thoughts') || (this.currentLanguage === 'de' ? 'Schreibe hier deine Gedanken...' : '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.submitDeeperExplorationAnswer()" 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'} 🚀
+                    ${this.getTranslation('submit') || (this.currentLanguage === 'de' ? 'Abschicken' : 'Submit')} 🚀
                 </button>
             </div>
         `;
@@ -767,7 +772,7 @@ class KidsAIExplorer {
 
         const answer = textarea.value.trim();
         if (!answer) {
-            const message = this.getTranslation('write-thoughts') || 'Please write down your thoughts! 🤔';
+            const message = this.getTranslation('write-thoughts') || (this.currentLanguage === 'de' ? 'Bitte schreibe deine Gedanken auf! 🤔' : 'Please write down your thoughts! 🤔');
             this.showMessage(message, 'warning');
             return;
         }
@@ -778,7 +783,7 @@ class KidsAIExplorer {
         userBubble.innerHTML = `
             <div class="message-header">
                 <span class="user-avatar">👤</span>
-                <span class="user-label">${this.getTranslation('you') || 'You'}</span>
+                <span class="user-label">${this.getTranslation('you') || (this.currentLanguage === 'de' ? 'Du' : 'You')}</span>
             </div>
             <div class="message-content">
                 <p>${answer}</p>
@@ -958,13 +963,13 @@ class KidsAIExplorer {
         inputContainer.className = 'user-input-container';
         inputContainer.innerHTML = `
             <div class="input-prompt">
-                <p>💭 ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}</p>
+                <p>💭 ${this.getTranslation('share-thoughts') || (this.currentLanguage === 'de' ? 'Teile deine Gedanken mit:' : 'Share your thoughts:')}</p>
             </div>
             <div class="input-area">
-                <textarea id="chat-input" placeholder="${this.getTranslation('type-thoughts') || 'Type your thoughts here...'}" 
+                <textarea id="chat-input" placeholder="${this.getTranslation('type-thoughts') || (this.currentLanguage === 'de' ? 'Schreibe hier deine Gedanken...' : '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'} 🚀
+                    ${this.getTranslation('submit') || (this.currentLanguage === 'de' ? 'Abschicken' : 'Submit')} 🚀
                 </button>
             </div>
         `;
@@ -994,7 +999,7 @@ class KidsAIExplorer {
 
         const answer = textarea.value.trim();
         if (!answer) {
-            const message = this.getTranslation('write-thoughts') || 'Please write down your thoughts! 🤔';
+            const message = this.getTranslation('write-thoughts') || (this.currentLanguage === 'de' ? 'Bitte schreibe deine Gedanken auf! 🤔' : 'Please write down your thoughts! 🤔');
             this.showMessage(message, 'warning');
             return;
         }
@@ -1005,7 +1010,7 @@ class KidsAIExplorer {
         userBubble.innerHTML = `
             <div class="message-header">
                 <span class="user-avatar">👤</span>
-                <span class="user-label">${this.getTranslation('you') || 'You'}</span>
+                <span class="user-label">${this.getTranslation('you') || (this.currentLanguage === 'de' ? 'Du' : 'You')}</span>
             </div>
             <div class="message-content">
                 <p>${answer}</p>