diff --git a/content/math/zero-and-one/assets/app-plate-std.jpg b/content/math/zero-and-one/assets/app-plate-std.jpg new file mode 100644 index 0000000..1843965 Binary files /dev/null and b/content/math/zero-and-one/assets/app-plate-std.jpg differ diff --git a/content/math/zero-and-one/assets/empty-box-std.jpg b/content/math/zero-and-one/assets/empty-box-std.jpg new file mode 100644 index 0000000..83b46d4 Binary files /dev/null and b/content/math/zero-and-one/assets/empty-box-std.jpg differ diff --git a/content/math/zero-and-one/assets/lamp-off-std.jpg b/content/math/zero-and-one/assets/lamp-off-std.jpg new file mode 100644 index 0000000..8f22f10 Binary files /dev/null and b/content/math/zero-and-one/assets/lamp-off-std.jpg differ diff --git a/content/math/zero-and-one/assets/lamp-on-std.jpg b/content/math/zero-and-one/assets/lamp-on-std.jpg new file mode 100644 index 0000000..2b4ff48 Binary files /dev/null and b/content/math/zero-and-one/assets/lamp-on-std.jpg differ diff --git a/content/math/zero-and-one/chapter.scss b/content/math/zero-and-one/chapter.scss index a90b14b..ac3020b 100644 --- a/content/math/zero-and-one/chapter.scss +++ b/content/math/zero-and-one/chapter.scss @@ -61,12 +61,12 @@ } .zero-one-board__visual { - display: flex; - align-items: center; - justify-content: center; - min-height: 72px; + display: grid; + gap: 10px; + justify-items: center; + min-height: 140px; margin: 12px 0; - padding: 16px; + padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card-bg); @@ -86,9 +86,27 @@ .zero-one-board__count { margin: 0; font-family: var(--mono); - font-size: 2rem; - font-weight: 700; - color: var(--ink); + font-size: 0.95rem; + color: var(--soft-ink); +} + +.zero-one-board__image { + width: min(100%, 540px); + height: auto; + border: 1px solid var(--line); + border-radius: 10px; + background: #f8fafc; + object-fit: cover; +} + +[data-theme="dark"] .zero-one-board__image { + border-color: rgba(148, 163, 184, 0.5); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) .zero-one-board__image { + border-color: rgba(148, 163, 184, 0.5); + } } .zero-one-board__choices { diff --git a/content/math/zero-and-one/widgets/zero-one-board.tsx b/content/math/zero-and-one/widgets/zero-one-board.tsx index c49cebf..e26984f 100644 --- a/content/math/zero-and-one/widgets/zero-one-board.tsx +++ b/content/math/zero-and-one/widgets/zero-one-board.tsx @@ -1,54 +1,47 @@ -import { createMemo, createSignal, For } from "solid-js"; +import { createMemo, createSignal } from "solid-js"; type Scenario = { id: string; prompt: string; + imageSrc: string; + imageAlt: string; correctAmount: 0 | 1; - showTruth?: boolean; - correctTruth?: boolean; }; const SCENARIOS: Scenario[] = [ { id: "empty-box", prompt: "The box has no marbles inside.", + imageSrc: "/chapters/math/zero-and-one/empty-box-std.jpg", + imageAlt: "An empty box with nothing inside", correctAmount: 0, }, { id: "one-apple", prompt: "There is exactly one apple on the plate.", + imageSrc: "/chapters/math/zero-and-one/app-plate-std.jpg", + imageAlt: "A plate with one apple", correctAmount: 1, }, { id: "light-off", prompt: "The lamp is off — no light showing.", + imageSrc: "/chapters/math/zero-and-one/lamp-off-std.jpg", + imageAlt: "A lamp switched off", correctAmount: 0, }, { id: "light-on", prompt: "The lamp is on — one steady light.", + imageSrc: "/chapters/math/zero-and-one/lamp-on-std.jpg", + imageAlt: "A lamp switched on", correctAmount: 1, }, - { - id: "statement-false", - prompt: "Statement: “The door is open.” (The door is shut.)", - correctAmount: 0, - showTruth: true, - correctTruth: false, - }, - { - id: "statement-true", - prompt: "Statement: “There is one bell ringing.” (You hear one bell.)", - correctAmount: 1, - showTruth: true, - correctTruth: true, - }, ]; function ZeroOneBoard() { const [index, setIndex] = createSignal(0); const [picked, setPicked] = createSignal<0 | 1 | null>(null); - const [truthPicked, setTruthPicked] = createSignal(null); const scenario = createMemo(() => SCENARIOS[index() % SCENARIOS.length]); const atEnd = createMemo(() => index() >= SCENARIOS.length - 1); @@ -58,21 +51,9 @@ function ZeroOneBoard() { return p !== null && p === scenario().correctAmount; }); - const truthCorrect = createMemo(() => { - const s = scenario(); - if (!s.showTruth) return true; - const t = truthPicked(); - return t !== null && t === s.correctTruth; - }); + const answered = createMemo(() => picked() !== null); - const answered = createMemo(() => { - const s = scenario(); - if (picked() === null) return false; - if (s.showTruth && truthPicked() === null) return false; - return true; - }); - - const allCorrect = createMemo(() => answered() && amountCorrect() && truthCorrect()); + const allCorrect = createMemo(() => answered() && amountCorrect()); const feedback = createMemo(() => { if (!answered()) return "Choose how many, then Next when you are ready."; @@ -86,31 +67,23 @@ function ZeroOneBoard() { ? "Not quite — this situation is one, not zero." : "Not quite — this situation is zero, not one."; } - return truthPicked() === true - ? "Check the statement again — it does not match the world (false)." - : "Check the statement again — it matches the world (true)."; + return "Try again."; }); const pickAmount = (n: 0 | 1) => { setPicked(n); }; - const pickTruth = (value: boolean) => { - setTruthPicked(value); - }; - const goNext = () => { if (!answered() || !allCorrect()) return; if (atEnd()) return; setIndex((i) => i + 1); setPicked(null); - setTruthPicked(null); }; const resetAll = () => { setIndex(0); setPicked(null); - setTruthPicked(null); }; return ( @@ -120,8 +93,7 @@ function ZeroOneBoard() {

- Situation {index() + 1} of {SCENARIOS.length}. Pick the amount that fits. When a statement - is shown, also pick true or false. + Situation {index() + 1} of {SCENARIOS.length}. Pick the amount that fits the image.

{scenario().prompt}

@@ -133,17 +105,17 @@ function ZeroOneBoard() { }} aria-live="polite" > + {scenario().imageAlt}

- {picked() === null ? "?" : picked()} + Your pick: {picked() === null ? "?" : picked()}

-
@@ -165,27 +137,6 @@ function ZeroOneBoard() {
- {scenario().showTruth ? ( -
- - -
- ) : null} -