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="bits-as-questions"></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 bits-as-questions/ to a new name (one DNS label), set forkedFrom to { "name": "bits-as-questions", "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": "bits-as-questions",
"title": "Bits as yes/no questions",
"version": 1,
"claim": "A secret number from 1 to 64 is always identified in exactly 6 halving yes/no questions because log₂ 64 = 6, so each question resolves one bit of the starting uncertainty.",
"summary": "Think of a number, answer each 'greater than?' question honestly, and watch the grid of candidates halve every time; the counter of questions asked equals the bits gathered.",
"topics": [
"information/coding",
"information/entropy",
"computing/binary"
],
"aliases": [
"twenty questions",
"binary search",
"guess the number",
"operational entropy"
],
"params": {
"max": {
"type": "integer",
"default": 64,
"min": 2,
"max": 64,
"label": "largest number"
}
},
"check": [
{
"q": "Why does the game always need exactly 6 questions for a number from 1 to 64?",
"options": [
"Each answer rules out about ten candidates, and 64/10 ≈ 6",
"Six is the most questions the game is allowed to ask",
"Each answer halves the remaining possibilities, and 2⁶ = 64",
"The number of questions is 64/8 = 8, rounded down"
],
"answer": 2,
"why": "Every yes/no answer resolves one bit, and the starting uncertainty is log₂ 64 = 6 bits."
},
{
"q": "You can ask yes/no questions to find a secret number from 1 to 1000. With the best strategy, how many do you need in the worst case?",
"options": [
"10",
"32",
"100",
"500"
],
"answer": 0,
"why": "Each question can halve the candidates and 2¹⁰ = 1024 ≥ 1000, so ⌈log₂ 1000⌉ = 10 questions always suffice."
}
],
"capabilities": [],
"height": 360,
"requires": [
"surprise-bits"
],
"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>Bits as yes/no questions</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; }
.grid { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: 34px; gap: 4px; margin-bottom: 18px; }
.cell { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; transition: opacity .35s, background .35s, color .35s; }
.cell.out { opacity: 0.12; }
.cell.found { background: var(--accent); color: var(--bg); font-weight: 700; }
.game-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 52px; }
.game-q { flex: 1; min-width: 220px; font-size: 16.5px; }
.game-q strong { color: var(--accent); }
.game-buttons { display: flex; gap: 8px; }
.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); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .35; cursor: default; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0 0; }
.readout .big { display: block; font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 3ch; }
.readout.accent .big { color: var(--accent2); }
.readout small { color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } .cell { font-size: 9px; border-radius: 3px; } }
</style>
</head>
<body>
<div class="widget">
<div id="grid" class="grid"></div>
<div class="game-row">
<div id="q" class="game-q">Think of a number from 1 to 64, then press start.</div>
<div class="game-buttons">
<button class="btn primary" id="yes" disabled>yes</button>
<button class="btn primary" id="no" disabled>no</button>
<button class="btn" id="restart">start</button>
</div>
</div>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="asked">0</span>
<small>questions asked = bits gathered</small>
</div>
<div class="readout">
<span class="big mono" id="left">64</span>
<small>possibilities remaining</small>
</div>
<div class="readout accent">
<span class="big mono" id="need">6</span>
<small id="need-label">questions needed · log₂ 64</small>
</div>
</div>
</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
/* Bits as yes/no questions: a halving search finds a number in 1..N in ⌈log₂ N⌉ questions. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp } = window.Info;
let N = 64;
let cells = [];
let lo = 1, hi = N, mid = 0, asked = 0, active = false;
let host = null;
function buildGrid() {
const grid = $('grid');
grid.innerHTML = '';
cells = [];
const cols = N <= 16 ? N : 16;
grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
for (let i = 1; i <= N; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.textContent = i;
grid.appendChild(cell);
cells.push(cell);
}
}
function need() { return Math.ceil(Math.log2(N)); }
function render() {
cells.forEach((cell, i) => {
const n = i + 1;
cell.classList.toggle('out', active || lo === hi ? n < lo || n > hi : false);
cell.classList.toggle('found', !active && lo === hi && n === lo);
});
$('asked').textContent = asked;
$('left').textContent = hi - lo + 1;
$('need').textContent = need();
const exact = Number.isInteger(Math.log2(N));
$('need-label').textContent = 'questions needed · ' + (exact ? 'log₂ ' + N : '⌈log₂ ' + N + '⌉');
}
function ask() {
if (lo === hi) {
active = false;
$('q').innerHTML =
'Your number is <strong>' + lo + '</strong>, found with ' + asked + ' question' + (asked === 1 ? '' : 's') +
'. The starting uncertainty was log₂ ' + N + (Number.isInteger(Math.log2(N)) ? ' = ' : ' ≈ ') +
Math.log2(N).toFixed(Number.isInteger(Math.log2(N)) ? 0 : 2) + ' bits, and each answer resolved one bit.';
$('yes').disabled = true;
$('no').disabled = true;
$('restart').textContent = 'play again';
render();
if (host && host.signal) host.signal('complete', { asked, N });
return;
}
mid = Math.floor((lo + hi) / 2);
$('q').innerHTML = 'Q' + (asked + 1) + ': Is your number greater than <strong>' + mid + '</strong>?';
render();
}
function answer(yes) {
if (!active) return;
asked++;
if (yes) lo = mid + 1;
else hi = mid;
ask();
}
function reset(idle) {
lo = 1; hi = N; asked = 0; active = !idle;
$('yes').disabled = idle;
$('no').disabled = idle;
$('restart').textContent = idle ? 'start' : 'restart';
if (idle) {
$('q').textContent = 'Think of a number from 1 to ' + N + ', then press start.';
render();
} else ask();
}
function setN(k) {
N = clamp(Math.round(k), 2, 64);
buildGrid();
reset(true);
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
$('yes').addEventListener('click', () => { answer(true); ping({ asked }); });
$('no').addEventListener('click', () => { answer(false); ping({ asked }); });
$('restart').addEventListener('click', () => { reset(false); ping({ start: true }); });
buildGrid();
reset(true);
LearnWidget.connect().then((h) => {
host = h;
if (Number.isInteger(h.params.max)) setN(h.params.max);
h.on('params.changed', (np) => { if (Number.isInteger(np.max)) setN(np.max); });
});
})();