Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Electrician Lessons</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .interactive-card { | |
| transition: all 0.3s ease; | |
| } | |
| .interactive-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .quiz-option { | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .quiz-option:hover { | |
| background-color: #f0f4ff; | |
| } | |
| .correct { | |
| background-color: #d1fae5 ; | |
| } | |
| .incorrect { | |
| background-color: #fee2e2 ; | |
| } | |
| .wiring-diagram { | |
| background-color: #f3f4f6; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| } | |
| .wire { | |
| stroke-width: 3; | |
| stroke-linecap: round; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-xl font-bold text-indigo-600">ElectricianHub</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4"> | |
| <a href="index.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="electricians.html" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Lessons</a> | |
| <a href="interactive.html" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Interactive</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Safety</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-20 bg-gradient-to-r from-indigo-500 to-blue-600 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Interactive Learning</h1> | |
| <p class="text-xl mb-8">Practice electrical concepts with hands-on simulations</p> | |
| </div> | |
| </section> | |
| <!-- Interactive Modules Section --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Circuit Builder --> | |
| <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right"> | |
| <h2 class="text-2xl font-bold mb-4 text-indigo-600">Circuit Builder</h2> | |
| <p class="text-gray-600 mb-6">Drag and drop components to build working circuits</p> | |
| <div class="wiring-diagram mb-4" id="circuit-builder"> | |
| <svg width="100%" height="200" viewBox="0 0 400 200"> | |
| <rect x="50" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" /> | |
| <text x="90" y="75" text-anchor="middle" fill="#374151" font-size="14">Battery</text> | |
| <rect x="180" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" /> | |
| <text x="220" y="75" text-anchor="middle" fill="#374151" font-size="14">Switch</text> | |
| <rect x="310" y="50" width="80" height="40" rx="5" fill="#e5e7eb" stroke="#9ca3af" /> | |
| <text x="350" y="75" text-anchor="middle" fill="#374151" font-size="14">Light</text> | |
| </svg> | |
| </div> | |
| <div class="flex space-x-3 mb-4"> | |
| <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Battery</div> | |
| <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Resistor</div> | |
| <div class="bg-gray-100 px-3 py-2 rounded cursor-move" draggable="true">Switch</div> | |
| </div> | |
| <button id="test-circuit" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Test Circuit</button> | |
| </div> | |
| <!-- Wiring Simulator --> | |
| <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left"> | |
| <h2 class="text-2xl font-bold mb-4 text-indigo-600">Wiring Simulator</h2> | |
| <p class="text-gray-600 mb-6">Practice connecting wires to complete circuits</p> | |
| <div class="wiring-diagram mb-4"> | |
| <svg width="100%" height="200" viewBox="0 0 400 200"> | |
| <rect x="50" y="80" width="30" height="30" rx="15" fill="#f59e0b" /> | |
| <rect x="320" y="80" width="30" height="30" rx="15" fill="#10b981" /> | |
| <line x1="80" y1="95" x2="320" y2="95" class="wire" stroke="#9ca3af" stroke-dasharray="5,5" /> | |
| <circle cx="200" cy="95" r="10" fill="#ffffff" stroke="#9ca3af" /> | |
| </svg> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="connect-wire" class="bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition">Connect Wire</button> | |
| </div> | |
| </div> | |
| <!-- Safety Quiz --> | |
| <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-right"> | |
| <h2 class="text-2xl font-bold mb-4 text-indigo-600">Safety Quiz</h2> | |
| <p class="text-gray-600 mb-6">Test your knowledge of electrical safety procedures</p> | |
| <div id="quiz-container"> | |
| <div class="font-medium mb-2">Question 1: What should you always do before working on a circuit?</div> | |
| <div class="space-y-2 mb-4"> | |
| <div class="quiz-option p-2 border rounded">A. Turn off the power at the breaker</div> | |
| <div class="quiz-option p-2 border rounded">B. Wear rubber-soled shoes</div> | |
| <div class="quiz-option p-2 border rounded">C. Check with a non-contact voltage tester</div> | |
| <div class="quiz-option p-2 border rounded">D. All of the above</div> | |
| </div> | |
| <button id="check-answer" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition">Check Answer</button> | |
| </div> | |
| </div> | |
| <!-- Voltage Measurement --> | |
| <div class="interactive-card bg-white rounded-xl shadow-md overflow-hidden p-6" data-aos="fade-left"> | |
| <h2 class="text-2xl font-bold mb-4 text-indigo-600">Voltage Measurement</h2> | |
| <p class="text-gray-600 mb-6">Practice using a multimeter to measure voltage</p> | |
| <div class="wiring-diagram mb-4"> | |
| <svg width="100%" height="200" viewBox="0 0 400 200"> | |
| <rect x="100" y="50" width="60" height="100" rx="5" fill="#f3f4f6" stroke="#9ca3af" /> | |
| <text x="130" y="120" text-anchor="middle" fill="#374151" font-size="14">Battery</text> | |
| <rect x="240" y="70" width="100" height="60" rx="5" fill="#f3f4f6" stroke="#9ca3af" /> | |
| <text x="290" y="105" text-anchor="middle" fill="#374151" font-size="14">Multimeter</text> | |
| </svg> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Measured Voltage:</span> | |
| <span id="voltage-reading" class="font-bold text-indigo-600">0.00 V</span> | |
| </div> | |
| <input type="range" id="voltage-slider" min="0" max="240" value="0" class="w-full mt-4" /> | |
| <button id="test-voltage" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition mt-4">Test Measurement</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Feedback Section --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">Interactive Learning Benefits</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6"> | |
| <i data-feather="zap" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Practical Experience</h3> | |
| <p class="text-gray-600">Gain hands-on practice without real-world risks</p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <i data-feather="repeat" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Instant Feedback</h3> | |
| <p class="text-gray-600">Learn from mistakes immediately with corrections</p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <i data-feather="award" class="w-12 h-12 text-indigo-600 mx-auto mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">Confidence Building</h3> | |
| <p class="text-gray-600">Develop skills before working with real circuits</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Circuit Builder Interaction | |
| document.getElementById('test-circuit').addEventListener('click', function() { | |
| alert('Testing circuit... All connections are correct!'); | |
| }); | |
| // Wiring Simulator Interaction | |
| document.getElementById('connect-wire').addEventListener('click', function() { | |
| const svg = document.querySelector('.wiring-diagram svg'); | |
| const dashLine = svg.querySelector('line.wire'); | |
| dashLine.setAttribute('stroke-dasharray', '0'); | |
| dashLine.setAttribute('stroke', '#3b82f6'); | |
| this.textContent = 'Connected!'; | |
| this.disabled = true; | |
| }); | |
| // Safety Quiz Interaction | |
| document.querySelectorAll('.quiz-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| document.querySelectorAll('.quiz-option').forEach(opt => { | |
| opt.classList.remove('bg-indigo-100'); | |
| }); | |
| this.classList.add('bg-indigo-100'); | |
| }); | |
| }); | |
| document.getElementById('check-answer').addEventListener('click', function() { | |
| const selected = document.querySelector('.quiz-option.bg-indigo-100'); | |
| if (selected) { | |
| if (selected.textContent.includes('D. All of the above')) { | |
| selected.classList.add('correct'); | |
| setTimeout(() => { | |
| alert('Correct! Always follow all safety procedures when working with electricity.'); | |
| }, 300); | |
| } else { | |
| selected.classList.add('incorrect'); | |
| setTimeout(() => { | |
| alert('Incorrect. The right answer is: D. All of the above'); | |
| }, 300); | |
| } | |
| } else { | |
| alert('Please select an answer first!'); | |
| } | |
| }); | |
| // Voltage Measurement Interaction | |
| const voltageSlider = document.getElementById('voltage-slider'); | |
| const voltageReading = document.getElementById('voltage-reading'); | |
| voltageSlider.addEventListener('input', function() { | |
| voltageReading.textContent = this.value + '.00 V'; | |
| }); | |
| document.getElementById('test-voltage').addEventListener('click', function() { | |
| const voltage = parseInt(voltageSlider.value); | |
| if (voltage > 0) { | |
| alert(`Measuring ${voltage}V...\nProper multimeter settings: AC/DC voltage mode, range > ${voltage}V`); | |
| } else { | |
| alert('No voltage detected. Check your connections or increase the voltage.'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |