Add interactive visual content system for kids

✨ New Features:
- Visual animations for science concepts (sky, birds, water, etc.)
- Interactive educational illustrations with emoji and animations
- Topic-based visual content mapping system
- Kid-friendly CSS animations and effects
- Enhanced learning experience for ages 8-12

🎨 Visual Content Includes:
- Sky/atmosphere light scattering animation
- Bird flight mechanics visualization
- Water molecule structure and behavior
- Earth orbit and seasons explanation
- Computer data flow representation
- Brain and dream visualization
- Rainbow light spectrum breakdown
- General thinking process animations

📱 Features:
- Responsive design for all devices
- Smooth animations and transitions
- Auto-detection of topics from questions
- Multi-language visual descriptions
- Engaging educational content

index.html

@@ -20,6 +20,7 @@
     <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
     
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="visual-animations.css">
     <link rel="stylesheet" href="fallback.css">
     <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -177,6 +178,7 @@
     </script>
 
     <script src="translations.js?v=20250629181500"></script>
+    <script src="visual-content.js?v=20250713170000"></script>
     <script src="ai-responses.js?v=20250629181500"></script>
     <script src="script-new.js?v=20250629181500"></script>
     

script-new.js

@@ -236,6 +236,9 @@ class KidsAIExplorer {
         conversationContainer.className = 'conversation-container';
         this.thinkingSteps.appendChild(conversationContainer);
 
+        // Get the original question for visual content
+        const currentQuestion = this.questionInput ? this.questionInput.value.trim() : '';
+        
         // Show initial encouragement
         const welcomeStep = document.createElement('div');
         welcomeStep.className = 'conversation-step visible';
@@ -263,6 +266,31 @@ class KidsAIExplorer {
         `;
         conversationContainer.appendChild(welcomeStep);
 
+        // Add visual content if available
+        if (typeof VisualContent !== 'undefined' && currentQuestion) {
+            const visualContent = VisualContent.getVisualForTopic(currentQuestion);
+            if (visualContent) {
+                const visualStep = document.createElement('div');
+                visualStep.className = 'conversation-step visual-step visible';
+                
+                const visualDescription = visualContent.description[this.currentLanguage] || visualContent.description['en'];
+                
+                visualStep.innerHTML = `
+                    <div class="ai-message">
+                        <div class="message-header">
+                            <span class="ai-avatar">${visualContent.emoji}</span>
+                            <span class="ai-label">${aiTeacherLabel}</span>
+                        </div>
+                        <div class="message-content">
+                            <p>${visualDescription}</p>
+                            ${visualContent.illustration}
+                        </div>
+                    </div>
+                `;
+                conversationContainer.appendChild(visualStep);
+            }
+        }
+
         // Add thinking questions as interactive steps
         const fallbackQuestions = [
             t['fallback-question-1'] || "What do you already know about this topic?",

style.css

@@ -1334,3 +1334,54 @@ body {
     background: rgba(255, 255, 255, 0.8);
     border-left-color: #e53e3e;
 }
+
+/* Visual Content Integration */
+.visual-step {
+    margin: 20px 0;
+}
+
+.visual-step .ai-message {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.visual-step .message-content {
+    padding: 20px;
+}
+
+.visual-step .message-content p {
+    margin-bottom: 15px;
+    font-weight: 600;
+    color: white;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Enhanced conversation styling */
+.conversation-container {
+    max-width: 100%;
+    margin: 0 auto;
+}
+
+.conversation-step {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.6s ease-out;
+    margin-bottom: 20px;
+}
+
+.conversation-step.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Responsive visual content */
+@media (max-width: 768px) {
+    .visual-concept {
+        margin: 10px -10px;
+        border-radius: 10px;
+    }
+    
+    .visual-step .message-content {
+        padding: 15px;
+    }
+}

visual-animations.css

@@ -0,0 +1,571 @@
+/* Visual Animations for Educational Concepts */
+
+/* General Visual Concept Styles */
+.visual-concept {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 15px 0;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    animation: slideInUp 0.8s ease-out;
+}
+
+.visual-concept::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.1), transparent);
+    animation: shimmer 3s infinite;
+    pointer-events: none;
+}
+
+/* Sky/Atmosphere Animation */
+.sky-layers {
+    height: 200px;
+    position: relative;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.atmosphere-layer {
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.light-rays {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.light-ray {
+    position: absolute;
+    width: 3px;
+    height: 50px;
+    background: linear-gradient(to bottom, transparent, rgba(255, 255, 0, 0.6), transparent);
+    animation: lightScatter 2s infinite ease-in-out;
+}
+
+.light-ray:nth-child(1) {
+    left: 20%;
+    animation-delay: 0s;
+}
+
+.light-ray:nth-child(2) {
+    left: 50%;
+    animation-delay: 0.5s;
+}
+
+.light-ray:nth-child(3) {
+    left: 80%;
+    animation-delay: 1s;
+}
+
+.scattered-light {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 100, 255, 0.8);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    animation: bounce 2s infinite;
+}
+
+/* Bird Flight Animation */
+.bird-flight {
+    height: 180px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.bird {
+    position: relative;
+    animation: bobbing 2s infinite ease-in-out;
+}
+
+.wing {
+    position: absolute;
+    font-size: 24px;
+    animation: wingFlap 1s infinite;
+}
+
+.wing-left {
+    left: -30px;
+    transform-origin: right center;
+}
+
+.wing-right {
+    right: -30px;
+    transform-origin: left center;
+}
+
+.bird-body {
+    font-size: 32px;
+}
+
+.air-currents {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.air-flow {
+    position: absolute;
+    font-size: 14px;
+    padding: 5px 10px;
+    border-radius: 15px;
+    animation: floatUpDown 3s infinite ease-in-out;
+}
+
+.up-flow {
+    top: 20%;
+    left: 20%;
+    background: rgba(0, 255, 0, 0.2);
+    animation-delay: 0s;
+}
+
+.down-flow {
+    bottom: 20%;
+    right: 20%;
+    background: rgba(255, 0, 0, 0.2);
+    animation-delay: 1.5s;
+}
+
+/* Water Molecule Animation */
+.water-molecules {
+    height: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.molecule {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    position: relative;
+    animation: moleculeVibrate 1.5s infinite;
+}
+
+.atom {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.hydrogen {
+    background: #ff6b6b;
+    color: white;
+}
+
+.oxygen {
+    background: #4ecdc4;
+    color: white;
+}
+
+.bond {
+    width: 20px;
+    height: 2px;
+    background: #333;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.water-droplet {
+    font-size: 48px;
+    animation: dropletBounce 2s infinite;
+}
+
+.wetness-effect {
+    font-size: 12px;
+    color: #666;
+    max-width: 200px;
+}
+
+/* Seasons/Earth Animation */
+.solar-system {
+    height: 200px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sun {
+    font-size: 48px;
+    position: absolute;
+    left: 20px;
+    animation: sunGlow 3s infinite ease-in-out;
+}
+
+.earth-orbit {
+    width: 200px;
+    height: 200px;
+    border: 2px dashed #ccc;
+    border-radius: 50%;
+    position: relative;
+    animation: orbit 8s infinite linear;
+}
+
+.earth {
+    font-size: 32px;
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.earth.tilted {
+    transform: translateX(-50%) rotate(23.5deg);
+}
+
+.season-labels {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.season {
+    position: absolute;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.season.summer {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.season.winter {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Computer/Data Flow Animation */
+.computer-brain {
+    height: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.cpu {
+    font-size: 24px;
+    padding: 10px;
+    background: linear-gradient(45deg, #667eea, #764ba2);
+    color: white;
+    border-radius: 10px;
+    animation: cpuPulse 2s infinite;
+}
+
+.data-flow {
+    display: flex;
+    gap: 20px;
+}
+
+.binary-code {
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+    color: #00ff00;
+    background: #000;
+    padding: 5px 10px;
+    border-radius: 5px;
+    animation: binaryScroll 1s infinite;
+}
+
+.binary-code:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+.memory {
+    font-size: 18px;
+    padding: 8px 12px;
+    background: #f0f0f0;
+    border-radius: 8px;
+}
+
+/* Dream Animation */
+.sleeping-brain {
+    height: 180px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.brain {
+    font-size: 48px;
+    animation: brainPulse 3s infinite ease-in-out;
+}
+
+.dream-bubbles {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.dream-bubble {
+    position: absolute;
+    font-size: 24px;
+    animation: dreamFloat 4s infinite ease-in-out;
+}
+
+.dream-bubble:nth-child(1) {
+    left: 10%;
+    animation-delay: 0s;
+}
+
+.dream-bubble:nth-child(2) {
+    left: 50%;
+    animation-delay: 1.3s;
+}
+
+.dream-bubble:nth-child(3) {
+    right: 10%;
+    animation-delay: 2.6s;
+}
+
+.sleep-waves {
+    position: absolute;
+    bottom: 20px;
+    font-size: 18px;
+    color: #667eea;
+    animation: waveMove 2s infinite;
+}
+
+/* Rainbow/Light Spectrum Animation */
+.light-spectrum {
+    height: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.white-light {
+    font-size: 24px;
+    animation: lightPulse 2s infinite;
+}
+
+.prism {
+    font-size: 32px;
+    animation: prismRotate 4s infinite linear;
+}
+
+.rainbow-colors {
+    display: flex;
+    gap: 10px;
+    animation: colorSpread 3s infinite ease-in-out;
+}
+
+.rainbow-colors span {
+    font-weight: bold;
+    padding: 4px 8px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.8);
+    animation: colorPulse 1s infinite ease-in-out;
+}
+
+/* General Thinking Animation */
+.thinking-process {
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.brain-icon {
+    font-size: 48px;
+    animation: thinkingPulse 2s infinite ease-in-out;
+}
+
+.thought-bubbles {
+    display: flex;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+.bubble {
+    font-size: 24px;
+    animation: bubbleFloat 3s infinite ease-in-out;
+}
+
+.bubble:nth-child(1) { animation-delay: 0s; }
+.bubble:nth-child(2) { animation-delay: 1s; }
+.bubble:nth-child(3) { animation-delay: 2s; }
+
+/* Keyframe Animations */
+@keyframes shimmer {
+    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes lightScatter {
+    0%, 100% { opacity: 0.3; transform: translateY(0); }
+    50% { opacity: 1; transform: translateY(-10px); }
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
+    40% { transform: translateX(-50%) translateY(-10px); }
+    60% { transform: translateX(-50%) translateY(-5px); }
+}
+
+@keyframes bobbing {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes wingFlap {
+    0%, 100% { transform: rotateZ(0deg); }
+    50% { transform: rotateZ(-30deg); }
+}
+
+@keyframes floatUpDown {
+    0%, 100% { transform: translateY(0); opacity: 0.7; }
+    50% { transform: translateY(-15px); opacity: 1; }
+}
+
+@keyframes moleculeVibrate {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-2px); }
+    75% { transform: translateX(2px); }
+}
+
+@keyframes dropletBounce {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+@keyframes sunGlow {
+    0%, 100% { transform: scale(1); filter: brightness(1); }
+    50% { transform: scale(1.1); filter: brightness(1.2); }
+}
+
+@keyframes orbit {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes cpuPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+@keyframes binaryScroll {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes brainPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+@keyframes dreamFloat {
+    0% { opacity: 0; transform: translateY(30px); }
+    25% { opacity: 1; transform: translateY(0); }
+    75% { opacity: 1; transform: translateY(-20px); }
+    100% { opacity: 0; transform: translateY(-40px); }
+}
+
+@keyframes waveMove {
+    0% { transform: translateX(-10px); }
+    50% { transform: translateX(10px); }
+    100% { transform: translateX(-10px); }
+}
+
+@keyframes lightPulse {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.3); }
+}
+
+@keyframes prismRotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes colorSpread {
+    0% { transform: scale(0.8); opacity: 0.8; }
+    50% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(0.8); opacity: 0.8; }
+}
+
+@keyframes colorPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+@keyframes thinkingPulse {
+    0%, 100% { transform: scale(1) rotate(0deg); }
+    25% { transform: scale(1.05) rotate(-2deg); }
+    75% { transform: scale(1.05) rotate(2deg); }
+}
+
+@keyframes bubbleFloat {
+    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
+    50% { transform: translateY(-15px) scale(1.1); opacity: 1; }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .visual-concept {
+        padding: 15px;
+        margin: 10px 0;
+    }
+    
+    .sky-layers,
+    .bird-flight,
+    .solar-system {
+        height: 150px;
+    }
+    
+    .bird-body, .earth, .brain {
+        font-size: 24px;
+    }
+    
+    .sun {
+        font-size: 36px;
+    }
+}

visual-content.js

@@ -0,0 +1,224 @@
+// Visual Content System for KidsAI Explorer
+// Maps topics and concepts to appropriate visual elements for kids aged 8-12
+
+const VisualContent = {
+    // Topic-based visual mappings
+    topicVisuals: {
+        // Science topics
+        'sky': {
+            emoji: '🌌',
+            animation: 'sky-animation',
+            illustration: `
+                <div class="visual-concept" id="sky-concept">
+                    <div class="sky-layers">
+                        <div class="atmosphere-layer" style="background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);">
+                            <div class="light-rays">
+                                <div class="light-ray"></div>
+                                <div class="light-ray"></div>
+                                <div class="light-ray"></div>
+                            </div>
+                            <div class="scattered-light">💙 Blue light scatters more!</div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "Watch how sunlight scatters in our atmosphere!",
+                de: "Schau, wie das Sonnenlicht in unserer Atmosphäre gestreut wird!"
+            }
+        },
+        
+        'bird': {
+            emoji: '🕊️',
+            animation: 'bird-flight-animation',
+            illustration: `
+                <div class="visual-concept" id="bird-concept">
+                    <div class="bird-flight">
+                        <div class="bird">
+                            <div class="wing wing-left">🪶</div>
+                            <div class="bird-body">🐦</div>
+                            <div class="wing wing-right">🪶</div>
+                        </div>
+                        <div class="air-currents">
+                            <div class="air-flow up-flow">⬆️ Lift</div>
+                            <div class="air-flow down-flow">⬇️ Gravity</div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "See how birds use their wings to create lift!",
+                de: "Sieh, wie Vögel ihre Flügel nutzen, um Auftrieb zu erzeugen!"
+            }
+        },
+        
+        'water': {
+            emoji: '💧',
+            animation: 'water-molecule-animation',
+            illustration: `
+                <div class="visual-concept" id="water-concept">
+                    <div class="water-molecules">
+                        <div class="molecule">
+                            <div class="atom hydrogen">H</div>
+                            <div class="atom oxygen">O</div>
+                            <div class="atom hydrogen">H</div>
+                            <div class="bond"></div>
+                        </div>
+                        <div class="water-droplet">💧</div>
+                        <div class="wetness-effect">Makes things wet because molecules stick!</div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "Discover why water feels wet!",
+                de: "Entdecke, warum sich Wasser nass anfühlt!"
+            }
+        },
+        
+        'seasons': {
+            emoji: '🌍',
+            animation: 'earth-orbit-animation',
+            illustration: `
+                <div class="visual-concept" id="seasons-concept">
+                    <div class="solar-system">
+                        <div class="sun">☀️</div>
+                        <div class="earth-orbit">
+                            <div class="earth tilted">🌍</div>
+                            <div class="season-labels">
+                                <span class="season summer">Summer ☀️</span>
+                                <span class="season winter">Winter ❄️</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "See how Earth's tilt creates seasons!",
+                de: "Sieh, wie die Neigung der Erde die Jahreszeiten entstehen lässt!"
+            }
+        },
+        
+        'computer': {
+            emoji: '💻',
+            animation: 'data-flow-animation',
+            illustration: `
+                <div class="visual-concept" id="computer-concept">
+                    <div class="computer-brain">
+                        <div class="cpu">🧠 CPU</div>
+                        <div class="data-flow">
+                            <div class="binary-code">1010101</div>
+                            <div class="binary-code">0110011</div>
+                        </div>
+                        <div class="memory">💾 Memory</div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "Watch how computers think with 1s and 0s!",
+                de: "Schau, wie Computer mit 1en und 0en denken!"
+            }
+        },
+        
+        'dream': {
+            emoji: '💭',
+            animation: 'brain-dream-animation',
+            illustration: `
+                <div class="visual-concept" id="dream-concept">
+                    <div class="sleeping-brain">
+                        <div class="brain">🧠</div>
+                        <div class="dream-bubbles">
+                            <div class="dream-bubble">🌈</div>
+                            <div class="dream-bubble">🦄</div>
+                            <div class="dream-bubble">🏰</div>
+                        </div>
+                        <div class="sleep-waves">~~~</div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "See your brain creating dreams while you sleep!",
+                de: "Sieh, wie dein Gehirn Träume erschafft, während du schläfst!"
+            }
+        },
+        
+        'rainbow': {
+            emoji: '🌈',
+            animation: 'light-prism-animation',
+            illustration: `
+                <div class="visual-concept" id="rainbow-concept">
+                    <div class="light-spectrum">
+                        <div class="white-light">🌞 White Light</div>
+                        <div class="prism">🔺</div>
+                        <div class="rainbow-colors">
+                            <span style="color: red;">Red</span>
+                            <span style="color: orange;">Orange</span>
+                            <span style="color: yellow;">Yellow</span>
+                            <span style="color: green;">Green</span>
+                            <span style="color: blue;">Blue</span>
+                            <span style="color: indigo;">Indigo</span>
+                            <span style="color: violet;">Violet</span>
+                        </div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "Watch white light split into rainbow colors!",
+                de: "Schau, wie weißes Licht in Regenbogenfarben aufgeteilt wird!"
+            }
+        }
+    },
+
+    // Get visual content for a question/topic
+    getVisualForTopic: function(question) {
+        const questionLower = question.toLowerCase();
+        
+        // Check for topic keywords
+        for (const [topic, visual] of Object.entries(this.topicVisuals)) {
+            if (questionLower.includes(topic) || 
+                this.getTopicKeywords(topic).some(keyword => questionLower.includes(keyword))) {
+                return visual;
+            }
+        }
+        
+        // Default visual for general questions
+        return {
+            emoji: '🤔',
+            animation: 'thinking-animation',
+            illustration: `
+                <div class="visual-concept" id="general-concept">
+                    <div class="thinking-process">
+                        <div class="brain-icon">🧠</div>
+                        <div class="thought-bubbles">
+                            <div class="bubble">💡</div>
+                            <div class="bubble">❓</div>
+                            <div class="bubble">🔍</div>
+                        </div>
+                    </div>
+                </div>
+            `,
+            description: {
+                en: "Let's think about this together!",
+                de: "Lass uns gemeinsam darüber nachdenken!"
+            }
+        };
+    },
+
+    // Get additional keywords for topic matching
+    getTopicKeywords: function(topic) {
+        const keywords = {
+            'sky': ['blue', 'himmel', 'blau', 'atmosphere', 'atmosphäre'],
+            'bird': ['fly', 'flying', 'fliegen', 'wing', 'flügel', 'vogel'],
+            'water': ['wet', 'nass', 'liquid', 'flüssig', 'molecule', 'molekül'],
+            'seasons': ['winter', 'summer', 'spring', 'autumn', 'jahreszeit', 'sommer', 'herbst', 'frühling'],
+            'computer': ['work', 'funktioniert', 'processor', 'prozessor', 'digital'],
+            'dream': ['sleep', 'schlafen', 'träume', 'night', 'nacht'],
+            'rainbow': ['colors', 'farben', 'light', 'licht', 'regenbogen', 'prism', 'prisma']
+        };
+        return keywords[topic] || [];
+    }
+};
+
+// Export for use in other files
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = VisualContent;
+}