Interactive Textbook — v2
Group highlights · Diagram quizzes · Mobile stack · Authoring sketch
VERSION v2 FIDELITY wireframe FROM v1 · Side Panel
Diagrams span paragraphs
One diagram ↔ a group of related paragraphs. Hover/tap any paragraph → its matching components pulse; other paragraphs in the same group get a light tint so you see the scope.
Quiz mode, same diagram
The memory diagrams are reused as assessment: code → diagram (fill the boxes) and diagram → code (fill the code). Lives on dedicated quiz pages inside the chapter.
Mobile = stacked
Side panels don't work on a phone. Mobile inlines the diagram directly under its group, collapses by default, and gives quizzes a dedicated screen.
Authoring stays markdown
Extend Quartz-flavoured markdown with {#group} attrs and a ::: diagram directive. Instructors write prose as normal; the build wires up the interactions.
Idea: paragraphs are marked with a ① ② ③ group that maps to one region of the diagram.
·Hover / tap a paragraph → its group pulses in the diagram. Other paragraphs in the same group get lightly tinted so you see the reach of the diagram.
·Hover a cell → every paragraph that talks about it tints in the margin rail.
Group ① — single value Group ② — copy semantics Group ③ — independence
Before we can talk about variables, we need a word for the things variables hold. A value is a piece of data your program can compute with — a truth, a number, a piece of text. Each value has a type, and the type decides what you can do with it.
The simplest case is a single value type like int. When you write int x = 5;, the compiler reserves a small, fixed-size slot of memory, labels it x, and writes the literal 5 into that slot.
The slot is the box. Its contents are the value. That's the entire mental model you need for primitive types: box + contents, nothing more.
Now look at the next line: int y = x;. This copies the value out of x's box and writes it into a brand-new box named y. Crucially, no link is drawn between the two boxes — they each hold their own 5.
This is why int (and every other value type) is sometimes called a copy type. Assignment copies; it does not share.
The payoff is on the third line: y = y + 1;. We add one to y. Only y's box changes. x still holds 5 — its box was never touched.
Chapter 4 introduces reference types, which behave differently. For this chapter, though, every value you create is its own little island, copied on assignment and changed in place.
Memory — walkthrough of int x=5; int y=x; y=y+1;
0x7ffc005x
0x7ffc046y
0x7ffc005x (still)
0x7ffc0c—
int x = 5; // ① box x ← 5int y = x; // ② copy 5 into box yy = y + 1; // ③ only y changes// x is still 5 — boxes are independent
hover a paragraph, code line, or cell — all three in the same group pulse together.
1.1
1.2
1.3
2.0
2.1 Values
2.1Q
2.2 Bind
2.3 Scope
2.3Q
2.4 Copy
2.5
2Q
concept 5 / 12
fundamentals-of-computer-science.github.io / ch-2 / 2-1-values / practice
⌘K search
Chapter 2 · Values and Memory · Practice page
2.1 QDiagram practice
Idea: the same memory diagrams from the reading, now with pieces blanked out.
·Two modes: code → diagram (fill the boxes) and diagram → code (fill the code). Marked ? on the progress bar.
Code → DiagramGiven code, fill in the boxes
Diagram → CodeGiven boxes, write the code
◆ Question 1 of 3 · code → diagram
Fill in the memory state after this code runs
◴ 00:42
Drop the address labels and values into the right boxes. Values come from the tray; names are free-type.
int a = 3;int b = a + 4;a = 10;
drag values into boxes ↓
3
7
10
4
—
13
your memory diagram
0x100
0x104
0x108
0x10c
0 / 4 boxes correct
◆ Question 1 of 3 · diagram → code
Write the code that produces this memory state
◴ 01:08
The memory is given. Reconstruct the three lines that got us here.
given memory (read-only)
0x10010a
0x1047b
0x108—
0x10c—
Note: this is the final state. One value was reassigned along the way.
your codeinta = 3;intb = a + 4;a = 10;
— waiting
Your code will be executed in a sandbox and the resulting memory compared to the given diagram.
1.1
1.2
1.3
2.0
2.1
2.1Q
2.2 Bind
2.3 Scope
2.3Q
2.4 Copy
2.5
2Q
practice 1 / 3
Mobile treatment
3Read · Expand · Quiz
Idea: on phones we stack everything. Tap a ◆ paragraph → its diagram expands inline below (never beside). Quizzes are their own full screen.
·The group-highlight behaviour still works — tap a paragraph to tint its cells in the just-expanded diagram.
Reading screen
tap ◆ paragraph → inline expand
9:41Ch 2.1●●●●
Chapter 2.1 · Values
Values live in boxes
A value is data your program can compute with. Each value has a type.
int x = 5; reserves a slot and writes 5 into it.
◆ memory after line 1
0x1005x
0x104—
int x = 5;
int y = x;copies 5 into a new box y.
Each box is independent — assignment copies, never shares.
Quiz screen
dedicated page — fill the boxes by tap
9:42Ch 2.1 Q●●●●
Practice · code → diagram
Fill in the memory
int a = 3;int b = a + 4;a = 10;
0x100
0x104
0x108
0x10c
3
10
7
4
—
Tap a chip, then tap an empty box to place its value.
Authoring · markdown-first
4Markdown → interactive page
Idea: keep writing prose in Quartz markdown. Add two new affordances: inline {#group} attrs on paragraphs, and a ::: diagram directive that binds groups to code + memory state.
·The build step (existing Quartz pipeline) expands these into the interactive component shown in tab 1.
Instructor writes .md source
# 2.1 — Values live in boxes
Before we can talk about variables, we need
a word for what they *hold*. A **value** is
a piece of data your program can compute with.
The simplest case is a single *value type*
like `int`. `int x = 5;` reserves a slot of
memory and writes 5 into it. {#mem .group-1}The slot is the box. Its contents are the
value. {#mem .group-1}Now look at `int y = x;`. This **copies**
the value into a new box. {#mem .group-2}::: diagram id="mem"code:
int x = 5; # group-1
int y = x; # group-2
y = y + 1; # group-3groups:
group-1: [x]
group-2: [y]
group-3: [y, x]
:::
{#id .class} — standard Pandoc/remark attribute syntax; attaches a paragraph to a diagram + group.
::: diagram — a fenced directive: one block per page, lists code + which variables belong to each group.
Nothing new for instructors who don't want interactivity — plain markdown still renders as plain prose.
Build pipeline quartz plugin
Parse markdown + attrs into an AST. Collect paragraphs by {#id .group-n}.
Resolve ::: diagram blocks — turn the code + groups table into a memory model.
Emit HTML with data-group="gN" on paragraphs, code lines, and cells.
Inject shared JS that handles hover/tap group pulsing and the quiz mode.
Output rendered html (excerpt)
<p data-group="g1" data-group-label="①">
The simplest case is a single <i>value type</i>…
</p><div class="diagram" data-diagram-id="mem"><div class="cell" data-group="g1">x = 5</div><div class="cell" data-group="g2">y = 6</div><pre class="code"><span class="ln" data-group="g1">int x = 5;</span><span class="ln" data-group="g2">int y = x;</span></pre></div>
data-group="g1" — the single hook wiring prose, code, and diagram together.
Quiz pages reuse the same diagram config; the plugin just blanks selected fields and adds input controls.
Existing backlinks / table-of-contents generation is unaffected.
Open questions for v3
· Should groups auto-advance as you scroll — pulsing ① then ② then ③ based on reading position?
· In quizzes, do we want partial-credit scoring or strict all-or-nothing?
· Do we want a "reveal all diagrams" printable view for studying offline?
· For diagram → code mode, compile + run in-browser (C# via WebAssembly) or just string-match?
Likely next moves
→ Commit to the {#group} + ::: diagram authoring shape, then prototype against one real chapter.
→ Decide whether quiz state (progress, scores) gets stored locally only or synced to an account.
→ Figure out the diagram vocabulary: memory boxes cover most of Chapters 1–3, but linked lists in Chapter 4 need pointers/arrows.
→ Mid-fi pass on the reading layout with the real typography of your site.