<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Circuit Test Visualizer */
    .tester-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .circuit-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 1;
      font-size: 13px;
      font-weight: 600;
    }
    .test-slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 140px;
      padding: 5px 10px;
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      transition: all 0.25s ease;
    }
    .test-slot.conducting {
      border-color: #22c55e;
      background: #f0fdf4;
      color: #15803d;
    }
    .test-slot.insulating {
      border-color: #94a3b8;
      background: #f1f5f9;
      color: #475569;
    }

    .bulb-status {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.25s ease;
    }
    .bulb-status.lit {
      background: #fef08a;
      color: #854d0e;
      box-shadow: 0 0 12px #facc15;
    }

    /* Columns Grid */
    .columns-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }
    .header-conductor {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .header-insulator {
      background: #e2e8f0;
      color: #334155;
      border: 1px solid #cbd5e1;
    }

    /* Item Cards */
    .card-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .item-card {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .item-card:hover {
      background: #f8fafc;
    }
    .item-card.active-conductor {
      border-color: #22c55e;
      background: #f0fdf4;
      box-shadow: 0 0 0 1.5px #22c55e;
    }
    .item-card.active-insulator {
      border-color: #64748b;
      background: #f1f5f9;
      box-shadow: 0 0 0 1.5px #64748b;
    }

    .icon-box {
      font-size: 16px;
      width: 22px;
      text-align: center;
      flex-shrink: 0;
    }

    @media (max-width: 420px) {
      body { padding: 6px; gap: 8px; }
      .tester-panel { flex-direction: column; gap: 6px; }
      .columns-grid { gap: 6px; }
      .item-card { padding: 6px 8px; font-size: 12px; }
      .col-header { font-size: 12px; padding: 6px; }
    }
  </style>
</head>
<body>

  
  <div class="tester-panel">
    <div class="circuit-track">
      <span>🔋 Battery</span>
      <span>⟶</span>
      <div id="testSlot" class="test-slot conducting">
        <span id="slotIcon">📎</span>
        <span id="slotLabel">Steel paperclip</span>
      </div>
      <span>⟶</span>
    </div>
    <div id="bulbState" class="bulb-status lit">
      <span id="bulbIcon">💡</span>
      <span id="bulbText">Bulb ON</span>
    </div>
  </div>

  
  <div class="columns-grid">
    
    <div class="column">
      <div class="col-header header-conductor">
        <span>💡</span>
        <span>Conductors (Bulb ON)</span>
      </div>
      <div class="card-list">
        <div class="item-card active-conductor" data-type="cond" data-icon="📎" data-name="Steel paperclip">
          <span class="icon-box">📎</span>
          <span>Steel paperclip</span>
        </div>
        <div class="item-card" data-type="cond" data-icon="🪙" data-name="Copper coin">
          <span class="icon-box">🪙</span>
          <span>Copper coin</span>
        </div>
        <div class="item-card" data-type="cond" data-icon="◽" data-name="Aluminum foil strip">
          <span class="icon-box">◽</span>
          <span>Aluminum foil strip</span>
        </div>
        <div class="item-card" data-type="cond" data-icon="🔩" data-name="Brass screw">
          <span class="icon-box">🔩</span>
          <span>Brass screw</span>
        </div>
        <div class="item-card" data-type="cond" data-icon="✏️" data-name="Graphite pencil core">
          <span class="icon-box">✏️</span>
          <span>Graphite pencil core</span>
        </div>
      </div>
    </div>

    
    <div class="column">
      <div class="col-header header-insulator">
        <span>🌑</span>
        <span>Insulators (Bulb OFF)</span>
      </div>
      <div class="card-list">
        <div class="item-card" data-type="ins" data-icon="🧼" data-name="Rubber eraser">
          <span class="icon-box">🧼</span>
          <span>Rubber eraser</span>
        </div>
        <div class="item-card" data-type="ins" data-icon="📏" data-name="Wooden ruler">
          <span class="icon-box">📏</span>
          <span>Wooden ruler</span>
        </div>
        <div class="item-card" data-type="ins" data-icon="🧴" data-name="Plastic cap">
          <span class="icon-box">🧴</span>
          <span>Plastic cap</span>
        </div>
        <div class="item-card" data-type="ins" data-icon="🔮" data-name="Glass marble">
          <span class="icon-box">🔮</span>
          <span>Glass marble</span>
        </div>
        <div class="item-card" data-type="ins" data-icon="🧵" data-name="Cotton string">
          <span class="icon-box">🧵</span>
          <span>Cotton string</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.item-card');
    const slot = document.getElementById('testSlot');
    const slotIcon = document.getElementById('slotIcon');
    const slotLabel = document.getElementById('slotLabel');
    const bulbState = document.getElementById('bulbState');
    const bulbIcon = document.getElementById('bulbIcon');
    const bulbText = document.getElementById('bulbText');

    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => {
          c.classList.remove('active-conductor', 'active-insulator');
        });

        const type = card.dataset.type;
        const icon = card.dataset.icon;
        const name = card.dataset.name;

        slotIcon.textContent = icon;
        slotLabel.textContent = name;

        if (type === 'cond') {
          card.classList.add('active-conductor');
          slot.className = 'test-slot conducting';
          bulbState.className = 'bulb-status lit';
          bulbIcon.textContent = '💡';
          bulbText.textContent = 'Bulb ON';
        } else {
          card.classList.add('active-insulator');
          slot.className = 'test-slot insulating';
          bulbState.className = 'bulb-status';
          bulbIcon.textContent = '🌑';
          bulbText.textContent = 'Bulb OFF';
        }
      });
    });
  </script>
</body>
</html>

Testing Materials to Identify Electrical Conductors and Insulators

Identifying Good Electrical Conductors: Metals and Graphite

Testing Metals: Copper, Iron, Aluminium, and Steel

Identifying Electrical Insulators: Plastics, Rubber, Wood, and Glass

science.ks2.y2.t5.s5

Aligned learning resources

Related diagrams