<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#071321">
  <meta name="description" content="An interactive 3D homopolar motor model showing magnetic field, current, Lorentz force, torque, and rotation.">
  <title>Homopolar Motor Lab &mdash; 3D Electromagnetism</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-S9EWRY1CPJ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());
    gtag("config", "G-S9EWRY1CPJ");
  </script>
  <script data-ad-client="ca-pub-0121577198857509" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- INLINE_STYLE_START -->
  <link rel="stylesheet" href="style.css">
  <!-- INLINE_STYLE_END -->
</head>
<body>
  <div class="app-shell adsense-auto-ads-ignore">
    <header class="app-header">
      <a class="brand" href="#" aria-label="Homopolar Motor Lab home">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 40 40" role="img">
            <circle cx="20" cy="20" r="15" fill="none" stroke="currentColor" stroke-width="2"/>
            <path d="M20 5v7M20 28v7M5 20h7M28 20h7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            <path d="M14 24c2.4 3.8 9.8 4.4 13.1-.3" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/>
            <path d="m25.2 20.8 2.6 3.2-4 .9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <span>
          <strong>Homopolar Motor Lab</strong>
          <small>3D electromagnetism explorer</small>
        </span>
      </a>

      <div class="header-actions">
        <span class="simulation-status" id="simulationStatus" data-state="running">
          <span class="status-dot" aria-hidden="true"></span>
          <span id="statusText">Running clockwise</span>
        </span>
        <button class="icon-button" id="infoButton" type="button" aria-label="Open learning guide" aria-controls="guideDialog">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="12" r="9"></circle>
            <path d="M12 10.8v6"></path>
            <path d="M12 7.2h.01"></path>
          </svg>
        </button>
      </div>
    </header>

    <main class="lab-layout">
      <aside class="control-rail" aria-labelledby="experimentHeading">
        <div class="rail-heading">
          <div>
            <h1 id="experimentHeading">Experiment</h1>
            <p>Change one variable and observe the vectors.</p>
          </div>
          <button class="rail-toggle" id="railToggle" type="button" aria-expanded="true" aria-controls="railBody">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 9 5 5 5-5"/></svg>
            <span class="sr-only">Toggle experiment controls</span>
          </button>
        </div>

        <div class="rail-body" id="railBody">
          <section class="control-section" aria-label="Motor variables">
            <div class="control-row">
              <div class="label-line">
                <label for="currentSlider">Current <i>I</i></label>
                <output id="currentValue" for="currentSlider">2.0 A</output>
              </div>
              <input id="currentSlider" type="range" min="-3" max="3" step="0.1" value="2" aria-describedby="currentHint">
              <div class="range-scale" id="currentHint"><span>&minus;3 A</span><span>0</span><span>+3 A</span></div>
            </div>

            <button class="secondary-button full-width" id="reverseCurrentButton" type="button">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h11l-3-3M17 17H6l3 3"/></svg>
              Reverse current
            </button>

            <div class="control-row">
              <div class="label-line">
                <label for="fieldSlider">Magnetic field <i>B</i></label>
                <output id="fieldValue" for="fieldSlider">0.80 T</output>
              </div>
              <input id="fieldSlider" type="range" min="0" max="1.5" step="0.05" value="0.8">
              <div class="range-scale"><span>0 T</span><span>1.5 T</span></div>
            </div>

            <div class="control-row">
              <div class="label-line">
                <label for="radiusSlider">Rotor radius <i>r</i></label>
                <output id="radiusValue" for="radiusSlider">65 mm</output>
              </div>
              <input id="radiusSlider" type="range" min="45" max="80" step="1" value="65">
              <div class="range-scale"><span>45 mm</span><span>80 mm</span></div>
            </div>
          </section>

          <section class="control-section">
            <h2>Magnet polarity</h2>
            <div class="segmented-control" role="group" aria-label="Magnet polarity">
              <button type="button" class="segment is-selected" data-polarity="1" aria-pressed="true">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5m-5 5 5-5 5 5"/></svg>
                North pole up
              </button>
              <button type="button" class="segment" data-polarity="-1" aria-pressed="false">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14m-5-5 5 5 5-5"/></svg>
                South pole up
              </button>
            </div>
          </section>

          <section class="control-section vector-controls">
            <h2>Show vectors</h2>
            <label class="check-row">
              <input type="checkbox" id="showField" checked>
              <span class="custom-check field-check" aria-hidden="true"></span>
              <span>Magnetic field <i>B</i></span>
            </label>
            <label class="check-row">
              <input type="checkbox" id="showCurrent" checked>
              <span class="custom-check current-check" aria-hidden="true"></span>
              <span>Conventional current <i>I</i></span>
            </label>
            <label class="check-row">
              <input type="checkbox" id="showForce" checked>
              <span class="custom-check force-check" aria-hidden="true"></span>
              <span>Lorentz force <i>F</i></span>
            </label>
          </section>

          <section class="control-section action-grid">
            <button class="primary-button" id="pauseButton" type="button" aria-pressed="false">
              <svg class="pause-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6v12M16 6v12"/></svg>
              <svg class="play-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 9 6-9 6Z"/></svg>
              <span id="pauseButtonText">Pause</span>
            </button>
            <button class="secondary-button" id="resetButton" type="button">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.3-5.7L4 8.6M4 4v4.6h4.6"/></svg>
              Reset view
            </button>
          </section>
        </div>
      </aside>

      <section class="simulation-column" aria-label="Interactive 3D homopolar motor">
        <div class="scene-panel">
          <div id="sceneContainer" class="scene-container" role="img" aria-label="Interactive 3D model of a battery, magnet, and rotating copper conductor">
            <div class="webgl-fallback" id="webglFallback" hidden>
              <strong>3D view unavailable</strong>
              <span>Please enable WebGL or try a current browser.</span>
            </div>
          </div>

          <div class="scene-topbar" aria-label="Camera views">
            <span>Camera</span>
            <button type="button" class="view-button is-selected" data-view="perspective" aria-pressed="true">3D</button>
            <button type="button" class="view-button" data-view="front" aria-pressed="false">Front</button>
            <button type="button" class="view-button" data-view="top" aria-pressed="false">Top</button>
          </div>

          <div class="vector-legend" aria-label="Vector color legend">
            <div><span class="legend-arrow field-color" aria-hidden="true"></span><span>Magnetic field <i>B</i></span></div>
            <div><span class="legend-arrow current-color" aria-hidden="true"></span><span>Current <i>I</i></span></div>
            <div><span class="legend-arrow force-color" aria-hidden="true"></span><span>Force <i>F</i></span></div>
          </div>

          <div class="orbit-hint" id="orbitHint">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect x="8" y="3" width="8" height="14" rx="4"></rect>
              <path d="M12 3v5M4.5 16.5A9 9 0 0 0 19 18m.5-1.5V20H16"></path>
            </svg>
            <span><strong>Drag</strong> to orbit &middot; <strong>Scroll</strong> to zoom</span>
          </div>

          <div class="axis-compass" aria-hidden="true">
            <span class="axis-y">y</span>
            <span class="axis-x">x</span>
            <span class="axis-z">z</span>
            <i class="axis-line x-line"></i>
            <i class="axis-line y-line"></i>
            <i class="axis-line z-line"></i>
          </div>
        </div>

        <section class="measurement-strip" aria-label="Live measurements and explanation">
          <article class="metric-block">
            <div class="metric-label">Angular speed <i>&omega;</i></div>
            <div class="metric-value"><strong id="speedValue">520</strong><span>rpm</span></div>
            <div class="meter" aria-hidden="true"><span id="speedMeter"></span></div>
          </article>
          <article class="metric-block">
            <div class="metric-label">Torque <i>&tau;</i></div>
            <div class="metric-value"><strong id="torqueValue">3.38</strong><span>mN&middot;m</span></div>
            <div class="meter force-meter" aria-hidden="true"><span id="torqueMeter"></span></div>
          </article>
          <article class="equation-block">
            <div class="equation"><i>F</i> = (<i>I</i> &times; <i>B</i>)<i>L</i></div>
            <div class="vector-equation" aria-label="Current cross magnetic field, multiplied by conductor length, gives force">
              <span class="vector-symbol current-symbol">I</span>
              <span class="cross-symbol">&times;</span>
              <span class="vector-symbol field-symbol">B</span>
              <span class="scalar-operator">&middot;</span>
              <span class="scalar-symbol">L</span>
              <span class="equals-symbol">=</span>
              <span class="vector-symbol force-symbol">F</span>
            </div>
          </article>
          <article class="explanation-block">
            <p id="explanationText">The upward current in the lower side wires crosses the local field directed outward from the upper north pole. The resulting tangential force produces clockwise torque.</p>
            <button class="text-button" id="explainButton" type="button" aria-controls="guideDialog">Why does it turn?</button>
          </article>
        </section>
      </section>
    </main>
  </div>

  <section class="learning-content" aria-labelledby="physicsHeading">
    <div class="learning-inner">
      <header class="learning-intro">
        <div>
          <h2 id="physicsHeading">Physics in the homopolar motor</h2>
          <p>A homopolar motor is one of the simplest electric motors: a battery supplies current, a permanent magnet supplies a magnetic field, and a conductor experiences a force. In this model, follow the amber current, green magnetic-field loops, and red tangential force to see how a straight-line force becomes rotation.</p>
        </div>
        <div class="key-relation" aria-label="Key relationship">
          <span>Key relationship</span>
          <strong><i>F</i> = (<i>I</i> &times; <i>B</i>)<i>L</i></strong>
          <small><i>I</i> and <i>B</i> set the vector direction; scalar <i>L</i> scales the force.</small>
        </div>
      </header>

      <div class="concept-list" aria-label="Concepts illustrated">
        <article>
          <span>01</span>
          <div><h3>Closed circuit and current</h3><p>Conventional current leaves the lower positive terminal, enters the wire through the magnet contacts, travels upward along both side arms, and returns at the upper negative terminal. No complete path means no sustained current and no motor action.</p></div>
        </article>
        <article>
          <span>02</span>
          <div><h3>Closed magnetic-field loops</h3><p>Outside a permanent magnet, field lines are directed from north to south; inside the magnet they return from south to north. The green curves show the external part leaving the upper pole, bowing around the magnet, and entering the lower pole.</p></div>
        </article>
        <article>
          <span>03</span>
          <div><h3>Lorentz force</h3><p>Near the upper pole, the field has an outward radial component where it crosses each lower side wire. The cross product <i>I</i> &times; <i>B</i> sets the tangential direction; the scalar conductor length <i>L</i> scales the force magnitude.</p></div>
        </article>
        <article>
          <span>04</span>
          <div><h3>Torque and rotation</h3><p>The two side forces point in opposite tangential directions but produce the same rotational sense about the axis. Increasing current, field strength, active wire length, or rotor radius increases the idealized torque.</p></div>
        </article>
        <article>
          <span>05</span>
          <div><h3>Cause-and-effect testing</h3><p>Reverse either the current or magnet polarity and the rotation reverses. Reverse both and the two changes cancel, so the original rotation direction returns.</p></div>
        </article>
      </div>

      <section class="quiz-section" aria-labelledby="quizHeading">
        <div class="quiz-heading">
          <div>
            <h2 id="quizHeading">Check your understanding</h2>
            <p>Use the simulation to test each prediction before choosing an answer.</p>
          </div>
          <div class="quiz-score" id="quizScore" aria-live="polite">Not checked yet</div>
        </div>

        <form id="conceptQuiz">
          <fieldset class="quiz-question" data-question="q1">
            <legend><span>1</span>If only the current direction is reversed, what happens to the rotation?</legend>
            <div class="answer-options">
              <label><input type="radio" name="q1" value="a"><span>It keeps the same direction.</span></label>
              <label><input type="radio" name="q1" value="b"><span>It reverses direction.</span></label>
              <label><input type="radio" name="q1" value="c"><span>It always stops.</span></label>
            </div>
            <p class="question-feedback" aria-live="polite"></p>
          </fieldset>

          <fieldset class="quiz-question" data-question="q2">
            <legend><span>2</span>What happens if both the current and magnet polarity are reversed?</legend>
            <div class="answer-options">
              <label><input type="radio" name="q2" value="a"><span>The original rotation direction returns.</span></label>
              <label><input type="radio" name="q2" value="b"><span>The force becomes zero.</span></label>
              <label><input type="radio" name="q2" value="c"><span>The motor must rotate twice as fast.</span></label>
            </div>
            <p class="question-feedback" aria-live="polite"></p>
          </fieldset>

          <fieldset class="quiz-question" data-question="q3">
            <legend><span>3</span>Why does the model show no magnetic force when the current is set to zero?</legend>
            <div class="answer-options">
              <label><input type="radio" name="q3" value="a"><span>The magnet temporarily loses its field.</span></label>
              <label><input type="radio" name="q3" value="b"><span>The battery has no mass.</span></label>
              <label><input type="radio" name="q3" value="c"><span><i>F</i> = (<i>I</i> &times; <i>B</i>)<i>L</i>, so zero current gives zero force.</span></label>
            </div>
            <p class="question-feedback" aria-live="polite"></p>
          </fieldset>

          <fieldset class="quiz-question" data-question="q4">
            <legend><span>4</span>Which rule predicts the direction of the force vector?</legend>
            <div class="answer-options">
              <label><input type="radio" name="q4" value="a"><span>The right-hand rule for <i>I</i> &times; <i>B</i>.</span></label>
              <label><input type="radio" name="q4" value="b"><span>Ohm&rsquo;s law alone.</span></label>
              <label><input type="radio" name="q4" value="c"><span>The law of reflection.</span></label>
            </div>
            <p class="question-feedback" aria-live="polite"></p>
          </fieldset>

          <fieldset class="quiz-question" data-question="q5">
            <legend><span>5</span>In the idealized model, which change increases torque while the other settings stay fixed?</legend>
            <div class="answer-options">
              <label><input type="radio" name="q5" value="a"><span>Reducing the magnetic field to zero.</span></label>
              <label><input type="radio" name="q5" value="b"><span>Opening the circuit.</span></label>
              <label><input type="radio" name="q5" value="c"><span>Increasing the current magnitude.</span></label>
            </div>
            <p class="question-feedback" aria-live="polite"></p>
          </fieldset>

          <div class="quiz-actions">
            <button class="quiz-submit" type="submit">Check my answers</button>
            <button class="quiz-reset" id="quizResetButton" type="button">Try again</button>
          </div>
        </form>
      </section>
    </div>
  </section>

  <footer class="site-credit">
    <p>Made by <strong>lookang</strong></p>
    <p><a href="../homopolarMotor.zip" download>Download the complete ZIP package</a> to use or share offline. For more interactives, visit <a href="https://iwant2study.org/" target="_blank" rel="noopener noreferrer">iwant2study.org</a> and the <a href="https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/05-electricity-and-magnetism/08-electromagnetism" target="_blank" rel="noopener noreferrer">Electromagnetism interactive resources catalogue</a>.</p>
  </footer>

  <dialog id="guideDialog" aria-labelledby="guideTitle">
    <div class="dialog-header">
      <div>
        <h2 id="guideTitle">Why the motor turns</h2>
        <p>Follow the three vectors at the contact region.</p>
      </div>
      <button class="icon-button close-button" id="closeGuideButton" type="button" aria-label="Close learning guide">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>
      </button>
    </div>
    <ol class="learning-steps">
      <li>
        <span class="step-number current-step">1</span>
        <div><strong>Current <i>I</i></strong><p>Conventional current leaves the lower positive terminal, passes through the magnet contacts, and travels upward in both side wires toward the upper negative terminal.</p></div>
      </li>
      <li>
        <span class="step-number field-step">2</span>
        <div><strong>Magnetic field <i>B</i></strong><p>Trace each green curve from the north pole around the outside of the magnet into the south pole. Switching the magnet polarity reverses the arrows and swaps the pole labels.</p></div>
      </li>
      <li>
        <span class="step-number force-step">3</span>
        <div><strong>Force <i>F</i></strong><p>At the lower side wires, upward <i>I</i> crossed with the local outward component of <i>B</i> gives a tangential force. Reverse either vector and the rotation reverses.</p></div>
      </li>
    </ol>
    <div class="safety-note">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 2.8 19h18.4L12 3Z"></path><path d="M12 9v4.5M12 16.5h.01"></path></svg>
      <p><strong>Real-world safety:</strong> homopolar motors draw a large current. Run a physical motor only briefly because the battery and wire can become hot.</p>
    </div>
  </dialog>

  <div class="sr-only" aria-live="polite" id="liveRegion"></div>

  <!-- INLINE_BUNDLE_START -->
  <script src="libs/three.min.js"></script>
  <script src="libs/OrbitControls.js"></script>
  <script src="script.js"></script>
  <!-- INLINE_BUNDLE_END -->
</body>
</html>
