root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix German translation issues

Browse Source 
- 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
This commit is contained in:
root
2025-07-13 16:52:20 +02:00
parent b3ab9c9648
commit c0bf7413de
2 changed files with 91 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
html/kidsai/index.html
View File

@@ -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">

99
html/kidsai/script-new.js
View File

@@ -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>Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️</p>
<p>${encouragementText}</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 || [
"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!';