Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page. Set the controls and the two lines update; the preview beneath shows what your readers get.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="binary-symmetric-channel"></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 binary-symmetric-channel/ to a new name (one DNS label), set forkedFrom to { "name": "binary-symmetric-channel", "version": 1 }, 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": "binary-symmetric-channel",
"title": "Binary symmetric channel",
"version": 1,
"claim": "A channel that flips each bit with probability p has capacity C = 1 − H(p) bits per use, which falls from 1 at p = 0 to 0 at p = 0.5, where the output is a coin flip independent of the input.",
"summary": "Raise the flip probability and watch bits stream through a noisy zone that flips some of them, the observed flip rate settle toward p, and the capacity readout fall along the curve 1 − H(p).",
"topics": [
"information/channels",
"information/entropy"
],
"aliases": [
"channel capacity",
"noisy channel",
"BSC",
"Shannon capacity",
"bit flips"
],
"params": {
"flip": {
"type": "number",
"default": 0.1,
"min": 0,
"max": 0.5,
"label": "flip probability"
}
},
"check": [
{
"q": "A binary symmetric channel flips bits with probability 0.5. Its capacity is…",
"options": [
"0, because the output is independent of the input",
"0.5 bits per use",
"1 bit per use",
"Negative"
],
"answer": 0,
"why": "C = 1 − H(0.5) = 1 − 1 = 0: the output is a fair coin whatever was sent, so no information gets through."
},
{
"q": "At what flip probability is a binary symmetric channel completely useless?",
"options": [
"1.0",
"0.25",
"0.5",
"0.99"
],
"answer": 2,
"why": "At p = 0.5 the capacity is 0, whereas at p = 1.0 every bit is flipped and flipping each received bit back recovers the message perfectly."
},
{
"q": "At flip probability p = 0.11 the noise adds about 0.5 bits of uncertainty per transmitted bit, so the capacity is about…",
"options": [
"0.5 bits per use: two channel uses deliver at most one reliable bit",
"0.89 bits per use: one minus the flip probability",
"1 bit per use, because error-correcting codes remove all noise",
"0.11 bits per use"
],
"answer": 0,
"why": "C = 1 − H(0.11) ≈ 1 − 0.5 = 0.5; the capacity subtracts the entropy of the noise, not the flip probability itself."
}
],
"capabilities": [],
"height": 570,
"requires": [
"coin-entropy"
],
"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>Binary symmetric channel</title>
<style>
:root {
color-scheme: light dark;
--bg: #f7f3ea; --bg-card: #efe9da; --border: #d8cfba; --text: #211d14; --text-dim: #6e6553;
--accent: #31597f; --accent2: #b04e1b; --hot: #a82433; --ok: #3d6b4f;
--ink-rgb: 33, 29, 20; --paper-rgb: 247, 243, 234; --accent-rgb: 49, 89, 127;
--accent2-rgb: 176, 78, 27; --hot-rgb: 168, 36, 51; --ok-rgb: 61, 107, 79;
--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: #161410; --bg-card: #1e1b15; --border: #383225; --text: #e9e3d3; --text-dim: #9c917c;
--accent: #8fb8e0; --accent2: #dd9355; --hot: #df7a88; --ok: #82bd97;
--ink-rgb: 233, 227, 211; --paper-rgb: 22, 20, 16; --accent-rgb: 143, 184, 224;
--accent2-rgb: 221, 147, 85; --hot-rgb: 223, 122, 136; --ok-rgb: 130, 189, 151;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.control-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--accent); margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.val { min-width: 4ch; font-size: 14px; }
.btn { 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 .15s, color .15s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0; }
.readout .big { display: block; font-size: 34px; 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; }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.anim { height: 150px; margin-top: 0; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } }
</style>
</head>
<body>
<div class="widget">
<div class="control-row">
<label for="p">Flip probability p</label>
<input type="range" id="p" min="0" max="50" value="10">
<span class="mono val" id="p-label">0.10</span>
<button class="btn" id="reset">reset count</button>
</div>
<canvas id="anim" class="plot anim"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="c">0.53</span>
<small>capacity C = 1 − H(p) · bits/use</small>
</div>
<div class="readout accent">
<span class="big mono" id="hp">0.47</span>
<small>H(p) · bits of noise per bit</small>
</div>
<div class="readout">
<span class="big mono" id="rate">—</span>
<small id="rate-label">observed flip rate</small>
</div>
</div>
<canvas id="plot" class="plot"></canvas>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/info.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Binary symmetric channel: bits stream through a noisy zone that flips each with probability p; capacity 1 − H(p). */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp, binaryH, T, readTheme, hotWash, setupCanvas, plotCurve, onResize, MONO } = window.Info;
let p = 0.1;
let bits = [];
let sent = 0, flipped = 0;
let lastSpawn = 0;
let lastFrame = performance.now();
let dims = setupCanvas($('anim'));
let host = null;
function renderCapacity() {
$('p-label').textContent = p.toFixed(2);
$('c').textContent = (1 - binaryH(p)).toFixed(2);
$('hp').textContent = binaryH(p).toFixed(2);
plotCurve($('plot'), {
fn: (x) => 1 - binaryH(x), xmin: 0, xmax: 0.5, ymax: 1.05, dotX: p, xlabel: 'flip probability p', ylabel: 'capacity',
});
}
function resetCount() {
sent = 0; flipped = 0;
$('rate').textContent = '—';
$('rate-label').textContent = 'observed flip rate';
}
function frame(now) {
const dt = Math.min(now - lastFrame, 50) / 1000;
lastFrame = now;
const { ctx, w, h } = dims;
const midX = w / 2;
const speed = Math.max(w / 6, 80);
if (now - lastSpawn > 240) {
lastSpawn = now;
bits.push({ x: -16, val: Math.random() < 0.5 ? 1 : 0, decided: false, flipped: false });
}
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = hotWash(0.07);
ctx.fillRect(midX - 36, 0, 72, h);
ctx.strokeStyle = hotWash(0.35);
ctx.setLineDash([5, 5]);
ctx.strokeRect(midX - 36, 1, 72, h - 2);
ctx.setLineDash([]);
ctx.fillStyle = T.DIM;
ctx.font = '10px ' + MONO;
ctx.textAlign = 'center';
ctx.fillText('NOISE', midX, 14);
ctx.textAlign = 'left';
ctx.fillText('sent →', 8, 14);
ctx.textAlign = 'right';
ctx.fillText('→ received', w - 8, 14);
const cy = h / 2;
for (const b of bits) {
b.x += speed * dt;
if (!b.decided && b.x >= midX) {
b.decided = true;
sent++;
if (Math.random() < p) { b.flipped = true; b.val ^= 1; flipped++; }
}
ctx.fillStyle = b.flipped ? T.HOT : b.decided ? T.ACCENT2 : T.ACCENT;
ctx.beginPath();
ctx.roundRect(b.x - 9, cy - 9, 18, 18, 5);
ctx.fill();
ctx.fillStyle = T.PAPER;
ctx.font = 'bold 11px ' + MONO;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(b.val, b.x, cy + 1);
ctx.textBaseline = 'alphabetic';
}
bits = bits.filter((b) => b.x < w + 20);
if (sent > 0) {
$('rate').textContent = (flipped / sent).toFixed(2);
$('rate-label').textContent = 'observed flip rate · ' + flipped + ' of ' + sent + ' bits';
}
requestAnimationFrame(frame);
}
function setP(v, fromSlider) {
p = clamp(v, 0, 0.5);
if (!fromSlider) $('p').value = Math.round(p * 100);
resetCount();
renderCapacity();
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
$('p').addEventListener('input', () => { setP($('p').value / 100, true); ping({ p }); });
$('reset').addEventListener('click', () => { resetCount(); ping({ reset: true }); });
onResize(() => { dims = setupCanvas($('anim')); renderCapacity(); });
readTheme();
renderCapacity();
requestAnimationFrame(frame);
LearnWidget.connect().then((h) => {
host = h;
readTheme();
if (typeof h.params.flip === 'number') setP(h.params.flip);
else renderCapacity();
h.on('theme.changed', () => { readTheme(); renderCapacity(); });
h.on('params.changed', (np) => { if (typeof np.flip === 'number') setP(np.flip); });
});
})();