diff --git a/html/kidsai/index.html b/html/kidsai/index.html index 5b7e05c..43918a9 100755 --- a/html/kidsai/index.html +++ b/html/kidsai/index.html @@ -70,7 +70,7 @@ diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index d6ff1d4..659ac67 100644 --- a/html/kidsai/script-new.js +++ b/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 = ` ๐ค - AI Teacher + ${aiTeacherLabel} - ${guidance.encouragement || "Great question! Let's explore this together step by step! ๐"} - Instead of giving you the answer right away, I'll help you think through this like a detective! ๐ต๏ธ + ${encouragementText} + ${detectiveText} `; conversationContainer.appendChild(welcomeStep); // 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?" + const fallbackQuestions = [ + t['fallback-question-1'] || "What do you already know about this topic?", + t['fallback-question-2'] || "What do you think might be the reason for this?", + 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!';
${guidance.encouragement || "Great question! Let's explore this together step by step! ๐"}
Instead of giving you the answer right away, I'll help you think through this like a detective! ๐ต๏ธ
${encouragementText}
${detectiveText}