interactive module activated

html/kidsai/script.js

@@ -974,52 +974,55 @@ class KidsAIExplorer {
     }
 
     setupThinkingInteraction(stepDiv, stepId) {
-        const textarea = stepDiv.querySelector('.thinking-textarea');
+        const textarea = stepDiv.querySelector(`textarea[data-step="${stepId}"]`);
-        const shareBtn = stepDiv.querySelector('.share-thought-btn');
+        const shareButton = stepDiv.querySelector(`button[data-step="${stepId}"]`);
-        const feedbackDiv = stepDiv.querySelector('.thinking-feedback');
+        const feedbackDiv = stepDiv.querySelector(`div[data-step="${stepId}"]`);
         
-        if (!textarea || !shareBtn || !feedbackDiv) return;
+        if (!textarea || !shareButton || !feedbackDiv) return;
-        
+
-        // Show share button when user types something
+        // Show share button when text is entered
         textarea.addEventListener('input', () => {
-            const hasContent = textarea.value.trim().length > 0;
+            const hasText = textarea.value.trim().length > 0;
-            shareBtn.style.display = hasContent ? 'inline-block' : 'none';
+            shareButton.style.display = hasText ? 'inline-block' : 'none';
         });
-        
+
-        // Handle Enter key to share thought
+        // Handle sharing thoughts with AI
-        textarea.addEventListener('keypress', (e) => {
+        shareButton.addEventListener('click', () => {
-            if (e.key === 'Enter' && !e.shiftKey && textarea.value.trim()) {
-                e.preventDefault();
-                this.shareThought(stepId, textarea.value.trim(), shareBtn, feedbackDiv);
-            }
-        });
-        
-        // Handle share button click
-        shareBtn.addEventListener('click', () => {
             const thought = textarea.value.trim();
             if (thought) {
-                this.shareThought(stepId, thought, shareBtn, feedbackDiv);
+                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 shareThought(stepId, thought, shareBtn, feedbackDiv) {
+    async shareThoughtWithAI(stepId, thought, feedbackDiv, shareButton) {
         const currentQuestion = this.questionInput.value.trim();
         
         try {
             // Show loading state
-            shareBtn.innerHTML = `<span class="btn-icon">⏳</span> ${this.currentLanguage === 'de' ? 'Wird geteilt...' : 'Sharing...'}`;
+            shareButton.innerHTML = `<span class="btn-icon">⏳</span> ${this.currentLanguage === 'de' ? 'Denke...' : 'Thinking...'}`;
-            shareBtn.disabled = true;
+            shareButton.disabled = true;
-            
+
-            const response = await fetch('/api/think-response', {
+            const response = await fetch('/api/thinking-feedback', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
                     question: currentQuestion,
-                    thought: thought,
                     stepNumber: stepId,
+                    userThought: thought,
                     language: this.currentLanguage
                 })
             });
@@ -1031,244 +1034,70 @@ class KidsAIExplorer {
             const data = await response.json();
             
             if (data.success) {
-                this.displayThinkingFeedback(data.feedback, feedbackDiv, shareBtn);
+                this.displayThinkingFeedback(feedbackDiv, data.feedback, shareButton);
             } else {
                 throw new Error(data.error || 'Failed to get feedback');
             }
             
         } catch (error) {
-            console.error('Error sharing thought:', error);
+            console.error('Error getting thinking feedback:', error);
             
-            // Show fallback feedback
+            // Show fallback positive feedback
             const fallbackFeedback = {
-                text: this.currentLanguage === 'de' 
+                response: this.currentLanguage === 'de' 
-                    ? 'Toller Gedanke! Du denkst wirklich gut nach.'
+                    ? "Interessante Gedanken! Du denkst gut nach. 👍"
-                    : 'Great thought! You\'re really thinking well.',
+                    : "Interesting thoughts! You're thinking well. 👍",
-                type: 'fallback'
+                type: 'positive'
             };
             
-            this.displayThinkingFeedback(fallbackFeedback, feedbackDiv, shareBtn);
+            this.displayThinkingFeedback(feedbackDiv, fallbackFeedback, shareButton);
         }
     }
 
-    displayThinkingFeedback(feedback, feedbackDiv, shareBtn) {
+    displayThinkingFeedback(feedbackDiv, feedback, shareButton) {
-        // Hide share button and show feedback
+        // Determine feedback style based on type
-        shareBtn.style.display = 'none';
+        const feedbackClass = feedback.type === 'positive' ? 'positive-feedback' : 
+                             feedback.type === 'neutral' ? 'neutral-feedback' : 'encouraging-feedback';
         
         feedbackDiv.innerHTML = `
-            <div class="feedback-content">
+            <div class="ai-feedback ${feedbackClass}">
-                <div class="feedback-icon">💭</div>
+                <div class="feedback-icon">🤖</div>
-                <div class="feedback-text">${feedback.text}</div>
+                <div class="feedback-content">
-                <div class="feedback-source">${feedback.type === 'ai-powered' ? '✨ AI-powered' : '🤖 Offline'}</div>
+                    <p class="feedback-text">${feedback.response}</p>
+                    <small class="feedback-source">✨ AI Teacher</small>
+                </div>
             </div>
         `;
         
+        // Show feedback with animation
         feedbackDiv.style.display = 'block';
         feedbackDiv.style.opacity = '0';
-        feedbackDiv.style.transform = 'translateY(10px)';
+        feedbackDiv.style.transform = 'translateY(-10px)';
         
-        // Animate in
         setTimeout(() => {
             feedbackDiv.style.transition = 'all 0.4s ease-out';
             feedbackDiv.style.opacity = '1';
             feedbackDiv.style.transform = 'translateY(0)';
         }, 100);
-        
-        // Scroll into view
-        feedbackDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
 
-    // Update checkIfChildEngaged to also check for feedback received
+        // Update share button to "shared" state
-    checkIfChildEngaged() {
+        shareButton.innerHTML = `<span class="btn-icon">✓</span> ${this.currentLanguage === 'de' ? 'Geteilt!' : 'Shared!'}`;
-        // Check if any of the thinking textareas have content or received feedback
+        shareButton.disabled = false;
-        const thinkingAreas = this.thinkingSteps.querySelectorAll('.step-thinking-space textarea');
+        shareButton.style.background = 'rgba(76, 175, 80, 0.8)';
-        const feedbackAreas = this.thinkingSteps.querySelectorAll('.thinking-feedback[style*="block"]');
         
-        for (let textarea of thinkingAreas) {
+        // Add option to share again after editing
-            if (textarea.value.trim().length > 0) {
+        const textarea = feedbackDiv.parentElement.querySelector('textarea');
-                return true;
+        textarea.addEventListener('input', () => {
+            if (shareButton.innerHTML.includes('✓')) {
+                shareButton.innerHTML = `<span class="btn-icon">💭</span> ${this.currentLanguage === 'de' ? 'Neue Gedanken teilen' : 'Share New Thoughts'}`;
+                shareButton.style.background = '';
             }
-        }
+        }, { once: true });
-        
-        // If child received any feedback, they've engaged
-        return feedbackAreas.length > 0;
     }
-
-    // ...existing code...
 }
 
-// Initialize the application when DOM is loaded
+// Initialize the app when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', function() {
-    console.log('DOM loaded, initializing KidsAI Explorer...');
+    window.kidsAI = new KidsAIExplorer();
-    
-    // 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);

html/kidsai/style.css

@@ -330,11 +330,11 @@ body {
 
 .step-thinking-space {
     margin-top: 15px;
+    padding: 15px;
     background: rgba(255, 255, 255, 0.7);
     border-radius: 12px;
-    padding: 15px;
+    backdrop-filter: blur(10px);
-    backdrop-filter: blur(5px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
-    border: 1px solid rgba(102, 126, 234, 0.1);
 }
 
 .step-thinking-space textarea {
@@ -1429,20 +1429,18 @@ body {
 .thinking-textarea {
     width: 100%;
     padding: 12px;
-    border: 2px solid #e1e8ed;
+    border: 2px solid #e0e6ed;
     border-radius: 10px;
-    font-family: inherit;
+    font-size: 1rem;
-    font-size: 0.95rem;
     line-height: 1.4;
     resize: vertical;
     transition: all 0.3s ease;
-    background: #f8f9fa;
+    font-family: inherit;
 }
 
 .thinking-textarea:focus {
     outline: none;
     border-color: #667eea;
-    background: white;
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
 
@@ -1450,20 +1448,21 @@ body {
     background: linear-gradient(145deg, #667eea, #764ba2);
     border: none;
     color: white;
-    padding: 8px 15px;
+    padding: 8px 16px;
     border-radius: 20px;
-    font-size: 0.85rem;
+    font-size: 0.9rem;
-    font-weight: 600;
+    font-weight: 500;
     cursor: pointer;
     margin-top: 10px;
     transition: all 0.3s ease;
-    opacity: 0;
+    display: inline-flex;
-    animation: fadeInUp 0.3s ease-out forwards;
+    align-items: center;
+    gap: 5px;
 }
 
 .share-thought-btn:hover {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
-    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }
 
 .share-thought-btn:disabled {
@@ -1472,93 +1471,87 @@ body {
     transform: none;
 }
 
+/* AI Feedback Styles */
 .thinking-feedback {
     margin-top: 15px;
-    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
-    border-left: 4px solid #667eea;
-    border-radius: 0 10px 10px 0;
-    overflow: hidden;
 }
 
-.feedback-content {
+.ai-feedback {
-    padding: 15px;
     display: flex;
     align-items: flex-start;
     gap: 12px;
+    padding: 15px;
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.positive-feedback {
+    background: linear-gradient(145deg, rgba(76, 175, 80, 0.9), rgba(69, 160, 73, 0.9));
+    color: white;
+}
+
+.neutral-feedback {
+    background: linear-gradient(145deg, rgba(33, 150, 243, 0.9), rgba(30, 136, 229, 0.9));
+    color: white;
+}
+
+.encouraging-feedback {
+    background: linear-gradient(145deg, rgba(255, 152, 0, 0.9), rgba(245, 124, 0, 0.9));
+    color: white;
 }
 
 .feedback-icon {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     flex-shrink: 0;
-    margin-top: 2px;
+}
+
+.feedback-content {
+    flex: 1;
 }
 
 .feedback-text {
-    flex: 1;
+    margin: 0 0 5px 0;
-    color: #2c3e50;
+    font-size: 1rem;
-    font-size: 0.95rem;
+    line-height: 1.4;
-    line-height: 1.5;
     font-weight: 500;
 }
 
 .feedback-source {
-    font-size: 0.75rem;
+    opacity: 0.8;
-    color: #6c757d;
+    font-size: 0.8rem;
-    font-weight: 500;
+    font-style: italic;
-    margin-top: 5px;
-    text-align: right;
 }
 
-/* Improved step thinking space layout */
+/* Step thinking space improvements */
 .step-thinking-space {
     margin-top: 15px;
+    padding: 15px;
     background: rgba(255, 255, 255, 0.7);
     border-radius: 12px;
-    padding: 15px;
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(102, 126, 234, 0.1);
-}
-
-/* Animation for interactive elements */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Enhanced thinking step for interactive mode */
-.thinking-step {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(102, 126, 234, 0.1);
     backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 /* Mobile responsiveness for interactive thinking */
 @media (max-width: 768px) {
-    .feedback-content {
+    .thinking-textarea {
-        flex-direction: column;
+        font-size: 16px; /* Prevents zoom on iOS */
-        gap: 8px;
-    }
-    
-    .feedback-icon {
-        align-self: flex-start;
-    }
-    
-    .step-thinking-space {
-        padding: 12px;
     }
     
     .share-thought-btn {
         width: 100%;
-        padding: 10px;
+        justify-content: center;
+        padding: 10px 16px;
+    }
+    
+    .ai-feedback {
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+    }
+    
+    .feedback-icon {
+        align-self: center;
     }
 }