<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 520px;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.25s ease;
    }

    .btn-step.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: #334155;
    }

    /* Bench Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .spot-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      min-height: 165px;
    }

    .spot-card.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
    }

    .spot-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      margin-bottom: 6px;
    }

    /* Test Arena Stage */
    .stage {
      width: 100%;
      height: 90px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    /* Magnet */
    .magnet-wrap {
      position: absolute;
      top: 2px;
      width: 36px;
      height: 34px;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 10;
    }

    .magnet-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }

    /* Pedestal / Circular Spot */
    .pedestal {
      width: 68px;
      height: 14px;
      background: #e2e8f0;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      position: absolute;
      bottom: 2px;
      z-index: 1;
    }

    /* Target Item */
    .item-target {
      position: absolute;
      bottom: 6px;
      z-index: 5;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Animated states */
    .spot-card.active.magnetic .magnet-wrap {
      transform: translateY(12px);
    }

    .spot-card.active.magnetic .item-target {
      transform: translateY(-24px);
      animation: gentleVibe 0.3s ease infinite alternate;
    }

    .spot-card.active.non-magnetic .magnet-wrap {
      transform: translateY(30px);
    }

    .spot-card.active.non-magnetic .item-target {
      transform: translateY(0);
    }

    @keyframes gentleVibe {
      0% { transform: translateY(-24px) rotate(-1deg); }
      100% { transform: translateY(-24px) rotate(1deg); }
    }

    /* Magnetic Field Lines FX */
    .field-lines {
      position: absolute;
      top: 32px;
      width: 32px;
      height: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 4;
    }

    .spot-card.active.magnetic .field-lines {
      opacity: 1;
    }

    /* Status Badge */
    .badge {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      text-align: center;
      white-space: nowrap;
      transition: all 0.3s ease;
      opacity: 0.4;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #cbd5e1;
    }

    .spot-card.active .badge.mag {
      opacity: 1;
      background: #ecfdf5;
      color: #047857;
      border-color: #a7f3d0;
    }

    .spot-card.active .badge.non-mag {
      opacity: 1;
      background: #f1f5f9;
      color: #475569;
      border-color: #cbd5e1;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-play" id="playBtn" title="Auto test">⏸</button>
    <button class="btn-step active" data-index="0">1. Clip</button>
    <button class="btn-step" data-index="1">2. Eraser</button>
    <button class="btn-step" data-index="2">3. Can</button>
    <button class="btn-step" data-index="3">4. Ring</button>
  </div>

  
  <div class="grid">
    
    
    <div class="spot-card active magnetic" data-index="0">
      <div class="spot-title">Steel Binder Clip</div>
      <div class="stage">
        <div class="magnet-wrap">
          <svg class="magnet-svg" viewBox="0 0 40 38">
            <path d="M6 34 V16 C6 8 34 8 34 16 V34 H24 V17 C24 13 16 13 16 17 V34 Z" fill="#ef4444"/>
            <rect x="6" y="24" width="10" height="10" fill="#3b82f6"/>
            <rect x="24" y="24" width="10" height="10" fill="#94a3b8"/>
            <rect x="6" y="28" width="10" height="6" fill="#cbd5e1"/>
            <rect x="24" y="28" width="10" height="6" fill="#cbd5e1"/>
          </svg>
        </div>
        <svg class="field-lines" viewBox="0 0 40 24">
          <path d="M10 2 C 10 16, 30 16, 30 2" fill="none" stroke="#38bdf8" stroke-width="2" stroke-dasharray="3,2"/>
        </svg>
        <div class="item-target">
          
          <svg width="28" height="28" viewBox="0 0 32 32">
            <path d="M11 6 L21 6 L25 24 L7 24 Z" fill="#1e293b"/>
            <path d="M10 8 L16 2 L22 8" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
            <rect x="7" y="22" width="18" height="4" rx="2" fill="#334155"/>
          </svg>
        </div>
        <div class="pedestal"></div>
      </div>
      <div class="badge mag">Magnetic</div>
    </div>

    
    <div class="spot-card non-magnetic" data-index="1">
      <div class="spot-title">Pink Eraser</div>
      <div class="stage">
        <div class="magnet-wrap">
          <svg class="magnet-svg" viewBox="0 0 40 38">
            <path d="M6 34 V16 C6 8 34 8 34 16 V34 H24 V17 C24 13 16 13 16 17 V34 Z" fill="#ef4444"/>
            <rect x="6" y="24" width="10" height="10" fill="#3b82f6"/>
            <rect x="24" y="24" width="10" height="10" fill="#94a3b8"/>
            <rect x="6" y="28" width="10" height="6" fill="#cbd5e1"/>
            <rect x="24" y="28" width="10" height="6" fill="#cbd5e1"/>
          </svg>
        </div>
        <div class="item-target">
          
          <svg width="34" height="20" viewBox="0 0 40 24">
            <polygon points="6,20 2,12 30,4 38,12" fill="#fb7185"/>
            <polygon points="6,20 34,20 38,12 30,4 2,12" fill="#f43f5e" opacity="0.85"/>
          </svg>
        </div>
        <div class="pedestal"></div>
      </div>
      <div class="badge non-mag">Non-Magnetic</div>
    </div>

    
    <div class="spot-card non-magnetic" data-index="2">
      <div class="spot-title">Aluminum Can</div>
      <div class="stage">
        <div class="magnet-wrap">
          <svg class="magnet-svg" viewBox="0 0 40 38">
            <path d="M6 34 V16 C6 8 34 8 34 16 V34 H24 V17 C24 13 16 13 16 17 V34 Z" fill="#ef4444"/>
            <rect x="6" y="24" width="10" height="10" fill="#3b82f6"/>
            <rect x="24" y="24" width="10" height="10" fill="#94a3b8"/>
            <rect x="6" y="28" width="10" height="6" fill="#cbd5e1"/>
            <rect x="24" y="28" width="10" height="6" fill="#cbd5e1"/>
          </svg>
        </div>
        <div class="item-target">
          
          <svg width="22" height="32" viewBox="0 0 24 36">
            <rect x="3" y="4" width="18" height="28" rx="4" fill="#0ea5e9"/>
            <ellipse cx="12" cy="4" rx="8" ry="2.5" fill="#cbd5e1"/>
            <ellipse cx="12" cy="32" rx="8" ry="2.5" fill="#94a3b8"/>
            <rect x="7" y="12" width="10" height="12" rx="2" fill="#ffffff" opacity="0.9"/>
          </svg>
        </div>
        <div class="pedestal"></div>
      </div>
      <div class="badge non-mag">Non-Magnetic (Aluminum)</div>
    </div>

    
    <div class="spot-card magnetic" data-index="3">
      <div class="spot-title">Steel Key Ring</div>
      <div class="stage">
        <div class="magnet-wrap">
          <svg class="magnet-svg" viewBox="0 0 40 38">
            <path d="M6 34 V16 C6 8 34 8 34 16 V34 H24 V17 C24 13 16 13 16 17 V34 Z" fill="#ef4444"/>
            <rect x="6" y="24" width="10" height="10" fill="#3b82f6"/>
            <rect x="24" y="24" width="10" height="10" fill="#94a3b8"/>
            <rect x="6" y="28" width="10" height="6" fill="#cbd5e1"/>
            <rect x="24" y="28" width="10" height="6" fill="#cbd5e1"/>
          </svg>
        </div>
        <svg class="field-lines" viewBox="0 0 40 24">
          <path d="M10 2 C 10 16, 30 16, 30 2" fill="none" stroke="#38bdf8" stroke-width="2" stroke-dasharray="3,2"/>
        </svg>
        <div class="item-target">
          
          <svg width="26" height="26" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="11" fill="none" stroke="#64748b" stroke-width="4"/>
            <circle cx="16" cy="16" r="11" fill="none" stroke="#cbd5e1" stroke-width="2"/>
            <path d="M22 14 L28 14 L28 18 L24 18" stroke="#64748b" stroke-width="2" fill="none"/>
          </svg>
        </div>
        <div class="pedestal"></div>
      </div>
      <div class="badge mag">Magnetic (Steel)</div>
    </div>

  </div>

  <script>
    (function() {
      const cards = document.querySelectorAll('.spot-card');
      const stepBtns = document.querySelectorAll('.btn-step');
      const playBtn = document.getElementById('playBtn');

      let currentIndex = 0;
      let isPlaying = true;
      let intervalId = null;

      function setActiveStep(index) {
        currentIndex = index;
        cards.forEach((card, i) => {
          if (i === index) {
            card.classList.add('active');
          } else {
            card.classList.remove('active');
          }
        });

        stepBtns.forEach((btn, i) => {
          if (i === index) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        });
      }

      function nextStep() {
        const next = (currentIndex + 1) % cards.length;
        setActiveStep(next);
      }

      function startAutoPlay() {
        isPlaying = true;
        playBtn.textContent = '⏸';
        clearInterval(intervalId);
        intervalId = setInterval(nextStep, 3200);
      }

      function stopAutoPlay() {
        isPlaying = false;
        playBtn.textContent = '▶';
        clearInterval(intervalId);
      }

      // Event Listeners for Steps
      stepBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const idx = parseInt(btn.dataset.index, 10);
          setActiveStep(idx);
          stopAutoPlay();
        });
      });

      cards.forEach(card => {
        card.addEventListener('click', () => {
          const idx = parseInt(card.dataset.index, 10);
          setActiveStep(idx);
          stopAutoPlay();
        });
      });

      playBtn.addEventListener('click', () => {
        if (isPlaying) {
          stopAutoPlay();
        } else {
          startAutoPlay();
        }
      });

      // Start initial cycle
      startAutoPlay();
    })();
  </script>
</body>
</html>

Investigating Magnetic Properties of Everyday Objects

<!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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .scene-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Desk surface */
    .desk {
      position: relative;
      width: 100%;
      height: 280px;
      background: linear-gradient(180deg, #f5eedf 0%, #ecdcc2 85%, #d8c29d 100%);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.04), 0 4px 12px rgba(120,90,50,0.12);
      border: 2px solid #e2cfb0;
    }

    /* Desk woodgrain subtle lines */
    .desk::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 38px,
        rgba(180, 140, 90, 0.08) 39px,
        transparent 40px
      );
      pointer-events: none;
    }

    /* Status Badges */
    .badge-bar {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    .badge-pull {
      background: #e0f2fe;
      color: #0284c7;
      border: 1.5px solid #bae6fd;
    }

    .badge-no-pull {
      background: #f1f5f9;
      color: #64748b;
      border: 1.5px solid #cbd5e1;
    }

    /* Magnet Container */
    .magnet-container {
      position: absolute;
      top: 38px;
      left: 32px;
      width: 90px;
      height: 90px;
    }

    /* Animated Magnetic Field Pulses */
    .field-wave {
      position: absolute;
      top: 50px;
      left: 110px;
      width: 24px;
      height: 60px;
      border-right: 3px dashed #38bdf8;
      border-radius: 0 30px 30px 0;
      opacity: 0;
      animation: pulseField 3.6s infinite ease-out;
    }

    .field-wave.w2 {
      left: 130px;
      height: 76px;
      top: 42px;
      animation-delay: 0.25s;
    }

    @keyframes pulseField {
      0%, 15% { opacity: 0; transform: scaleX(0.7); }
      30%, 55% { opacity: 0.8; transform: scaleX(1.1); }
      75%, 100% { opacity: 0; transform: scaleX(1.3); }
    }

    /* Paperclip track & animated element */
    .track-top {
      position: absolute;
      top: 52px;
      left: 110px;
      right: 32px;
      height: 60px;
      border-bottom: 2px dashed rgba(2, 132, 199, 0.25);
    }

    .paperclip {
      position: absolute;
      top: 60px;
      left: 420px;
      width: 54px;
      height: 24px;
      animation: snapPaperclip 3.6s infinite cubic-bezier(0.25, 1, 0.5, 1);
      filter: drop-shadow(0 3px 2px rgba(0,0,0,0.18));
      cursor: default;
    }

    @keyframes snapPaperclip {
      0%, 18% {
        left: 420px;
        transform: rotate(0deg);
        opacity: 1;
      }
      52% {
        left: 104px;
        transform: rotate(-4deg);
        opacity: 1;
      }
      55%, 82% {
        left: 98px;
        transform: rotate(-6deg);
        opacity: 1;
      }
      88% {
        left: 98px;
        transform: rotate(-6deg);
        opacity: 0;
      }
      92% {
        left: 420px;
        transform: rotate(0deg);
        opacity: 0;
      }
      100% {
        left: 420px;
        transform: rotate(0deg);
        opacity: 1;
      }
    }

    /* Static items section */
    .static-items {
      position: absolute;
      bottom: 26px;
      left: 180px;
      right: 32px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .static-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      filter: drop-shadow(0 4px 3px rgba(0,0,0,0.14));
    }

    .item-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      background: rgba(255, 255, 255, 0.85);
      padding: 2px 8px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* Play/Pause Button */
    .ctrl-row {
      display: flex;
      justify-content: center;
      margin-top: 2px;
    }

    .btn-toggle {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
    }

    .btn-toggle:hover {
      background: #f1f5f9;
    }

    .btn-toggle:active {
      background: #e2e8f0;
    }

    .paused .paperclip,
    .paused .field-wave {
      animation-play-state: paused !important;
    }

    /* Small screens */
    @media (max-width: 480px) {
      .desk {
        height: 250px;
      }
      .paperclip {
        animation-name: snapPaperclipMobile;
      }
      @keyframes snapPaperclipMobile {
        0%, 18% { left: 240px; transform: rotate(0deg); opacity: 1; }
        52% { left: 104px; transform: rotate(-4deg); opacity: 1; }
        55%, 82% { left: 98px; transform: rotate(-6deg); opacity: 1; }
        88% { left: 98px; opacity: 0; }
        92% { left: 240px; opacity: 0; }
        100% { left: 240px; opacity: 1; }
      }
      .static-items {
        left: 120px;
      }
    }
  </style>
</head>
<body>

  <div class="scene-wrap" id="sceneWrap">
    
    <div class="badge-bar">
      <div class="badge badge-pull">
        <span>⚡</span> Pulls steel paperclip!
      </div>
      <div class="badge badge-no-pull">
        <span>✕</span> No pull on pencil or eraser
      </div>
    </div>

    
    <div class="desk">
      
      <div class="field-wave"></div>
      <div class="field-wave w2"></div>

      
      <div class="track-top"></div>

      
      <div class="magnet-container" title="Horseshoe Magnet">
        <svg viewBox="0 0 100 100" width="90" height="90">
          <defs>
            <filter id="mag-shadow" x="-10%" y="-10%" width="130%" height="130%">
              <feDropShadow dx="0" dy="4" stdDeviation="2" flood-color="#000" flood-opacity="0.2"/>
            </filter>
          </defs>
          
          <path d="M 22,88 L 22,46 C 22,20 78,20 78,46 L 78,88" 
                fill="none" stroke="#ef4444" stroke-width="22" stroke-linecap="butt" filter="url(#mag-shadow)"/>
          
          
          <rect x="11" y="68" width="22" height="22" fill="#cbd5e1" rx="2"/>
          <rect x="67" y="68" width="22" height="22" fill="#cbd5e1" rx="2"/>
          
          
          <rect x="14" y="70" width="4" height="18" fill="#ffffff" opacity="0.6" rx="1"/>
          <rect x="70" y="70" width="4" height="18" fill="#ffffff" opacity="0.6" rx="1"/>
          
          
          <text x="22" y="84" font-size="12" font-weight="900" fill="#334155" text-anchor="middle" font-family="sans-serif">N</text>
          <text x="78" y="84" font-size="12" font-weight="900" fill="#334155" text-anchor="middle" font-family="sans-serif">S</text>
        </svg>
      </div>

      
      <div class="paperclip" id="paperclip" title="Steel Paperclip">
        <svg viewBox="0 0 60 26" width="54" height="24">
          
          <path d="M 10,13 L 44,13 C 51,13 51,21 44,21 L 12,21 C 4,21 4,5 12,5 L 48,5 C 57,5 57,25 46,25" 
                fill="none" stroke="#64748b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M 10,12 L 44,12 C 50,12 50,20 44,20 L 12,20 C 5,20 5,6 12,6 L 48,6 C 56,6 56,24 46,24" 
                fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      
      <div class="static-items">
        
        <div class="static-item" title="Wooden Pencil">
          <svg viewBox="0 0 140 24" width="130" height="22">
            
            <rect x="2" y="5" width="16" height="14" rx="3" fill="#fb7185"/>
            <rect x="16" y="4" width="10" height="16" fill="#94a3b8" rx="1"/>
            <line x1="20" y1="4" x2="20" y2="20" stroke="#64748b" stroke-width="1"/>
            
            
            <polygon points="26,4 112,4 112,20 26,20" fill="#facc15"/>
            <line x1="26" y1="12" x2="112" y2="12" stroke="#eab308" stroke-width="2"/>
            
            
            <polygon points="112,4 130,12 112,20" fill="#fde68a"/>
            <polygon points="124,9.5 134,12 124,14.5" fill="#334155"/>
          </svg>
          <span class="item-tag">Wood</span>
        </div>

        
        <div class="static-item" title="Plastic Eraser">
          <svg viewBox="0 0 60 30" width="56" height="28">
            
            <polygon points="4,24 48,24 56,8 12,8" fill="#10b981"/>
            <polygon points="4,24 12,8 12,2 4,18" fill="#059669"/>
            <polygon points="12,2 56,2 56,8 12,8" fill="#34d399"/>
          </svg>
          <span class="item-tag">Plastic</span>
        </div>
      </div>
    </div>

    
    <div class="ctrl-row">
      <button class="btn-toggle" id="toggleBtn">
        <span id="btnIcon">⏸</span> <span id="btnText">Pause</span>
      </button>
    </div>
  </div>

  <script>
    const sceneWrap = document.getElementById('sceneWrap');
    const toggleBtn = document.getElementById('toggleBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');
    let isPlaying = true;

    toggleBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        sceneWrap.classList.remove('paused');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Pause';
      } else {
        sceneWrap.classList.add('paused');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play';
      }
    });
  </script>
</body>
</html>

<!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: transparent;
      color: #1e2945;
      padding: 8px;
    }

    .classification-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .column {
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .col-magnetic {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }

    .col-nonmagnetic {
      background: #fef2f2;
      border: 1.5px solid #fecaca;
    }

    .header {
      text-align: center;
      padding-bottom: 2px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .badge-magnetic {
      background: #16a34a;
      color: #ffffff;
    }

    .badge-nonmagnetic {
      background: #dc2626;
      color: #ffffff;
    }

    .subtitle {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 3px;
    }

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

    .item-card {
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .item-card:hover {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .col-magnetic .item-card:hover {
      border-color: #86efac;
      background: #fcfdfd;
    }

    .col-nonmagnetic .item-card:hover {
      border-color: #fca5a5;
      background: #fcfdfd;
    }

    .item-icon {
      font-size: 18px;
      line-height: 1;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
    }

    .item-name {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      line-height: 1.2;
    }

    @media (max-width: 380px) {
      .classification-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .column {
        padding: 8px 5px;
      }
      .badge {
        font-size: 13px;
        padding: 3px 7px;
      }
      .subtitle {
        font-size: 10px;
      }
      .item-card {
        padding: 6px 6px;
        gap: 5px;
      }
      .item-icon {
        font-size: 16px;
        width: 18px;
      }
      .item-name {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>
  <div class="classification-grid">
    
    <div class="column col-magnetic">
      <div class="header">
        <div class="badge badge-magnetic">
          <span>✓</span> Magnetic
        </div>
        <div class="subtitle">(Iron / Steel)</div>
      </div>
      <div class="card-list">
        <div class="item-card">
          <span class="item-icon">📎</span>
          <span class="item-name">Steel Paperclip</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🔩</span>
          <span class="item-name">Steel Nail</span>
        </div>
        <div class="item-card">
          <span class="item-icon">✂️</span>
          <span class="item-name">Scissor Blade</span>
        </div>
      </div>
    </div>

    
    <div class="column col-nonmagnetic">
      <div class="header">
        <div class="badge badge-nonmagnetic">
          <span>✕</span> Non-Magnetic
        </div>
        <div class="subtitle">(No Iron)</div>
      </div>
      <div class="card-list">
        <div class="item-card">
          <span class="item-icon">📏</span>
          <span class="item-name">Wooden Ruler</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🔘</span>
          <span class="item-name">Plastic Button</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🧦</span>
          <span class="item-name">Cotton Sock</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🪙</span>
          <span class="item-name">Copper Penny</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Asking Science Questions From What We See

Designing Investigations to Answer Scientific Questions

Safety First: Rules for Science Time

Science Tools: Hand Lenses, Thermometers, and More

Collecting What We Observe as Evidence

Recording Data with Pictures, Numbers, and Graphs

Building Models to Show How Things Work

science

Being a Young Scientist

Magnesy trwałe — bieguny magnetyczne i oddziaływania

Magnesy trwałe — bieguny N i S, oddziaływanie dipolowe i brak monopoli magnetycznych

Kształty magnesów trwałych i linie pola magnetycznego

Oddziaływanie magnesu na żelazo i inne ferromagnetyki

Namagnesowanie stali i żelaza — magnesy twarde i miękkie magnetycznie

Praktyczne zastosowania magnesów trwałych w życiu codziennym

Separacja magnetyczna w recyklingu i magnetyczny zapis informacji

Magnesy trwałe i oddziaływania magnetyczne

Igła magnetyczna jako swobodny magnes obrotowy

Pole magnetyczne Ziemi i zasada działania kompasu

Pole magnetyczne Ziemi — model dipola geomagnetycznego i bieguny magnetyczne

Magnetosfera Ziemi i jej rola ochronna

Zorza polarna i magnetorecepcja u zwierząt

Budowa i posługiwanie się kompasem oraz busolą w terenie

Doświadczenie Oersteda — odkrycie magnetyzmu prądu elektrycznego

Pole magnetyczne wokół przewodnika prostoliniowego — układ współśrodkowych okręgów

Reguła prawej dłoni dla przewodnika prostoliniowego

Pole magnetyczne zwojnicy (solenoidu) z prądem

Wyznaczanie biegunów magnetycznych zwojnicy z prądem

Czynniki wpływające na natężenie pola magnetycznego zwojnicy

Pole magnetyczne prądu elektrycznego i doświadczenie Oersteda

Lupa — narzędzie powiększające w przyrodzie

Kompas — wyznaczanie kierunków w terenie

Taśma miernicza — pomiar odległości w terenie

Lornetka — obserwacje z daleka

Narzędzia obserwacji — lupa, lornetka i mikroskop

Plan i mapa jako pomoc w terenie

Odczytywanie informacji z planu terenu

Korzystanie z mapy topograficznej w terenie

Przyrządy do obserwacji i orientacji w terenie

认识条形磁铁、蹄形磁铁与环形磁铁

探究磁铁能吸引哪些常见物体

探究磁铁隔着纸片、木板和水能否吸引铁物

探究磁铁两端（磁极）与中间部位的吸铁能力强弱

探究磁极间的相互作用：同极相斥、异极相吸

磁铁在生活中的应用与指南针指向启蒙

磁铁对物体的吸引与磁极相互作用

Elektromagnes — budowa, zasada działania i zastosowania

Budowa i działanie elektromagnesu — wielokrotne wzmocnienie pola przez rdzeń ze stali miękkiej

Wzajemne oddziaływanie elektromagnesów i magnesów trwałych

Zastosowania elektromagnesów — dźwigi elektromagnetyczne, przekaźniki i zamki magnetyczne

Głośnik elektrodynamiczny i słuchawki — elektromagnes w akustyce

Nowoczesne technologie — kolej lewitacji magnetycznej Maglev i tomografia MRI

Elektromagnes — budowa, działanie i zastosowania

Making and Identifying Everyday Mixtures

Dissolving Solids in Water to Make Solutions

Factors Affecting Dissolving Rate: Temperature, Stirring, Grain Size

Separating Mixtures by Sieving: Particle Size Differences

Separating Insoluble Solids Using Filters and Screens

Recovering Dissolved Solids Through Evaporation

Separating Mixtures with Magnets and Floating

Mixtures, Solutions, and Separation Methods

磁铁两端吸铁多：探究磁铁的磁极

同极相斥异极相吸：磁极间的相互作用

认识指南针结构并准确测定八个方向

水浮法与悬挂法：动手制作简易指南针

磁铁的性质与自制指南针

Siła elektrodynamiczna — oddziaływanie pola magnetycznego na przewodnik z prądem

Reguła lewej dłoni Fleminga dla siły elektrodynamicznej

Ramka z prądem w polu magnetycznym — powstawanie ruchu obrotowego

Budowa i zasada działania silnika elektrycznego prądu stałego

Oddziaływanie przewodnika z prądem w polu magnetycznym: siła Lorentza i elektrodynamiczna

Silniki elektryczne w pojazdach i urządzeniach domowych

Silnik elektryczny i siła elektrodynamiczna

Doświadczenie: Badanie oddziaływania biegunów magnesów i zachowania igły magnetycznej

Doświadczenie: Obrazowanie linii pola magnetycznego za pomocą opiłków żelaznych

Pole magnetyczne wokół przewodnika z prądem i elektromagnes

Doświadczenie: Budowa własnego elektromagnesu i badanie czynników wpływających na jego siłę

OGS.2.PS.7

Aligned learning resources

Related diagrams