From b923f4d9b055c6adabd9aabcb0258130a1734c2d Mon Sep 17 00:00:00 2001
From: root <root>
Date: Mon, 30 Jun 2025 10:00:26 +0200
Subject: [PATCH] Fix JavaScript error: Replace this.translate() with
 this.getTranslation()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 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
---
 html/kidsai/script-new.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js
index bf9b79a..da800ce 100644
--- a/html/kidsai/script-new.js
+++ b/html/kidsai/script-new.js
@@ -250,7 +250,7 @@ class KidsAIExplorer {
             <div class="ai-message">
                 <div class="message-header">
                     <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 class="message-content">
                     <p>${encouragementText}</p>
@@ -389,10 +389,10 @@ class KidsAIExplorer {
                 <div class="ai-response-content">
                     <div class="message-header">
                         <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 class="message-content">
-                        <p>${this.translate('thinking-about-answer')}</p>
+                        <p>${this.getTranslation('thinking-about-answer')}</p>
                     </div>
                 </div>
             `;
@@ -433,7 +433,7 @@ class KidsAIExplorer {
                     <div class="ai-response-content">
                         <div class="message-header">
                             <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 class="message-content">
                             <p>${data.response}</p>
@@ -451,10 +451,10 @@ class KidsAIExplorer {
                 <div class="ai-response-content">
                     <div class="message-header">
                         <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 class="message-content">
-                        <p>${this.translate('great-thinking-fallback')}</p>
+                        <p>${this.getTranslation('great-thinking-fallback')}</p>
                     </div>
                 </div>
             `;
@@ -526,7 +526,7 @@ class KidsAIExplorer {
                 responseBubble.innerHTML = `
                     <div class="message-header">
                         <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 class="message-content">
                         <p>${data.response}</p>
@@ -558,10 +558,10 @@ class KidsAIExplorer {
             responseBubble.innerHTML = `
                 <div class="message-header">
                     <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 class="message-content">
-                    <p>${this.translate('great-thinking-fallback')}</p>
+                    <p>${this.getTranslation('great-thinking-fallback')}</p>
                 </div>
             `;
 
@@ -583,14 +583,14 @@ class KidsAIExplorer {
         choiceContainer.className = 'choice-container';
         choiceContainer.innerHTML = `
             <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 class="choice-buttons">
                 <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 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>
             </div>
         `;
@@ -645,7 +645,7 @@ class KidsAIExplorer {
                 explorationBubble.innerHTML = `
                     <div class="message-header">
                         <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 class="message-content">
                         <p>${data.response}</p>
@@ -676,7 +676,7 @@ class KidsAIExplorer {
             explorationBubble.innerHTML = `
                 <div class="message-header">
                     <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 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>