I'm here to help you become a super smart problem solver! Instead of giving you answers, I'll help you think like a detective and find solutions yourself!
${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?'}
+ `;
+
+ 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.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!'}
${this.currentLanguage === 'de'
+ ? 'Versuche erst, deine Gedanken in die Textfelder zu schreiben! Das hilft dir beim Lernen.'
+ : 'Try writing your thoughts in the text boxes first! This helps you learn better.'}
+
+ `;
+
+ encouragementDiv.style.opacity = '0';
+ encouragementDiv.style.transform = 'scale(0.8)';
+ this.thinkingSteps.appendChild(encouragementDiv);
+
+ // Animate in
+ setTimeout(() => {
+ encouragementDiv.style.transition = 'all 0.4s ease-out';
+ encouragementDiv.style.opacity = '1';
+ encouragementDiv.style.transform = 'scale(1)';
+ }, 50);
+
+ // Remove after 3 seconds
+ setTimeout(() => {
+ encouragementDiv.style.transition = 'all 0.4s ease-out';
+ encouragementDiv.style.opacity = '0';
+ encouragementDiv.style.transform = 'scale(0.8)';
+ setTimeout(() => {
+ if (encouragementDiv.parentNode) {
+ encouragementDiv.remove();
+ }
+ }, 400);
+ }, 3000);
+ }
+
+ // ...existing code...
+}
+
+// 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/style.css b/html/kidsai/style.css
new file mode 100755
index 0000000..5268ed4
--- /dev/null
+++ b/html/kidsai/style.css
@@ -0,0 +1,1419 @@
+/* Global Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ min-height: 100vh;
+ color: #333;
+ overflow-x: hidden;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Header Styles */
+.header {
+ text-align: center;
+ margin-bottom: 30px;
+ animation: slideDown 0.8s ease-out;
+}
+
+.header-top {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+}
+
+.language-switcher {
+ display: flex;
+ gap: 10px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 25px;
+ padding: 5px;
+ backdrop-filter: blur(10px);
+}
+
+.lang-btn {
+ background: transparent;
+ border: none;
+ color: #f7fafc;
+ padding: 8px 15px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 0.9rem;
+}
+
+.lang-btn:hover {
+ background: rgba(255, 255, 255, 0.2);
+ transform: translateY(-1px);
+}
+
+.lang-btn.active {
+ background: rgba(255, 255, 255, 0.9);
+ color: #4a5568;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.lang-btn i,
+.lang-btn .flag-icon {
+ font-size: 1rem;
+}
+
+.logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ margin-bottom: 10px;
+}
+
+.logo i,
+.logo .brain-icon {
+ font-size: 3rem;
+ color: #fff;
+ text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+ animation: pulse 2s infinite;
+}
+
+.logo h1 {
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ font-size: 3rem;
+ color: #fff;
+ text-shadow: 3px 3px 0px #4a5568, -1px -1px 0px #4a5568, 1px -1px 0px #4a5568, -1px 1px 0px #4a5568;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ color: #f7fafc;
+ font-weight: 600;
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+}
+
+/* Main Content */
+.main-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+/* Welcome Section */
+.welcome-section {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 30px;
+ text-align: center;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ animation: fadeInUp 1s ease-out 0.3s both;
+}
+
+.mascot {
+ margin-bottom: 20px;
+}
+
+.robot-face {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(135deg, #4299e1, #667eea);
+ border-radius: 50%;
+ margin: 0 auto 20px;
+ position: relative;
+ animation: bounce 2s infinite;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.eyes {
+ position: absolute;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 10px;
+}
+
+.eye {
+ width: 12px;
+ height: 12px;
+ background: white;
+ border-radius: 50%;
+ position: relative;
+}
+
+.eye::after {
+ content: '';
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ background: #333;
+ border-radius: 50%;
+ top: 3px;
+ left: 3px;
+ animation: eyeMove 3s infinite;
+}
+
+.mouth {
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 20px;
+ height: 10px;
+ border: 2px solid white;
+ border-top: none;
+ border-radius: 0 0 20px 20px;
+}
+
+.welcome-section h2 {
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ font-size: 2rem;
+ color: #4a5568;
+ margin-bottom: 15px;
+}
+
+.welcome-section p {
+ font-size: 1.1rem;
+ line-height: 1.6;
+ color: #666;
+}
+
+/* Question Section */
+.question-section {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 30px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ animation: fadeInUp 1s ease-out 0.6s both;
+}
+
+.input-container label {
+ display: block;
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ font-size: 1.3rem;
+ color: #4a5568;
+ margin-bottom: 15px;
+ text-align: center;
+}
+
+.input-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ align-items: center;
+}
+
+#question-input {
+ width: 100%;
+ max-width: 600px;
+ padding: 15px;
+ border: 3px solid #e2e8f0;
+ border-radius: 15px;
+ font-size: 1.1rem;
+ font-family: 'Open Sans', sans-serif;
+ resize: vertical;
+ transition: all 0.3s ease;
+ background: #f8f9fa;
+}
+
+#question-input:focus {
+ outline: none;
+ border-color: #667eea;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+ background: white;
+}
+
+.ask-btn {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+ color: white;
+ border: none;
+ padding: 15px 30px;
+ border-radius: 25px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 5px 15px rgba(72, 187, 120, 0.3);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.ask-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4);
+}
+
+.ask-btn:active {
+ transform: translateY(0);
+}
+
+/* Thinking Section */
+.thinking-section {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 30px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ animation: fadeInUp 0.8s ease-out;
+}
+
+.thinking-header h3 {
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ font-size: 1.8rem;
+ color: #4a5568;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.thinking-header i {
+ color: #f6ad55;
+ margin-right: 10px;
+}
+
+.thinking-steps {
+ margin-bottom: 25px;
+}
+
+.thinking-step {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 15px;
+ padding: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ border-left: 4px solid #4299e1;
+}
+
+.step-number {
+ background: linear-gradient(135deg, #4299e1, #3182ce);
+ color: white;
+ border-radius: 50%;
+ width: 35px;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 1.1rem;
+ flex-shrink: 0;
+}
+
+.step-content {
+ flex: 1;
+}
+
+.step-text {
+ font-size: 1.1rem;
+ color: #2d3748;
+ margin-bottom: 15px;
+ line-height: 1.6;
+ font-weight: 500;
+}
+
+.step-thinking-space {
+ margin-top: 10px;
+}
+
+.step-thinking-space textarea {
+ width: 100%;
+ min-height: 60px;
+ padding: 12px;
+ border: 2px solid #e2e8f0;
+ border-radius: 8px;
+ font-family: inherit;
+ font-size: 0.95rem;
+ resize: vertical;
+ transition: border-color 0.3s ease;
+ background: rgba(247, 250, 252, 0.8);
+}
+
+.step-thinking-space textarea:focus {
+ outline: none;
+ border-color: #4299e1;
+ background: white;
+ box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+}
+
+.step-thinking-space textarea::placeholder {
+ color: #a0aec0;
+ font-style: italic;
+}
+
+.thinking-step::before {
+ content: '';
+ position: absolute;
+ left: -8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 16px;
+ height: 16px;
+ background: #667eea;
+ border-radius: 50%;
+ border: 3px solid white;
+}
+
+.thinking-step h4 {
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ color: #4a5568;
+ margin-bottom: 8px;
+ font-size: 1.2rem;
+}
+
+.thinking-step p {
+ color: #666;
+ line-height: 1.6;
+}
+
+.thinking-step.highlight {
+ background: linear-gradient(135deg, #fed7d7, #feb2b2);
+ border-left-color: #f56565;
+}
+
+.thinking-step.highlight::before {
+ background: #f56565;
+}
+
+/* AI-Powered Response Styles */
+.encouragement-message {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+ color: white;
+ padding: 20px;
+ border-radius: 15px;
+ margin-bottom: 25px;
+ text-align: center;
+ box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
+ animation: bounceIn 0.6s ease-out;
+}
+
+.encouragement-text {
+ font-size: 1.2rem;
+ font-weight: 600;
+ line-height: 1.4;
+}
+
+.encouragement-text small {
+ display: block;
+ font-size: 0.9rem;
+ opacity: 0.9;
+ margin-top: 5px;
+ font-weight: 400;
+}
+
+/* Check Work Section Styles for Math/Factual Questions */
+.check-work-section {
+ margin-top: 30px;
+ padding: 0;
+}
+
+.check-work-prompt {
+ background: linear-gradient(145deg, #2196F3, #1976D2);
+ border-radius: 20px;
+ padding: 25px;
+ text-align: center;
+ box-shadow: 0 8px 32px rgba(33, 150, 243, 0.3);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.check-work-prompt h4 {
+ color: white;
+ font-size: 1.3rem;
+ margin-bottom: 15px;
+ font-weight: 600;
+}
+
+.check-work-prompt p {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 1rem;
+ margin-bottom: 20px;
+ line-height: 1.5;
+}
+
+.check-work-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 12px 24px;
+ border-radius: 25px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.check-work-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.check-work-btn:active {
+ transform: translateY(0);
+}
+
+/* Encouragement Popup Styles */
+.encouragement-popup {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1000;
+ max-width: 400px;
+ width: 90%;
+}
+
+.encouragement-content {
+ background: linear-gradient(145deg, #FF9800, #F57C00);
+ border-radius: 20px;
+ padding: 25px;
+ text-align: center;
+ box-shadow: 0 10px 40px rgba(255, 152, 0, 0.4);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.encouragement-icon {
+ font-size: 2rem;
+ display: block;
+ margin-bottom: 15px;
+}
+
+.encouragement-content p {
+ color: white;
+ font-size: 1.1rem;
+ font-weight: 500;
+ margin: 0;
+ line-height: 1.5;
+}
+
+/* Action Buttons */
+.action-buttons {
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 20px;
+}
+
+.action-btn {
+ background: linear-gradient(135deg, #4299e1, #3182ce);
+ color: white;
+ border: none;
+ padding: 12px 20px;
+ border-radius: 20px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
+}
+
+.action-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 18px rgba(66, 153, 225, 0.4);
+}
+
+.action-btn.research {
+ background: linear-gradient(135deg, #ed8936, #dd6b20);
+ box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3);
+}
+
+.action-btn.experiment {
+ background: linear-gradient(135deg, #38b2ac, #319795);
+ box-shadow: 0 4px 12px rgba(56, 178, 172, 0.3);
+}
+
+.action-btn.discuss {
+ background: linear-gradient(135deg, #9f7aea, #805ad5);
+ box-shadow: 0 4px 12px rgba(159, 122, 234, 0.3);
+}
+
+/* Suggestions Section */
+.suggestions-section {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 30px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ animation: fadeInUp 1s ease-out 0.9s both;
+}
+
+.suggestions-section h3 {
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+ font-size: 1.8rem;
+ color: #4a5568;
+ text-align: center;
+ margin-bottom: 25px;
+}
+
+.suggestions-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+}
+
+.suggestion-card {
+ background: linear-gradient(135deg, #f7fafc, #edf2f7);
+ border-radius: 15px;
+ padding: 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border: 2px solid transparent;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.suggestion-card:hover {
+ transform: translateY(-5px);
+ border-color: #667eea;
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+}
+
+.suggestion-card i,
+.suggestion-card .sun-icon,
+.suggestion-card .bird-icon,
+.suggestion-card .water-icon,
+.suggestion-card .computer-icon,
+.suggestion-card .moon-icon,
+.suggestion-card .rainbow-icon {
+ font-size: 2rem;
+ color: #667eea;
+ margin-bottom: 10px;
+ display: block;
+}
+
+.suggestion-card p {
+ font-weight: 600;
+ color: #4a5568;
+ margin: 0;
+}
+
+/* Footer */
+.footer {
+ text-align: center;
+ margin-top: 30px;
+ padding: 20px;
+ color: #f7fafc;
+}
+
+.footer p {
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin-bottom: 10px;
+}
+
+.safety-note {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ font-size: 0.9rem;
+ opacity: 0.8;
+}
+
+/* Loading Animation */
+.loading-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(102, 126, 234, 0.9);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+}
+
+.loading-spinner {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ margin-bottom: 20px;
+}
+
+.gear {
+ position: absolute;
+ border: 4px solid #fff;
+ border-radius: 50%;
+}
+
+.gear1 {
+ width: 60px;
+ height: 60px;
+ top: 20px;
+ left: 20px;
+ animation: rotate 2s linear infinite;
+}
+
+.gear2 {
+ width: 40px;
+ height: 40px;
+ top: 0;
+ right: 0;
+ animation: rotate 2s linear infinite reverse;
+}
+
+.gear3 {
+ width: 30px;
+ height: 30px;
+ bottom: 0;
+ left: 0;
+ animation: rotate 1.5s linear infinite;
+}
+
+.loading-overlay p {
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 600;
+ text-align: center;
+}
+
+/* Utility Classes */
+.hidden {
+ display: none !important;
+ visibility: hidden !important;
+ opacity: 0 !important;
+}
+
+/* Loading overlay should be hidden by default */
+.loading-overlay.hidden {
+ display: none !important;
+}
+
+/* Ensure proper z-index for loading overlay */
+.loading-overlay {
+ z-index: 9999;
+}
+
+/* Fallback for missing Font Awesome icons */
+.fas.fa-brain::before {
+ content: "🧠";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-flag-usa::before {
+ content: "🇺🇸";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-flag::before {
+ content: "🇩🇪";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-rocket::before {
+ content: "🚀";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-lightbulb::before {
+ content: "💡";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-search::before {
+ content: "🔍";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-flask::before {
+ content: "🧪";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-comments::before {
+ content: "💬";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-sun::before {
+ content: "☀️";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-dove::before {
+ content: "🕊️";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-tint::before {
+ content: "💧";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-computer::before {
+ content: "💻";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-moon::before {
+ content: "🌙";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-rainbow::before {
+ content: "🌈";
+ font-family: "Open Sans", sans-serif;
+}
+
+.fas.fa-shield-alt::before {
+ content: "🛡️";
+ font-family: "Open Sans", sans-serif;
+}
+
+/* Unicode icon styles for fallback */
+.flag-icon,
+.brain-icon,
+.rocket-icon,
+.lightbulb-icon,
+.research-icon,
+.experiment-icon,
+.discuss-icon,
+.sun-icon,
+.bird-icon,
+.water-icon,
+.computer-icon,
+.moon-icon,
+.rainbow-icon,
+.shield-icon {
+ font-size: 1.2em;
+ display: inline-block;
+ margin-right: 5px;
+}
+
+.brain-icon {
+ font-size: 3rem;
+ text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+ animation: pulse 2s infinite;
+ margin-right: 15px;
+}
+
+.suggestion-card .sun-icon,
+.suggestion-card .bird-icon,
+.suggestion-card .water-icon,
+.suggestion-card .computer-icon,
+.suggestion-card .moon-icon,
+.suggestion-card .rainbow-icon {
+ font-size: 2rem;
+ display: block;
+ margin-bottom: 10px;
+ margin-right: 0;
+}
+
+.lang-btn .flag-icon {
+ margin-right: 5px;
+}
+
+/* Ensure icons display properly */
+.fas {
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* Animations */
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-10px);
+ }
+ 60% {
+ transform: translateY(-5px);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes eyeMove {
+ 0%, 40%, 100% {
+ transform: translate(0, 0);
+ }
+ 10% {
+ transform: translate(-2px, 0);
+ }
+ 20% {
+ transform: translate(2px, 0);
+ }
+ 30% {
+ transform: translate(0, -2px);
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes bounceIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8) translateY(20px);
+ }
+ 60% {
+ opacity: 1;
+ transform: scale(1.05) translateY(-5px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+/* Answer Reveal Section Styles */
+.answer-reveal-section {
+ margin-top: 30px;
+ padding: 25px;
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ border: 2px dashed #e2e8f0;
+ text-align: center;
+}
+
+.reveal-prompt h4 {
+ color: #4a5568;
+ font-size: 1.3rem;
+ margin-bottom: 10px;
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+}
+
+.reveal-prompt p {
+ color: #718096;
+ margin-bottom: 20px;
+ font-size: 1rem;
+ line-height: 1.5;
+}
+
+.reveal-answer-btn {
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border: none;
+ border-radius: 25px;
+ padding: 15px 30px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.reveal-answer-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+ background: linear-gradient(135deg, #5a67d8, #6b46c1);
+}
+
+.reveal-answer-btn:disabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.btn-icon {
+ font-size: 1.2rem;
+}
+
+/* Answer Content Styles */
+.answer-content {
+ margin-top: 20px;
+}
+
+.answer-box {
+ background: linear-gradient(135deg, #f7fafc, #edf2f7);
+ border-radius: 20px;
+ padding: 25px;
+ border-left: 5px solid #48bb78;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.answer-header {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 15px;
+ flex-wrap: wrap;
+}
+
+.answer-icon {
+ font-size: 1.5rem;
+}
+
+.answer-header h4 {
+ color: #2d3748;
+ font-size: 1.2rem;
+ margin: 0;
+ font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
+}
+
+.answer-source {
+ background: rgba(72, 187, 120, 0.1);
+ color: #38a169;
+ padding: 4px 8px;
+ border-radius: 12px;
+ font-size: 0.8rem;
+ margin-left: auto;
+}
+
+.answer-text {
+ background: white;
+ padding: 20px;
+ border-radius: 15px;
+ color: #2d3748;
+ font-size: 1.1rem;
+ line-height: 1.6;
+ margin-bottom: 15px;
+ border: 1px solid #e2e8f0;
+}
+
+.answer-footer {
+ text-align: center;
+ color: #4a5568;
+ font-style: italic;
+}
+
+.answer-footer p {
+ margin: 0;
+ font-size: 1rem;
+}
+
+/* Animation for answer reveal */
+@keyframes answerReveal {
+ 0% {
+ opacity: 0;
+ transform: scale(0.95) translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+.answer-content:not(.hidden) {
+ animation: answerReveal 0.6s ease-out;
+}
+
+/* Completion Message Styles for Math/Factual Questions */
+.completion-message {
+ margin-top: 30px;
+ padding: 0;
+}
+
+.completion-box {
+ background: linear-gradient(145deg, #4CAF50, #45a049);
+ border-radius: 20px;
+ padding: 30px;
+ text-align: center;
+ box-shadow: 0 8px 32px rgba(76, 175, 80, 0.3);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+ position: relative;
+ overflow: hidden;
+}
+
+.completion-box::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(
+ 45deg,
+ transparent,
+ rgba(255, 255, 255, 0.1),
+ transparent
+ );
+ transform: rotate(45deg);
+ animation: shimmer 3s ease-in-out infinite;
+}
+
+.completion-text {
+ color: white;
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-bottom: 20px;
+ line-height: 1.6;
+ position: relative;
+ z-index: 2;
+}
+
+.completion-footer {
+ position: relative;
+ z-index: 2;
+}
+
+.new-question-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 12px 24px;
+ border-radius: 25px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.new-question-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.new-question-btn:active {
+ transform: translateY(0);
+}
+
+/* Animation for completion message */
+@keyframes shimmer {
+ 0% { transform: translateX(-100%) rotate(45deg); }
+ 50% { transform: translateX(100%) rotate(45deg); }
+ 100% { transform: translateX(200%) rotate(45deg); }
+}
+
+/* Mobile responsiveness for completion section */
+@media (max-width: 768px) {
+ .completion-box {
+ padding: 25px 20px;
+ }
+
+ .completion-text {
+ font-size: 1.1rem;
+ }
+
+ .new-question-btn {
+ padding: 10px 20px;
+ font-size: 0.9rem;
+ }
+
+ .check-work-prompt {
+ padding: 20px;
+ }
+
+ .check-work-prompt h4 {
+ font-size: 1.2rem;
+ }
+
+ .check-work-btn {
+ padding: 10px 20px;
+ font-size: 0.9rem;
+ }
+
+ .encouragement-popup {
+ max-width: 350px;
+ }
+
+ .encouragement-content {
+ padding: 20px;
+ }
+
+ .encouragement-content p {
+ font-size: 1rem;
+ }
+}
+
+/* Answer Input Section for Math Questions */
+.answer-input-section {
+ display: flex;
+ gap: 10px;
+ margin-top: 15px;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+#math-answer-input {
+ padding: 10px 15px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 15px;
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ font-size: 1rem;
+ text-align: center;
+ width: 120px;
+ backdrop-filter: blur(10px);
+}
+
+#math-answer-input::placeholder {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+#math-answer-input:focus {
+ outline: none;
+ border-color: rgba(255, 255, 255, 0.6);
+ background: rgba(255, 255, 255, 0.3);
+}
+
+/* Try Again Section Styles */
+.try-again-section {
+ margin-top: 20px;
+ padding: 0;
+}
+
+.try-again-content {
+ background: linear-gradient(145deg, #FF9800, #F57C00);
+ border-radius: 20px;
+ padding: 25px;
+ text-align: center;
+ box-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.try-again-icon {
+ font-size: 2rem;
+ display: block;
+ margin-bottom: 15px;
+}
+
+.try-again-text {
+ color: white;
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin: 0 0 10px 0;
+ line-height: 1.5;
+}
+
+.try-again-hint {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 0.9rem;
+ display: block;
+ margin-bottom: 20px;
+ font-style: italic;
+}
+
+.try-again-buttons {
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.more-hints-btn, .try-again-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 10px 20px;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.more-hints-btn:hover, .try-again-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-2px);
+}
+
+.more-hints-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+/* Additional Hints Section Styles */
+.additional-hints-section {
+ margin-top: 25px;
+ padding: 0;
+}
+
+.additional-hints-header {
+ background: linear-gradient(145deg, #9C27B0, #7B1FA2);
+ border-radius: 20px;
+ padding: 20px;
+ text-align: center;
+ margin-bottom: 20px;
+ box-shadow: 0 8px 32px rgba(156, 39, 176, 0.3);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.additional-hints-header h4 {
+ color: white;
+ font-size: 1.2rem;
+ margin: 0 0 10px 0;
+ font-weight: 600;
+}
+
+.additional-hints-header p {
+ color: rgba(255, 255, 255, 0.9);
+ margin: 0;
+ font-size: 1rem;
+}
+
+.additional-hint {
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+ background: rgba(156, 39, 176, 0.1);
+ border: 2px solid rgba(156, 39, 176, 0.2);
+ border-radius: 15px;
+ padding: 20px;
+ margin-bottom: 15px;
+ backdrop-filter: blur(10px);
+}
+
+.hint-number {
+ background: linear-gradient(145deg, #9C27B0, #7B1FA2);
+ color: white;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ font-size: 1rem;
+ flex-shrink: 0;
+ box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
+}
+
+.hint-text {
+ color: #2c3e50;
+ font-size: 1rem;
+ line-height: 1.6;
+ flex: 1;
+}
+
+.hints-try-again {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.try-again-after-hints-btn {
+ background: linear-gradient(145deg, #4CAF50, #45a049);
+ border: none;
+ color: white;
+ padding: 12px 25px;
+ border-radius: 25px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
+}
+
+.try-again-after-hints-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
+}
+
+/* Simple Message Styles */
+.simple-message .simple-message-content {
+ background: linear-gradient(145deg, #607D8B, #455A64);
+ border-radius: 15px;
+ padding: 20px;
+ text-align: center;
+}
+
+.simple-message-icon {
+ font-size: 1.5rem;
+ display: block;
+ margin-bottom: 10px;
+}
+
+.simple-message-content p {
+ color: white;
+ margin: 0;
+ font-size: 1rem;
+}
+
+/* Mobile responsiveness for hints */
+@media (max-width: 768px) {
+ .try-again-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .more-hints-btn, .try-again-btn {
+ width: 100%;
+ max-width: 200px;
+ }
+
+ .additional-hint {
+ flex-direction: column;
+ text-align: center;
+ gap: 10px;
+ }
+
+ .hint-number {
+ align-self: center;
+ }
+
+ .additional-hints-header {
+ padding: 15px;
+ }
+}
diff --git a/html/kidsai/translations.js b/html/kidsai/translations.js
new file mode 100755
index 0000000..c7b03f0
--- /dev/null
+++ b/html/kidsai/translations.js
@@ -0,0 +1,277 @@
+// Translations for KidsAI Explorer
+const translations = {
+ en: {
+ // Header
+ title: "KidsAI Explorer",
+ tagline: "Think, Learn, Discover Together!",
+
+ // Welcome section
+ "welcome-title": "Hi there, young explorer! 🚀",
+ "welcome-text": "I'm here to help you become a super smart problem solver! Instead of giving you answers, I'll help you think like a detective and find solutions yourself!",
+
+ // Question section
+ "question-label": "What would you like to explore today?",
+ "question-placeholder": "Ask me anything! Like 'Why is the sky blue?' or 'How do plants grow?'",
+ "ask-button": "Let's Explore!",
+
+ // Thinking section
+ "thinking-title": "Let's Think Step by Step!",
+ "research-btn": "Research Ideas",
+ "experiment-btn": "Try Experiments",
+ "discuss-btn": "Discuss with Others",
+
+ // Suggestions
+ "suggestions-title": "Popular Questions from Other Young Explorers",
+ "suggestion-seasons": "Why do we have different seasons?",
+ "suggestion-birds": "How do birds fly?",
+ "suggestion-water": "Why is water wet?",
+ "suggestion-computers": "How do computers work?",
+ "suggestion-dreams": "Why do we dream?",
+ "suggestion-rainbows": "How do rainbows form?",
+
+ // Footer
+ "footer-message": "Remember: The best learning happens when you think for yourself! 🌟",
+ "safety-note": "Always ask a grown-up before researching online!",
+ "loading-text": "Thinking of the best way to help you explore...",
+
+ // Dynamic content
+ encouragements: [
+ "Great question! You're thinking like a real scientist! 🔬",
+ "Wow, that's a fantastic thing to wonder about! 🌟",
+ "I love how curious you are! That's how great discoveries happen! 🚀",
+ "Excellent question! You're going to learn so much by exploring this! 📚",
+ "That's the kind of question that leads to amazing discoveries! 🔍"
+ ],
+
+ actionTitles: {
+ research: "🔍 Research Ideas",
+ experiment: "🧪 Experiment Ideas",
+ discuss: "💬 Discussion Ideas"
+ },
+
+ thinkingFrameworks: {
+ science: {
+ steps: [
+ {
+ title: "🔍 What do you already know?",
+ content: "Think about what you've already observed or learned about this topic. What have you noticed before?"
+ },
+ {
+ title: "🤔 What makes you curious?",
+ content: "What specific part of this question makes you wonder the most? Is there something that seems surprising or unusual?"
+ },
+ {
+ title: "🧪 How could you explore this?",
+ content: "What experiments or observations could you do to learn more? Think about safe ways to test your ideas!"
+ },
+ {
+ title: "📚 Where could you find more information?",
+ content: "What books, websites (with a grown-up), or experts could help you learn more about this topic?"
+ }
+ ]
+ },
+ math: {
+ steps: [
+ {
+ title: "📝 What information do you have?",
+ content: "List out all the numbers and facts you know about this problem. What are you trying to find out?"
+ },
+ {
+ title: "🎯 What's the goal?",
+ content: "What exactly are you trying to calculate or figure out? Can you say it in your own words?"
+ },
+ {
+ title: "🧮 What tools might help?",
+ content: "Would drawing a picture, making a chart, or using objects to count help you understand this better?"
+ },
+ {
+ title: "✅ How can you check your answer?",
+ content: "What's a different way you could solve this to make sure your answer makes sense?"
+ }
+ ]
+ },
+ technology: {
+ steps: [
+ {
+ title: "🔧 What does this technology do?",
+ content: "Think about what job this technology is designed to do. What problem does it solve for people?"
+ },
+ {
+ title: "⚙️ What are the main parts?",
+ content: "Can you identify the different pieces that work together? What does each part do?"
+ },
+ {
+ title: "🔄 How do the parts work together?",
+ content: "Think about how information or signals move through the system. What happens step by step?"
+ },
+ {
+ title: "🌟 What makes it special?",
+ content: "How is this different from older ways of doing the same thing? What makes it better or more efficient?"
+ }
+ ]
+ },
+ general: {
+ steps: [
+ {
+ title: "🎯 Let's break this down",
+ content: "What's the main thing you want to understand? Can you split your big question into smaller questions?"
+ },
+ {
+ title: "🧠 What do you think might happen?",
+ content: "Based on what you already know, what's your best guess about the answer? It's okay if you're not sure!"
+ },
+ {
+ title: "🔍 How can you find out more?",
+ content: "What steps could you take to explore this question? Think about observing, researching, or asking experts."
+ },
+ {
+ title: "💡 What would you do with this knowledge?",
+ content: "How might understanding this help you or others? Why is this question important to you?"
+ }
+ ]
+ }
+ },
+
+ actionReminder: "Remember: The goal is to discover the answer yourself through exploration and thinking!"
+ },
+
+ de: {
+ // Header
+ title: "KidsAI Explorer",
+ tagline: "Denken, Lernen, Entdecken - Zusammen!",
+
+ // Welcome section
+ "welcome-title": "Hallo, junger Entdecker! 🚀",
+ "welcome-text": "Ich bin hier, um dir zu helfen, ein super schlauer Problemlöser zu werden! Anstatt dir Antworten zu geben, helfe ich dir, wie ein Detektiv zu denken und Lösungen selbst zu finden!",
+
+ // Question section
+ "question-label": "Was möchtest du heute erforschen?",
+ "question-placeholder": "Frag mich alles! Zum Beispiel 'Warum ist der Himmel blau?' oder 'Wie wachsen Pflanzen?'",
+ "ask-button": "Lass uns erforschen!",
+
+ // Thinking section
+ "thinking-title": "Lass uns Schritt für Schritt denken!",
+ "research-btn": "Forschungsideen",
+ "experiment-btn": "Experimente versuchen",
+ "discuss-btn": "Mit anderen besprechen",
+
+ // Suggestions
+ "suggestions-title": "Beliebte Fragen von anderen jungen Entdeckern",
+ "suggestion-seasons": "Warum gibt es verschiedene Jahreszeiten?",
+ "suggestion-birds": "Wie können Vögel fliegen?",
+ "suggestion-water": "Warum ist Wasser nass?",
+ "suggestion-computers": "Wie funktionieren Computer?",
+ "suggestion-dreams": "Warum träumen wir?",
+ "suggestion-rainbows": "Wie entstehen Regenbogen?",
+
+ // Footer
+ "footer-message": "Denk daran: Das beste Lernen passiert, wenn du selbst denkst! 🌟",
+ "safety-note": "Frag immer einen Erwachsenen, bevor du online recherchierst!",
+ "loading-text": "Denke über den besten Weg nach, dir beim Erkunden zu helfen...",
+
+ // Dynamic content
+ encouragements: [
+ "Tolle Frage! Du denkst wie ein echter Wissenschaftler! 🔬",
+ "Wow, das ist eine fantastische Sache, über die man sich wundern kann! 🌟",
+ "Ich liebe es, wie neugierig du bist! So entstehen große Entdeckungen! 🚀",
+ "Ausgezeichnete Frage! Du wirst so viel lernen, wenn du das erforschst! 📚",
+ "Das ist die Art von Frage, die zu erstaunlichen Entdeckungen führt! 🔍"
+ ],
+
+ actionTitles: {
+ research: "🔍 Forschungsideen",
+ experiment: "🧪 Experiment-Ideen",
+ discuss: "💬 Diskussionsideen"
+ },
+
+ thinkingFrameworks: {
+ science: {
+ steps: [
+ {
+ title: "🔍 Was weißt du schon?",
+ content: "Denk darüber nach, was du bereits über dieses Thema beobachtet oder gelernt hast. Was ist dir schon aufgefallen?"
+ },
+ {
+ title: "🤔 Was macht dich neugierig?",
+ content: "Welcher spezielle Teil dieser Frage lässt dich am meisten staunen? Gibt es etwas, das überraschend oder ungewöhnlich scheint?"
+ },
+ {
+ title: "🧪 Wie könntest du das erforschen?",
+ content: "Welche Experimente oder Beobachtungen könntest du machen, um mehr zu lernen? Denk an sichere Wege, deine Ideen zu testen!"
+ },
+ {
+ title: "📚 Wo könntest du mehr Informationen finden?",
+ content: "Welche Bücher, Websites (mit einem Erwachsenen) oder Experten könnten dir helfen, mehr über dieses Thema zu lernen?"
+ }
+ ]
+ },
+ math: {
+ steps: [
+ {
+ title: "📝 Welche Informationen hast du?",
+ content: "Liste alle Zahlen und Fakten auf, die du über dieses Problem kennst. Was versuchst du herauszufinden?"
+ },
+ {
+ title: "🎯 Was ist das Ziel?",
+ content: "Was genau versuchst du zu berechnen oder herauszufinden? Kannst du es mit deinen eigenen Worten sagen?"
+ },
+ {
+ title: "🧮 Welche Hilfsmittel könnten helfen?",
+ content: "Würde es helfen, ein Bild zu malen, eine Tabelle zu erstellen oder Gegenstände zum Zählen zu benutzen?"
+ },
+ {
+ title: "✅ Wie kannst du deine Antwort überprüfen?",
+ content: "Welchen anderen Weg könntest du nutzen, um sicherzustellen, dass deine Antwort Sinn macht?"
+ }
+ ]
+ },
+ technology: {
+ steps: [
+ {
+ title: "🔧 Was macht diese Technologie?",
+ content: "Denk darüber nach, welche Aufgabe diese Technologie erfüllen soll. Welches Problem löst sie für Menschen?"
+ },
+ {
+ title: "⚙️ Was sind die Hauptteile?",
+ content: "Kannst du die verschiedenen Teile erkennen, die zusammenarbeiten? Was macht jeder Teil?"
+ },
+ {
+ title: "🔄 Wie arbeiten die Teile zusammen?",
+ content: "Denk darüber nach, wie Informationen oder Signale durch das System fließen. Was passiert Schritt für Schritt?"
+ },
+ {
+ title: "🌟 Was macht sie besonders?",
+ content: "Wie unterscheidet sich das von älteren Methoden, dasselbe zu tun? Was macht es besser oder effizienter?"
+ }
+ ]
+ },
+ general: {
+ steps: [
+ {
+ title: "🎯 Lass uns das aufteilen",
+ content: "Was ist das Wichtigste, was du verstehen möchtest? Kannst du deine große Frage in kleinere Fragen aufteilen?"
+ },
+ {
+ title: "🧠 Was denkst du, könnte passieren?",
+ content: "Basierend auf dem, was du bereits weißt, was ist deine beste Vermutung über die Antwort? Es ist okay, wenn du dir nicht sicher bist!"
+ },
+ {
+ title: "🔍 Wie kannst du mehr herausfinden?",
+ content: "Welche Schritte könntest du unternehmen, um diese Frage zu erkunden? Denk an Beobachten, Forschen oder Experten fragen."
+ },
+ {
+ title: "💡 Was würdest du mit diesem Wissen machen?",
+ content: "Wie könnte dir oder anderen das Verstehen davon helfen? Warum ist diese Frage wichtig für dich?"
+ }
+ ]
+ }
+ },
+
+ actionReminder: "Denk daran: Das Ziel ist es, die Antwort selbst durch Erkunden und Denken zu entdecken!"
+ }
+};
+
+// Export for use in other files
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = translations;
+}