Fix translation context issues in template strings

🐛 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

@@ -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>
         `;