Drop the simulator into any course page.

Q: 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).

Q: 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.

Q: 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.

One <iframe> embeds the full interactive simulator inside a Canvas module, a Blackboard assignment, a Schoology page, a Moodle resource, a Notion doc, 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

phys201-demo.example.edu

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?

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. Twenty slugs available — see the simulations gallery for the full list with descriptions, embed code, and curriculum mappings.

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

Open the page or assignment editor.
Click the HTML editor toggle in the top-right of the rich content editor.
Paste the iframe snippet where you want the simulator to appear.
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.
Save and preview the page.

Blackboard Ultra

In the course content area, choose + → Create → Document.
Select Add HTML from the Content Editor.
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.

Schoology

In a course folder, choose Add Materials → Add Page.
In the rich-text editor, click the Insert Content icon and choose Image/Media → Insert Embed.
Paste the iframe snippet and save.

If your Schoology district has disabled HTML embeds for teachers, an admin can enable them, or use the direct /try?example=… link as an external resource instead.

Moodle

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

Notion

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

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 embed is anonymous — students open the page, interact, and leave. No sign-in, no data collection. The simulator is free for everyone.

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 are anonymous and collect no student data. See the privacy policy for full details. There is no formal Data Processing Addendum; schools should evaluate fit against their own policies.

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-26.