diff --git a/html/kidsai/PUBLIC-DOMAIN-SUCCESS.md b/html/kidsai/PUBLIC-DOMAIN-SUCCESS.md index 6c22cbe..e69de29 100644 --- a/html/kidsai/PUBLIC-DOMAIN-SUCCESS.md +++ b/html/kidsai/PUBLIC-DOMAIN-SUCCESS.md @@ -1,77 +0,0 @@ -# 🌐 Public Domain Setup Complete! - -## ✅ **Your KidsAI Explorer is now live on the public domain!** - -### 🚀 **Access URLs** - -- **Main Application**: https://portal.egonetix.de/kidsai/ -- **Testing Interface**: https://portal.egonetix.de/kidsai/test-ai.html -- **API Health Check**: https://portal.egonetix.de/api/health - -### 🔧 **What Was Fixed** - -1. **Nginx Proxy Configuration**: Updated port from 3000 → 3002 -2. **API Routing**: All `/api/*` requests now properly routed to backend -3. **Static File Serving**: Added dedicated location block for KidsAI files -4. **Timeout Settings**: Increased timeouts for AI processing -5. **Service Setup**: Created systemd service for reliable production deployment - -### 📊 **Technical Details** - -#### Nginx Configuration -```nginx -# API Proxy (port 3002) -location /api/ { - proxy_pass http://127.0.0.1:3002; - # Enhanced headers and timeouts for AI processing -} - -# Static Files -location /kidsai/ { - alias /var/www/html/kidsai/; - try_files $uri $uri/ /kidsai/index.html; -} -``` - -#### Production Service -```bash -# Service status -systemctl status kidsai-explorer - -# Service logs -journalctl -f -u kidsai-explorer - -# Restart service -systemctl restart kidsai-explorer -``` - -### ✅ **Verification Tests** - -All endpoints tested and working: - -- ✅ **Health Check**: `GET /api/health` -- ✅ **AI Questions**: `POST /api/ask` -- ✅ **Answer Reveal**: `POST /api/reveal-answer` -- ✅ **Static Files**: CSS, JS, images all loading -- ✅ **HTTPS**: Secure connection working - -### 🎯 **Production Ready Features** - -- **Auto-restart**: Service restarts on failure -- **Security**: Proper user isolation and permissions -- **Logging**: Centralized logging via systemd -- **Performance**: Optimized caching for static assets -- **SSL**: Secure HTTPS communication -- **High Availability**: Multiple fallback layers for AI - -### 🌟 **Your KidsAI Explorer is now live!** - -**Visit**: https://portal.egonetix.de/kidsai/ - -The application will work exactly the same as localhost, but now: -- ✅ Accessible from anywhere on the internet -- ✅ Secure HTTPS connection -- ✅ Production-grade reliability -- ✅ Auto-scaling and monitoring ready - -**Share it with kids worldwide! 🚀🌍** diff --git a/html/kidsai/script-new.js b/html/kidsai/script-new.js index c667486..fece8fb 100644 --- a/html/kidsai/script-new.js +++ b/html/kidsai/script-new.js @@ -11,55 +11,7 @@ class KidsAIExplorer { this.questionInput = document.getElementById('question-input'); this.askButton = document.getElementById('ask-button'); this.thinkingSection = document.getElementById('thinking-section'); - this.thinkingSteps = document // Topic-specific contextual responses - - // BICYCLE BRAKE RESPO // Generic responses based on answer quality (as last resort) - if (answer.length > 25) { - return "🌟 I appreciate your detailed explanation! You're really working through this systematically."; - } else if (answer.length > 15) { - return "👍 Good thinking! I can see you're considering different aspects of this."; - } else if (answer.length > 8) { - return "💭 Interesting! Can you help me understand your reasoning a bit more?"; - } else if (answer.length > 3) { - return "🤔 I see what you're thinking. Can you elaborate on that?"; - } else { - return "💡 Feel free to share any thoughts - every idea helps us learn!"; - } if (questionLower.includes('bicycle') && questionLower.includes('brake')) { - if (answerLower.includes('slow') || answerLower.includes('stop')) { - return "🚴‍♂️ Exactly right! You understand that brakes slow you down and stop you. That's the basic function we need to understand!"; - } else if (answerLower.includes('wheel') || answerLower.includes('rim')) { - return "🎯 Great technical thinking! You understand how the brake mechanism works on the wheel!"; - } else { - return "🤔 Tell me more about what happens when you use bicycle brakes."; - } - } - - // CAR BRAKE RESPONSES - This is the key fix! - if (questionLower.includes('car') && (questionLower.includes('brake') || questionLower.includes('slow down') || questionLower.includes('stop'))) { - if ((answerLower.includes('brake') && answerLower.includes('?')) || answer.trim().toLowerCase() === 'the brake') { - return "🎯 EXACTLY! 🚗 Yes, it's the brake system! Perfect answer - the brake pedal controls the brakes that slow down or stop the car!"; - } else if (answerLower.includes('brake') && answerLower.includes('pedal')) { - return "🏆 Perfect! The brake pedal and brake system work together to control the car's speed. You nailed it!"; - } else if (answerLower.includes('brake')) { - return "🎯 YES! The brakes! You got it exactly right! The brake system is what slows down and stops the car!"; - } else if (answerLower.includes('wheel') || answerLower.includes('tire')) { - return "👍 You're thinking about where the braking happens - at the wheels! The brake system applies pressure there."; - } else if (answerLower.includes('pedal')) { - return "🦶 Good! You're thinking about pedals. Which specific pedal controls stopping?"; - } else { - return "🤔 What component do you think actually does the slowing down in a car?"; - } - } - - if (questionLower.includes('bicycle') || questionLower.includes('pedal') || questionLower.includes('chain')) { - if (answerLower.includes('pedal') || answerLower.includes('chain') || answerLower.includes('wheel')) { - return "🚴‍♂️ Excellent! You understand the connection between pedals, chain, and wheels. That mechanical connection concept is key!"; - } else if (answerLower.includes('gear') || answerLower.includes('speed')) { - return "👍 Yes! You're thinking about how we control speed and power - that's exactly right!"; - } else if (answerLower.includes('slow') || answerLower.includes('stop')) { - return "🚴‍♂️ Right! You understand the basic control functions of bicycles!"; - } - }entById('thinking-steps'); + this.thinkingSteps = document.getElementById('thinking-steps'); this.loadingOverlay = document.getElementById('loading'); this.suggestionCards = document.querySelectorAll('.suggestion-card'); this.langButtons = document.querySelectorAll('.lang-btn'); diff --git a/html/kidsai/script.js b/html/kidsai/script.js index 5af2ed3..98f7496 100644 --- a/html/kidsai/script.js +++ b/html/kidsai/script.js @@ -1,4 +1,6 @@ // KidsAI Explorer - Interactive Learning Assistant +console.log('🚀 KidsAI script.js is loading...'); + class KidsAIExplorer { constructor() { this.currentLanguage = localStorage.getItem('kidsai-language') || 'en'; @@ -8,10 +10,17 @@ class KidsAIExplorer { this.askButton = document.getElementById('ask-button'); this.thinkingSection = document.getElementById('thinking-section'); this.thinkingSteps = document.getElementById('thinking-steps'); + this.actionButtons = document.getElementById('action-buttons'); this.loadingOverlay = document.getElementById('loading'); this.suggestionCards = document.querySelectorAll('.suggestion-card'); this.langButtons = document.querySelectorAll('.lang-btn'); + // Debug: Log what elements we found + console.log('🔍 DOM Elements found:'); + console.log('questionInput:', this.questionInput); + console.log('askButton:', this.askButton); + console.log('suggestionCards count:', this.suggestionCards.length); + // Ensure loading is hidden initially if (this.loadingOverlay) { this.loadingOverlay.classList.add('hidden'); @@ -81,11 +90,14 @@ class KidsAIExplorer { // Clear thinking section if visible if (!this.thinkingSection.classList.contains('hidden')) { this.thinkingSection.classList.add('hidden'); + this.actionButtons.classList.add('hidden'); this.thinkingSteps.innerHTML = ''; } } initializeEventListeners() { + console.log('Initializing event listeners'); + // Language switching this.langButtons.forEach(btn => { btn.addEventListener('click', () => { @@ -94,24 +106,46 @@ class KidsAIExplorer { }); // Main question submission - this.askButton.addEventListener('click', () => this.handleQuestion()); - this.questionInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - this.handleQuestion(); - } - }); + if (this.askButton) { + console.log('Adding click listener to ask button'); + this.askButton.addEventListener('click', () => this.handleQuestion()); + } + + if (this.questionInput) { + console.log('Adding keypress listener to question input'); + this.questionInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this.handleQuestion(); + } + }); + } // Suggestion cards + console.log('Adding listeners to suggestion cards:', this.suggestionCards.length); this.suggestionCards.forEach(card => { card.addEventListener('click', () => { + console.log('Suggestion card clicked'); const questionKey = `data-question-${this.currentLanguage}`; const question = card.getAttribute(questionKey); + console.log('Setting question:', question); this.questionInput.value = question; this.handleQuestion(); }); }); + // Action buttons + document.getElementById('research-btn').addEventListener('click', () => { + this.showActionGuidance('research'); + }); + + document.getElementById('experiment-btn').addEventListener('click', () => { + this.showActionGuidance('experiment'); + }); + + document.getElementById('discuss-btn').addEventListener('click', () => { + this.showActionGuidance('discuss'); + }); } initializeAnimations() { @@ -123,7 +157,10 @@ class KidsAIExplorer { } async handleQuestion() { + console.log('handleQuestion called'); const question = this.questionInput.value.trim(); + console.log('Question:', question); + if (!question) { this.showMessage('Please ask me something first! 🤔', 'warning'); return; @@ -172,122 +209,33 @@ class KidsAIExplorer { displayAIGuidance(guidance, isFallback) { // Clear any previous content this.thinkingSteps.innerHTML = ''; + this.currentStep = 0; + this.userAnswers = []; - // Show encouragement - const encouragementDiv = document.createElement('div'); - encouragementDiv.className = 'encouragement-message'; - encouragementDiv.innerHTML = ` -
- ${guidance.encouragement} - ${isFallback ? '(Offline mode)' : '(✨ AI-powered)'} + // Create conversation container + const conversationContainer = document.createElement('div'); + conversationContainer.className = 'conversation-container'; + this.thinkingSteps.appendChild(conversationContainer); + + // Show initial encouragement + const welcomeStep = document.createElement('div'); + welcomeStep.className = 'conversation-step visible'; + welcomeStep.innerHTML = ` +
+

${guidance.encouragement}

+ ${isFallback ? '💻 Offline mode' : '✨ AI-powered'}
`; - this.thinkingSteps.appendChild(encouragementDiv); + conversationContainer.appendChild(welcomeStep); - // Handle exploratory questions with conversational response - if (guidance.questionType === 'exploratory' && guidance.conversationalResponse) { - setTimeout(() => { - this.displayConversationalResponse(guidance.conversationalResponse); - }, 500); - return; - } + // Store guidance for step-by-step interaction + this.currentGuidance = guidance; + this.conversationContainer = conversationContainer; - // Handle exploratory questions with conversational response - if (guidance.questionType === 'exploratory' && guidance.conversationalResponse) { - // Create conversational interface directly - const conversationDiv = document.createElement('div'); - conversationDiv.className = 'ai-conversation'; - - const isAIQuestion = guidance.conversationalResponse.includes('?'); - - conversationDiv.innerHTML = ` -
-
🤖
-
${guidance.conversationalResponse}
-
✨ AI Teacher
-
- ${isAIQuestion ? ` -
-
- - -
-
- ` : ''} - `; - - this.thinkingSteps.appendChild(conversationDiv); - - if (isAIQuestion) { - this.setupAIConversation(conversationDiv); - } - - return; // Skip the step-by-step logic for exploratory questions - } - - // Show thinking steps from AI (for math/factual questions) - guidance.steps.forEach((step, index) => { - setTimeout(() => { - const stepDiv = document.createElement('div'); - stepDiv.className = 'thinking-step'; - - // For math questions, don't show text fields - just show the guidance - if (guidance.questionType === 'mathematical' || guidance.questionType === 'factual_simple') { - stepDiv.innerHTML = ` -
${step.id}
-
-
${step.text}
-
- `; - } else { - // For exploratory questions, show interactive text fields for thinking - stepDiv.innerHTML = ` -
${step.id}
-
-
${step.text}
-
- - - -
-
- `; - - // Add interactive event listeners - setTimeout(() => { - this.setupThinkingInteraction(stepDiv, step.id); - }, 100); - } - stepDiv.style.opacity = '0'; - stepDiv.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(stepDiv); - - // Animate in - setTimeout(() => { - stepDiv.style.transition = 'all 0.4s ease-out'; - stepDiv.style.opacity = '1'; - stepDiv.style.transform = 'translateY(0)'; - }, 50); - }, index * 800); - }); - - // For mathematical/factual questions, add "Check My Work" button + // Start the first question after a delay setTimeout(() => { - if (guidance.questionType === 'mathematical' || guidance.questionType === 'factual_simple') { - this.addCheckWorkSection(guidance.questionType); - } - }, guidance.steps ? guidance.steps.length * 800 + 1000 : 1000); + this.showNextQuestion(); + }, 1500); // Show the thinking section setTimeout(() => { @@ -295,129 +243,139 @@ class KidsAIExplorer { }, 500); } - displayConversationalResponse(aiResponse) { - // Create conversation interface - const conversationDiv = document.createElement('div'); - conversationDiv.className = 'ai-conversation'; - - // Check if AI response contains a question - const hasQuestion = aiResponse.includes('?'); - - conversationDiv.innerHTML = ` -
-
🤖
-
${aiResponse}
-
- - AI Teacher -
-
- ${hasQuestion ? ` -
-
- - + showNextQuestion() { + if (this.currentStep >= this.currentGuidance.steps.length) { + this.showCompletionMessage(); + return; + } + + const step = this.currentGuidance.steps[this.currentStep]; + const stepDiv = document.createElement('div'); + stepDiv.className = 'conversation-step'; + stepDiv.innerHTML = ` +
+
+
${step.id}
+
+

${step.text}

+
+
+ +
+ ${this.currentLanguage === 'de' ? '💡 Nimm dir Zeit zum Nachdenken!' : '💡 Take your time to think!'} + +
- ` : ''} +
`; - - this.thinkingSteps.appendChild(conversationDiv); - - // Set up conversation interaction if there's a question - if (hasQuestion) { - this.setupAIConversation(conversationDiv); - } + + this.conversationContainer.appendChild(stepDiv); + + // Animate in + setTimeout(() => { + stepDiv.classList.add('visible'); + }, 100); + + // Scroll to the new question + setTimeout(() => { + stepDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 600); } - addCompletionMessage(questionType) { - const completionSection = document.createElement('div'); - completionSection.className = 'completion-message'; - - let message; - if (questionType === 'mathematical') { - message = this.currentLanguage === 'de' - ? '🎉 Großartig! Du hast die Antwort selbst gefunden! Mathematik macht Spaß, wenn man Schritt für Schritt vorgeht.' - : '🎉 Amazing! You found the answer yourself! Math is fun when you work through it step by step.'; - } else { - message = this.currentLanguage === 'de' - ? '🌟 Super! Du hast durch eigenes Nachdenken die Antwort entdeckt. Das ist echtes Lernen!' - : '🌟 Awesome! You discovered the answer through your own thinking. That\'s real learning!'; + submitAnswer(stepIndex) { + const textarea = document.getElementById(`user-input-${stepIndex}`); + const inputArea = document.getElementById(`input-area-${stepIndex}`); + const answer = textarea.value.trim(); + + if (!answer) { + this.showMessage( + this.currentLanguage === 'de' ? 'Bitte schreibe deine Gedanken auf! 🤔' : 'Please write down your thoughts! 🤔', + 'warning' + ); + return; } + + // Store the answer + this.userAnswers[stepIndex] = answer; + + // Mark as answered + inputArea.classList.add('answered'); + textarea.disabled = true; + + // Show encouragement + const encouragement = document.createElement('div'); + encouragement.className = 'encouragement-feedback'; + encouragement.innerHTML = this.getEncouragementMessage(); + inputArea.appendChild(encouragement); + + // Move to next question + this.currentStep++; + setTimeout(() => { + this.showNextQuestion(); + }, 1500); + } + + getEncouragementMessage() { + const messages = this.currentLanguage === 'de' ? [ + '🌟 Toll! Du denkst wirklich gut nach!', + '👏 Ausgezeichnet! Weiter so!', + '🎯 Super Antwort! Du bist auf dem richtigen Weg!', + '✨ Fantastisch! Du lernst wie ein echter Forscher!' + ] : [ + '🌟 Great! You\'re thinking really well!', + '👏 Excellent! Keep it up!', + '🎯 Super answer! You\'re on the right track!', + '✨ Fantastic! You\'re learning like a real scientist!' + ]; - completionSection.innerHTML = ` -
-
${message}
-
- + return messages[Math.floor(Math.random() * messages.length)]; + } + + showCompletionMessage() { + const completionDiv = document.createElement('div'); + completionDiv.className = 'conversation-step'; + completionDiv.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🎉 Fantastisch gemacht!' : '🎉 Fantastic Job!'}

+

${this.currentLanguage === 'de' + ? 'Du hast wirklich gut nachgedacht! Jetzt bist du bereit, die richtige Antwort zu entdecken.' + : 'You\'ve done some great thinking! Now you\'re ready to discover the actual answer.'}

+
+
+ +
`; - - completionSection.style.opacity = '0'; - completionSection.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(completionSection); + + this.conversationContainer.appendChild(completionDiv); // Animate in setTimeout(() => { - completionSection.style.transition = 'all 0.6s ease-out'; - completionSection.style.opacity = '1'; - completionSection.style.transform = 'translateY(0)'; - }, 100); - - // Add click handler for new question button - const newQuestionBtn = completionSection.querySelector('#new-question-btn'); - newQuestionBtn.addEventListener('click', () => { - this.resetForNewQuestion(); - }); - } - - resetForNewQuestion() { - this.questionInput.value = ''; - this.thinkingSection.classList.add('hidden'); - this.thinkingSteps.innerHTML = ''; - this.questionInput.focus(); - } - - addAnswerRevealSection() { - const revealSection = document.createElement('div'); - revealSection.className = 'answer-reveal-section'; - revealSection.innerHTML = ` -
-

${this.currentLanguage === 'de' ? '🤔 Bereit für die Antwort?' : '🤔 Ready for the Answer?'}

-

${this.currentLanguage === 'de' - ? 'Nachdem du über die Fragen nachgedacht hast, möchtest du die richtige Antwort erfahren?' - : 'After thinking through the questions, would you like to discover the actual answer?'}

- -
- - `; - - revealSection.style.opacity = '0'; - revealSection.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(revealSection); - - // Animate in - setTimeout(() => { - revealSection.style.transition = 'all 0.6s ease-out'; - revealSection.style.opacity = '1'; - revealSection.style.transform = 'translateY(0)'; + completionDiv.classList.add('visible'); }, 100); // Add click handler for reveal button - document.getElementById('reveal-answer-btn').addEventListener('click', () => { - this.revealAnswer(); - }); + setTimeout(() => { + document.getElementById('reveal-answer-btn').addEventListener('click', () => { + this.revealAnswer(); + }); + }, 200); + + // Show action buttons + this.actionButtons.classList.remove('hidden'); } async revealAnswer() { @@ -426,7 +384,7 @@ class KidsAIExplorer { const currentQuestion = this.questionInput.value.trim(); // Show loading state - revealBtn.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; + revealBtn.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; revealBtn.disabled = true; try { @@ -437,7 +395,8 @@ class KidsAIExplorer { }, body: JSON.stringify({ question: currentQuestion, - language: this.currentLanguage + language: this.currentLanguage, + userAnswers: this.userAnswers || [] }) }); @@ -448,48 +407,51 @@ class KidsAIExplorer { const data = await response.json(); if (data.success) { - // Display the answer + // Hide the reveal button + revealBtn.style.display = 'none'; + + // Show the answer with animation answerContent.innerHTML = ` -
-
- 💡 -

${this.currentLanguage === 'de' ? 'Die Antwort:' : 'The Answer:'}

- ${data.fallback ? '📚 Local' : '✨ AI'} • ${data.answer.source} -
-
- ${data.answer.text} -
-
+
+

${this.currentLanguage === 'de' ? '🎓 Die Antwort:' : '🎓 The Answer:'}

+
${data.answer}
+ ${data.explanation ? ` +
+
${this.currentLanguage === 'de' ? '💡 Warum ist das so?' : '💡 Why is this so?'}
+

${data.explanation}

+
+ ` : ''} +

${this.currentLanguage === 'de' - ? '🎉 Großartig! Wie nah warst du mit deinen Überlegungen?' - : '🎉 Awesome! How close were your thoughts to the answer?'}

+ ? '🌟 Großartig! Du hast durch deine eigenen Gedanken gelernt!' + : '🌟 Great! You learned by thinking it through yourself!'}

`; answerContent.classList.remove('hidden'); - revealBtn.style.display = 'none'; + answerContent.scrollIntoView({ behavior: 'smooth', block: 'center' }); - // Animate answer in - answerContent.style.opacity = '0'; - answerContent.style.transform = 'translateY(20px)'; - setTimeout(() => { - answerContent.style.transition = 'all 0.6s ease-out'; - answerContent.style.opacity = '1'; - answerContent.style.transform = 'translateY(0)'; - }, 100); - } else { throw new Error(data.error || 'Failed to get answer'); } } catch (error) { - console.error('Error getting answer:', error); - revealBtn.innerHTML = `❌ ${this.currentLanguage === 'de' ? 'Fehler' : 'Error'}`; - setTimeout(() => { - revealBtn.innerHTML = `🎯 ${this.currentLanguage === 'de' ? 'Nochmal versuchen' : 'Try Again'}`; - revealBtn.disabled = false; - }, 2000); + console.error('Error revealing answer:', error); + + // Fallback answer display + revealBtn.innerHTML = `🎯 ${this.currentLanguage === 'de' ? 'Antwort zeigen!' : 'Reveal Answer!'}`; + revealBtn.disabled = false; + + answerContent.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🤔 Hmm...' : '🤔 Hmm...'}

+

${this.currentLanguage === 'de' + ? 'Ich kann die Antwort gerade nicht laden. Aber du hast schon toll nachgedacht! Frag gerne einen Erwachsenen oder schaue in einem Buch nach.' + : 'I can\'t load the answer right now. But you\'ve done great thinking! Feel free to ask an adult or look it up in a book.'}

+
+ `; + answerContent.classList.remove('hidden'); } } @@ -642,10 +604,14 @@ class KidsAIExplorer { `; this.thinkingSteps.appendChild(stepDiv); - // All steps are now displayed + // Show action buttons after all steps are displayed if (index === guidance.framework.steps.length - 1) { setTimeout(() => { - // Completion message could be added here if needed + this.actionButtons.classList.remove('hidden'); + this.actionButtons.style.animation = 'fadeInUp 0.6s ease-out'; + + // Store suggestions for action buttons + this.currentSuggestions = guidance.actionSuggestions; }, 300); } }, index * 500); @@ -656,6 +622,34 @@ class KidsAIExplorer { this.thinkingSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); } + showActionGuidance(actionType) { + const t = translations[this.currentLanguage]; + const actionTitles = t.actionTitles; + + const suggestions = this.currentSuggestions[actionType]; + + let content = `
+

${actionTitles[actionType]}

+
    `; + + suggestions.forEach(suggestion => { + content += `
  • ${suggestion}
    • `; + }); + + content += `
+

${this.currentLanguage === 'de' ? 'Denk daran:' : 'Remember:'} ${t.actionReminder}

+
`; + + // Create and show modal or add to thinking steps + const guidanceDiv = document.createElement('div'); + guidanceDiv.className = 'thinking-step highlight'; + guidanceDiv.innerHTML = content; + guidanceDiv.style.animation = 'slideInLeft 0.5s ease-out'; + + this.thinkingSteps.appendChild(guidanceDiv); + guidanceDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + showLoading() { if (this.loadingOverlay) { this.loadingOverlay.classList.remove('hidden'); @@ -699,658 +693,202 @@ class KidsAIExplorer { delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } +} - addCheckWorkSection(questionType) { - const checkWorkSection = document.createElement('div'); - checkWorkSection.className = 'check-work-section'; - - if (questionType === 'mathematical') { - // For math questions, ask for the answer - checkWorkSection.innerHTML = ` -
-

${this.currentLanguage === 'de' ? '🧮 Was ist deine Antwort?' : '🧮 What is your answer?'}

-

${this.currentLanguage === 'de' - ? 'Nachdem du die Schritte durchdacht hast, was ist dein Ergebnis?' - : 'After thinking through the steps, what is your result?'}

-
- - -
-
- `; - } else { - // For other questions, check engagement - checkWorkSection.innerHTML = ` -
-

${this.currentLanguage === 'de' ? '🤔 Fertig mit dem Nachdenken?' : '🤔 Finished Thinking?'}

-

${this.currentLanguage === 'de' - ? 'Hast du alle Schritte durchgedacht und eine Antwort gefunden? Klicke hier, wenn du bereit bist!' - : 'Have you thought through all the steps and found an answer? Click when you\'re ready!'}

- -
- `; +// Initialize the application when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + console.log('DOM loaded, initializing KidsAI Explorer...'); + + // Hide loading screen immediately on page load + const loadingOverlay = document.getElementById('loading'); + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); + console.log('Loading overlay hidden on page load'); + } + + // Emergency fallback - hide loading after 1 second regardless + setTimeout(() => { + if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) { + loadingOverlay.classList.add('hidden'); + console.log('Emergency: Loading overlay hidden by timeout'); } - - checkWorkSection.style.opacity = '0'; - checkWorkSection.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(checkWorkSection); - - // Animate in - setTimeout(() => { - checkWorkSection.style.transition = 'all 0.6s ease-out'; - checkWorkSection.style.opacity = '1'; - checkWorkSection.style.transform = 'translateY(0)'; - }, 100); - - // Add click handlers - if (questionType === 'mathematical') { - const checkAnswerBtn = checkWorkSection.querySelector('#check-answer-btn'); - const answerInput = checkWorkSection.querySelector('#math-answer-input'); - - checkAnswerBtn.addEventListener('click', () => { - this.checkMathAnswer(answerInput.value.trim(), checkWorkSection, questionType); - }); - - answerInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter') { - this.checkMathAnswer(answerInput.value.trim(), checkWorkSection, questionType); - } - }); - } else { - const checkWorkBtn = checkWorkSection.querySelector('#check-work-btn'); - checkWorkBtn.addEventListener('click', () => { - const hasEngaged = this.checkIfChildEngaged(); - - if (hasEngaged) { - checkWorkSection.remove(); - this.addCompletionMessage(questionType); - } else { - this.showEncouragementMessage(); - } - }); - } - } - - async checkMathAnswer(userAnswer, checkWorkSection, questionType) { - if (!userAnswer) { - this.showAnswerRequiredMessage(); - return; - } - - try { - // Get the correct answer from the backend - const response = await fetch('/api/check-math-answer', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - question: this.questionInput.value.trim(), - userAnswer: userAnswer, - language: this.currentLanguage - }) - }); - - const data = await response.json(); - - if (data.correct) { - // Correct answer! - checkWorkSection.remove(); - this.addCompletionMessage(questionType); - } else { - // Wrong answer - encourage to try again - this.showTryAgainMessage(data.hint); - } - } catch (error) { - console.error('Error checking answer:', error); - // If backend fails, just show completion (fallback) - checkWorkSection.remove(); - this.addCompletionMessage(questionType); - } - } - - showAnswerRequiredMessage() { - const messageDiv = document.createElement('div'); - messageDiv.className = 'encouragement-popup'; - messageDiv.innerHTML = ` -
- 📝 -

${this.currentLanguage === 'de' - ? 'Bitte gib deine Antwort ein!' - : 'Please enter your answer!'}

-
- `; - - this.showTemporaryMessage(messageDiv); - } - - showTryAgainMessage(hint) { - // Remove any existing try-again messages - const existingTryAgain = this.thinkingSteps.querySelector('.try-again-section'); - if (existingTryAgain) { - existingTryAgain.remove(); - } - - const tryAgainSection = document.createElement('div'); - tryAgainSection.className = 'try-again-section'; - tryAgainSection.innerHTML = ` -
- 🤔 -

${this.currentLanguage === 'de' - ? 'Das ist nicht ganz richtig. Keine Sorge, das passiert!' - : 'That\'s not quite right. Don\'t worry, it happens!'}

- ${hint ? `${hint}` : ''} -
- - -
-
- `; - - tryAgainSection.style.opacity = '0'; - tryAgainSection.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(tryAgainSection); - - // Animate in - setTimeout(() => { - tryAgainSection.style.transition = 'all 0.6s ease-out'; - tryAgainSection.style.opacity = '1'; - tryAgainSection.style.transform = 'translateY(0)'; - }, 100); - - // Add click handlers - const moreHintsBtn = tryAgainSection.querySelector('#more-hints-btn'); - const tryAgainBtn = tryAgainSection.querySelector('#try-again-btn'); - - moreHintsBtn.addEventListener('click', () => { - this.showMoreHints(); - }); - - tryAgainBtn.addEventListener('click', () => { - tryAgainSection.remove(); - // Focus back on the answer input - const answerInput = this.thinkingSteps.querySelector('#math-answer-input'); - if (answerInput) { - answerInput.focus(); - answerInput.select(); - } - }); - } - - async showMoreHints() { - const currentQuestion = this.questionInput.value.trim(); - - try { - // Show loading state - const moreHintsBtn = this.thinkingSteps.querySelector('#more-hints-btn'); - if (moreHintsBtn) { - moreHintsBtn.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; - moreHintsBtn.disabled = true; - } - - const response = await fetch('/api/get-more-hints', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - question: currentQuestion, - language: this.currentLanguage, - previousHints: [] // Could track previous hints if needed - }) - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - - if (data.success) { - // Remove try-again section - const tryAgainSection = this.thinkingSteps.querySelector('.try-again-section'); - if (tryAgainSection) { - tryAgainSection.remove(); - } - - // Show additional hints - this.displayAdditionalHints(data.hints); - } else { - throw new Error(data.error || 'Failed to get hints'); - } - - } catch (error) { - console.error('Error getting more hints:', error); - - // Show fallback encouragement - const fallbackMessage = this.currentLanguage === 'de' - ? 'Versuche es mit deinen Fingern zu zählen oder male kleine Kreise!' - : 'Try counting with your fingers or drawing small circles!'; - - this.showSimpleMessage(fallbackMessage, '💡'); - } - } - - displayAdditionalHints(hints) { - const hintsSection = document.createElement('div'); - hintsSection.className = 'additional-hints-section'; - hintsSection.innerHTML = ` -
-

💡 ${this.currentLanguage === 'de' ? 'Zusätzliche Hinweise:' : 'Additional Hints:'}

-

${hints.encouragement}

-
- `; - - // Add each hint with animation - hints.steps.forEach((hint, index) => { - setTimeout(() => { - const hintDiv = document.createElement('div'); - hintDiv.className = 'additional-hint'; - hintDiv.innerHTML = ` -
${hint.id}
-
${hint.text}
- `; - - hintDiv.style.opacity = '0'; - hintDiv.style.transform = 'translateY(20px)'; - hintsSection.appendChild(hintDiv); - - // Animate in - setTimeout(() => { - hintDiv.style.transition = 'all 0.4s ease-out'; - hintDiv.style.opacity = '1'; - hintDiv.style.transform = 'translateY(0)'; - }, 50); - }, index * 600); - }); - - // Add "Try Again" button after all hints - setTimeout(() => { - const tryAgainDiv = document.createElement('div'); - tryAgainDiv.className = 'hints-try-again'; - tryAgainDiv.innerHTML = ` - - `; - - hintsSection.appendChild(tryAgainDiv); - - // Add click handler - const tryBtn = tryAgainDiv.querySelector('#try-again-after-hints'); - tryBtn.addEventListener('click', () => { - hintsSection.remove(); - // Focus on answer input - const answerInput = this.thinkingSteps.querySelector('#math-answer-input'); - if (answerInput) { - answerInput.focus(); - answerInput.select(); - } - }); - }, hints.steps.length * 600 + 500); - - hintsSection.style.opacity = '0'; - hintsSection.style.transform = 'translateY(20px)'; - this.thinkingSteps.appendChild(hintsSection); - - // Animate in - setTimeout(() => { - hintsSection.style.transition = 'all 0.6s ease-out'; - hintsSection.style.opacity = '1'; - hintsSection.style.transform = 'translateY(0)'; - }, 100); - } - - showSimpleMessage(message, icon) { - const messageDiv = document.createElement('div'); - messageDiv.className = 'simple-message'; - messageDiv.innerHTML = ` -
- ${icon} -

${message}

-
- `; - - this.showTemporaryMessage(messageDiv); - } - - showTemporaryMessage(messageDiv) { - messageDiv.style.opacity = '0'; - messageDiv.style.transform = 'scale(0.8)'; - this.thinkingSteps.appendChild(messageDiv); - - setTimeout(() => { - messageDiv.style.transition = 'all 0.4s ease-out'; - messageDiv.style.opacity = '1'; - messageDiv.style.transform = 'scale(1)'; - }, 50); - - setTimeout(() => { - messageDiv.style.transition = 'all 0.4s ease-out'; - messageDiv.style.opacity = '0'; - messageDiv.style.transform = 'scale(0.8)'; - setTimeout(() => { - if (messageDiv.parentNode) { - messageDiv.remove(); - } - }, 400); - }, 3000); - } - - setupThinkingInteraction(stepDiv, stepId) { - const textarea = stepDiv.querySelector(`textarea[data-step="${stepId}"]`); - const shareButton = stepDiv.querySelector(`button[data-step="${stepId}"]`); - const feedbackDiv = stepDiv.querySelector(`div[data-step="${stepId}"]`); - - if (!textarea || !shareButton || !feedbackDiv) return; - - // Show share button when text is entered - textarea.addEventListener('input', () => { - const hasText = textarea.value.trim().length > 0; - shareButton.style.display = hasText ? 'inline-block' : 'none'; - }); - - // Handle sharing thoughts with AI - shareButton.addEventListener('click', () => { - const thought = textarea.value.trim(); - if (thought) { - this.shareThoughtWithAI(stepId, thought, feedbackDiv, shareButton); - } - }); - - // Allow Enter key to share (but Shift+Enter for new line) - textarea.addEventListener('keypress', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - const thought = textarea.value.trim(); - if (thought) { - this.shareThoughtWithAI(stepId, thought, feedbackDiv, shareButton); - } - } - }); - } - - async shareThoughtWithAI(stepId, thought, feedbackDiv, shareButton) { - const currentQuestion = this.questionInput.value.trim(); - - try { - // Show loading state - shareButton.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Denke...' : 'Thinking...'}`; - shareButton.disabled = true; - - const response = await fetch('/api/thinking-feedback', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - question: currentQuestion, - stepNumber: stepId, - userThought: thought, - language: this.currentLanguage - }) - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - - if (data.success) { - this.displayThinkingFeedback(feedbackDiv, data.feedback, shareButton); - } else { - throw new Error(data.error || 'Failed to get feedback'); - } - - } catch (error) { - console.error('Error getting thinking feedback:', error); - - // Show fallback positive feedback - const fallbackFeedback = { - response: this.currentLanguage === 'de' - ? "Interessante Gedanken! Du denkst gut nach. 👍" - : "Interesting thoughts! You're thinking well. 👍", - type: 'positive' - }; - - this.displayThinkingFeedback(feedbackDiv, fallbackFeedback, shareButton); - } - } - - displayThinkingFeedback(feedbackDiv, feedback, shareButton) { - // Determine feedback style based on type - const feedbackClass = feedback.type === 'positive' ? 'positive-feedback' : - feedback.type === 'neutral' ? 'neutral-feedback' : 'encouraging-feedback'; - - // Check if AI is asking a question (contains question mark) - const isAIQuestion = feedback.response.includes('?'); - - feedbackDiv.innerHTML = ` -
- - -
- `; - - // Show feedback with animation - feedbackDiv.style.display = 'block'; - feedbackDiv.style.opacity = '0'; - feedbackDiv.style.transform = 'translateY(-10px)'; - - setTimeout(() => { - feedbackDiv.style.transition = 'all 0.4s ease-out'; - feedbackDiv.style.opacity = '1'; - feedbackDiv.style.transform = 'translateY(0)'; - }, 100); - - // If AI asked a question, set up the reply functionality - if (isAIQuestion) { - console.log('Setting up AI conversation...'); - this.setupAIConversation(feedbackDiv); - } - - // Update share button to "shared" state - shareButton.innerHTML = `✓ ${this.currentLanguage === 'de' ? 'Geteilt!' : 'Shared!'}`; - shareButton.disabled = false; - shareButton.style.background = 'rgba(76, 175, 80, 0.8)'; - - // Add option to share again after editing - const textarea = feedbackDiv.parentElement.querySelector('textarea'); - textarea.addEventListener('input', () => { - if (shareButton.innerHTML.includes('✓')) { - shareButton.innerHTML = `💭 ${this.currentLanguage === 'de' ? 'Neue Gedanken teilen' : 'Share New Thoughts'}`; - shareButton.style.background = ''; - } - }, { once: true }); - } - - setupAIConversation(feedbackDiv) { - console.log('setupAIConversation called'); - const replyInput = feedbackDiv.querySelector('.ai-reply-input'); - const replyButton = feedbackDiv.querySelector('.reply-to-ai-btn'); - const conversationDiv = feedbackDiv.querySelector('.ai-conversation'); - - console.log('Reply elements:', { replyInput, replyButton, conversationDiv }); - - const handleReply = async () => { - const userReply = replyInput.value.trim(); - if (!userReply) { - replyInput.focus(); - return; - } - - // Show loading state - replyButton.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; - replyButton.disabled = true; - - try { - // Get AI response to the user's reply - const response = await fetch('/api/ai-conversation', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - originalQuestion: this.questionInput.value.trim(), - userReply: userReply, - language: this.currentLanguage - }) - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - - if (data.success) { - this.displayConversationExchange(conversationDiv, userReply, data.aiResponse); - - // Clear input and reset button - replyInput.value = ''; - replyButton.innerHTML = `💬 ${this.currentLanguage === 'de' ? 'Antworten' : 'Reply'}`; - replyButton.disabled = false; - - // If AI asks another question, keep conversation going - if (data.aiResponse.includes('?')) { - replyInput.placeholder = this.currentLanguage === 'de' ? 'Deine nächste Antwort...' : 'Your next answer...'; - replyInput.focus(); - } else { - // Conversation ended, show completion - replyInput.style.display = 'none'; - replyButton.style.display = 'none'; - this.showConversationCompletion(conversationDiv); + }, 1000); + + // Check if translations are loaded + if (typeof translations === 'undefined') { + console.error('Translations not loaded! Creating fallback...'); + window.translations = { + en: { + title: "KidsAI Explorer", + tagline: "Think, Learn, Discover Together!", + encouragements: ["Great question! You're thinking like a real scientist! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Let's break this down", + content: "What's the main thing you want to understand?" + } + ] } - } else { - throw new Error(data.error || 'Conversation failed'); - } - - } catch (error) { - console.error('Error in AI conversation:', error); - - // Show fallback response - const fallbackResponse = this.currentLanguage === 'de' - ? "Das ist eine interessante Antwort! Du denkst gut über das Thema nach." - : "That's an interesting answer! You're thinking well about this topic."; - - this.displayConversationExchange(conversationDiv, userReply, fallbackResponse); - - // Reset button - replyButton.innerHTML = `💬 ${this.currentLanguage === 'de' ? 'Antworten' : 'Reply'}`; - replyButton.disabled = false; + }, + actionTitles: { + research: "🔍 Research Ideas", + experiment: "🧪 Experiment Ideas", + discuss: "💬 Discussion Ideas" + }, + actionReminder: "Remember: The goal is to discover the answer yourself!" + }, + de: { + title: "KidsAI Explorer", + tagline: "Denken, Lernen, Entdecken - Zusammen!", + encouragements: ["Tolle Frage! Du denkst wie ein echter Wissenschaftler! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Lass uns das aufteilen", + content: "Was ist das Wichtigste, was du verstehen möchtest?" + } + ] + } + }, + actionTitles: { + research: "🔍 Forschungsideen", + experiment: "🧪 Experiment-Ideen", + discuss: "💬 Diskussionsideen" + }, + actionReminder: "Denk daran: Das Ziel ist es, die Antwort selbst zu entdecken!" } }; - - // Add click handler for reply button - replyButton.addEventListener('click', handleReply); - - // Add enter key handler for reply input - replyInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - handleReply(); + } + + // Global instance for external access + let kidsAI; + + // Initialize when DOM is ready + document.addEventListener('DOMContentLoaded', () => { + console.log('🚀 DOM loaded, initializing KidsAI...'); + + // Add a visible indicator + const body = document.body; + const indicator = document.createElement('div'); + indicator.id = 'debug-indicator'; + indicator.innerHTML = '✅ KidsAI Loading...'; + indicator.style.cssText = 'position:fixed;top:10px;left:10px;background:green;color:white;padding:5px;z-index:9999;border-radius:5px;font-size:12px;'; + body.appendChild(indicator); + + try { + kidsAI = new KidsAIExplorer(); + window.kidsAI = kidsAI; // Make it globally accessible + console.log('KidsAI Explorer initialized successfully'); + indicator.innerHTML = '✅ KidsAI Ready!'; + indicator.style.background = 'green'; + } catch (error) { + console.error('Error initializing KidsAIExplorer:', error); + indicator.innerHTML = '❌ KidsAI Error: ' + error.message; + indicator.style.background = 'red'; + // Ensure loading is hidden even if there's an error + const loadingOverlay = document.getElementById('loading'); + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); } + } + }); +}); + +// Add some fun interactive effects +document.addEventListener('DOMContentLoaded', () => { + // Add sparkle effect on click + document.addEventListener('click', (e) => { + if (e.target.classList.contains('ask-btn') || e.target.classList.contains('action-btn')) { + createSparkleEffect(e.target); + } + }); + + // Add hover sound effect simulation (visual feedback) + const interactiveElements = document.querySelectorAll('.suggestion-card, .ask-btn, .action-btn'); + interactiveElements.forEach(element => { + element.addEventListener('mouseenter', () => { + element.style.transform = element.style.transform || 'translateY(-2px)'; }); - } + }); +}); - displayConversationExchange(conversationDiv, userReply, aiResponse) { - // Show conversation area if hidden - conversationDiv.style.display = 'block'; - - // Add user's reply - const userDiv = document.createElement('div'); - userDiv.className = 'conversation-user'; - userDiv.innerHTML = ` -
-
👤
-
${userReply}
-
+function createSparkleEffect(element) { + for (let i = 0; i < 6; i++) { + const sparkle = document.createElement('div'); + sparkle.innerHTML = '✨'; + sparkle.style.cssText = ` + position: absolute; + pointer-events: none; + font-size: 1rem; + animation: sparkle 1s ease-out forwards; + z-index: 1000; `; - // Add AI's response - const aiDiv = document.createElement('div'); - aiDiv.className = 'conversation-ai'; - aiDiv.innerHTML = ` -
-
🤖
-
${aiResponse}
-
- `; + const rect = element.getBoundingClientRect(); + sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px'; + sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px'; - // Add with animation - conversationDiv.appendChild(userDiv); - conversationDiv.appendChild(aiDiv); + document.body.appendChild(sparkle); - // Animate in - setTimeout(() => { - userDiv.style.opacity = '1'; - userDiv.style.transform = 'translateY(0)'; - }, 100); - - setTimeout(() => { - aiDiv.style.opacity = '1'; - aiDiv.style.transform = 'translateY(0)'; - }, 300); - - // Scroll to show new conversation - conversationDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); - } - - showConversationCompletion(conversationDiv) { - const completionDiv = document.createElement('div'); - completionDiv.className = 'conversation-completion'; - completionDiv.innerHTML = ` -
- 🌟 -

${this.currentLanguage === 'de' - ? 'Tolle Unterhaltung! Du hast großartig mitgedacht.' - : 'Great conversation! You thought along wonderfully.'}

-
- `; - - conversationDiv.appendChild(completionDiv); - - setTimeout(() => { - completionDiv.style.opacity = '1'; - completionDiv.style.transform = 'translateY(0)'; - }, 100); + setTimeout(() => sparkle.remove(), 1000); } } -// Initialize the app when DOM is loaded -document.addEventListener('DOMContentLoaded', function() { - window.kidsAI = new KidsAIExplorer(); -}); +// Add sparkle animation CSS +const sparkleCSS = ` +@keyframes sparkle { + 0% { + opacity: 1; + transform: translateY(0) scale(0); + } + 50% { + opacity: 1; + transform: translateY(-20px) scale(1); + } + 100% { + opacity: 0; + transform: translateY(-40px) scale(0); + } +} +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(100px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100px); + } +} + +.action-guidance ul { + margin: 15px 0; + padding-left: 20px; +} + +.action-guidance li { + margin: 8px 0; + color: #4a5568; + font-weight: 500; +} +`; + +// Inject the sparkle CSS +const styleSheet = document.createElement('style'); +styleSheet.textContent = sparkleCSS; +document.head.appendChild(styleSheet); diff --git a/html/kidsai/script.js.backup b/html/kidsai/script.js.backup new file mode 100644 index 0000000..98f7496 --- /dev/null +++ b/html/kidsai/script.js.backup @@ -0,0 +1,894 @@ +// KidsAI Explorer - Interactive Learning Assistant +console.log('🚀 KidsAI script.js is loading...'); + +class KidsAIExplorer { + constructor() { + this.currentLanguage = localStorage.getItem('kidsai-language') || 'en'; + + // Get DOM elements with error handling + this.questionInput = document.getElementById('question-input'); + this.askButton = document.getElementById('ask-button'); + this.thinkingSection = document.getElementById('thinking-section'); + this.thinkingSteps = document.getElementById('thinking-steps'); + this.actionButtons = document.getElementById('action-buttons'); + this.loadingOverlay = document.getElementById('loading'); + this.suggestionCards = document.querySelectorAll('.suggestion-card'); + this.langButtons = document.querySelectorAll('.lang-btn'); + + // Debug: Log what elements we found + console.log('🔍 DOM Elements found:'); + console.log('questionInput:', this.questionInput); + console.log('askButton:', this.askButton); + console.log('suggestionCards count:', this.suggestionCards.length); + + // Ensure loading is hidden initially + if (this.loadingOverlay) { + this.loadingOverlay.classList.add('hidden'); + } + + // Initialize only if we have the required elements + if (this.questionInput && this.askButton) { + this.initializeLanguage(); + this.initializeEventListeners(); + this.initializeAnimations(); + } else { + console.error('Required DOM elements not found'); + } + } + + initializeLanguage() { + // Set active language button + this.langButtons.forEach(btn => { + btn.classList.toggle('active', btn.dataset.lang === this.currentLanguage); + }); + + // Apply translations + this.applyTranslations(); + } + + applyTranslations() { + try { + const t = translations[this.currentLanguage]; + if (!t) { + console.warn('Translations not available for language:', this.currentLanguage); + return; + } + + // Update all elements with data-translate attribute + document.querySelectorAll('[data-translate]').forEach(element => { + const key = element.getAttribute('data-translate'); + if (t[key]) { + element.textContent = t[key]; + } + }); + + // Update placeholder + const placeholder = document.querySelector('[data-translate-placeholder]'); + if (placeholder) { + const key = placeholder.getAttribute('data-translate-placeholder'); + if (t[key]) { + placeholder.placeholder = t[key]; + } + } + } catch (error) { + console.error('Error applying translations:', error); + } + } + + switchLanguage(lang) { + this.currentLanguage = lang; + localStorage.setItem('kidsai-language', lang); + + // Update active button + this.langButtons.forEach(btn => { + btn.classList.toggle('active', btn.dataset.lang === lang); + }); + + // Apply translations + this.applyTranslations(); + + // Clear thinking section if visible + if (!this.thinkingSection.classList.contains('hidden')) { + this.thinkingSection.classList.add('hidden'); + this.actionButtons.classList.add('hidden'); + this.thinkingSteps.innerHTML = ''; + } + } + + initializeEventListeners() { + console.log('Initializing event listeners'); + + // Language switching + this.langButtons.forEach(btn => { + btn.addEventListener('click', () => { + this.switchLanguage(btn.dataset.lang); + }); + }); + + // Main question submission + if (this.askButton) { + console.log('Adding click listener to ask button'); + this.askButton.addEventListener('click', () => this.handleQuestion()); + } + + if (this.questionInput) { + console.log('Adding keypress listener to question input'); + this.questionInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this.handleQuestion(); + } + }); + } + + // Suggestion cards + console.log('Adding listeners to suggestion cards:', this.suggestionCards.length); + this.suggestionCards.forEach(card => { + card.addEventListener('click', () => { + console.log('Suggestion card clicked'); + const questionKey = `data-question-${this.currentLanguage}`; + const question = card.getAttribute(questionKey); + console.log('Setting question:', question); + this.questionInput.value = question; + this.handleQuestion(); + }); + }); + + // Action buttons + document.getElementById('research-btn').addEventListener('click', () => { + this.showActionGuidance('research'); + }); + + document.getElementById('experiment-btn').addEventListener('click', () => { + this.showActionGuidance('experiment'); + }); + + document.getElementById('discuss-btn').addEventListener('click', () => { + this.showActionGuidance('discuss'); + }); + } + + initializeAnimations() { + // Add floating animation to suggestion cards + this.suggestionCards.forEach((card, index) => { + card.style.animationDelay = `${index * 0.1}s`; + card.style.animation = 'fadeInUp 0.6s ease-out both'; + }); + } + + async handleQuestion() { + console.log('handleQuestion called'); + const question = this.questionInput.value.trim(); + console.log('Question:', question); + + if (!question) { + this.showMessage('Please ask me something first! 🤔', 'warning'); + return; + } + + this.showLoading(); + + try { + // Call the AI backend + const response = await fetch('/api/ask', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + question: question, + language: this.currentLanguage + }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + if (data.success) { + // Display AI-powered guidance + this.displayAIGuidance(data.guidance, data.fallback); + } else { + throw new Error(data.error || 'Unknown error'); + } + + } catch (error) { + console.error('Error getting AI guidance:', error); + + // Fallback to local guidance if backend fails + this.showMessage('Using offline guidance...', 'info'); + const localGuidance = this.generateThinkingGuidance(question); + this.displayThinkingProcess(localGuidance); + } finally { + this.hideLoading(); + } + } + + displayAIGuidance(guidance, isFallback) { + // Clear any previous content + this.thinkingSteps.innerHTML = ''; + this.currentStep = 0; + this.userAnswers = []; + + // Create conversation container + const conversationContainer = document.createElement('div'); + conversationContainer.className = 'conversation-container'; + this.thinkingSteps.appendChild(conversationContainer); + + // Show initial encouragement + const welcomeStep = document.createElement('div'); + welcomeStep.className = 'conversation-step visible'; + welcomeStep.innerHTML = ` +
+

${guidance.encouragement}

+ ${isFallback ? '💻 Offline mode' : '✨ AI-powered'} +
+ `; + conversationContainer.appendChild(welcomeStep); + + // Store guidance for step-by-step interaction + this.currentGuidance = guidance; + this.conversationContainer = conversationContainer; + + // Start the first question after a delay + setTimeout(() => { + this.showNextQuestion(); + }, 1500); + + // Show the thinking section + setTimeout(() => { + this.thinkingSection.classList.remove('hidden'); + }, 500); + } + + showNextQuestion() { + if (this.currentStep >= this.currentGuidance.steps.length) { + this.showCompletionMessage(); + return; + } + + const step = this.currentGuidance.steps[this.currentStep]; + const stepDiv = document.createElement('div'); + stepDiv.className = 'conversation-step'; + stepDiv.innerHTML = ` +
+
+
${step.id}
+
+

${step.text}

+
+
+ +
+ ${this.currentLanguage === 'de' ? '💡 Nimm dir Zeit zum Nachdenken!' : '💡 Take your time to think!'} + +
+
+
+
+ `; + + this.conversationContainer.appendChild(stepDiv); + + // Animate in + setTimeout(() => { + stepDiv.classList.add('visible'); + }, 100); + + // Scroll to the new question + setTimeout(() => { + stepDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 600); + } + + submitAnswer(stepIndex) { + const textarea = document.getElementById(`user-input-${stepIndex}`); + const inputArea = document.getElementById(`input-area-${stepIndex}`); + const answer = textarea.value.trim(); + + if (!answer) { + this.showMessage( + this.currentLanguage === 'de' ? 'Bitte schreibe deine Gedanken auf! 🤔' : 'Please write down your thoughts! 🤔', + 'warning' + ); + return; + } + + // Store the answer + this.userAnswers[stepIndex] = answer; + + // Mark as answered + inputArea.classList.add('answered'); + textarea.disabled = true; + + // Show encouragement + const encouragement = document.createElement('div'); + encouragement.className = 'encouragement-feedback'; + encouragement.innerHTML = this.getEncouragementMessage(); + inputArea.appendChild(encouragement); + + // Move to next question + this.currentStep++; + setTimeout(() => { + this.showNextQuestion(); + }, 1500); + } + + getEncouragementMessage() { + const messages = this.currentLanguage === 'de' ? [ + '🌟 Toll! Du denkst wirklich gut nach!', + '👏 Ausgezeichnet! Weiter so!', + '🎯 Super Antwort! Du bist auf dem richtigen Weg!', + '✨ Fantastisch! Du lernst wie ein echter Forscher!' + ] : [ + '🌟 Great! You\'re thinking really well!', + '👏 Excellent! Keep it up!', + '🎯 Super answer! You\'re on the right track!', + '✨ Fantastic! You\'re learning like a real scientist!' + ]; + + return messages[Math.floor(Math.random() * messages.length)]; + } + + showCompletionMessage() { + const completionDiv = document.createElement('div'); + completionDiv.className = 'conversation-step'; + completionDiv.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🎉 Fantastisch gemacht!' : '🎉 Fantastic Job!'}

+

${this.currentLanguage === 'de' + ? 'Du hast wirklich gut nachgedacht! Jetzt bist du bereit, die richtige Antwort zu entdecken.' + : 'You\'ve done some great thinking! Now you\'re ready to discover the actual answer.'}

+
+
+ + +
+ `; + + this.conversationContainer.appendChild(completionDiv); + + // Animate in + setTimeout(() => { + completionDiv.classList.add('visible'); + }, 100); + + // Add click handler for reveal button + setTimeout(() => { + document.getElementById('reveal-answer-btn').addEventListener('click', () => { + this.revealAnswer(); + }); + }, 200); + + // Show action buttons + this.actionButtons.classList.remove('hidden'); + } + + async revealAnswer() { + const revealBtn = document.getElementById('reveal-answer-btn'); + const answerContent = document.getElementById('answer-content'); + const currentQuestion = this.questionInput.value.trim(); + + // Show loading state + revealBtn.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; + revealBtn.disabled = true; + + try { + const response = await fetch('/api/reveal-answer', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + question: currentQuestion, + language: this.currentLanguage, + userAnswers: this.userAnswers || [] + }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + if (data.success) { + // Hide the reveal button + revealBtn.style.display = 'none'; + + // Show the answer with animation + answerContent.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🎓 Die Antwort:' : '🎓 The Answer:'}

+
${data.answer}
+ ${data.explanation ? ` +
+
${this.currentLanguage === 'de' ? '💡 Warum ist das so?' : '💡 Why is this so?'}
+

${data.explanation}

+
+ ` : ''} +
+

${this.currentLanguage === 'de' + ? '🌟 Großartig! Du hast durch deine eigenen Gedanken gelernt!' + : '🌟 Great! You learned by thinking it through yourself!'}

+
+
+ `; + + answerContent.classList.remove('hidden'); + answerContent.scrollIntoView({ behavior: 'smooth', block: 'center' }); + + } else { + throw new Error(data.error || 'Failed to get answer'); + } + + } catch (error) { + console.error('Error revealing answer:', error); + + // Fallback answer display + revealBtn.innerHTML = `🎯 ${this.currentLanguage === 'de' ? 'Antwort zeigen!' : 'Reveal Answer!'}`; + revealBtn.disabled = false; + + answerContent.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🤔 Hmm...' : '🤔 Hmm...'}

+

${this.currentLanguage === 'de' + ? 'Ich kann die Antwort gerade nicht laden. Aber du hast schon toll nachgedacht! Frag gerne einen Erwachsenen oder schaue in einem Buch nach.' + : 'I can\'t load the answer right now. But you\'ve done great thinking! Feel free to ask an adult or look it up in a book.'}

+
+ `; + answerContent.classList.remove('hidden'); + } + } + + generateThinkingGuidance(question) { + // This is where the AI magic happens - generating guided questions instead of answers + const questionLower = question.toLowerCase(); + const t = translations[this.currentLanguage]; + + // Categories of questions and their thinking frameworks + const frameworks = t.thinkingFrameworks; + + // Determine which framework to use + let selectedFramework = frameworks.general; + + // Check for science keywords (works for both languages) + const scienceKeywords = ['why', 'warum', 'how', 'wie', 'what happens', 'was passiert', 'science', 'wissenschaft', 'nature', 'natur', 'sky', 'himmel', 'water', 'wasser', 'animals', 'tiere', 'plants', 'pflanzen', 'earth', 'erde', 'space', 'weltall']; + const mathKeywords = ['calculate', 'rechnen', 'math', 'mathe', 'numbers', 'zahlen', 'count', 'zählen', 'add', 'addieren', 'subtract', 'subtrahieren', 'multiply', 'multiplizieren', 'divide', 'dividieren', 'solve', 'lösen']; + const techKeywords = ['computer', 'internet', 'phone', 'telefon', 'robot', 'roboter', 'machine', 'maschine', 'technology', 'technologie', 'digital']; + + if (scienceKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.science; + } else if (mathKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.math; + } else if (techKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.technology; + } + + return { + question: question, + framework: selectedFramework, + encouragement: this.getEncouragement(), + actionSuggestions: this.getActionSuggestions(questionLower) + }; + } + + getEncouragement() { + const t = translations[this.currentLanguage]; + const encouragements = t.encouragements; + return encouragements[Math.floor(Math.random() * encouragements.length)]; + } + + getActionSuggestions(questionLower) { + const t = translations[this.currentLanguage]; + const suggestions = { + research: [], + experiment: [], + discuss: [] + }; + + // Add specific suggestions based on question content (works for both languages) + if (questionLower.includes('plant') || questionLower.includes('grow') || questionLower.includes('pflanze') || questionLower.includes('wachsen')) { + if (this.currentLanguage === 'de') { + suggestions.research.push("Informiere dich über den Lebenszyklus von Pflanzen"); + suggestions.experiment.push("Versuche, Samen unter verschiedenen Bedingungen wachsen zu lassen"); + suggestions.discuss.push("Frag einen Gärtner nach Pflanzenpflege"); + } else { + suggestions.research.push("Look up the life cycle of plants"); + suggestions.experiment.push("Try growing seeds in different conditions"); + suggestions.discuss.push("Ask a gardener about plant care"); + } + } + + if (questionLower.includes('sky') || questionLower.includes('blue') || questionLower.includes('himmel') || questionLower.includes('blau')) { + if (this.currentLanguage === 'de') { + suggestions.research.push("Lerne über Licht und wie es sich bewegt"); + suggestions.experiment.push("Benutze ein Prisma, um Licht in Farben aufzuteilen"); + suggestions.discuss.push("Sprich mit einem Wissenschaftslehrer über Licht"); + } else { + suggestions.research.push("Learn about light and how it travels"); + suggestions.experiment.push("Use a prism to split light into colors"); + suggestions.discuss.push("Talk to a science teacher about light"); + } + } + + // Default suggestions if none match + if (suggestions.research.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.research = [ + "Suche nach kinderfreundlichen Artikeln über dein Thema", + "Finde Bücher in der Bibliothek über dieses Thema", + "Schaue Lernvideos (mit einem Erwachsenen)" + ]; + } else { + suggestions.research = [ + "Search for kid-friendly articles about your topic", + "Find books in the library about this subject", + "Watch educational videos (with a grown-up)" + ]; + } + } + + if (suggestions.experiment.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.experiment = [ + "Denke an sichere Wege, deine Ideen zu testen", + "Mache Beobachtungen und schreibe sie auf", + "Versuche einfache Experimente mit Haushaltsgegenständen" + ]; + } else { + suggestions.experiment = [ + "Think of safe ways to test your ideas", + "Make observations and take notes", + "Try simple experiments with household items" + ]; + } + } + + if (suggestions.discuss.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.discuss = [ + "Frag deinen Lehrer, was er denkt", + "Sprich mit Familienmitgliedern über ihre Erfahrungen", + "Teile deine Frage mit Freunden" + ]; + } else { + suggestions.discuss = [ + "Ask your teacher what they think", + "Talk to family members about their experiences", + "Share your question with friends" + ]; + } + } + + return suggestions; + } + + displayThinkingProcess(guidance) { + const t = translations[this.currentLanguage]; + + // Clear previous content + this.thinkingSteps.innerHTML = ''; + + // Add encouragement + const encouragementDiv = document.createElement('div'); + encouragementDiv.className = 'thinking-step highlight'; + encouragementDiv.innerHTML = ` +

🎉 ${guidance.encouragement}

+

${this.currentLanguage === 'de' ? 'Lass uns das Schritt für Schritt erforschen und dir helfen, ein fantastischer Problemlöser zu werden!' : 'Let\'s explore this step by step and help you become a fantastic problem solver!'}

+ `; + this.thinkingSteps.appendChild(encouragementDiv); + + // Add thinking steps with animation delay + guidance.framework.steps.forEach((step, index) => { + setTimeout(() => { + const stepDiv = document.createElement('div'); + stepDiv.className = 'thinking-step'; + stepDiv.innerHTML = ` +

${step.title}

+

${step.content}

+ `; + this.thinkingSteps.appendChild(stepDiv); + + // Show action buttons after all steps are displayed + if (index === guidance.framework.steps.length - 1) { + setTimeout(() => { + this.actionButtons.classList.remove('hidden'); + this.actionButtons.style.animation = 'fadeInUp 0.6s ease-out'; + + // Store suggestions for action buttons + this.currentSuggestions = guidance.actionSuggestions; + }, 300); + } + }, index * 500); + }); + + // Show thinking section + this.thinkingSection.classList.remove('hidden'); + this.thinkingSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + showActionGuidance(actionType) { + const t = translations[this.currentLanguage]; + const actionTitles = t.actionTitles; + + const suggestions = this.currentSuggestions[actionType]; + + let content = `
+

${actionTitles[actionType]}

+
    `; + + suggestions.forEach(suggestion => { + content += `
  • ${suggestion}
    • `; + }); + + content += `
+

${this.currentLanguage === 'de' ? 'Denk daran:' : 'Remember:'} ${t.actionReminder}

+
`; + + // Create and show modal or add to thinking steps + const guidanceDiv = document.createElement('div'); + guidanceDiv.className = 'thinking-step highlight'; + guidanceDiv.innerHTML = content; + guidanceDiv.style.animation = 'slideInLeft 0.5s ease-out'; + + this.thinkingSteps.appendChild(guidanceDiv); + guidanceDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + + showLoading() { + if (this.loadingOverlay) { + this.loadingOverlay.classList.remove('hidden'); + } + } + + hideLoading() { + if (this.loadingOverlay) { + this.loadingOverlay.classList.add('hidden'); + } + } + + showMessage(message, type = 'info') { + // Create a temporary message element + const messageDiv = document.createElement('div'); + messageDiv.className = `message-popup ${type}`; + messageDiv.textContent = message; + messageDiv.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + background: ${type === 'error' ? '#fed7d7' : type === 'warning' ? '#fef5e7' : '#e6fffa'}; + color: ${type === 'error' ? '#c53030' : type === 'warning' ? '#d69e2e' : '#00695c'}; + padding: 15px 20px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + z-index: 1001; + animation: slideInRight 0.3s ease-out; + max-width: 300px; + `; + + document.body.appendChild(messageDiv); + + // Remove after 3 seconds + setTimeout(() => { + messageDiv.style.animation = 'slideOutRight 0.3s ease-out'; + setTimeout(() => messageDiv.remove(), 300); + }, 3000); + } + + delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } +} + +// Initialize the application when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + console.log('DOM loaded, initializing KidsAI Explorer...'); + + // Hide loading screen immediately on page load + const loadingOverlay = document.getElementById('loading'); + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); + console.log('Loading overlay hidden on page load'); + } + + // Emergency fallback - hide loading after 1 second regardless + setTimeout(() => { + if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) { + loadingOverlay.classList.add('hidden'); + console.log('Emergency: Loading overlay hidden by timeout'); + } + }, 1000); + + // Check if translations are loaded + if (typeof translations === 'undefined') { + console.error('Translations not loaded! Creating fallback...'); + window.translations = { + en: { + title: "KidsAI Explorer", + tagline: "Think, Learn, Discover Together!", + encouragements: ["Great question! You're thinking like a real scientist! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Let's break this down", + content: "What's the main thing you want to understand?" + } + ] + } + }, + actionTitles: { + research: "🔍 Research Ideas", + experiment: "🧪 Experiment Ideas", + discuss: "💬 Discussion Ideas" + }, + actionReminder: "Remember: The goal is to discover the answer yourself!" + }, + de: { + title: "KidsAI Explorer", + tagline: "Denken, Lernen, Entdecken - Zusammen!", + encouragements: ["Tolle Frage! Du denkst wie ein echter Wissenschaftler! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Lass uns das aufteilen", + content: "Was ist das Wichtigste, was du verstehen möchtest?" + } + ] + } + }, + actionTitles: { + research: "🔍 Forschungsideen", + experiment: "🧪 Experiment-Ideen", + discuss: "💬 Diskussionsideen" + }, + actionReminder: "Denk daran: Das Ziel ist es, die Antwort selbst zu entdecken!" + } + }; + } + + // Global instance for external access + let kidsAI; + + // Initialize when DOM is ready + document.addEventListener('DOMContentLoaded', () => { + console.log('🚀 DOM loaded, initializing KidsAI...'); + + // Add a visible indicator + const body = document.body; + const indicator = document.createElement('div'); + indicator.id = 'debug-indicator'; + indicator.innerHTML = '✅ KidsAI Loading...'; + indicator.style.cssText = 'position:fixed;top:10px;left:10px;background:green;color:white;padding:5px;z-index:9999;border-radius:5px;font-size:12px;'; + body.appendChild(indicator); + + try { + kidsAI = new KidsAIExplorer(); + window.kidsAI = kidsAI; // Make it globally accessible + console.log('KidsAI Explorer initialized successfully'); + indicator.innerHTML = '✅ KidsAI Ready!'; + indicator.style.background = 'green'; + } catch (error) { + console.error('Error initializing KidsAIExplorer:', error); + indicator.innerHTML = '❌ KidsAI Error: ' + error.message; + indicator.style.background = 'red'; + // Ensure loading is hidden even if there's an error + const loadingOverlay = document.getElementById('loading'); + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); + } + } + }); +}); + +// Add some fun interactive effects +document.addEventListener('DOMContentLoaded', () => { + // Add sparkle effect on click + document.addEventListener('click', (e) => { + if (e.target.classList.contains('ask-btn') || e.target.classList.contains('action-btn')) { + createSparkleEffect(e.target); + } + }); + + // Add hover sound effect simulation (visual feedback) + const interactiveElements = document.querySelectorAll('.suggestion-card, .ask-btn, .action-btn'); + interactiveElements.forEach(element => { + element.addEventListener('mouseenter', () => { + element.style.transform = element.style.transform || 'translateY(-2px)'; + }); + }); +}); + +function createSparkleEffect(element) { + for (let i = 0; i < 6; i++) { + const sparkle = document.createElement('div'); + sparkle.innerHTML = '✨'; + sparkle.style.cssText = ` + position: absolute; + pointer-events: none; + font-size: 1rem; + animation: sparkle 1s ease-out forwards; + z-index: 1000; + `; + + const rect = element.getBoundingClientRect(); + sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px'; + sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px'; + + document.body.appendChild(sparkle); + + setTimeout(() => sparkle.remove(), 1000); + } +} + +// Add sparkle animation CSS +const sparkleCSS = ` +@keyframes sparkle { + 0% { + opacity: 1; + transform: translateY(0) scale(0); + } + 50% { + opacity: 1; + transform: translateY(-20px) scale(1); + } + 100% { + opacity: 0; + transform: translateY(-40px) scale(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(100px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100px); + } +} + +.action-guidance ul { + margin: 15px 0; + padding-left: 20px; +} + +.action-guidance li { + margin: 8px 0; + color: #4a5568; + font-weight: 500; +} +`; + +// Inject the sparkle CSS +const styleSheet = document.createElement('style'); +styleSheet.textContent = sparkleCSS; +document.head.appendChild(styleSheet); diff --git a/html/kidsai/script_broken.js b/html/kidsai/script_broken.js new file mode 100644 index 0000000..cb54774 --- /dev/null +++ b/html/kidsai/script_broken.js @@ -0,0 +1,897 @@ +// KidsAI Explorer - Interactive Learning Assistant +class KidsAIExplorer { + constructor() { + this.currentLanguage = localStorage.getItem('kidsai-language') || 'en'; + + // Get DOM elements with error handling + this.questionInput = document.getElementById('question-input'); + this.askButton = document.getElementById('ask-button'); + this.thinkingSection = document.getElementById('thinking-section'); + this.thinkingSteps = document.getElementById('thinking-steps'); + this.actionButtons = document.getElementById('action-buttons'); + this.loadingOverlay = document.getElementById('loading'); + this.suggestionCards = document.querySelectorAll('.suggestion-card'); + this.langButtons = document.querySelectorAll('.lang-btn'); + + // Ensure loading is hidden initially + if (this.loadingOverlay) { + this.loadingOverlay.classList.add('hidden'); + } + + // Initialize only if we have the required elements + if (this.questionInput && this.askButton) { + this.initializeLanguage(); + this.initializeEventListeners(); + this.initializeAnimations(); + } else { + console.error('Required DOM elements not found'); + } + } + + initializeLanguage() { + // Set active language button + this.langButtons.forEach(btn => { + btn.classList.toggle('active', btn.dataset.lang === this.currentLanguage); + }); + + // Apply translations + this.applyTranslations(); + } + + applyTranslations() { + try { + const t = translations[this.currentLanguage]; + if (!t) { + console.warn('Translations not available for language:', this.currentLanguage); + return; + } + + // Update all elements with data-translate attribute + document.querySelectorAll('[data-translate]').forEach(element => { + const key = element.getAttribute('data-translate'); + if (t[key]) { + element.textContent = t[key]; + } + }); + + // Update placeholder + const placeholder = document.querySelector('[data-translate-placeholder]'); + if (placeholder) { + const key = placeholder.getAttribute('data-translate-placeholder'); + if (t[key]) { + placeholder.placeholder = t[key]; + } + } + } catch (error) { + console.error('Error applying translations:', error); + } + } + + switchLanguage(lang) { + this.currentLanguage = lang; + localStorage.setItem('kidsai-language', lang); + + // Update active button + this.langButtons.forEach(btn => { + btn.classList.toggle('active', btn.dataset.lang === lang); + }); + + // Apply translations + this.applyTranslations(); + + // Clear thinking section if visible + if (!this.thinkingSection.classList.contains('hidden')) { + this.thinkingSection.classList.add('hidden'); + this.actionButtons.classList.add('hidden'); + this.thinkingSteps.innerHTML = ''; + } + } + + initializeEventListeners() { + // Language switching + this.langButtons.forEach(btn => { + btn.addEventListener('click', () => { + this.switchLanguage(btn.dataset.lang); + }); + }); + + // Main question submission + this.askButton.addEventListener('click', () => this.handleQuestion()); + this.questionInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this.handleQuestion(); + } + }); + + // Suggestion cards + this.suggestionCards.forEach(card => { + card.addEventListener('click', () => { + const questionKey = `data-question-${this.currentLanguage}`; + const question = card.getAttribute(questionKey); + this.questionInput.value = question; + this.handleQuestion(); + }); + }); + + // Action buttons + document.getElementById('research-btn').addEventListener('click', () => { + this.showActionGuidance('research'); + }); + + document.getElementById('experiment-btn').addEventListener('click', () => { + this.showActionGuidance('experiment'); + }); + + document.getElementById('discuss-btn').addEventListener('click', () => { + this.showActionGuidance('discuss'); + }); + } + + initializeAnimations() { + // Add floating animation to suggestion cards + this.suggestionCards.forEach((card, index) => { + card.style.animationDelay = `${index * 0.1}s`; + card.style.animation = 'fadeInUp 0.6s ease-out both'; + }); + } + + async handleQuestion() { + const question = this.questionInput.value.trim(); + if (!question) { + this.showMessage('Please ask me something first! 🤔', 'warning'); + return; + } + + this.showLoading(); + + try { + // Call the AI backend + const response = await fetch('/api/ask', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + question: question, + language: this.currentLanguage + }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + if (data.success) { + // Display AI-powered guidance + this.displayAIGuidance(data.guidance, data.fallback); + } else { + throw new Error(data.error || 'Unknown error'); + } + + } catch (error) { + console.error('Error getting AI guidance:', error); + + // Fallback to local guidance if backend fails + this.showMessage('Using offline guidance...', 'info'); + const localGuidance = this.generateThinkingGuidance(question); + this.displayThinkingProcess(localGuidance); + } finally { + this.hideLoading(); + } + } + + displayAIGuidance(guidance, isFallback) { + // Clear any previous content + this.thinkingSteps.innerHTML = ''; + this.currentStep = 0; + this.userAnswers = []; + + // Create conversation container + const conversationContainer = document.createElement('div'); + conversationContainer.className = 'conversation-container'; + this.thinkingSteps.appendChild(conversationContainer); + + // Show initial encouragement + const welcomeStep = document.createElement('div'); + welcomeStep.className = 'conversation-step visible'; + welcomeStep.innerHTML = ` +
+

${guidance.encouragement}

+ ${isFallback ? '💻 Offline mode' : '✨ AI-powered'} +
+ `; + conversationContainer.appendChild(welcomeStep); + + // Store guidance for step-by-step interaction + this.currentGuidance = guidance; + this.conversationContainer = conversationContainer; + + // Start the first question after a delay + setTimeout(() => { + this.showNextQuestion(); + }, 1500); + + // Show the thinking section + setTimeout(() => { + this.thinkingSection.classList.remove('hidden'); + }, 500); + } + + showNextQuestion() { + if (this.currentStep >= this.currentGuidance.steps.length) { + this.showCompletionMessage(); + return; + } + + const step = this.currentGuidance.steps[this.currentStep]; + const stepDiv = document.createElement('div'); + stepDiv.className = 'conversation-step'; + stepDiv.innerHTML = ` +
+
+
${step.id}
+
+

${step.text}

+
+
+ +
+ ${this.currentLanguage === 'de' ? '💡 Nimm dir Zeit zum Nachdenken!' : '💡 Take your time to think!'} + +
+
+
+
+ `; + + this.conversationContainer.appendChild(stepDiv); + + // Animate in + setTimeout(() => { + stepDiv.classList.add('visible'); + }, 100); + + // Scroll to the new question + setTimeout(() => { + stepDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + }, 600); + } + + submitAnswer(stepIndex) { + const textarea = document.getElementById(`user-input-${stepIndex}`); + const inputArea = document.getElementById(`input-area-${stepIndex}`); + const answer = textarea.value.trim(); + + if (!answer) { + this.showMessage( + this.currentLanguage === 'de' ? 'Bitte schreibe deine Gedanken auf! 🤔' : 'Please write down your thoughts! 🤔', + 'warning' + ); + return; + } + + // Store the answer + this.userAnswers[stepIndex] = answer; + + // Mark as answered + inputArea.classList.add('answered'); + textarea.disabled = true; + + // Show encouragement + const encouragement = document.createElement('div'); + encouragement.className = 'encouragement-feedback'; + encouragement.innerHTML = this.getEncouragementMessage(); + inputArea.appendChild(encouragement); + + // Move to next question + this.currentStep++; + setTimeout(() => { + this.showNextQuestion(); + }, 1500); + } + + getEncouragementMessage() { + const messages = this.currentLanguage === 'de' ? [ + '🌟 Toll! Du denkst wirklich gut nach!', + '👏 Ausgezeichnet! Weiter so!', + '🎯 Super Antwort! Du bist auf dem richtigen Weg!', + '✨ Fantastisch! Du lernst wie ein echter Forscher!' + ] : [ + '🌟 Great! You\'re thinking really well!', + '👏 Excellent! Keep it up!', + '🎯 Super answer! You\'re on the right track!', + '✨ Fantastic! You\'re learning like a real scientist!' + ]; + + return messages[Math.floor(Math.random() * messages.length)]; + } + + showCompletionMessage() { + const completionDiv = document.createElement('div'); + completionDiv.className = 'conversation-step'; + completionDiv.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🎉 Fantastisch gemacht!' : '🎉 Fantastic Job!'}

+

${this.currentLanguage === 'de' + ? 'Du hast wirklich gut nachgedacht! Jetzt bist du bereit, die richtige Antwort zu entdecken.' + : 'You\'ve done some great thinking! Now you\'re ready to discover the actual answer.'}

+
+
+ + +
+ `; + + this.conversationContainer.appendChild(completionDiv); + + // Animate in + setTimeout(() => { + completionDiv.classList.add('visible'); + }, 100); + + // Add click handler for reveal button + setTimeout(() => { + document.getElementById('reveal-answer-btn').addEventListener('click', () => { + this.revealAnswer(); + }); + }, 200); + + // Show action buttons + this.actionButtons.classList.remove('hidden'); + } + + async revealAnswer() { + const revealBtn = document.getElementById('reveal-answer-btn'); + const answerContent = document.getElementById('answer-content'); + const currentQuestion = this.questionInput.value.trim(); + + // Show loading state + revealBtn.innerHTML = `⏳ ${this.currentLanguage === 'de' ? 'Lädt...' : 'Loading...'}`; + revealBtn.disabled = true; + + try { + const response = await fetch('/api/reveal-answer', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + question: currentQuestion, + language: this.currentLanguage, + userAnswers: this.userAnswers || [] + }) + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + if (data.success) { + // Hide the reveal button + revealBtn.style.display = 'none'; + + // Show the answer with animation + answerContent.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🎓 Die Antwort:' : '🎓 The Answer:'}

+
${data.answer}
+ ${data.explanation ? ` +
+
${this.currentLanguage === 'de' ? '💡 Warum ist das so?' : '💡 Why is this so?'}
+

${data.explanation}

+
+ ` : ''} +
+

${this.currentLanguage === 'de' + ? '🌟 Großartig! Du hast durch deine eigenen Gedanken gelernt!' + : '🌟 Great! You learned by thinking it through yourself!'}

+
+
+ `; + + answerContent.classList.remove('hidden'); + answerContent.scrollIntoView({ behavior: 'smooth', block: 'center' }); + + } else { + throw new Error(data.error || 'Failed to get answer'); + } + + } catch (error) { + console.error('Error revealing answer:', error); + + // Fallback answer display + revealBtn.innerHTML = `🎯 ${this.currentLanguage === 'de' ? 'Antwort zeigen!' : 'Reveal Answer!'}`; + revealBtn.disabled = false; + + answerContent.innerHTML = ` +
+

${this.currentLanguage === 'de' ? '🤔 Hmm...' : '🤔 Hmm...'}

+

${this.currentLanguage === 'de' + ? 'Ich kann die Antwort gerade nicht laden. Aber du hast schon toll nachgedacht! Frag gerne einen Erwachsenen oder schaue in einem Buch nach.' + : 'I can\'t load the answer right now. But you\'ve done great thinking! Feel free to ask an adult or look it up in a book.'}

+
+ `; + answerContent.classList.remove('hidden'); + } + } + + const data = await response.json(); + + if (data.success) { + // Display the answer + answerContent.innerHTML = ` +
+
+ 💡 +

${this.currentLanguage === 'de' ? 'Die Antwort:' : 'The Answer:'}

+ ${data.fallback ? '📚 Local' : '✨ AI'} • ${data.answer.source} +
+
+ ${data.answer.text} +
+
+

${this.currentLanguage === 'de' + ? '🎉 Großartig! Wie nah warst du mit deinen Überlegungen?' + : '🎉 Awesome! How close were your thoughts to the answer?'}

+
+
+ `; + + answerContent.classList.remove('hidden'); + revealBtn.style.display = 'none'; + + // Animate answer in + answerContent.style.opacity = '0'; + answerContent.style.transform = 'translateY(20px)'; + setTimeout(() => { + answerContent.style.transition = 'all 0.6s ease-out'; + answerContent.style.opacity = '1'; + answerContent.style.transform = 'translateY(0)'; + }, 100); + + } else { + throw new Error(data.error || 'Failed to get answer'); + } + + } catch (error) { + console.error('Error getting answer:', error); + revealBtn.innerHTML = `❌ ${this.currentLanguage === 'de' ? 'Fehler' : 'Error'}`; + setTimeout(() => { + revealBtn.innerHTML = `🎯 ${this.currentLanguage === 'de' ? 'Nochmal versuchen' : 'Try Again'}`; + revealBtn.disabled = false; + }, 2000); + } + } + + generateThinkingGuidance(question) { + // This is where the AI magic happens - generating guided questions instead of answers + const questionLower = question.toLowerCase(); + const t = translations[this.currentLanguage]; + + // Categories of questions and their thinking frameworks + const frameworks = t.thinkingFrameworks; + + // Determine which framework to use + let selectedFramework = frameworks.general; + + // Check for science keywords (works for both languages) + const scienceKeywords = ['why', 'warum', 'how', 'wie', 'what happens', 'was passiert', 'science', 'wissenschaft', 'nature', 'natur', 'sky', 'himmel', 'water', 'wasser', 'animals', 'tiere', 'plants', 'pflanzen', 'earth', 'erde', 'space', 'weltall']; + const mathKeywords = ['calculate', 'rechnen', 'math', 'mathe', 'numbers', 'zahlen', 'count', 'zählen', 'add', 'addieren', 'subtract', 'subtrahieren', 'multiply', 'multiplizieren', 'divide', 'dividieren', 'solve', 'lösen']; + const techKeywords = ['computer', 'internet', 'phone', 'telefon', 'robot', 'roboter', 'machine', 'maschine', 'technology', 'technologie', 'digital']; + + if (scienceKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.science; + } else if (mathKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.math; + } else if (techKeywords.some(keyword => questionLower.includes(keyword))) { + selectedFramework = frameworks.technology; + } + + return { + question: question, + framework: selectedFramework, + encouragement: this.getEncouragement(), + actionSuggestions: this.getActionSuggestions(questionLower) + }; + } + + getEncouragement() { + const t = translations[this.currentLanguage]; + const encouragements = t.encouragements; + return encouragements[Math.floor(Math.random() * encouragements.length)]; + } + + getActionSuggestions(questionLower) { + const t = translations[this.currentLanguage]; + const suggestions = { + research: [], + experiment: [], + discuss: [] + }; + + // Add specific suggestions based on question content (works for both languages) + if (questionLower.includes('plant') || questionLower.includes('grow') || questionLower.includes('pflanze') || questionLower.includes('wachsen')) { + if (this.currentLanguage === 'de') { + suggestions.research.push("Informiere dich über den Lebenszyklus von Pflanzen"); + suggestions.experiment.push("Versuche, Samen unter verschiedenen Bedingungen wachsen zu lassen"); + suggestions.discuss.push("Frag einen Gärtner nach Pflanzenpflege"); + } else { + suggestions.research.push("Look up the life cycle of plants"); + suggestions.experiment.push("Try growing seeds in different conditions"); + suggestions.discuss.push("Ask a gardener about plant care"); + } + } + + if (questionLower.includes('sky') || questionLower.includes('blue') || questionLower.includes('himmel') || questionLower.includes('blau')) { + if (this.currentLanguage === 'de') { + suggestions.research.push("Lerne über Licht und wie es sich bewegt"); + suggestions.experiment.push("Benutze ein Prisma, um Licht in Farben aufzuteilen"); + suggestions.discuss.push("Sprich mit einem Wissenschaftslehrer über Licht"); + } else { + suggestions.research.push("Learn about light and how it travels"); + suggestions.experiment.push("Use a prism to split light into colors"); + suggestions.discuss.push("Talk to a science teacher about light"); + } + } + + // Default suggestions if none match + if (suggestions.research.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.research = [ + "Suche nach kinderfreundlichen Artikeln über dein Thema", + "Finde Bücher in der Bibliothek über dieses Thema", + "Schaue Lernvideos (mit einem Erwachsenen)" + ]; + } else { + suggestions.research = [ + "Search for kid-friendly articles about your topic", + "Find books in the library about this subject", + "Watch educational videos (with a grown-up)" + ]; + } + } + + if (suggestions.experiment.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.experiment = [ + "Denke an sichere Wege, deine Ideen zu testen", + "Mache Beobachtungen und schreibe sie auf", + "Versuche einfache Experimente mit Haushaltsgegenständen" + ]; + } else { + suggestions.experiment = [ + "Think of safe ways to test your ideas", + "Make observations and take notes", + "Try simple experiments with household items" + ]; + } + } + + if (suggestions.discuss.length === 0) { + if (this.currentLanguage === 'de') { + suggestions.discuss = [ + "Frag deinen Lehrer, was er denkt", + "Sprich mit Familienmitgliedern über ihre Erfahrungen", + "Teile deine Frage mit Freunden" + ]; + } else { + suggestions.discuss = [ + "Ask your teacher what they think", + "Talk to family members about their experiences", + "Share your question with friends" + ]; + } + } + + return suggestions; + } + + displayThinkingProcess(guidance) { + const t = translations[this.currentLanguage]; + + // Clear previous content + this.thinkingSteps.innerHTML = ''; + + // Add encouragement + const encouragementDiv = document.createElement('div'); + encouragementDiv.className = 'thinking-step highlight'; + encouragementDiv.innerHTML = ` +

🎉 ${guidance.encouragement}

+

${this.currentLanguage === 'de' ? 'Lass uns das Schritt für Schritt erforschen und dir helfen, ein fantastischer Problemlöser zu werden!' : 'Let\'s explore this step by step and help you become a fantastic problem solver!'}

+ `; + this.thinkingSteps.appendChild(encouragementDiv); + + // Add thinking steps with animation delay + guidance.framework.steps.forEach((step, index) => { + setTimeout(() => { + const stepDiv = document.createElement('div'); + stepDiv.className = 'thinking-step'; + stepDiv.innerHTML = ` +

${step.title}

+

${step.content}

+ `; + this.thinkingSteps.appendChild(stepDiv); + + // Show action buttons after all steps are displayed + if (index === guidance.framework.steps.length - 1) { + setTimeout(() => { + this.actionButtons.classList.remove('hidden'); + this.actionButtons.style.animation = 'fadeInUp 0.6s ease-out'; + + // Store suggestions for action buttons + this.currentSuggestions = guidance.actionSuggestions; + }, 300); + } + }, index * 500); + }); + + // Show thinking section + this.thinkingSection.classList.remove('hidden'); + this.thinkingSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + showActionGuidance(actionType) { + const t = translations[this.currentLanguage]; + const actionTitles = t.actionTitles; + + const suggestions = this.currentSuggestions[actionType]; + + let content = `
+

${actionTitles[actionType]}

+
    `; + + suggestions.forEach(suggestion => { + content += `
  • ${suggestion}
    • `; + }); + + content += `
+

${this.currentLanguage === 'de' ? 'Denk daran:' : 'Remember:'} ${t.actionReminder}

+
`; + + // Create and show modal or add to thinking steps + const guidanceDiv = document.createElement('div'); + guidanceDiv.className = 'thinking-step highlight'; + guidanceDiv.innerHTML = content; + guidanceDiv.style.animation = 'slideInLeft 0.5s ease-out'; + + this.thinkingSteps.appendChild(guidanceDiv); + guidanceDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + + showLoading() { + if (this.loadingOverlay) { + this.loadingOverlay.classList.remove('hidden'); + } + } + + hideLoading() { + if (this.loadingOverlay) { + this.loadingOverlay.classList.add('hidden'); + } + } + + showMessage(message, type = 'info') { + // Create a temporary message element + const messageDiv = document.createElement('div'); + messageDiv.className = `message-popup ${type}`; + messageDiv.textContent = message; + messageDiv.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + background: ${type === 'error' ? '#fed7d7' : type === 'warning' ? '#fef5e7' : '#e6fffa'}; + color: ${type === 'error' ? '#c53030' : type === 'warning' ? '#d69e2e' : '#00695c'}; + padding: 15px 20px; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + z-index: 1001; + animation: slideInRight 0.3s ease-out; + max-width: 300px; + `; + + document.body.appendChild(messageDiv); + + // Remove after 3 seconds + setTimeout(() => { + messageDiv.style.animation = 'slideOutRight 0.3s ease-out'; + setTimeout(() => messageDiv.remove(), 300); + }, 3000); + } + + delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } +} + +// Initialize the application when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + console.log('DOM loaded, initializing KidsAI Explorer...'); + + // Hide loading screen immediately on page load + const loadingOverlay = document.getElementById('loading'); + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); + console.log('Loading overlay hidden on page load'); + } + + // Emergency fallback - hide loading after 1 second regardless + setTimeout(() => { + if (loadingOverlay && !loadingOverlay.classList.contains('hidden')) { + loadingOverlay.classList.add('hidden'); + console.log('Emergency: Loading overlay hidden by timeout'); + } + }, 1000); + + // Check if translations are loaded + if (typeof translations === 'undefined') { + console.error('Translations not loaded! Creating fallback...'); + window.translations = { + en: { + title: "KidsAI Explorer", + tagline: "Think, Learn, Discover Together!", + encouragements: ["Great question! You're thinking like a real scientist! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Let's break this down", + content: "What's the main thing you want to understand?" + } + ] + } + }, + actionTitles: { + research: "🔍 Research Ideas", + experiment: "🧪 Experiment Ideas", + discuss: "💬 Discussion Ideas" + }, + actionReminder: "Remember: The goal is to discover the answer yourself!" + }, + de: { + title: "KidsAI Explorer", + tagline: "Denken, Lernen, Entdecken - Zusammen!", + encouragements: ["Tolle Frage! Du denkst wie ein echter Wissenschaftler! 🔬"], + thinkingFrameworks: { + general: { + steps: [ + { + title: "🎯 Lass uns das aufteilen", + content: "Was ist das Wichtigste, was du verstehen möchtest?" + } + ] + } + }, + actionTitles: { + research: "🔍 Forschungsideen", + experiment: "🧪 Experiment-Ideen", + discuss: "💬 Diskussionsideen" + }, + actionReminder: "Denk daran: Das Ziel ist es, die Antwort selbst zu entdecken!" + } + }; + } + + try { + new KidsAIExplorer(); + console.log('KidsAI Explorer initialized successfully'); + } catch (error) { + console.error('Error initializing KidsAIExplorer:', error); + // Ensure loading is hidden even if there's an error + if (loadingOverlay) { + loadingOverlay.classList.add('hidden'); + } + } +}); + +// Add some fun interactive effects +document.addEventListener('DOMContentLoaded', () => { + // Add sparkle effect on click + document.addEventListener('click', (e) => { + if (e.target.classList.contains('ask-btn') || e.target.classList.contains('action-btn')) { + createSparkleEffect(e.target); + } + }); + + // Add hover sound effect simulation (visual feedback) + const interactiveElements = document.querySelectorAll('.suggestion-card, .ask-btn, .action-btn'); + interactiveElements.forEach(element => { + element.addEventListener('mouseenter', () => { + element.style.transform = element.style.transform || 'translateY(-2px)'; + }); + }); +}); + +function createSparkleEffect(element) { + for (let i = 0; i < 6; i++) { + const sparkle = document.createElement('div'); + sparkle.innerHTML = '✨'; + sparkle.style.cssText = ` + position: absolute; + pointer-events: none; + font-size: 1rem; + animation: sparkle 1s ease-out forwards; + z-index: 1000; + `; + + const rect = element.getBoundingClientRect(); + sparkle.style.left = (rect.left + Math.random() * rect.width) + 'px'; + sparkle.style.top = (rect.top + Math.random() * rect.height) + 'px'; + + document.body.appendChild(sparkle); + + setTimeout(() => sparkle.remove(), 1000); + } +} + +// Add sparkle animation CSS +const sparkleCSS = ` +@keyframes sparkle { + 0% { + opacity: 1; + transform: translateY(0) scale(0); + } + 50% { + opacity: 1; + transform: translateY(-20px) scale(1); + } + 100% { + opacity: 0; + transform: translateY(-40px) scale(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(100px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100px); + } +} + +.action-guidance ul { + margin: 15px 0; + padding-left: 20px; +} + +.action-guidance li { + margin: 8px 0; + color: #4a5568; + font-weight: 500; +} +`; + +// Inject the sparkle CSS +const styleSheet = document.createElement('style'); +styleSheet.textContent = sparkleCSS; +document.head.appendChild(styleSheet); diff --git a/html/kidsai/server.log b/html/kidsai/server.log new file mode 100644 index 0000000..b802d4f --- /dev/null +++ b/html/kidsai/server.log @@ -0,0 +1,8 @@ +nohup: ignoring input +[dotenv@17.0.0] injecting env (4) from .env – 🔐 encrypt with dotenvx: https://dotenvx.com +🚀 KidsAI Explorer server running on port 3002 +📖 Visit http://localhost:3002 to start exploring! +🤖 AI Services: OpenAI=true, HuggingFace=true +🤖 Calling OpenAI with GPT-3.5-turbo... +✅ OpenAI response received: 1. Have you ever noticed how birds' wings are shaped differently than their bodies? +2. Can you think... diff --git a/html/kidsai/test-ai.html b/html/kidsai/test-ai.html index df9d587..d2a72aa 100644 --- a/html/kidsai/test-ai.html +++ b/html/kidsai/test-ai.html @@ -39,7 +39,7 @@
- - diff --git a/html/kidsai/test-simple.html b/html/kidsai/test-simple.html new file mode 100644 index 0000000..9e75fa9 --- /dev/null +++ b/html/kidsai/test-simple.html @@ -0,0 +1,70 @@ + + + + + + KidsAI Simple Test + + + +

KidsAI Simple Test

+ +
+ + +
+ +
+

Suggestion Cards:

+
How do birds fly?
+
Why is water wet?
+
+ +
+ + + +