Fix German translation issues

- Add placeholder translation support for data-translate-placeholder attributes
- Fix hardcoded English text in AI responses (detective-help, ai-teacher labels)
- Implement proper language switching for input field placeholder
- Add fallback question translations for German interface
- Fix encouragement messages to use translation system

German interface now fully localized including:
- Input placeholder text
- AI Teacher labels (KI-Lehrer)
- Detective guidance messages
- Encouragement responses
- Fallback questions

html/kidsai/index.html

@@ -70,7 +70,7 @@
                         <textarea 
                             id="question-input" 
                             data-translate-placeholder="question-placeholder"
-                            placeholder="Ask me anything! Like 'Why is the sky blue?' or 'How do plants grow?'"
+                            placeholder=""
                             rows="3"
                         ></textarea>
                         <button id="ask-button" class="ask-btn">

html/kidsai/script-new.js

@@ -116,6 +116,8 @@ class KidsAIExplorer {
                 return;
             }
             
+            console.log('🌐 Applying translations for language:', this.currentLanguage);
+            
             // Update all elements with data-translate attribute
             document.querySelectorAll('[data-translate]').forEach(element => {
                 const key = element.getAttribute('data-translate');
@@ -123,6 +125,19 @@ class KidsAIExplorer {
                     element.textContent = t[key];
                 }
             });
+            
+            // Update all elements with data-translate-placeholder attribute
+            const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');
+            console.log('🔍 Found placeholder elements:', placeholderElements.length);
+            
+            placeholderElements.forEach(element => {
+                const key = element.getAttribute('data-translate-placeholder');
+                console.log('🔑 Translating placeholder key:', key, 'to:', t[key]);
+                if (t[key]) {
+                    element.placeholder = t[key];
+                    console.log('✅ Updated placeholder for element:', element.tagName, 'to:', t[key]);
+                }
+            });
         } catch (error) {
             console.error('❌ Error applying translations:', error);
         }
@@ -132,7 +147,19 @@ class KidsAIExplorer {
         console.log('🔄 Switching language to:', lang);
         this.currentLanguage = lang;
         localStorage.setItem('kidsai-language', lang);
-        this.initializeLanguage();
+        
+        // Force re-apply translations after language switch
+        setTimeout(() => {
+            this.initializeLanguage();
+            // Double-check placeholder specifically
+            if (this.questionInput && typeof translations !== 'undefined') {
+                const t = translations[this.currentLanguage];
+                if (t && t['question-placeholder']) {
+                    this.questionInput.placeholder = t['question-placeholder'];
+                    console.log('🔄 Force-updated placeholder to:', t['question-placeholder']);
+                }
+            }
+        }, 50);
     }
 
     async handleQuestion() {
@@ -212,26 +239,39 @@ class KidsAIExplorer {
         // Show initial encouragement
         const welcomeStep = document.createElement('div');
         welcomeStep.className = 'conversation-step visible';
+        
+        // Get translations for current language
+        const t = (typeof translations !== 'undefined' && translations[this.currentLanguage]) 
+            ? translations[this.currentLanguage] 
+            : translations['en'];
+        
+        const encouragementText = guidance.encouragement || t['default-encouragement'] || "Great question! Let's explore this together step by step! 🚀";
+        const detectiveText = t['detective-help'] || "Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️";
+        const aiTeacherLabel = t['ai-teacher'] || "AI Teacher";
+        
         welcomeStep.innerHTML = `
             <div class="ai-message">
                 <div class="message-header">
                     <span class="ai-avatar">🤖</span>
-                    <span class="ai-label">AI Teacher</span>
+                    <span class="ai-label">${aiTeacherLabel}</span>
                 </div>
                 <div class="message-content">
-                    <p>${guidance.encouragement || "Great question! Let's explore this together step by step! 🚀"}</p>
+                    <p>${encouragementText}</p>
-                    <p>Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️</p>
+                    <p>${detectiveText}</p>
                 </div>
             </div>
         `;
         conversationContainer.appendChild(welcomeStep);
 
         // Add thinking questions as interactive steps
-        const questions = guidance.steps ? guidance.steps.map(step => step.text) : guidance.questions || [
+        const fallbackQuestions = [
-            "What do you already know about this topic?",
+            t['fallback-question-1'] || "What do you already know about this topic?",
-            "What do you think might be the reason for this?",
+            t['fallback-question-2'] || "What do you think might be the reason for this?",
-            "Can you think of any examples or similar situations?"
+            t['fallback-question-3'] || "Where could you look to find more information?",
+            t['fallback-question-4'] || "Can you think of any examples or similar situations?"
         ];
+        
+        const questions = guidance.steps ? guidance.steps.map(step => step.text) : guidance.questions || fallbackQuestions;
 
         // Create chat interface
         this.conversationContainer = conversationContainer;
@@ -248,7 +288,12 @@ class KidsAIExplorer {
     displayLocalGuidance(question) {
         console.log('📚 Displaying local guidance for:', question);
         
-        const encouragements = [
+        // Get translations for current language
+        const t = (typeof translations !== 'undefined' && translations[this.currentLanguage]) 
+            ? translations[this.currentLanguage] 
+            : translations['en'];
+        
+        const encouragements = t.encouragements || [
             "Great question! You're thinking like a real scientist! 🔬",
             "Wow, that's a fantastic thing to wonder about! 🌟",
             "I love how curious you are! That's how great discoveries happen! 🚀"
@@ -937,6 +982,29 @@ class KidsAIExplorer {
             answerContent.style.display = 'block';
         }
     }
+
+    // Debug function to manually test placeholder translation
+    debugTranslatePlaceholder() {
+        console.log('🧪 DEBUG: Manually testing placeholder translation');
+        console.log('Current language:', this.currentLanguage);
+        console.log('Available translations:', typeof translations !== 'undefined' ? Object.keys(translations) : 'not loaded');
+        
+        if (typeof translations !== 'undefined') {
+            const t = translations[this.currentLanguage];
+            if (t && t['question-placeholder']) {
+                console.log('German placeholder text:', t['question-placeholder']);
+                const input = document.getElementById('question-input');
+                if (input) {
+                    input.placeholder = t['question-placeholder'];
+                    console.log('✅ Manually updated placeholder');
+                } else {
+                    console.log('❌ Input element not found');
+                }
+            } else {
+                console.log('❌ Translation not found for question-placeholder');
+            }
+        }
+    }
 }
 
 // Global variable for external access
@@ -951,6 +1019,19 @@ document.addEventListener('DOMContentLoaded', () => {
         window.kidsAI = kidsAI; // Make globally accessible
         console.log('✅ KidsAI Explorer initialized successfully');
         
+        // Force placeholder translation after a short delay to ensure everything is loaded
+        setTimeout(() => {
+            console.log('🔄 Force applying placeholder translation on load...');
+            if (kidsAI && typeof translations !== 'undefined') {
+                const currentLang = kidsAI.currentLanguage;
+                const input = document.getElementById('question-input');
+                if (input && translations[currentLang] && translations[currentLang]['question-placeholder']) {
+                    input.placeholder = translations[currentLang]['question-placeholder'];
+                    console.log('✅ Force-set placeholder on load to:', translations[currentLang]['question-placeholder']);
+                }
+            }
+        }, 100);
+        
         // Add visual indicator
         const indicator = document.createElement('div');
         indicator.innerHTML = '✅ KidsAI Ready!';