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="surprise-bits"></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 surprise-bits/ to a new name (one DNS label), set forkedFrom to { "name": "surprise-bits", "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": "surprise-bits",
"title": "Surprise in bits",
"version": 1,
"claim": "The information in a report of an event is −log₂ p bits, so each halving of the event's probability adds exactly one bit and a certain event carries none.",
"summary": "Slide the probability of an event, or pick a named event from a chip, and read off −log₂ p on the curve: a coin flip is 1 bit, a lottery win about 23.7 bits, the sun rising almost none.",
"topics": [
"information/entropy",
"math/probability"
],
"aliases": [
"self-information",
"surprisal",
"information content",
"Shannon information"
],
"params": {
"p": {
"type": "number",
"default": 0.5,
"min": 1e-09,
"max": 1,
"label": "probability of the event"
}
},
"check": [
{
"q": "A message reveals the outcome of an event that had probability 1/8. How many bits of information does the message carry?",
"options": [
"8 bits",
"3 bits",
"0.125 bits",
"1 bit"
],
"answer": 1,
"why": "−log₂(1/8) = 3: three halvings of certainty (½ → ¼ → ⅛), and each halving adds one bit."
},
{
"q": "An event has probability 1/32. How many bits of information does its occurrence carry?",
"options": [
"1 bit",
"16 bits",
"32 bits",
"5 bits"
],
"answer": 3,
"why": "−log₂(1/32) = 5, because 1/32 is five halvings of 1 and each halving adds one bit."
},
{
"q": "Each time an event's probability is cut in half, its information content…",
"options": [
"doubles",
"grows by exactly 1 bit",
"halves",
"stays the same"
],
"answer": 1,
"why": "Halving p adds exactly 1 to −log₂ p; the logarithm is what turns multiplied probabilities into added bits."
}
],
"capabilities": [],
"height": 480,
"requires": [
"logarithms-ruler"
],
"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>Surprise in bits</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: 6ch; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.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 .15s, color .15s; }
.chip: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; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } }
</style>
</head>
<body>
<div class="widget">
<div class="control-row">
<label for="p">Probability of the event</label>
<input type="range" id="p" min="1" max="100" value="50">
<span class="mono val" id="p-label">0.50</span>
</div>
<div class="chips">
<button class="chip" data-p="0.5">coin lands heads · ½</button>
<button class="chip" data-p="0.1667">die rolls a six · ⅙</button>
<button class="chip" data-p="0.0192">draw the ace of spades · 1/52</button>
<button class="chip" data-p="0.0278">roll double sixes · 1/36</button>
<button class="chip" data-p="0.0000000714">win the lottery · 1/14,000,000</button>
<button class="chip" data-p="0.99">the sun rises · ~1</button>
</div>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="bits">1.00</span>
<small>bits of information · −log₂ p</small>
</div>
<div class="readout accent">
<span class="big mono" id="odds">2</span>
<small>one chance in · 1/p</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
/* Surprise in bits: I(p) = −log₂ p, a slider, event chips and the curve. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp, readTheme, plotCurve, onResize } = window.Info;
let p = 0.5;
let host = null;
const fmtOdds = (x) => {
const n = 1 / x;
if (n < 10) return n.toFixed(1).replace(/\.0$/, '');
return Math.round(n).toLocaleString('en-US');
};
function render() {
$('p-label').textContent = p < 0.01 ? p.toExponential(1) : p.toFixed(2);
$('bits').textContent = (-Math.log2(p)).toFixed(2);
$('odds').textContent = fmtOdds(p);
plotCurve($('plot'), {
fn: (x) => -Math.log2(x), xmin: 0.01, xmax: 1, ymax: 7, dotX: p, xlabel: 'p', ylabel: 'bits',
});
}
function setP(v, fromSlider) {
p = clamp(v, 1e-9, 1);
if (!fromSlider) $('p').value = Math.round(clamp(p * 100, 1, 100));
render();
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
$('p').addEventListener('input', () => { setP($('p').value / 100, true); ping({ p }); });
document.querySelectorAll('.chip').forEach((chip) => {
chip.addEventListener('click', () => { setP(parseFloat(chip.dataset.p)); ping({ p }); });
});
onResize(render);
readTheme();
render();
LearnWidget.connect().then((h) => {
host = h;
readTheme();
if (typeof h.params.p === 'number') setP(h.params.p);
else render();
h.on('theme.changed', () => { readTheme(); render(); });
h.on('params.changed', (np) => { if (typeof np.p === 'number') setP(np.p); });
});
})();