From a5d58de53fe9d3dadd0f39c68f292095a92fd03e Mon Sep 17 00:00:00 2001
From: root <root>
Date: Mon, 30 Jun 2025 10:09:02 +0200
Subject: [PATCH] Fix translation context issues in template strings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Context Fix:
- Extracted translation calls from template strings to avoid 'this' context issues
- Fixed addContinueChoiceButtons() method translation calls
- Fixed displayGuidance() method translation calls
- Store translation values in variables before using in innerHTML

✅ Result: Should resolve 'this.getTranslation is not a function' errors
---
 html/kidsai/script-new.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js
index da800ce..26fb698 100644
--- a/html/kidsai/script-new.js
+++ b/html/kidsai/script-new.js
@@ -242,15 +242,16 @@ class KidsAIExplorer {
         const welcomeStep = document.createElement('div');
         welcomeStep.className = 'conversation-step visible';
         
-        // Get translated messages
+        // Get translations before creating HTML to avoid context issues
         const encouragementText = guidance.encouragement || this.getTranslation('default-encouragement') || "Great question! Let's explore this together step by step! 🚀";
         const detectiveHelpText = this.getTranslation('detective-help') || "Instead of giving you the answer right away, I'll help you think through this like a detective! 🕵️";
+        const aiTeacherText = this.getTranslation('ai-teacher') || "AI Teacher";
         
         welcomeStep.innerHTML = `
             <div class="ai-message">
                 <div class="message-header">
                     <span class="ai-avatar">🤖</span>
-                    <span class="ai-label">${this.getTranslation('ai-teacher')}</span>
+                    <span class="ai-label">${aiTeacherText}</span>
                 </div>
                 <div class="message-content">
                     <p>${encouragementText}</p>
@@ -579,18 +580,24 @@ class KidsAIExplorer {
     }
 
     addContinueChoiceButtons() {
+        // Get translations before creating HTML to avoid context issues
+        const exploreDeeperText = this.getTranslation('explore-deeper') || "I want to explore this deeper";
+        const continueLearningText = this.getTranslation('continue-learning') || "Continue with next topic";
+        const tellMeMoreText = this.getTranslation('tell-me-more') || "Tell me more! 🤔";
+        const nextQuestionText = this.getTranslation('next-question') || "Next question! ➡️";
+        
         const choiceContainer = document.createElement('div');
         choiceContainer.className = 'choice-container';
         choiceContainer.innerHTML = `
             <div class="choice-prompt">
-                <p>💭 ${this.getTranslation('explore-deeper')} oder ${this.getTranslation('continue-learning')}?</p>
+                <p>💭 ${exploreDeeperText} oder ${continueLearningText}?</p>
             </div>
             <div class="choice-buttons">
                 <button class="choice-btn explore-btn" onclick="kidsAI.exploreCurrentTopicDeeper()">
-                    <span class="btn-icon">🔍</span> ${this.getTranslation('tell-me-more')}
+                    <span class="btn-icon">🔍</span> ${tellMeMoreText}
                 </button>
                 <button class="choice-btn next-btn" onclick="kidsAI.continueToNextQuestion()">
-                    <span class="btn-icon">➡️</span> ${this.getTranslation('next-question')}
+                    <span class="btn-icon">➡️</span> ${nextQuestionText}
                 </button>
             </div>
         `;