diff --git a/html/kidsai/script.js b/html/kidsai/script.js
index 387f78f..a403038 100755
--- a/html/kidsai/script.js
+++ b/html/kidsai/script.js
@@ -199,16 +199,31 @@ class KidsAIExplorer {
`;
} else {
- // For exploratory questions, show text fields for thinking
+ // For exploratory questions, show interactive text fields for thinking
stepDiv.innerHTML = `
+
💭
+
${feedback.text}
+
${feedback.type === 'ai-powered' ? '✨ AI-powered' : '🤖 Offline'}
+
+ `;
+
+ feedbackDiv.style.display = 'block';
+ feedbackDiv.style.opacity = '0';
+ 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
checkIfChildEngaged() {
- // Check if any of the thinking textareas have content
+ // Check if any of the thinking textareas have content or received feedback
const thinkingAreas = this.thinkingSteps.querySelectorAll('.step-thinking-space textarea');
+ const feedbackAreas = this.thinkingSteps.querySelectorAll('.thinking-feedback[style*="block"]');
+
for (let textarea of thinkingAreas) {
if (textarea.value.trim().length > 0) {
return true;
}
}
- return false;
- }
-
- showEncouragementMessage() {
- const encouragementDiv = document.createElement('div');
- encouragementDiv.className = 'encouragement-popup';
- encouragementDiv.innerHTML = `
-
-
💭
-
${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);
+ // If child received any feedback, they've engaged
+ return feedbackAreas.length > 0;
}
// ...existing code...
diff --git a/html/kidsai/server.js b/html/kidsai/server.js
index 3036ac6..13b230c 100644
--- a/html/kidsai/server.js
+++ b/html/kidsai/server.js
@@ -198,6 +198,46 @@ app.post('/api/get-more-hints', async (req, res) => {
}
});
+// API endpoint for interactive thinking feedback
+app.post('/api/think-response', async (req, res) => {
+ const { question, thought, stepNumber, language = 'en' } = req.body;
+
+ if (!question || !thought) {
+ return res.status(400).json({
+ success: false,
+ error: 'Question and thought are required'
+ });
+ }
+
+ try {
+ // Get AI feedback on the child's thinking
+ const feedback = await getThinkingFeedback(question, thought, stepNumber, language);
+
+ res.json({
+ success: true,
+ feedback: feedback,
+ question: question,
+ thought: thought,
+ language: language
+ });
+
+ } catch (error) {
+ console.error('Thinking feedback error:', error);
+
+ // Fallback positive feedback
+ const fallbackFeedback = getFallbackThinkingFeedback(language);
+
+ res.json({
+ success: true,
+ feedback: fallbackFeedback,
+ question: question,
+ thought: thought,
+ language: language,
+ fallback: true
+ });
+ }
+});
+
// Function to calculate the correct answer for simple math expressions
function calculateMathAnswer(question) {
const questionLower = question.toLowerCase().trim();
@@ -305,13 +345,14 @@ async function getOpenAIGuidance(question, language) {
? `Ein Kind fragt: "${question}". Gib 2-3 konkrete Denkschritte, die spezifisch zu dieser Frage passen. Verwende Beispiele und lass das Kind selbst beobachten oder überlegen.`
: `A child asks: "${question}". Provide 2-3 concrete thinking steps that are specific to this question. Use examples and have the child observe or think for themselves.`;
} else {
+ // For exploratory questions, provide specific thinking questions related to the topic
systemPrompt = isGerman
- ? "Du bist ein pädagogischer Assistent für Kinder. Bei komplexeren Fragen stellst du durchdachte Leitfragen, die Kindern helfen, selbst über das Problem nachzudenken. Verwende einfache Sprache und konzentriere dich auf den Denkprozess."
- : "You are an educational assistant for children. For complex questions, provide thoughtful guiding questions that help children think through the problem themselves. Use simple language and focus on the thinking process.";
+ ? "Du bist ein pädagogischer Assistent für Kinder. Für komplexere Fragen stellst du 2-3 sehr spezifische Denkfragen, die direkt mit dem Thema zusammenhängen. Analysiere die Frage und stelle konkrete, themenspezifische Fragen, die das Kind zum Nachdenken über genau dieses Thema anregen. Keine allgemeinen Fragen!"
+ : "You are an educational assistant for children. For complex questions, provide 2-3 very specific thinking questions that directly relate to the topic. Analyze the question and ask concrete, topic-specific questions that encourage the child to think about exactly this subject. No generic questions!";
userPrompt = isGerman
- ? `Ein Kind hat gefragt: "${question}". Hilf ihm dabei, selbst über die Antwort nachzudenken, indem du Leitfragen stellst.`
- : `A child asked: "${question}". Help them think through the answer themselves by providing guiding questions.`;
+ ? `Ein Kind hat gefragt: "${question}". Stelle 2-3 sehr spezifische Fragen, die direkt mit diesem Thema zusammenhängen und das Kind zum Nachdenken über genau dieses Thema anregen. Zum Beispiel für "Wie entstehen Regenbogen?": 1) Was brauchst du für einen Regenbogen (Sonne und was noch?), 2) Welche Farben siehst du in einem Regenbogen?, 3) Wann hast du schon mal einen Regenbogen gesehen?`
+ : `A child asked: "${question}". Provide 2-3 very specific questions that directly relate to this topic and encourage the child to think about exactly this subject. For example for "How do rainbows form?": 1) What do you need for a rainbow (sun and what else?), 2) What colors do you see in a rainbow?, 3) When have you seen a rainbow before?`;
}
try {
@@ -738,3 +779,67 @@ function getFallbackMathHints(question, language) {
source: 'Fallback'
};
}
+
+// Generate AI feedback on child's thinking
+async function getThinkingFeedback(question, thought, stepNumber, language) {
+ const isGerman = language === 'de';
+
+ const systemPrompt = isGerman
+ ? "Du bist ein encourager Lernbegleiter für Kinder. Ein Kind hat über eine Frage nachgedacht und seinen Gedanken geteilt. Gib kurzes, ermutigendes Feedback (1-2 Sätze) zu ihrem Denkprozess. Sei positiv, erkenne gute Punkte an, und gib ggf. einen kleinen Hinweis für weitere Überlegungen. Nie die komplette Antwort verraten!"
+ : "You are an encouraging learning companion for children. A child has thought about a question and shared their thinking. Give brief, encouraging feedback (1-2 sentences) on their thought process. Be positive, acknowledge good points, and optionally give a small hint for further thinking. Never reveal the complete answer!";
+
+ const userPrompt = isGerman
+ ? `Frage: "${question}"\nKind's Gedanke: "${thought}"\n\nGib kurzes, ermutigendes Feedback zu diesem Gedanken und hilf beim Weiterdenken.`
+ : `Question: "${question}"\nChild's thought: "${thought}"\n\nGive brief, encouraging feedback on this thought and help with further thinking.`;
+
+ try {
+ const completion = await openai.chat.completions.create({
+ model: "gpt-3.5-turbo",
+ messages: [
+ { role: "system", content: systemPrompt },
+ { role: "user", content: userPrompt }
+ ],
+ max_tokens: 100,
+ temperature: 0.8
+ });
+
+ const aiResponse = completion.choices[0]?.message?.content || '';
+
+ return {
+ type: 'ai-powered',
+ text: aiResponse.trim(),
+ encouragement: getRandomEncouragement(language),
+ source: 'OpenAI GPT-3.5'
+ };
+
+ } catch (error) {
+ console.log('❌ Thinking feedback AI error:', error.message);
+ throw error;
+ }
+}
+
+// Fallback thinking feedback
+function getFallbackThinkingFeedback(language) {
+ const isGerman = language === 'de';
+
+ const responses = isGerman ? [
+ "Interessanter Gedanke! Das zeigt, dass du nachdenkst.",
+ "Gute Überlegung! Du bist auf dem richtigen Weg.",
+ "Das ist ein wichtiger Punkt! Denk weiter in diese Richtung.",
+ "Super, dass du so genau nachdenkst!"
+ ] : [
+ "Interesting thought! That shows you're thinking.",
+ "Good thinking! You're on the right track.",
+ "That's an important point! Keep thinking in that direction.",
+ "Great that you're thinking so carefully!"
+ ];
+
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+
+ return {
+ type: 'fallback',
+ text: randomResponse,
+ encouragement: getRandomEncouragement(language),
+ source: 'Fallback'
+ };
+}
diff --git a/html/kidsai/style.css b/html/kidsai/style.css
index 5268ed4..d569e6d 100755
--- a/html/kidsai/style.css
+++ b/html/kidsai/style.css
@@ -293,7 +293,9 @@ body {
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid rgba(102, 126, 234, 0.1);
+ backdrop-filter: blur(10px);
display: flex;
align-items: flex-start;
gap: 15px;
@@ -327,7 +329,12 @@ body {
}
.step-thinking-space {
- margin-top: 10px;
+ margin-top: 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);
}
.step-thinking-space textarea {
@@ -1417,3 +1424,141 @@ body {
padding: 15px;
}
}
+
+/* Interactive Thinking Styles */
+.thinking-textarea {
+ width: 100%;
+ padding: 12px;
+ border: 2px solid #e1e8ed;
+ border-radius: 10px;
+ font-family: inherit;
+ font-size: 0.95rem;
+ line-height: 1.4;
+ resize: vertical;
+ transition: all 0.3s ease;
+ background: #f8f9fa;
+}
+
+.thinking-textarea:focus {
+ outline: none;
+ border-color: #667eea;
+ background: white;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.share-thought-btn {
+ background: linear-gradient(145deg, #667eea, #764ba2);
+ border: none;
+ color: white;
+ padding: 8px 15px;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ cursor: pointer;
+ margin-top: 10px;
+ transition: all 0.3s ease;
+ opacity: 0;
+ animation: fadeInUp 0.3s ease-out forwards;
+}
+
+.share-thought-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.share-thought-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.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 {
+ padding: 15px;
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+}
+
+.feedback-icon {
+ font-size: 1.2rem;
+ flex-shrink: 0;
+ margin-top: 2px;
+}
+
+.feedback-text {
+ flex: 1;
+ color: #2c3e50;
+ font-size: 0.95rem;
+ line-height: 1.5;
+ font-weight: 500;
+}
+
+.feedback-source {
+ font-size: 0.75rem;
+ color: #6c757d;
+ font-weight: 500;
+ margin-top: 5px;
+ text-align: right;
+}
+
+/* Improved step thinking space layout */
+.step-thinking-space {
+ margin-top: 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);
+}
+
+/* Mobile responsiveness for interactive thinking */
+@media (max-width: 768px) {
+ .feedback-content {
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .feedback-icon {
+ align-self: flex-start;
+ }
+
+ .step-thinking-space {
+ padding: 12px;
+ }
+
+ .share-thought-btn {
+ width: 100%;
+ padding: 10px;
+ }
+}