Widgets

How to Add a 4-Stroke Engine Simulator to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full 4-stroke engine simulator to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. Visitors watch a piston cycle through the four strokes while the Otto-cycle diagram is drawn beside it. This guide covers the fastest way to embed the 4-Stroke Engine Simulator, what it teaches, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the simulator from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/engine-simulator/"
        width="100%" height="1000" loading="lazy"
        style="border:0;max-width:560px"
        title="4-Stroke Engine Simulator by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/engine-simulator/">4-Stroke Engine Simulator</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live simulator; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

The simulator opens with the engine already turning, so a visitor sees the strokes cycle immediately and can then take control:

  • Play / pause: stop the engine on any stroke to study the valves and piston position.
  • Engine speed: slow it down to follow each stroke, or speed it up to see the cycle repeat.
  • Compression ratio: slide it from 4:1 to 14:1 and watch the ideal efficiency climb.
  • Otto-cycle diagram: a pressure-volume loop with a moving state point tracks the piston.
  • Live readouts: the current stroke and the ideal thermal efficiency η = 1 − 1/r^(γ−1).

Pick the right height

The snippet uses height="1000", which fits the engine, the controls and the Otto-cycle diagram without clipping even on a narrow phone, where they stack into one column. On a wider page the widget centres within its max-width:560px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

  • WordPress: add a Custom HTML block and paste the snippet.
  • Squarespace: use a Code / Embed block.
  • Wix: add an Embed HTML / iframe element.
  • Ghost: insert an HTML card.
  • Notion: paste the /embed/engine-simulator/ URL and choose "Create embed".
  • Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a lesson or a blog post on engines, the four strokes, the Otto cycle or thermal efficiency needs a working engine students can actually run.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the 4-Stroke Engine Simulator

Frequently asked questions

Is embedding the engine simulator free?
Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole simulation runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "4-Stroke Engine Simulator by LK Forge" credit line that comes with the embed code.
What can visitors do with the embedded simulator?
They can run the engine, pause it on any stroke, change the engine speed, and slide the compression ratio from 4:1 to 14:1. As it runs, the piston moves through intake, compression, power and exhaust, the intake and exhaust valves open and close, the spark fires at top dead centre, and a second panel traces the same cycle on an Otto-cycle pressure-volume diagram with a moving state point. A readout names the current stroke and shows the ideal thermal efficiency.
Does the embed teach the Otto cycle and efficiency?
Yes. The pressure-volume diagram is the ideal Otto cycle — adiabatic compression, constant-volume combustion, adiabatic power stroke and constant-volume exhaust — and the ideal thermal efficiency shown is computed from η = 1 − 1/r^(γ−1) with γ = 1.4, so raising the compression ratio visibly raises the efficiency. It is a direct, interactive way to connect the moving piston to the thermodynamics behind it.
What iframe height should I use, especially on mobile?
The snippet ships with height="1000", which is tall enough that the engine, the controls and the Otto-cycle diagram all fit without clipping even on a narrow phone where everything stacks into a single column. On a wider page the widget simply centres within its max-width of 560px. If you want it shorter you can lower the height, but 1000 is the safe default across screen sizes.
Where can I embed it — WordPress, Wix, Squarespace, Notion?
Anywhere you can add HTML, because it is a standard iframe. In WordPress use a Custom HTML block; in Squarespace a Code/Embed block; in Wix an Embed HTML element; in Ghost an HTML card; in Notion paste the /embed/engine-simulator/ URL as an embed. On a plain HTML page or an intranet, paste the snippet straight into the markup.
Does the embedded simulator track visitors or set cookies?
No. Everything runs locally in the visitor’s browser — nothing is uploaded. The embed sets no tracking cookies and sends no analytics, so it is safe to place on a privacy-sensitive site, an intranet, or a page for students.