Interactive Textbook

fundamentals-of-computer-science.github.io / ch-2 / data-and-memory

⌘K search

Chapter 2 · Values and Memory

2.1Values live in boxes

Paragraph mode: hover a whole paragraph → its ①②③ group pulses in the diagram. ·Sentence mode (new): hover an individual sentence → only the code line + cell it describes lights up. ·Groups still show as left-border colors in both modes for orientation.

① single value ② copy ③ 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 fixed-size slot of memory and labels it x. The literal 5 is written directly into that slot — no indirection, no pointer.

The slot is the box. Its contents are the value. That's the entire mental model for primitive types: box + contents, nothing more.

Now look at the next line. int y = x; copies the value out of x's box into a brand-new box named y. Crucially, no link is drawn between them — each box holds its own independent copy of 5.

This is why int is sometimes called a copy type. Assignment copies; it does not share.

The payoff comes on the third line. y = y + 1; adds one to y — only y's box changes, from 5 to 6. x still holds 5; its box was never touched. That independence is the whole point of copy semantics.

Chapter 4 introduces reference types, which behave differently. For this chapter, every value you create is its own little island, copied on assignment.

Memory — walkthrough of int x=5; int y=x; y=y+1;

0x7ffc005x

0x7ffc046y

0x7ffc005x (still)

0x7ffc0c—

int x = 5; // ① box x ← 5 int y = x; // ② copy into y y = y + 1; // ③ only y changes // x is still 5

translation — what the runtime does

int x = 5;

① Evaluate 5 → literal: 5

② Bind 5 to x → write into box x

int y = x;

① Evaluate x → look up x: 5

② Bind 5 to y → new box y ← 5

y = y + 1;

① Evaluate y + 1 → look up y (5), add 1: 6

② Bind 6 to y → overwrite box y

③ x is never written to → box x still 5

¶ mode hover a paragraph → group pulses across all three panels. — mode hover a sentence → just the steps + line + cell it describes light up.

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

no grade · self-check

Drag values from the tray into the boxes. Hit Check to see which boxes are wrong — fix them and try again.

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

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

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

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-3
groups:
  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.

Interactive Textbook — v2 Group highlights · Diagram quizzes · Mobile stack · Authoring sketch

Diagrams span paragraphs

Quiz mode, same diagram

Mobile = stacked

Authoring stays markdown

Fill in the memory state after this code runs

Write the code that produces this memory state

Values live in boxes

Fill in the memory

Instructor writes .md source

Build pipeline quartz plugin

Output rendered html (excerpt)

Open questions for v3

Likely next moves

Tweaks

Diagrams span paragraphs

Quiz mode, same diagram

Mobile = stacked

Authoring stays markdown

Fill in the memory state after this code runs

Write the code that produces this memory state

Values live in boxes

Fill in the memory

Instructor writes .md source

Build pipeline quartz plugin

Output rendered html (excerpt)

Open questions for v3

Likely next moves

Tweaks close

Tweaks