A complex number is a point

Embed

The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page.

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-point/ to a new name (one DNS label), set forkedFrom to { "name": "complex-point", "version": 2 }, 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-point",
  "title": "A complex number is a point",
  "version": 2,
  "claim": "A complex number z = a + bi is a point in the plane whose real part a is the horizontal coordinate and whose imaginary part b is the vertical coordinate.",
  "summary": "Drag one point around the complex plane and read its real and imaginary coordinates.",
  "topics": [
    "math/complex-numbers"
  ],
  "aliases": [
    "complex plane",
    "real part",
    "imaginary part",
    "argand diagram"
  ],
  "check": [
    {
      "q": "The point 2 units left of the origin and 1 unit up is",
      "options": [
        "2 + i",
        "−2 + i",
        "1 − 2i",
        "−1 + 2i"
      ],
      "answer": 1,
      "why": "Real part −2 (horizontal), imaginary part 1 (vertical)."
    }
  ],
  "height": 390,
  "requires": [],
  "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 point</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.plane { height: 290px; }
  .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 .big.hot { color: var(--hot); }
  .readout .big.ok { color: var(--ok); }
  .readout small { color: var(--text-dim); font-size: 12.5px; }
</style>
</head>
<body>
  <div class="widget">
    <canvas id="pl-canvas" class="plot plane interactive"></canvas>
    <div class="readout-row">
      <div class="readout">
        <span class="big mono" id="pl-val">1.40 + 0.90i</span>
        <small>z · drag the point</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 point: one draggable point and its two coordinates. */
(() => {
  'use strict';
  const $ = (id) => document.getElementById(id);
  const CP = window.ComplexPlane;
  const plZ = { re: 1.4, im: 0.9 };

  function render() {
    const P = CP.planeBase($('pl-canvas'), 2.4, false);
    const { ctx } = P;

    ctx.strokeStyle = CP.wash(0.3);
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(P.X(plZ), P.Y(plZ)); ctx.lineTo(P.X(plZ), P.cy);
    ctx.moveTo(P.X(plZ), P.Y(plZ)); ctx.lineTo(P.cx, P.Y(plZ));
    ctx.stroke();
    ctx.setLineDash([]);

    ctx.fillStyle = CP.T.ACCENT;
    ctx.textAlign = 'center';
    ctx.fillText('a = ' + plZ.re.toFixed(2), P.X(plZ), P.cy + (plZ.im >= 0 ? 26 : -18));
    ctx.textAlign = plZ.re >= 0 ? 'right' : 'left';
    ctx.fillText('b = ' + plZ.im.toFixed(2), P.cx + (plZ.re >= 0 ? -8 : 8), P.Y(plZ) - 6);

    CP.drawArrow(ctx, P.cx, P.cy, P.X(plZ), P.Y(plZ), CP.T.ACCENT, 2.2);
    ctx.fillStyle = CP.T.INK;
    ctx.beginPath();
    ctx.arc(P.X(plZ), P.Y(plZ), 4.5, 0, Math.PI * 2);
    ctx.fill();
    CP.label(ctx, P, plZ, 'z', CP.T.ACCENT, 12, -10);

    $('pl-val').textContent = CP.fmtZ(plZ);
  }

  CP.readTheme();
  CP.attachDrag($('pl-canvas'), 2.4, [plZ], render);
  render();
  let t;
  window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(render, 120); });

  LearnWidget.connect().then((host) => {
    host.on('theme.changed', () => { CP.readTheme(); render(); });
    CP.readTheme();
    render();
  });
})();