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="logarithms-ruler"></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 logarithms-ruler/ to a new name (one DNS label), set forkedFrom to { "name": "logarithms-ruler", "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": "logarithms-ruler",
"title": "Doubling ruler",
"version": 3,
"claim": "On a log-scale ruler equal ratios of x are equal distances, so every ×2 moves the marker one doubling and every ×10 moves it log₂ 10 ≈ 3.32 doublings.",
"summary": "Slide x from 1/8 to 1024 along a ruler whose position is log₂ x. The ×2, ÷2, ×10 and ÷10 buttons show equal ratios as equal steps, with log₂ and log₁₀ readouts.",
"topics": [
"math/logarithms"
],
"aliases": [
"log scale",
"logarithm",
"log2",
"log10"
],
"check": [
{
"q": "Pressing ×10 raises the log₂ readout by about",
"options": [
"1",
"2",
"3.32",
"10"
],
"answer": 2,
"why": "log₂ 10 ≈ 3.32 because 2^3.32 ≈ 10."
},
{
"q": "Moving from x = 4 to x = 32 crosses how many doublings?",
"options": [
"3",
"4",
"8",
"28"
],
"answer": 0,
"why": "32/4 = 8 = 2³: three doublings."
},
{
"q": "log₂ 32 equals…",
"options": [
"5, because five doublings turn 1 into 32",
"16, because 32/2 = 16",
"6, because 32 has six digits in binary",
"2, because the base is 2"
],
"answer": 0,
"why": "2⁵ = 32: the logarithm reports the exponent. The binary digit count is close but off by one: 32 is 100000 in binary, six digits, because n doublings need n+1 digits."
},
{
"q": "Without computing either side, log₂(8 · 16) must equal…",
"options": [
"log₂ 8 + log₂ 16 = 3 + 4 = 7",
"log₂ 8 × log₂ 16 = 12",
"log₂ 24, the logarithm of the sum",
"no simpler form, because the logarithm of a product cannot be split"
],
"answer": 0,
"why": "Reaching the product takes the doublings of one factor and then the doublings of the other, so the counts add: log(ab) = log a + log b. Indeed 8 · 16 = 128 = 2⁷."
},
{
"q": "The logarithm of a number between 0 and 1, such as log₂ ¼, is…",
"options": [
"negative: reaching it from 1 takes halvings rather than doublings",
"undefined",
"between 0 and 1",
"positive but small"
],
"answer": 0,
"why": "log₂ ¼ = −2: two halvings below 1. The logarithm is negative for inputs below 1, zero at exactly 1, and undefined only at 0 and below."
}
],
"height": 440,
"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>doubling ruler</title>
<style>
/* Default palette so the widget looks right before the host's theme message
arrives (and when opened standalone). The host overrides these on mount. */
: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;
--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;
}
}
* { 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;
}
.control-row.sym.single {
display: grid;
grid-template-columns: 88px 1fr;
gap: 12px 16px;
align-items: center;
margin-bottom: 14px;
}
.control-row label { font-size: 14.5px; color: var(--text-dim); white-space: nowrap; }
.ctl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctl input[type="range"] { flex: 1; min-width: 0; }
.ctl .val { flex: none; width: 64px; text-align: right; font-size: 13px; }
input[type="range"] { accent-color: var(--accent); }
@media (max-width: 600px) {
.control-row.sym.single { grid-template-columns: 64px 1fr; }
}
.mono { font-family: var(--mono); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.btn, .chip {
font-family: var(--mono);
font-size: 12.5px;
color: var(--text);
background: transparent;
border: 1px solid var(--border);
border-radius: 3px;
padding: 6px 13px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.btn:hover, .chip:hover { border-color: var(--accent); color: var(--accent); }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.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">
<div class="control-row sym single">
<label for="lg-x">number x</label>
<span class="ctl wide"><input type="range" id="lg-x" min="0" max="1000" value="300"><span class="mono val" id="lg-x-label">8.0</span></span>
</div>
<div class="chips">
<button class="btn" id="lg-x2">×2</button>
<button class="btn" id="lg-d2">÷2</button>
<button class="btn" id="lg-x10">×10</button>
<button class="btn" id="lg-d10">÷10</button>
<button class="chip" data-x="1">x = 1</button>
<button class="chip" data-x="10">x = 10</button>
<button class="chip" data-x="1000">x = 1000</button>
</div>
<canvas id="lg-canvas" class="plot"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="lg-val">8.00</span>
<small>x</small>
</div>
<div class="readout accent">
<span class="big mono" id="lg-log">3.00</span>
<small>log₂ x · doublings from 1</small>
</div>
<div class="readout">
<span class="big mono" id="lg-log10">0.90</span>
<small>log₁₀ x · tenfold steps</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Doubling ruler: powers of two as evenly spaced ticks, with the doubling chain from 1 up to x. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const rootStyle = getComputedStyle(document.documentElement);
const tv = (n) => rootStyle.getPropertyValue(n).trim();
const wash = (a) => 'rgba(' + tv('--ink-rgb') + ',' + a + ')';
let ACCENT, ACCENT2, DIM, INK;
function readTheme() {
ACCENT = tv('--accent'); ACCENT2 = tv('--accent2');
DIM = tv('--text-dim'); INK = tv('--text');
}
const LOG_MIN = -3;
const LOG_MAX = 10;
let logX = 3;
const sliderToLog = (v) => LOG_MIN + (v / 1000) * (LOG_MAX - LOG_MIN);
const logToSlider = (l) => Math.round(((l - LOG_MIN) / (LOG_MAX - LOG_MIN)) * 1000);
function fmt(x) {
if (x >= 100) return x.toFixed(0);
if (x >= 1) return x.toFixed(2);
return x.toFixed(3);
}
function setupCanvas(canvas) {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const w = canvas.clientWidth;
const h = canvas.clientHeight;
canvas.width = Math.max(1, w * dpr);
canvas.height = Math.max(1, h * dpr);
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
return { ctx, w, h };
}
function renderLog() {
const x = Math.pow(2, logX);
$('lg-x-label').textContent = fmt(x);
$('lg-val').textContent = fmt(x);
$('lg-log').textContent = logX.toFixed(2);
$('lg-log10').textContent = (logX * Math.LN2 / Math.LN10).toFixed(2);
const { ctx, w, h } = setupCanvas($('lg-canvas'));
ctx.clearRect(0, 0, w, h);
ctx.font = '11px ui-monospace, Menlo, monospace';
const m = { l: 24, r: 24 };
const rw = w - m.l - m.r;
const X = (l) => m.l + ((l - LOG_MIN) / (LOG_MAX - LOG_MIN)) * rw;
const ry = h * 0.56;
ctx.strokeStyle = wash(0.35);
ctx.lineWidth = 1.4;
ctx.beginPath();
ctx.moveTo(m.l, ry);
ctx.lineTo(w - m.r, ry);
ctx.stroke();
for (let k = LOG_MIN; k <= LOG_MAX; k++) {
const px = X(k);
const major = k % 2 === 0 || k === LOG_MIN;
ctx.strokeStyle = wash(major ? 0.4 : 0.2);
ctx.beginPath();
ctx.moveTo(px, ry - (major ? 9 : 6));
ctx.lineTo(px, ry + (major ? 9 : 6));
ctx.stroke();
if (major) {
const val = Math.pow(2, k);
ctx.fillStyle = DIM;
ctx.textAlign = 'center';
ctx.fillText(val >= 1 ? String(val) : '1/' + Math.pow(2, -k), px, ry + 24);
}
}
ctx.fillStyle = DIM;
ctx.textAlign = 'left';
ctx.fillText('each tick = one doubling', m.l, 16);
const whole = Math.trunc(logX);
const step = logX >= 0 ? 1 : -1;
ctx.strokeStyle = ACCENT;
ctx.lineWidth = 1.6;
for (let k = 0; k !== whole; k += step) {
const a = X(k);
const b = X(k + step);
ctx.beginPath();
ctx.arc((a + b) / 2, ry, Math.abs(b - a) / 2, Math.PI, 0, false);
ctx.stroke();
}
if (logX !== whole) {
const a = X(whole);
const b = X(logX);
ctx.setLineDash([4, 4]);
ctx.beginPath();
ctx.arc((a + b) / 2, ry, Math.abs(b - a) / 2, Math.PI, 0, false);
ctx.stroke();
ctx.setLineDash([]);
}
ctx.fillStyle = ACCENT2;
ctx.beginPath();
ctx.arc(X(0), ry, 4, 0, Math.PI * 2);
ctx.fill();
ctx.textAlign = 'center';
ctx.fillText('1', X(0), ry - 16);
ctx.fillStyle = INK;
ctx.beginPath();
ctx.arc(X(logX), ry, 5.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = ACCENT;
ctx.textAlign = 'center';
ctx.fillText('x = ' + fmt(Math.pow(2, logX)), Math.min(Math.max(X(logX), m.l + 30), w - m.r - 30), ry - 16);
}
function setLog(value) {
logX = Math.min(LOG_MAX, Math.max(LOG_MIN, value));
$('lg-x').value = logToSlider(logX);
renderLog();
}
function wire() {
$('lg-x').addEventListener('input', () => { logX = sliderToLog(+$('lg-x').value); renderLog(); });
$('lg-x2').addEventListener('click', () => setLog(logX + Math.log2(2)));
$('lg-d2').addEventListener('click', () => setLog(logX + Math.log2(0.5)));
$('lg-x10').addEventListener('click', () => setLog(logX + Math.log2(10)));
$('lg-d10').addEventListener('click', () => setLog(logX + Math.log2(0.1)));
document.querySelectorAll('.chip[data-x]').forEach((chip) => {
chip.addEventListener('click', () => setLog(Math.log2(+chip.dataset.x)));
});
let t;
window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(renderLog, 120); });
}
readTheme();
wire();
$('lg-x').value = logToSlider(logX);
renderLog();
LearnWidget.connect().then((host) => {
host.on('theme.changed', () => { readTheme(); renderLog(); });
readTheme();
renderLog();
});
})();