HTML & CSS design number 1
Demo
https://fadymalek.github.io/HTML-Css_Templete1/circuit-quest/index.html is a self-contained interactive lesson (one HTML file, no install). Every topic has two parts:
- Learn: a demo lab the teacher runs in front of the class. A “What we discover” panel lights up each idea as it is shown.
- Solve: the students’ mission, with stars (bolts) for few mistakes.
| # | Topic | Learn (demo lab) | Solve (mission) |
|---|---|---|---|
| 1 | Battery Connection | Connect a bulb or motor; swap wires to reverse the motor | Close the Loop |
| 2 | Conductors & Insulators | Test objects in a gap; results are recorded | Conductor Detective (with tricky objects) |
| 3 | The Electric Wire | Build a wire from copper and plastic; cut-open view | Wire Repair Shop |
| 4 | The Dangerous Battery | 3 V, 9 V and 10,000 V on a 3 V bulb | Safe or Boom? (predict the result) |
| 5 | Resistors | Plain wire vs small vs big resistor; before or after the LED | Resistor Bodyguard |
| 6 | The Full Circuit | Battery + wire + resistor in any order | Circuit Builder |
| 7 | Breadboards | X-ray the hidden clips; example circuit | Breadboard X-Ray |
| 8 | Polarity | LED and buzzer, long leg to + | Which Way? |
Final challenges: Switch Master, Circuit Doctor, Breadboard Builder.
Direct links: #t3-learn, #t3-solve, #c1 … e.g. circuit-quest/index.html#t5-learn.
Every screen fits the window with no scrolling (full-screen button in the header). Works with mouse or touch. Progress is saved in the browser.