Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="complex-multiply"></learn-widget> It is CC-BY-4.0: keep the credit line the frame shows.
Preview
Fork
A fork is a copy whose manifest names its parent and the parent's version; lineage is kept forever, and the copy is yours to change. The library is its own repository: clone it, copy complex-multiply/ to a new name (one DNS label), set forkedFrom to { "name": "complex-multiply", "version": 3 }, change what you want, run npm run check, and open a pull request. Passing the check is the whole gate. Without a checkout, submit the same files to POST /api/widgets and it is served instantly as an unreviewed draft.
Source
The whole widget is these files; the repository has their history.
widget.json
{
"name": "complex-multiply",
"title": "Complex multiplication",
"version": 3,
"claim": "Multiplying complex numbers multiplies their lengths and adds their angles.",
"summary": "Drag two arrows on the plane; the product's polar readout shows |z₁|·|z₂| at angle θ₁ + θ₂.",
"topics": [
"math/complex-numbers"
],
"aliases": [
"polar form",
"modulus",
"argument",
"rotation and scaling"
],
"check": [
{
"q": "If z₁ has length 2 at 30° and z₂ has length 3 at 45°, then z₁z₂ has",
"options": [
"length 5, angle 75°",
"length 6, angle 75°",
"length 6, angle 1350°",
"length 5, angle 15°"
],
"answer": 1,
"why": "Lengths multiply (2·3 = 6) and angles add (30° + 45° = 75°)."
},
{
"q": "The length of a product, |z₁z₂|, equals…",
"options": [
"|z₁| · |z₂|",
"|z₁| + |z₂|",
"the larger of the two lengths",
"1"
],
"answer": 0,
"why": "Lengths multiply and angles add. A product of two length-1 numbers also has length 1 and stays on the unit circle."
},
{
"q": "The angle of a product, ∠(z₁z₂), equals…",
"options": [
"∠z₁ + ∠z₂",
"∠z₁ · ∠z₂",
"the angle between the two arrows",
"the average of the two angles"
],
"answer": 0,
"why": "Angles add under multiplication: multiplying by z₂ turns z₁ through the angle of z₂."
}
],
"height": 440,
"requires": [
"complex-times-i"
],
"forkedFrom": null,
"authors": []
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complex multiplication</title>
<style>
:root {
color-scheme: light dark;
--bg-card:#efe9da; --border:#d8cfba; --text:#211d14; --text-dim:#6e6553;
--accent:#31597f; --accent2:#b04e1b; --hot:#a82433; --ok:#3d6b4f;
--ink-rgb:33,29,20; --accent-rgb:49,89,127; --accent2-rgb:176,78,27;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-card:#1e1b15; --border:#383225; --text:#e9e3d3; --text-dim:#9c917c;
--accent:#8fb8e0; --accent2:#dd9355; --hot:#df7a88; --ok:#82bd97;
--ink-rgb:233,227,211; --accent-rgb:143,184,224; --accent2-rgb:221,147,85;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.mono { font-family: var(--mono); }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.tall { height: 320px; }
.plot.interactive { cursor: grab; touch-action: none; }
.plot.interactive:active { cursor: grabbing; }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.readout { text-align: left; }
.readout .big { display: block; font-size: 28px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout.accent .big { color: var(--accent2); }
.readout small { color: var(--text-dim); font-size: 12.5px; }
</style>
</head>
<body>
<div class="widget">
<canvas id="cn-canvas" class="plot tall interactive"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="cn-z1">1.00 ∠ 35°</span>
<small>z₁ · drag the cyan tip</small>
</div>
<div class="readout">
<span class="big mono" id="cn-z2">1.00 ∠ 60°</span>
<small>z₂ · drag the purple tip</small>
</div>
<div class="readout accent">
<span class="big mono" id="cn-zp">1.00 ∠ 95°</span>
<small>z₁z₂ · lengths multiplied, angles added</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/complex-plane.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Complex multiplication: two draggable arrows and their product; lengths multiply, angles add. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const CP = window.ComplexPlane;
const mZ1 = { re: 0.82, im: 0.57 };
const mZ2 = { re: 0.50, im: 0.87 };
const mProduct = () => ({
re: mZ1.re * mZ2.re - mZ1.im * mZ2.im,
im: mZ1.re * mZ2.im + mZ1.im * mZ2.re,
});
function render() {
const P = CP.planeBase($('cn-canvas'), 2.6, true);
const { ctx } = P;
const zp = mProduct();
CP.drawArrow(ctx, P.cx, P.cy, P.X(zp), P.Y(zp), CP.T.OK, 2.4);
CP.drawArrow(ctx, P.cx, P.cy, P.X(mZ1), P.Y(mZ1), CP.T.ACCENT, 2);
CP.drawArrow(ctx, P.cx, P.cy, P.X(mZ2), P.Y(mZ2), CP.T.ACCENT2, 2);
CP.label(ctx, P, mZ1, 'z₁', CP.T.ACCENT, 12, -10);
CP.label(ctx, P, mZ2, 'z₂', CP.T.ACCENT2, 12, -10);
CP.label(ctx, P, zp, 'z₁z₂', CP.T.OK, 16, -10);
$('cn-z1').textContent = CP.fmtPolar(mZ1);
$('cn-z2').textContent = CP.fmtPolar(mZ2);
$('cn-zp').textContent = CP.fmtPolar(zp);
}
CP.readTheme();
CP.attachDrag($('cn-canvas'), 2.6, [mZ1, mZ2], render, (t) => {
const len = Math.hypot(t.re, t.im);
if (len > 1.6) { t.re *= 1.6 / len; t.im *= 1.6 / len; }
});
render();
let timer;
window.addEventListener('resize', () => { clearTimeout(timer); timer = setTimeout(render, 120); });
LearnWidget.connect().then((host) => {
host.on('theme.changed', () => { CP.readTheme(); render(); });
CP.readTheme();
render();
});
})();