Electromagnetism 3D

Drop the simulator into any course page.

One <iframe> embeds the full interactive simulator inside a Canvas module, a Blackboard assignment, a Notion doc, a Google Site, or your own course page. Students interact with the live tool without leaving your page or signing in.

Here's what it looks like in a real course page

📘 PHYS 201 · Electromagnetism · Fall 2026
your-school.instructure.com

Lab 3: Helmholtz Coils and field uniformity

A Helmholtz coil pair consists of two coaxial circular loops separated by a distance equal to their radius. In this arrangement the field between the coils is remarkably uniform — which is why these configurations are standard in bench experiments.

Use the simulator below to explore the field. Drag in 3D to rotate the view; toggle to 2D to draw your own field lines by clicking.

Q1. Where is the field most uniform, and why? What happens when you change the spacing between the coils?

Everything inside the mock browser frame — the title bar, the lesson copy, the question — is just an illustration. The simulator itself is a real iframe pointing at /embed?example=helmholtz.

The code

Paste this anywhere that accepts HTML:

<iframe
  src="https://electromagnetism3d.com/embed?example=helmholtz"
  width="100%"
  height="600"
  style="border:0;border-radius:12px;"
  allow="fullscreen"
  title="Helmholtz Coils — interactive magnetic field simulator"
  loading="lazy"
></iframe>

URL parameters

The /embed route accepts the same scene parameters as /try and /app. The page auto-starts with whatever scene the URL points to.

example=<slug>

Load a curated preset. Available slugs: helmholtz, solenoid-lic, parallel-wires, bar-magnet-dipole, particle-cyclotron. See /examples.

scene=<encoded>

Load a custom scene. Build the scene in the full simulator, click Share, and copy the resulting URL — the scene= parameter can be reused in any embed.

view=2d or view=3d

Force an initial view mode. Defaults to the preset's natural view (3D for Helmholtz, 2D for the solenoid LIC, and so on).

Adding it to your LMS

Canvas

  1. Open the page or assignment editor.
  2. Click the HTML editor toggle in the top-right of the rich content editor.
  3. Paste the iframe snippet where you want the simulator to appear.
  4. Click Rich Content Editor to switch back — Canvas may show a "View in new tab" placeholder in the editor, but the embed renders correctly on the published page.
  5. Save and preview the page.

Blackboard Ultra

  1. In the course content area, choose + → Create → Document.
  2. Select Add HTML from the Content Editor.
  3. Paste the iframe snippet. Save.

If your Blackboard installation blocks third-party iframes, ask your administrator to add electromagnetism3d.com to the allowed external content list.

Moodle

  1. Open the Atto or TinyMCE editor in a Page, Label, or Lesson resource.
  2. Click the </> (HTML source) button.
  3. Paste the iframe snippet and save.

Notion

  1. Type /embed on a new line and select Embed.
  2. Paste the /embed?example=helmholtz URL (not the full iframe snippet — Notion wraps it for you).
  3. Resize the embed block to taste.

Google Sites

  1. Click Insert → Embed.
  2. Choose the Embed code tab and paste the iframe.
  3. Publish the site. Google Sites strips some iframe attributes; re-insert with a simpler snippet (without allow) if rendering fails.

Any HTML page

Paste the iframe anywhere HTML is accepted. The simulator is responsive — width:100% will fill its container, and you can change height to suit the surrounding layout. 500px is the minimum for usable 2D interaction; 600–700px is recommended.

Frequently asked questions

Do students need accounts to use the embed?

No. The free embed is anonymous — students open the page, interact, and leave. No sign-in, no data collection. Saving and sharing scenes back into the LMS gradebook requires an institutional license with LTI; see pricing.

Does it work offline?

Not yet. The initial page load requires internet access. Once loaded, the simulator runs entirely in the student's browser — no further network activity is needed for the physics computation.

Can I restrict what students can do in the embed?

The /embed route hides the top toolbar but keeps the construction controls. If you need a read-only preview with zero editing UI, use the showcase route instead (intended for demos and hero images, not classroom assignments).

What about privacy and FERPA?

Embeds collect no student data. See the Security & FERPA page for our full posture, or request a Data Processing Addendum at security@electromagnetism3d.com.

What if I want to embed my own saved scene, not a preset?

Build the scene in the full simulator, click Share to copy its URL, and swap the example= parameter for the scene= parameter in the embed snippet.

Will the embed break if you update the site?

URL parameters — example=, scene=, view= — are part of a stable contract. We won't change them without a migration path, and preset slugs won't be renamed. Scene URLs carry a schema version so older shares continue to round-trip correctly.

Last updated: 2026-04-20.