learningPaths = {
return {
"Build my first IoT project": {
beginner: [
{title: "IoT Overview", path: "../applications-and-use-cases/overview-of-iot.qmd", time: "15 min", type: "reading", icon: "π", reason: "Understand what IoT is"},
{title: "Binary & Hex Converter", path: "../fundamentals/animations/binary-hex-converter.qmd", time: "10 min", type: "tool", icon: "π§", reason: "Learn data representation basics"},
{title: "Data Formats for IoT", path: "../fundamentals/data-formats-for-iot.qmd", time: "20 min", type: "reading", icon: "π", reason: "Understand JSON and data structures"},
{title: "Code Snippet Library", path: "code-snippet-library.qmd", time: "15 min", type: "reference", icon: "π", reason: "Get ready-to-use code"},
{title: "DHT22 Sensor Reading", path: "code-snippet-library.qmd#sensor-dht22", time: "20 min", type: "hands-on", icon: "π οΈ", reason: "Your first sensor project"},
],
intermediate: [
{title: "MQTT Message Flow", path: "../networking-and-communications/animations/mqtt-pubsub.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Learn pub/sub messaging"},
{title: "Power Budget Calculator", path: "../design-strategies-and-prototyping/animations/power-budget.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Plan battery-powered projects"},
{title: "Use Case Builder", path: "../applications-and-use-cases/animations/use-case-builder.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Design your project"},
{title: "Troubleshooting Flowchart", path: "troubleshooting-flowchart.qmd", time: "10 min", type: "reference", icon: "π", reason: "Debug common issues"},
]
},
"Understand IoT protocols": {
beginner: [
{title: "Protocol Comparison Simulator", path: "../networking-and-communications/fundamentals/animations/protocol-comparison-simulator.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Compare protocols visually"},
{title: "Protocol State Machine Playground", path: "../networking-and-communications/fundamentals/animations/protocol-state-playground.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Understand protocol states"},
{title: "Quick Reference Cards", path: "quick-reference-cards.qmd", time: "15 min", type: "reference", icon: "π", reason: "Protocol cheat sheets"},
],
intermediate: [
{title: "MQTT Deep Dive", path: "../networking-and-communications/app-protocols/mqtt.qmd", time: "25 min", type: "reading", icon: "π", reason: "Master MQTT"},
{title: "CoAP Fundamentals", path: "../networking-and-communications/app-protocols/coap-fundamentals.qmd", time: "25 min", type: "reading", icon: "π", reason: "Learn CoAP"},
{title: "BLE State Machine", path: "../networking-and-communications/animations/ble-connection.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Understand BLE"},
{title: "LoRaWAN SF Simulator", path: "../networking-and-communications/animations/lorawan-sf.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Master LoRa settings"},
]
},
"Master sensor integration": {
beginner: [
{title: "ADC Resolution Visualizer", path: "../fundamentals/animations/adc-resolution-visualizer.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Understand analog readings"},
{title: "Sampling Visualizer", path: "../fundamentals/animations/sampling-visualizer.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Learn Nyquist sampling"},
{title: "Sensor Calibration Tool", path: "../sensing-and-actuation/animations/sensor-calibration.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Calibrate sensors properly"},
],
intermediate: [
{title: "RC Filter Designer", path: "../sensing-and-actuation/animations/rc-filter-designer.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Filter sensor noise"},
{title: "Kalman Filter Simulator", path: "../data-management-and-analytics/animations/kalman-filter.qmd", time: "25 min", type: "tool", icon: "π§", reason: "Advanced filtering"},
{title: "Sensor Fusion Calculator", path: "../architectures/foundations/animations/sensor-fusion-calculator.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Combine multiple sensors"},
]
},
"Learn about IoT security": {
beginner: [
{title: "Zero Trust Policy Simulator", path: "../privacy-and-security/animations/zero-trust-simulator.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Learn security principles"},
{title: "Network Segmentation Visualizer", path: "../privacy-and-security/animations/network-segmentation-visualizer.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Secure network design"},
{title: "Privacy Compliance Checker", path: "../privacy-and-security/animations/privacy-compliance.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Check GDPR compliance"},
],
intermediate: [
{title: "IoT Security Overview", path: "../privacy-and-security/iot-security-overview.qmd", time: "30 min", type: "reading", icon: "π", reason: "Comprehensive security guide"},
{title: "Attack Surfaces", path: "../privacy-and-security/attack-surfaces.qmd", time: "25 min", type: "reading", icon: "π", reason: "Know your vulnerabilities"},
{title: "Secure Communication", path: "../privacy-and-security/secure-communication.qmd", time: "25 min", type: "reading", icon: "π", reason: "Encrypt your data"},
]
},
"Deploy production IoT systems": {
beginner: [
{title: "Reference Architecture Builder", path: "../architectures/foundations/animations/reference-architecture.qmd", time: "25 min", type: "tool", icon: "π§", reason: "Design system architecture"},
{title: "Database Selection Tool", path: "../data-management-and-analytics/animations/database-selector.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Choose the right database"},
{title: "Edge vs Cloud Decision Tool", path: "../data-management-and-analytics/animations/edge-cloud-decision.qmd", time: "15 min", type: "tool", icon: "π§", reason: "Where to process data"},
],
intermediate: [
{title: "PID Controller Tuner", path: "../architectures/foundations/animations/pid-tuner.qmd", time: "25 min", type: "tool", icon: "π§", reason: "Production control systems"},
{title: "Big Data Pipeline Configurator", path: "../data-management-and-analytics/animations/bigdata-pipeline.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Scale your data pipeline"},
{title: "Business Model Canvas", path: "../applications-and-use-cases/animations/business-model-canvas.qmd", time: "20 min", type: "tool", icon: "π§", reason: "Plan your IoT business"},
]
},
"Explore all topics": {
beginner: [
{title: "Visual Concept Map", path: "concept-map-visual.qmd", time: "15 min", type: "tool", icon: "πΊοΈ", reason: "See how topics connect"},
{title: "Tool Discovery Hub", path: "tool-discovery-hub.qmd", time: "10 min", type: "reference", icon: "π", reason: "Find any tool"},
{title: "Quiz Hub", path: "quizzes.qmd", time: "20 min", type: "assessment", icon: "π", reason: "Test your knowledge"},
],
intermediate: [
{title: "Paper Reading Guides", path: "../fundamentals/paper-reading-guides.qmd", time: "30 min", type: "reading", icon: "π", reason: "Read seminal papers"},
{title: "Discussion Prompts", path: "discussion-prompts-hub.qmd", time: "20 min", type: "collaboration", icon: "π¬", reason: "Debate with peers"},
{title: "Failure Case Studies", path: "failure-case-studies.qmd", time: "25 min", type: "reading", icon: "π", reason: "Learn from failures"},
]
}
};
}
// Determine level based on selection
userLevel = currentLevel === "Complete Beginner" || currentLevel === "Some Programming Experience" ? "beginner" : "intermediate"
// Get recommendations based on goal
recommendations = learningPaths[learningGoal][userLevel]
// Filter by time available
timeMinutes = timeAvailable === "15 minutes" ? 15 :
timeAvailable === "30 minutes" ? 30 :
timeAvailable === "1 hour" ? 60 : 120
filteredRecommendations = recommendations.filter(r => {
const mins = parseInt(r.time);
return mins <= timeMinutes;
}).slice(0, 5)
html`
<div style="margin: 20px 0;">
<h3 style="color: #2C3E50; margin-bottom: 15px;">Based on your goal: "${learningGoal}"</h3>
${filteredRecommendations.length === 0 ? html`
<div style="background: #FEF9E7; padding: 20px; border-radius: 12px; border-left: 4px solid #F39C12;">
<strong>No items match your time constraint.</strong> Try selecting more time available.
</div>
` : html`
<div style="display: flex; flex-direction: column; gap: 15px;">
${filteredRecommendations.map((rec, i) => html`
<a href="${rec.path}" style="text-decoration: none; color: inherit;">
<div style="background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; display: flex; gap: 15px; align-items: center; transition: transform 0.2s, box-shadow 0.2s;"
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='none'; this.style.boxShadow='0 2px 10px rgba(0,0,0,0.1)';">
<div style="font-size: 32px; width: 50px; text-align: center;">${rec.icon}</div>
<div style="flex: 1;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<h4 style="margin: 0; color: #2C3E50;">${i + 1}. ${rec.title}</h4>
<span style="background: ${rec.type === 'tool' ? '#E8F6F3' : rec.type === 'reading' ? '#EBF5FB' : rec.type === 'reference' ? '#FEF5E7' : '#F5EEF8'};
color: ${rec.type === 'tool' ? '#16A085' : rec.type === 'reading' ? '#3498DB' : rec.type === 'reference' ? '#E67E22' : '#9B59B6'};
padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: bold;">
${rec.type} | ${rec.time}
</span>
</div>
<p style="margin: 8px 0 0 0; color: #666; font-size: 14px;">${rec.reason}</p>
</div>
<div style="color: #ccc; font-size: 24px;">β</div>
</div>
</a>
`)}
</div>
`}
</div>
`