root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✅ REFACTOR: Separate AI prompts into external file

Browse Source 
- Created ai-responses.js to store all AI response prompts
- Refactored generateContextualResponse() to use external AIResponses object
- Added ai-responses.js script to index.html
- Enhanced brake-specific responses for bicycle and car questions
- Improved maintainability and prevents script corruption during edits
- All contextual responses now centralized in structured object
This commit is contained in:
root
2025-06-29 17:11:07 +02:00
parent 72900c1157
commit 597cd101e6
3 changed files with 216 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
html/kidsai/ai-responses.js Normal file
View File

@@ -0,0 +1,91 @@
// AI Response Configuration
// This file contains all the contextual responses for the KidsAI system
// Separated from main script to prevent corruption during edits
const AIResponses = {
// Handle "I don't know" or help-seeking responses
helpSeeking: {
dontKnow: "That's perfectly fine! 🤗 Not knowing something just means we're about to learn something new together. Let's keep exploring!",
whatIsIt: "That's a great question! 😊 That's exactly what we're exploring together - let's discover it step by step!",
tellMe: "I love your curiosity! 🌟 Instead of telling you directly, let's think through it together so you can discover it yourself!"
},
// Short answer responses
shortAnswers: {
yes: {
bicycle: "Great! 🚴‍♂️ Since you have bicycle experience, you understand how mechanical controls work. That's perfect for what we're exploring!",
general: "Perfect! 🌟 I can see you're following along. Let's dive a bit deeper!",
knowledge: "Excellent! 👍 Your knowledge will help us build on these concepts together!"
},
no: "No problem at all! 😊 That's why we're exploring this together - to discover new things!"
},
// Topic-specific responses
bicycle: {
brake: {
slowDown: "🚴‍♂️ Exactly right! You understand that brakes slow you down and stop you. That's the basic function we need to understand!",
technical: "🎯 Great technical thinking! You understand how the brake mechanism works on the wheel!",
general: "🤔 Tell me more about what happens when you use bicycle brakes."
},
mechanics: {
pedalChainWheel: "🚴‍♂️ Excellent! You understand the connection between pedals, chain, and wheels. That mechanical connection concept is key!",
gearSpeed: "⚙️ Yes! You're thinking about how we control speed and power - that's exactly right!",
slowStop: "🚴‍♂️ Right! You understand the basic control functions of bicycles!"
}
},
car: {
brake: {
perfectAnswer: "🎯 EXACTLY! 🚗 Yes, it's the brake system! Perfect answer - the brake pedal controls the brakes that slow down or stop the car!",
brakeAndPedal: "🏆 Perfect! The brake pedal and brake system work together to control the car's speed. You nailed it!",
justBrake: "🎯 YES! The brakes! You got it exactly right! The brake system is what slows down and stops the car!",
wheelTire: "👍 You're thinking about where the braking happens - at the wheels! The brake system applies pressure there.",
pedal: "🦶 Good! You're thinking about pedals. Which specific pedal controls stopping?",
general: "🤔 What component do you think actually does the slowing down in a car?"
},
comparison: {
engine: "🚗 You're thinking about the engine - that's the power source! But I'm thinking of a specific part that works between the engine and wheels, kind of like how bike pedals connect to the chain.",
gearTransmission: "🎯 Great thinking! You're absolutely on the right track with gears and transmission systems!",
pedalBrake: "🦶 Good connection! You're thinking about pedals in cars. There are actually multiple pedals that do different things!"
},
clutch: {
perfect: "🎯 Perfect! You know about the clutch! That's exactly what I was thinking of - the component that helps with smooth gear changes!",
transmission: "🔧 Excellent! You're thinking about the transmission system. The clutch is the part that connects and disconnects the engine from the gearbox!",
separate: "👍 Yes! You understand the separation concept - that's exactly what the clutch does!",
different: "💡 Good observation! You're noticing that clutch and brake do different things. That's key insight!",
engineTransmission: "🚗 Excellent! You're thinking about the engine and transmission connection - that's exactly what the clutch controls!",
general: "🤔 The clutch is quite different from the brake. What do you think it might do instead of slowing down?"
},
trafficLight: {
clutchNeutral: "🚦 Perfect! You understand that something allows the engine to keep running while the car is stopped!",
disconnect: "💡 Exactly! Something disconnects the wheels from the engine so it can keep running while stopped!",
brakePark: "🛑 You're thinking about stopping the car, which is important! But I'm thinking of how the engine can keep running while the wheels aren't moving."
}
},
// Bird flight responses
birds: {
pushAirLift: "🐦 Fantastic! You understand that it's all about air and creating lift! That's exactly how flight works!",
featherAirflow: "✨ Brilliant! Feathers and airflow are absolutely key to how birds fly!",
flapMove: "🌟 Perfect! Wing movement creates the forces that allow birds to fly!"
},
// General mechanical understanding
mechanical: {
connectControl: "🔧 Excellent mechanical thinking! You understand that cars have systems that connect and control different parts!"
},
// Generic responses based on answer quality (last resort)
generic: {
veryDetailed: "🌟 I appreciate your detailed explanation! You're really working through this systematically.",
detailed: "👍 Good thinking! I can see you're considering different aspects of this.",
medium: "💭 Interesting! Can you help me understand your reasoning a bit more?",
short: "🤔 I see what you're thinking. Can you elaborate on that?",
veryShort: "💡 Feel free to share any thoughts - every idea helps us learn!"
}
};
// Export for use in main script
if (typeof module !== 'undefined' && module.exports) {
module.exports = AIResponses;
}

58
html/kidsai/index.html
View File

@@ -1,8 +1,5 @@
<!DOCTYPE html>
<ht <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
<link rel="stylesheet" href="style.css?v=20250629-1416">
<link rel="stylesheet" href="fallback.css">ang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -22,7 +19,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
<link rel="stylesheet" href="style.css?v=20250629-1413">
<link rel="stylesheet" href="style.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">
@@ -90,6 +87,20 @@
<h3><span class="lightbulb-icon">💡</span> <span data-translate="thinking-title">Let's Think Step by Step!</span></h3>
</div>
<div id="thinking-steps" class="thinking-steps"></div>
<div class="action-buttons hidden" id="action-buttons">
<button id="research-btn" class="action-btn research">
<span class="research-icon">🔍</span>
<span data-translate="research-btn">Research Ideas</span>
</button>
<button id="experiment-btn" class="action-btn experiment">
<span class="experiment-icon">🧪</span>
<span data-translate="experiment-btn">Try Experiments</span>
</button>
<button id="discuss-btn" class="action-btn discuss">
<span class="discuss-icon">💬</span>
<span data-translate="discuss-btn">Discuss with Others</span>
</button>
</div>
</section>
<!-- Suggestions Section -->
@@ -165,10 +176,39 @@
}, 100);
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="translations.js?v=20250629155100"></script>
<script src="ai-responses.js?v=20250629155100"></script>
<script src="script-new.js?v=20250629155100"></script>
<script src="translations.js"></script>
<script src="script.js"></script>
<!-- Inline debugging script -->
<script>
console.log('🔧 Inline debug script loaded');
window.addEventListener('load', () => {
console.log('🔧 Window loaded, checking elements...');
const questionInput = document.getElementById('question-input');
const askButton = document.getElementById('ask-button');
const suggestionCards = document.querySelectorAll('.suggestion-card');
console.log('🔧 questionInput:', questionInput);
console.log('🔧 askButton:', askButton);
console.log('🔧 suggestionCards:', suggestionCards.length);
console.log('🔧 window.kidsAI:', window.kidsAI);
// Test button click directly
if (askButton) {
askButton.addEventListener('click', () => {
console.log('🔧 BUTTON CLICKED DIRECTLY!');
});
}
// Test suggestion card clicks
suggestionCards.forEach((card, index) => {
card.addEventListener('click', () => {
console.log('🔧 SUGGESTION CARD ' + index + ' CLICKED!');
});
});
});
</script>
</body>
</html>

105
html/kidsai/script-new.js
View File

@@ -603,86 +603,133 @@ class KidsAIExplorer {
const currentQuestion = this.questions[questionIndex];
const questionLower = currentQuestion ? currentQuestion.toLowerCase() : '';
// Ensure AIResponses is available
if (typeof AIResponses === 'undefined') {
console.warn('⚠️ AIResponses not loaded, using fallback');
return "🌟 Great thinking! Keep exploring - you're doing wonderfully!";
}
// Handle "I don't know" or help-seeking responses
if (answerLower.includes('don\'t know') || answerLower.includes('no idea') ||
answerLower.includes('what is it') || answerLower.includes('tell me') ||
(answerLower === 'no' && questionLower.includes('heard of'))) {
return "That's perfectly fine! 🤗 Not knowing something just means we're about to learn something new together. Let's keep exploring!";
if (answerLower.includes('don\'t know') || answerLower.includes('no idea')) {
return AIResponses.helpSeeking.dontKnow;
}
if (answerLower.includes('what is it')) {
return AIResponses.helpSeeking.whatIsIt;
}
if (answerLower.includes('tell me')) {
return AIResponses.helpSeeking.tellMe;
}
// Handle very short positive answers like "yes"
if (answerLower === 'yes' || answerLower === 'yeah' || answerLower === 'yep') {
if (questionLower.includes('bicycle') || questionLower.includes('pedal')) {
return "Great! 🚴‍♂️ Since you understand how bicycles work, you're already thinking about mechanical connections. That's exactly the kind of thinking we need!";
return AIResponses.shortAnswers.yes.bicycle;
} else if (questionLower.includes('heard of') || questionLower.includes('know')) {
return "Excellent! 👍 Your knowledge will help us build on these concepts together!";
return AIResponses.shortAnswers.yes.knowledge;
} else {
return "Perfect! 🌟 I can see you're following along. Let's dive a bit deeper!";
return AIResponses.shortAnswers.yes.general;
}
}
// Handle "no" responses
if (answerLower === 'no' || answerLower === 'nope') {
return "No problem at all! 😊 That's why we're exploring this together - to discover new things!";
return AIResponses.shortAnswers.no;
}
// Topic-specific contextual responses
// Topic-specific contextual responses - BICYCLE
if (questionLower.includes('bicycle') || questionLower.includes('pedal') || questionLower.includes('chain')) {
if (answerLower.includes('pedal') || answerLower.includes('chain') || answerLower.includes('wheel')) {
return "<22>‍♂️ Excellent! You understand the connection between pedals, chain, and wheels. That mechanical connection concept is key!";
if (answerLower.includes('brake') && (answerLower.includes('slow') || answerLower.includes('stop'))) {
return AIResponses.bicycle.brake.slowDown;
} else if (answerLower.includes('brake')) {
return AIResponses.bicycle.brake.technical;
} else if (answerLower.includes('pedal') || answerLower.includes('chain') || answerLower.includes('wheel')) {
return AIResponses.bicycle.mechanics.pedalChainWheel;
} else if (answerLower.includes('gear') || answerLower.includes('speed')) {
return "👍 Yes! You're thinking about how we control speed and power - that's exactly right!";
return AIResponses.bicycle.mechanics.gearSpeed;
} else if (answerLower.includes('slow') || answerLower.includes('stop')) {
return AIResponses.bicycle.mechanics.slowStop;
}
}
// CAR vs BICYCLE comparison
if (questionLower.includes('car') && questionLower.includes('bicycle')) {
if (answerLower.includes('engine')) {
return "<22> You're thinking about the engine - that's the power source! But I'm thinking of a specific part that works between the engine and wheels, kind of like how bike pedals connect to the chain.";
return AIResponses.car.comparison.engine;
} else if (answerLower.includes('gear') || answerLower.includes('transmission')) {
return "🎯 Great thinking! You're absolutely on the right track with gears and transmission systems!";
return AIResponses.car.comparison.gearTransmission;
} else if (answerLower.includes('pedal') || answerLower.includes('brake')) {
return "🦶 Good connection! You're thinking about pedals in cars. There are actually multiple pedals that do different things!";
return AIResponses.car.comparison.pedalBrake;
}
}
// CAR BRAKE responses
if (questionLower.includes('slow') || questionLower.includes('stop') || questionLower.includes('car')) {
if (answerLower.includes('brake') && (answerLower.includes('pedal') || answerLower.includes('system'))) {
return AIResponses.car.brake.perfectAnswer;
} else if (answerLower.includes('brake') && !answerLower.includes('clutch')) {
return AIResponses.car.brake.justBrake;
} else if (answerLower.includes('wheel') || answerLower.includes('tire')) {
return AIResponses.car.brake.wheelTire;
} else if (answerLower.includes('pedal') && !answerLower.includes('brake')) {
return AIResponses.car.brake.pedal;
}
}
// CLUTCH responses
if (questionLower.includes('clutch') || questionLower.includes('gears') || questionLower.includes('switch gears')) {
if (answerLower.includes('clutch')) {
return "🎯 Perfect! You know about the clutch! That's exactly what I was thinking of - the component that helps with smooth gear changes!";
return AIResponses.car.clutch.perfect;
} else if (answerLower.includes('transmission') || answerLower.includes('gearbox')) {
return "🔧 Excellent! You're thinking about the transmission system. The clutch is the part that connects and disconnects the engine from the gearbox!";
return AIResponses.car.clutch.transmission;
} else if (answerLower.includes('separate') || answerLower.includes('disconnect')) {
return "👍 Yes! You understand the separation concept - that's exactly what the clutch does!";
return AIResponses.car.clutch.separate;
} else if (answerLower.includes('different') && answerLower.includes('brake')) {
return AIResponses.car.clutch.different;
} else if (answerLower.includes('engine') && answerLower.includes('transmission')) {
return AIResponses.car.clutch.engineTransmission;
} else {
return AIResponses.car.clutch.general;
}
}
// TRAFFIC LIGHT / ENGINE RUNNING responses
if (questionLower.includes('traffic light') || questionLower.includes('stopped') || questionLower.includes('engine running')) {
if (answerLower.includes('clutch') || answerLower.includes('neutral')) {
return "🚦 Brilliant! You understand that we need a way to keep the engine running while the car is stopped!";
return AIResponses.car.trafficLight.clutchNeutral;
} else if (answerLower.includes('disconnect') || answerLower.includes('separate')) {
return AIResponses.car.trafficLight.disconnect;
} else if (answerLower.includes('brake') || answerLower.includes('park')) {
return "🛑 You're thinking about stopping the car, which is important! But I'm thinking of how the engine can keep running while the wheels aren't moving.";
return AIResponses.car.trafficLight.brakePark;
}
}
// Bird flight responses
// BIRD FLIGHT responses
if (questionLower.includes('bird') || questionLower.includes('wing') || questionLower.includes('fly')) {
if (answerLower.includes('push') || answerLower.includes('air') || answerLower.includes('lift')) {
return "<22> Fantastic! You understand that it's all about air and creating lift! That's exactly how flight works!";
return AIResponses.birds.pushAirLift;
} else if (answerLower.includes('feather') || answerLower.includes('airflow')) {
return "✨ Brilliant! Feathers and airflow are absolutely key to how birds fly!";
return AIResponses.birds.featherAirflow;
} else if (answerLower.includes('flap') || answerLower.includes('move')) {
return "🌟 Perfect! Wing movement creates the forces that allow birds to fly!";
return AIResponses.birds.flapMove;
}
}
// MECHANICAL understanding responses
if (answerLower.includes('connect') || answerLower.includes('control')) {
return AIResponses.mechanical.connectControl;
}
// Generic responses based on answer quality and engagement
if (answer.length > 25) {
return "🌟 I love your detailed thinking! You're really exploring this concept thoroughly. That kind of curiosity is what leads to great discoveries!";
} else if (answer.length > 10) {
return "👍 Good observation! I can see you're thinking about this carefully. Your reasoning is developing nicely!";
return AIResponses.generic.veryDetailed;
} else if (answer.length > 15) {
return AIResponses.generic.detailed;
} else if (answer.length > 8) {
return AIResponses.generic.medium;
} else if (answer.length > 3) {
return "<22> Interesting thought! You're engaging with the concept. Can you help me understand your thinking a bit more?";
return AIResponses.generic.short;
} else {
return "🤔 I see you're thinking about this! Feel free to share whatever comes to mind - there are no wrong answers here!";
return AIResponses.generic.veryShort;
}
}