<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      padding: 8px 10px 4px 10px;
      box-sizing: border-box;
    }

    .header-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 12px;
      margin-bottom: 2px;
    }

    .step-badge {
      font-size: 12.5px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 10px;
      border-radius: 12px;
      line-height: 1.3;
    }

    .legend {
      display: flex;
      gap: 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      align-items: center;
      flex-shrink: 0;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }

    .stage-container {
      width: 100%;
      position: relative;
      margin-bottom: 4px;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .compass-group {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
      transform-origin: 0 0;
    }

    .plot-dot {
      transition: opacity 0.35s ease;
    }

    .field-line {
      stroke-dasharray: 450;
      stroke-dashoffset: 450;
      transition: stroke-dashoffset 0.6s ease-in-out;
    }

    .field-line.visible {
      stroke-dashoffset: 0;
    }

    .controls {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .step-btns {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }

    .btn-step {
      padding: 7px 2px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

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

    .btn-step.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .nav-btns {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .btn-action {
      flex: 1;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.25s ease;
    }

    .btn-next {
      background: #0284c7;
      color: #ffffff;
    }

    .btn-next:hover {
      background: #0369a1;
    }

    .btn-reset {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
      max-width: 90px;
    }

    .btn-reset:hover {
      background: #e2e8f0;
    }

    @media (max-width: 440px) {
      .header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
      }
      .step-badge {
        font-size: 12px;
        text-align: center;
        padding: 4px 8px;
      }
      .legend {
        justify-content: center;
        font-size: 11.5px;
        gap: 12px;
      }
      .btn-step {
        font-size: 11px;
        padding: 6px 1px;
      }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div id="stepBadge" class="step-badge">1. Place compass near N; mark tip dot</div>
    <div class="legend">
      <div class="legend-item"><span class="legend-dot" style="background:#ef4444;"></span>N (Tip)</div>
      <div class="legend-item"><span class="legend-dot" style="background:#cbd5e1; border:1px solid #94a3b8;"></span>S (Tail)</div>
    </div>
  </div>

  <div class="stage-container">
    <svg viewBox="0 0 480 225">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 2 L 8 5 L 1 8 z" fill="#0284c7" />
        </marker>
        <filter id="shadow" x="-10%" y="-10%" width="125%" height="125%">
          <feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-opacity="0.12"/>
        </filter>
      </defs>

      
      <path id="fieldLine" class="field-line" d="M 115 155 C 115 45, 365 45, 365 155" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round"/>
      <path d="M 235 72.5 L 245 72.5" fill="none" stroke="#0284c7" stroke-width="3" marker-end="url(#arrow)" id="midArrow" opacity="0" style="transition: opacity 0.35s ease;"/>

      
      <g id="dotsGroup">
        <circle id="dot0" class="plot-dot" cx="115" cy="155" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" opacity="0"/>
        <circle id="dot1" class="plot-dot" cx="154" cy="93" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" opacity="0"/>
        <circle id="dot2" class="plot-dot" cx="240" cy="72.5" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" opacity="0"/>
        <circle id="dot3" class="plot-dot" cx="326" cy="93" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" opacity="0"/>
        <circle id="dot4" class="plot-dot" cx="365" cy="155" r="5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" opacity="0"/>
      </g>

      
      <g id="barMagnet" filter="url(#shadow)">
        <rect x="120" y="170" width="120" height="42" rx="5" fill="#ef4444"/>
        <rect x="240" y="170" width="120" height="42" rx="5" fill="#3b82f6"/>
        <line x1="240" y1="170" x2="240" y2="212" stroke="#ffffff" stroke-width="1.5" opacity="0.6"/>
        <text x="180" y="192" fill="#ffffff" font-size="19" font-weight="800" text-anchor="middle" dominant-baseline="middle">N</text>
        <text x="300" y="192" fill="#ffffff" font-size="19" font-weight="800" text-anchor="middle" dominant-baseline="middle">S</text>
      </g>

      
      <g id="compass" class="compass-group" filter="url(#shadow)" transform="translate(134.5, 124) rotate(32)">
        <circle cx="0" cy="0" r="22" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
        
        <polygon points="0,0 -4.5,15 0,19 4.5,15" fill="#e2e8f0" stroke="#94a3b8" stroke-width="0.8"/>
        
        <polygon points="0,0 -4.5,-15 0,-19 4.5,-15" fill="#ef4444"/>
        
        <circle cx="0" cy="0" r="2.5" fill="#0f172a"/>
      </g>
    </svg>
  </div>

  <div class="controls">
    <div class="step-btns">
      <button class="btn-step active" onclick="setStep(0)">1. Place N</button>
      <button class="btn-step" onclick="setStep(1)">2. Move Tail</button>
      <button class="btn-step" onclick="setStep(2)">3. Plot to S</button>
      <button class="btn-step" onclick="setStep(3)">4. Draw Line</button>
    </div>
    <div class="nav-btns">
      <button class="btn-action btn-reset" onclick="setStep(0)">↺ Reset</button>
      <button id="nextBtn" class="btn-action btn-next" onclick="nextStep()">Next Step →</button>
    </div>
  </div>

  <script>
    let currentStep = 0;

    const stepsData = [
      {
        badge: "1. Place compass near N; mark tip dot",
        compass: { x: 134.5, y: 124, rot: 32, opacity: 1 },
        dots: [1, 1, 0, 0, 0],
        line: false
      },
      {
        badge: "2. Move tail to dot; mark new tip dot",
        compass: { x: 197, y: 82.8, rot: 76.6, opacity: 1 },
        dots: [1, 1, 1, 0, 0],
        line: false
      },
      {
        badge: "3. Repeat across to S pole",
        compass: { x: 345.5, y: 124, rot: 147.9, opacity: 1 },
        dots: [1, 1, 1, 1, 1],
        line: false
      },
      {
        badge: "4. Connect dots with field line (N → S)",
        compass: { x: 345.5, y: 124, rot: 147.9, opacity: 0 },
        dots: [1, 1, 1, 1, 1],
        line: true
      }
    ];

    function updateView() {
      const data = stepsData[currentStep];

      // Update badge
      document.getElementById('stepBadge').textContent = data.badge;

      // Update compass position & rotation
      const compass = document.getElementById('compass');
      compass.style.transform = `translate(${data.compass.x}px, ${data.compass.y}px) rotate(${data.compass.rot}deg)`;
      compass.style.opacity = data.compass.opacity;

      // Update dots visibility
      data.dots.forEach((visible, i) => {
        const dot = document.getElementById(`dot${i}`);
        if (dot) dot.style.opacity = visible ? '1' : '0';
      });

      // Update field line
      const fieldLine = document.getElementById('fieldLine');
      const midArrow = document.getElementById('midArrow');
      if (data.line) {
        fieldLine.classList.add('visible');
        setTimeout(() => {
          if (currentStep === 3) midArrow.style.opacity = '1';
        }, 350);
      } else {
        fieldLine.classList.remove('visible');
        midArrow.style.opacity = '0';
      }

      // Update buttons
      document.querySelectorAll('.btn-step').forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });

      const nextBtn = document.getElementById('nextBtn');
      if (currentStep === stepsData.length - 1) {
        nextBtn.textContent = "↺ Start Over";
      } else {
        nextBtn.textContent = "Next Step →";
      }
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % stepsData.length;
      updateView();
    }

    // Initialize
    updateView();
  </script>
</body>
</html>

Magnetic Field Mapping Around Bar Magnets and Solenoids

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bar Magnet vs Solenoid Magnetic Fields</title>
  <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: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 8px 10px;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      align-items: stretch;
    }
    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }
    .panel-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 2px;
      text-align: center;
      line-height: 1.2;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 160px;
      display: block;
    }
    .badge {
      font-size: 11px;
      font-weight: 600;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 3px 8px;
      text-align: center;
      margin-top: 4px;
      line-height: 1.25;
      width: 100%;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .controls {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .btn {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 16px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease;
    }
    .btn:hover {
      background: #1d4ed8;
    }
    .btn:active {
      background: #1e40af;
    }
    .f-line {
      fill: none;
      stroke: #3b82f6;
      stroke-width: 1.5;
    }
    .f-line-core {
      fill: none;
      stroke: #2563eb;
      stroke-width: 1.6;
      stroke-dasharray: 4 2;
    }
    .coil-back {
      stroke: #d97706;
      stroke-width: 2.2;
      fill: none;
      opacity: 0.4;
    }
    .coil-front {
      stroke: #b45309;
      stroke-width: 2.8;
      fill: none;
      stroke-linecap: round;
    }
    .pole-text {
      font-size: 12px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-title">Permanent Bar Magnet</div>
      <svg viewBox="0 0 200 160" aria-label="Permanent Bar Magnet field lines">
        <defs>
          <marker id="arr-r" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#3b82f6" />
          </marker>
          <marker id="arr-l" viewBox="0 0 6 6" refX="2" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 6 0 L 0 3 L 6 6 z" fill="#3b82f6" />
          </marker>
        </defs>

        
        <path d="M 56,58 C 56,16 144,16 144,58" class="f-line" />
        <path d="M 97,26 L 103,26" class="f-line" marker-end="url(#arr-r)" />

        <path d="M 46,64 C 24,-6 176,-6 154,64" class="f-line" />
        <path d="M 97,6 L 103,6" class="f-line" marker-end="url(#arr-r)" />

        <path d="M 56,86 C 56,128 144,128 144,86" class="f-line" />
        <path d="M 97,117 L 103,117" class="f-line" marker-end="url(#arr-r)" />

        <path d="M 46,80 C 24,150 176,150 154,80" class="f-line" />
        <path d="M 97,137 L 103,137" class="f-line" marker-end="url(#arr-r)" />

        
        <path d="M 44,68 L 16,65" class="f-line" marker-end="url(#arr-l)" />
        <path d="M 44,76 L 16,79" class="f-line" marker-end="url(#arr-l)" />
        <path d="M 184,65 L 156,68" class="f-line" marker-end="url(#arr-l)" />
        <path d="M 184,79 L 156,76" class="f-line" marker-end="url(#arr-l)" />

        
        <rect x="46" y="60" width="54" height="24" rx="2" fill="#ef4444" />
        <rect x="100" y="60" width="54" height="24" rx="2" fill="#3b82f6" />
        <rect x="46" y="60" width="108" height="24" rx="2" fill="none" stroke="#334155" stroke-width="1.2" />
        <line x1="100" y1="60" x2="100" y2="84" stroke="#ffffff" stroke-width="1" stroke-dasharray="2 1" />

        <text x="73" y="72" class="pole-text">N</text>
        <text x="127" y="72" class="pole-text">S</text>
      </svg>
      <div class="badge">Outside magnet:<br>Loops travel from N to S</div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Electromagnet (Solenoid)</div>
      <svg id="solSvg" viewBox="0 0 200 160" aria-label="Solenoid magnetic field lines and current flow">
        
      </svg>
      <div class="badge">Inside solenoid:<br>Uniform &amp; strong field (S to N)</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="flipBtn" onclick="toggleCurrent()">
      <span>Reverse Current Direction</span> ⇄
    </button>
  </div>

  <script>
    let reversed = false;

    function renderSolenoid() {
      const svg = document.getElementById('solSvg');
      const nLeft = !reversed;
      const leftPole = nLeft ? 'N' : 'S';
      const rightPole = nLeft ? 'S' : 'N';
      const leftColor = nLeft ? '#ef4444' : '#3b82f6';
      const rightColor = nLeft ? '#3b82f6' : '#ef4444';
      
      const dirR = nLeft; // When N is on left, external field loops to the right
      const extArr = dirR ? 'url(#s-arr-r)' : 'url(#s-arr-l)';
      const intArr = dirR ? 'url(#s-arr-l)' : 'url(#s-arr-r)';

      svg.innerHTML = `
        <defs>
          <marker id="s-arr-r" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
          </marker>
          <marker id="s-arr-l" viewBox="0 0 6 6" refX="2" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 6 0 L 0 3 L 6 6 z" fill="#2563eb" />
          </marker>
          <marker id="s-arr-g-r" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#15803d" />
          </marker>
          <marker id="s-arr-g-l" viewBox="0 0 6 6" refX="2" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 6 0 L 0 3 L 6 6 z" fill="#15803d" />
          </marker>
        </defs>

        
        <path d="M 54,58 C 54,16 146,16 146,58" class="f-line" />
        <path d="M 97,26 L ${dirR ? '103,26' : '91,26'}" class="f-line" marker-end="${extArr}" />

        <path d="M 46,64 C 24,-6 176,-6 154,64" class="f-line" />
        <path d="M 97,6 L ${dirR ? '103,6' : '91,6'}" class="f-line" marker-end="${extArr}" />

        
        <path d="M 54,86 C 54,112 146,112 146,86" class="f-line" />
        <path d="M 97,105 L ${dirR ? '103,105' : '91,105'}" class="f-line" marker-end="${extArr}" />

        
        ${nLeft ? `
          <path d="M 18,67 L 4,64" class="f-line" marker-end="url(#s-arr-l)" />
          <path d="M 18,77 L 4,80" class="f-line" marker-end="url(#s-arr-l)" />
          <path d="M 196,64 L 182,67" class="f-line" marker-end="url(#s-arr-l)" />
          <path d="M 196,80 L 182,77" class="f-line" marker-end="url(#s-arr-l)" />
        ` : `
          <path d="M 4,64 L 18,67" class="f-line" marker-end="url(#s-arr-r)" />
          <path d="M 4,80 L 18,77" class="f-line" marker-end="url(#s-arr-r)" />
          <path d="M 182,67 L 196,64" class="f-line" marker-end="url(#s-arr-r)" />
          <path d="M 182,77 L 196,80" class="f-line" marker-end="url(#s-arr-r)" />
        `}

        
        <line x1="42" y1="67" x2="158" y2="67" class="f-line-core" />
        <line x1="42" y1="72" x2="158" y2="72" class="f-line-core" />
        <line x1="42" y1="77" x2="158" y2="77" class="f-line-core" />

        
        <line x1="${dirR ? '106' : '94'}" y1="72" x2="${dirR ? '94' : '106'}" y2="72" class="f-line" stroke-width="2" marker-end="${intArr}" />

        
        
        <path d="M 44,80 L 56,62 M 64,82 L 76,62 M 84,82 L 96,62 M 104,82 L 116,62 M 124,82 L 136,62 M 144,82 L 156,80" class="coil-back" />

        
        <rect x="44" y="62" width="112" height="20" rx="3" fill="none" stroke="#94a3b8" stroke-width="0.8" stroke-dasharray="3 2" opacity="0.4"/>

        
        <path d="M 56,62 L 64,82 M 76,62 L 84,82 M 96,62 L 104,82 M 116,62 L 124,82 M 136,62 L 144,82" class="coil-front" />

        
        <path d="M 44,80 L 44,134 L 88,134" fill="none" stroke="#334155" stroke-width="1.5" />
        <path d="M 156,80 L 156,134 L 112,134" fill="none" stroke="#334155" stroke-width="1.5" />

        
        
        <line x1="88" y1="${nLeft ? '122' : '127'}" x2="88" y2="${nLeft ? '146' : '141'}" stroke="#0f172a" stroke-width="${nLeft ? '3.5' : '1.8'}" />
        
        <line x1="112" y1="${nLeft ? '127' : '122'}" x2="112" y2="${nLeft ? '141' : '146'}" stroke="#0f172a" stroke-width="${nLeft ? '1.8' : '3.5'}" />
        <line x1="88" y1="134" x2="96" y2="134" stroke="#0f172a" stroke-width="1.2" />
        <line x1="104" y1="134" x2="112" y2="134" stroke="#0f172a" stroke-width="1.2" />

        
        <text x="88" y="117" font-size="11" font-weight="800" fill="${nLeft ? '#dc2626' : '#2563eb'}" text-anchor="middle">${nLeft ? '+' : '−'}</text>
        <text x="112" y="117" font-size="11" font-weight="800" fill="${nLeft ? '#2563eb' : '#dc2626'}" text-anchor="middle">${nLeft ? '−' : '+'}</text>

        
        
        
        <line x1="${nLeft ? '76' : '52'}" y1="134" x2="${nLeft ? '52' : '76'}" y2="134" stroke="#15803d" stroke-width="2.2" marker-end="${nLeft ? 'url(#s-arr-g-l)' : 'url(#s-arr-g-r)'}" />
        <text x="64" y="148" font-size="9.5" font-weight="700" fill="#15803d" text-anchor="middle">Current I</text>

        
        <circle cx="28" cy="72" r="9" fill="${leftColor}" />
        <text x="28" y="72" class="pole-text">${leftPole}</text>

        <circle cx="172" cy="72" r="9" fill="${rightColor}" />
        <text x="172" y="72" class="pole-text">${rightPole}</text>
      `;
    }

    function toggleCurrent() {
      reversed = !reversed;
      renderSolenoid();
    }

    renderSolenoid();
  </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="5:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      user-select: none;
      -webkit-user-select: none;
      padding: 12px;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 500px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .field-line-hit {
      stroke: transparent;
      stroke-width: 20px;
      fill: none;
      cursor: pointer;
    }

    .field-line {
      fill: none;
      stroke: #64748b;
      stroke-width: 1.8;
      transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
      pointer-events: none;
    }

    .field-arrow {
      fill: #64748b;
      transition: fill 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }

    .field-group:hover .field-line,
    .field-group.active .field-line {
      stroke: #0284c7;
      stroke-width: 3;
    }

    .field-group:hover .field-arrow,
    .field-group.active .field-arrow {
      fill: #0284c7;
    }

    .tooltip {
      position: absolute;
      top: 10px;
      background: #1e2945;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.2px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.15);
      z-index: 10;
      white-space: nowrap;
    }

    .tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hint {
      margin-top: 8px;
      font-size: 12px;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    <div id="tooltip" class="tooltip">Field direction: N → S</div>

    <svg viewBox="0 0 500 300" aria-label="Magnetic field lines around a bar magnet">
      <defs>
        
        <marker id="arr" viewBox="0 0 8 8" refX="5" refY="4" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 1.5 L 6 4 L 1 6.5 z" fill="#64748b" class="marker-path" />
        </marker>
        <marker id="arr-active" viewBox="0 0 8 8" refX="5" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
          <path d="M 1 1.5 L 6 4 L 1 6.5 z" fill="#0284c7" />
        </marker>
      </defs>

      
      <g id="fieldLines">
        
        <g class="field-group">
          <path class="field-line" d="M 175 160 C 20 120, 40 18, 250 18 C 460 18, 480 120, 325 160" />
          <path class="field-arrow" d="M 246 14.5 L 256 18 L 246 21.5 Z" />
          <path class="field-line-hit" d="M 175 160 C 20 120, 40 18, 250 18 C 460 18, 480 120, 325 160" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 152 C 65 125, 90 55, 250 55 C 410 55, 435 125, 325 152" />
          <path class="field-arrow" d="M 246 51.5 L 256 55 L 246 58.5 Z" />
          <path class="field-line-hit" d="M 175 152 C 65 125, 90 55, 250 55 C 410 55, 435 125, 325 152" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 144 C 110 125, 140 92, 250 92 C 360 92, 390 125, 325 144" />
          <path class="field-arrow" d="M 246 88.5 L 256 92 L 246 95.5 Z" />
          <path class="field-line-hit" d="M 175 144 C 110 125, 140 92, 250 92 C 360 92, 390 125, 325 144" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 156 C 110 175, 140 208, 250 208 C 360 208, 390 175, 325 156" />
          <path class="field-arrow" d="M 254 204.5 L 244 208 L 254 211.5 Z" />
          <path class="field-line-hit" d="M 175 156 C 110 175, 140 208, 250 208 C 360 208, 390 175, 325 156" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 148 C 65 175, 90 245, 250 245 C 410 245, 435 175, 325 148" />
          <path class="field-arrow" d="M 254 241.5 L 244 245 L 254 248.5 Z" />
          <path class="field-line-hit" d="M 175 148 C 65 175, 90 245, 250 245 C 410 245, 435 175, 325 148" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 140 C 20 180, 40 282, 250 282 C 460 282, 480 180, 325 140" />
          <path class="field-arrow" d="M 254 278.5 L 244 282 L 254 285.5 Z" />
          <path class="field-line-hit" d="M 175 140 C 20 180, 40 282, 250 282 C 460 282, 480 180, 325 140" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 175 138 C 110 130, 60 90, 15 50" />
          <path class="field-arrow" d="M 88 95 L 80 87 L 91 85 Z" />
          <path class="field-line-hit" d="M 175 138 C 110 130, 60 90, 15 50" />
        </g>
        <g class="field-group">
          <path class="field-line" d="M 175 150 L 15 150" />
          <path class="field-arrow" d="M 90 146.5 L 80 150 L 90 153.5 Z" />
          <path class="field-line-hit" d="M 175 150 L 15 150" />
        </g>
        <g class="field-group">
          <path class="field-line" d="M 175 162 C 110 170, 60 210, 15 250" />
          <path class="field-arrow" d="M 91 215 L 80 213 L 88 205 Z" />
          <path class="field-line-hit" d="M 175 162 C 110 170, 60 210, 15 250" />
        </g>

        
        <g class="field-group">
          <path class="field-line" d="M 485 50 C 440 90, 390 130, 325 138" />
          <path class="field-arrow" d="M 419 85 L 420 95 L 412 87 Z" />
          <path class="field-line-hit" d="M 485 50 C 440 90, 390 130, 325 138" />
        </g>
        <g class="field-group">
          <path class="field-line" d="M 485 150 L 325 150" />
          <path class="field-arrow" d="M 410 146.5 L 420 150 L 410 153.5 Z" />
          <path class="field-line-hit" d="M 485 150 L 325 150" />
        </g>
        <g class="field-group">
          <path class="field-line" d="M 485 250 C 440 210, 390 170, 325 162" />
          <path class="field-arrow" d="M 412 213 L 420 205 L 419 215 Z" />
          <path class="field-line-hit" d="M 485 250 C 440 210, 390 170, 325 162" />
        </g>
      </g>

      
      <g filter="drop-shadow(0px 4px 8px rgba(0,0,0,0.12))">
        
        <rect x="175" y="128" width="75" height="44" rx="4" fill="#ef4444" />
        
        <rect x="250" y="128" width="75" height="44" rx="4" fill="#2563eb" />
        
        <rect x="240" y="128" width="10" height="44" fill="#ef4444" />
        <rect x="250" y="128" width="10" height="44" fill="#2563eb" />
        
        
        <text x="210" y="156" fill="#ffffff" font-size="20" font-weight="700" text-anchor="middle" letter-spacing="1">N</text>
        <text x="290" y="156" fill="#ffffff" font-size="20" font-weight="700" text-anchor="middle" letter-spacing="1">S</text>
      </g>
    </svg>

    <div class="hint">Hover or tap field lines to inspect direction</div>
  </div>

  <script>
    const tooltip = document.getElementById('tooltip');
    const fieldGroups = document.querySelectorAll('.field-group');

    fieldGroups.forEach(group => {
      group.addEventListener('mouseenter', () => {
        tooltip.classList.add('visible');
      });
      group.addEventListener('mouseleave', () => {
        tooltip.classList.remove('visible');
      });
      group.addEventListener('touchstart', (e) => {
        e.preventDefault();
        fieldGroups.forEach(g => g.classList.remove('active'));
        group.classList.add('active');
        tooltip.classList.add('visible');
      }, { passive: false });
    });

    document.addEventListener('touchstart', (e) => {
      if (!e.target.closest('.field-group')) {
        fieldGroups.forEach(g => g.classList.remove('active'));
        tooltip.classList.remove('visible');
      }
    });
  </script>
</body>
</html>

奥斯特实验与电流的磁效应

通电螺线管的磁场分布与安培右手螺旋定则

电磁铁的构造与插入铁芯增强磁性的原理

探究影响电磁铁磁性强弱的因素（电流大小与线圈匝数）

电磁继电器的结构、触点工作方式与电路原理

基于电磁继电器的温度自动报警控制装置制作

基于电磁继电器的光控路灯与水位自动控制设计

science

电磁铁磁性强弱探究与电磁继电器自动控制

法拉第的科学探索与电磁感应现象的发现

探究导体在磁场中产生感应电流的条件实验

探究影响感应电流方向的因素

探究感应电流大小与切割速度及磁场强弱的关系

发电机模型结构、交流电产生与机械能向电能转化

动圈式话筒与电磁感应在现代科技中的应用

对比实验：电磁感应（发电机）与磁场对电流的作用（电动机）

OGS.9.PS.9

Aligned learning resources

Related diagrams