Spaces:
Running
Running
File size: 13,150 Bytes
65c7a39 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | <!DOCTYPE html>
<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 !important;
}
.incorrect {
background-color: #fee2e2 !important;
}
.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> |