diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index c6d64ea..99785a7 100644 --- a/html/kidsai/script-new.js +++ b/html/kidsai/script-new.js @@ -727,6 +727,155 @@ class KidsAIExplorer { this.askNextQuestion(); } + // Ask the next question in the conversation + askNextQuestion() { + console.log('โ“ askNextQuestion called, currentQuestionIndex:', this.currentQuestionIndex); + + if (!this.questions || this.currentQuestionIndex >= this.questions.length) { + console.log('โœ… All questions completed'); + this.showCompletionMessage(); + return; + } + + const question = this.questions[this.currentQuestionIndex]; + + // Add AI question bubble + const questionBubble = document.createElement('div'); + questionBubble.className = 'chat-message ai-message'; + questionBubble.innerHTML = ` +
+ ๐Ÿค– + ${this.getTranslation('ai-teacher') || 'AI Teacher'} +
+
+

${question}

+
+ `; + + this.conversationContainer.appendChild(questionBubble); + + // Show question with animation + setTimeout(() => { + questionBubble.classList.add('visible'); + this.scrollToBottomSmoothly(); + }, 100); + + // Add input area for user response + setTimeout(() => { + this.addUserInputArea(); + }, 1000); + } + + // Add input area for user to respond + addUserInputArea() { + const inputContainer = document.createElement('div'); + inputContainer.className = 'user-input-container'; + inputContainer.innerHTML = ` +
+

๐Ÿ’ญ ${this.getTranslation('share-thoughts') || 'Share your thoughts:'}

+
+
+ + +
+ `; + + this.conversationContainer.appendChild(inputContainer); + + // Show input area with animation + setTimeout(() => { + inputContainer.classList.add('visible'); + this.scrollToBottomSmoothly(); + + // Focus on textarea + const textarea = inputContainer.querySelector('#chat-input'); + if (textarea) { + textarea.focus(); + } + }, 200); + } + + // Submit chat answer + submitChatAnswer() { + const textarea = document.getElementById('chat-input'); + if (!textarea) { + console.error('โŒ Chat input not found'); + return; + } + + const answer = textarea.value.trim(); + if (!answer) { + const message = this.getTranslation('write-thoughts') || 'Please write down your thoughts! ๐Ÿค”'; + this.showMessage(message, 'warning'); + return; + } + + // Add user message bubble + const userBubble = document.createElement('div'); + userBubble.className = 'chat-message user-message'; + userBubble.innerHTML = ` +
+ ๐Ÿ‘ค + ${this.getTranslation('you') || 'You'} +
+
+

${answer}

+
+ `; + + // Remove input container and add user message + const inputContainer = document.querySelector('.user-input-container'); + if (inputContainer) { + inputContainer.remove(); + } + + this.conversationContainer.appendChild(userBubble); + + // Show user message with animation + setTimeout(() => { + userBubble.classList.add('visible'); + this.scrollToBottomSmoothly(); + }, 100); + + // Generate AI response + setTimeout(() => { + this.generateChatAIResponse(answer, this.currentQuestionIndex); + }, 500); + } + + // Show completion message when all questions are done + showCompletionMessage() { + const completionBubble = document.createElement('div'); + completionBubble.className = 'chat-message ai-message completion'; + completionBubble.innerHTML = ` +
+ ๐Ÿค– + ${this.getTranslation('ai-teacher') || 'AI Teacher'} +
+
+

๐ŸŽ‰ ${this.getTranslation('great-exploration') || 'Wow! You did a great job exploring this topic! You\'re thinking like a real scientist!'}

+

๐Ÿ’ก ${this.getTranslation('keep-wondering') || 'Keep wondering about the world around you - that\'s how we make amazing discoveries!'}

+
+ `; + + this.conversationContainer.appendChild(completionBubble); + + setTimeout(() => { + completionBubble.classList.add('visible'); + this.scrollToBottomSmoothly(); + }, 100); + } + + // Smooth scroll to bottom of conversation + scrollToBottomSmoothly() { + if (this.conversationContainer) { + this.conversationContainer.scrollIntoView({ behavior: 'smooth', block: 'end' }); + } + } + // ...existing code... } diff --git a/html/kidsai/test-translations.js b/html/kidsai/test-translations.js new file mode 100644 index 0000000..7518877 --- /dev/null +++ b/html/kidsai/test-translations.js @@ -0,0 +1,44 @@ +// Quick test script to validate translations +const fs = require('fs'); + +// Load and parse translations manually +const translationsCode = fs.readFileSync('translations.js', 'utf8'); + +// Extract just the translations object +const translationsMatch = translationsCode.match(/const translations = ({[\s\S]*?});/); +if (!translationsMatch) { + console.error('Could not parse translations'); + process.exit(1); +} + +const translations = eval(`(${translationsMatch[1]})`); + +// Test key translations exist +const testKeys = [ + 'title', 'tagline', 'welcome-title', 'welcome-text', + 'ai-teacher', 'scientific-explanation', 'type-thoughts-placeholder', + 'send-button', 'the-answer', 'reveal-answer', 'getting-answer', + 'great-thinking-fallback', 'thinking-about-answer', 'hmm' +]; + +console.log('๐Ÿงช Testing translation completeness...\n'); + +let allGood = true; + +testKeys.forEach(key => { + const enExists = translations.en[key] !== undefined; + const deExists = translations.de[key] !== undefined; + + if (!enExists || !deExists) { + console.log(`โŒ Missing translation for '${key}': EN=${enExists}, DE=${deExists}`); + allGood = false; + } else { + console.log(`โœ… '${key}': EN="${translations.en[key]}" | DE="${translations.de[key]}"`); + } +}); + +if (allGood) { + console.log('\n๐ŸŽ‰ All translations complete!'); +} else { + console.log('\nโš ๏ธ Some translations are missing'); +}