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
This commit is contained in:
root
224
visual-content.js
Normal file
224
visual-content.js
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user