Fix JavaScript error: Replace this.translate() with this.getTranslation()

🐛 Bug Fix:
- Fixed TypeError: this.translate is not a function
- Replaced all calls to this.translate() with this.getTranslation()
- The choice button feature was using non-existent translate method
- Now uses the correct getTranslation method that exists in the class

 Result: Choice buttons and translations now work correctly
This commit is contained in:
root
2025-06-30 10:00:26 +02:00
parent 2bfaf63c10
commit b923f4d9b0

View File

@@ -250,7 +250,7 @@ class KidsAIExplorer {
<div class="ai-message"> <div class="ai-message">
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${encouragementText}</p> <p>${encouragementText}</p>
@@ -389,10 +389,10 @@ class KidsAIExplorer {
<div class="ai-response-content"> <div class="ai-response-content">
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${this.translate('thinking-about-answer')}</p> <p>${this.getTranslation('thinking-about-answer')}</p>
</div> </div>
</div> </div>
`; `;
@@ -433,7 +433,7 @@ class KidsAIExplorer {
<div class="ai-response-content"> <div class="ai-response-content">
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${data.response}</p> <p>${data.response}</p>
@@ -451,10 +451,10 @@ class KidsAIExplorer {
<div class="ai-response-content"> <div class="ai-response-content">
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${this.translate('great-thinking-fallback')}</p> <p>${this.getTranslation('great-thinking-fallback')}</p>
</div> </div>
</div> </div>
`; `;
@@ -526,7 +526,7 @@ class KidsAIExplorer {
responseBubble.innerHTML = ` responseBubble.innerHTML = `
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${data.response}</p> <p>${data.response}</p>
@@ -558,10 +558,10 @@ class KidsAIExplorer {
responseBubble.innerHTML = ` responseBubble.innerHTML = `
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${this.translate('great-thinking-fallback')}</p> <p>${this.getTranslation('great-thinking-fallback')}</p>
</div> </div>
`; `;
@@ -583,14 +583,14 @@ class KidsAIExplorer {
choiceContainer.className = 'choice-container'; choiceContainer.className = 'choice-container';
choiceContainer.innerHTML = ` choiceContainer.innerHTML = `
<div class="choice-prompt"> <div class="choice-prompt">
<p>💭 ${this.translate('explore-deeper')} oder ${this.translate('continue-learning')}?</p> <p>💭 ${this.getTranslation('explore-deeper')} oder ${this.getTranslation('continue-learning')}?</p>
</div> </div>
<div class="choice-buttons"> <div class="choice-buttons">
<button class="choice-btn explore-btn" onclick="kidsAI.exploreCurrentTopicDeeper()"> <button class="choice-btn explore-btn" onclick="kidsAI.exploreCurrentTopicDeeper()">
<span class="btn-icon">🔍</span> ${this.translate('tell-me-more')} <span class="btn-icon">🔍</span> ${this.getTranslation('tell-me-more')}
</button> </button>
<button class="choice-btn next-btn" onclick="kidsAI.continueToNextQuestion()"> <button class="choice-btn next-btn" onclick="kidsAI.continueToNextQuestion()">
<span class="btn-icon">➡️</span> ${this.translate('next-question')} <span class="btn-icon">➡️</span> ${this.getTranslation('next-question')}
</button> </button>
</div> </div>
`; `;
@@ -645,7 +645,7 @@ class KidsAIExplorer {
explorationBubble.innerHTML = ` explorationBubble.innerHTML = `
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>${data.response}</p> <p>${data.response}</p>
@@ -676,7 +676,7 @@ class KidsAIExplorer {
explorationBubble.innerHTML = ` explorationBubble.innerHTML = `
<div class="message-header"> <div class="message-header">
<span class="ai-avatar">🤖</span> <span class="ai-avatar">🤖</span>
<span class="ai-label">${this.translate('ai-teacher')}</span> <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
</div> </div>
<div class="message-content"> <div class="message-content">
<p>🔍 Das ist ein wirklich interessantes Thema! Hast du schon mal daran gedacht, wie komplex die Wissenschaft dahinter ist? Möchtest du noch mehr darüber erfahren?</p> <p>🔍 Das ist ein wirklich interessantes Thema! Hast du schon mal daran gedacht, wie komplex die Wissenschaft dahinter ist? Möchtest du noch mehr darüber erfahren?</p>