Interactive figures reveal changing state

Video segment: 08:54–09:32

The idea in plain language

An interactive figure is a small visual model that the learner can manipulate. Instead of only looking at one frozen picture, the learner changes something and sees what changes with it.

The speaker's point is not that motion or drag controls automatically make an explanation better. An interactive figure earns its place when the learner can discover a relationship that a static picture cannot show clearly. In this segment, dragging rocks makes otherwise hidden information visible. The figure exposes their coordinates and the way their Z layers—or depth ordering—change.

This makes the figure an aid for building intuition. The learner does not begin by decoding implementation details. They can first form a feel for what changes together in the system.

Read the rock demo as cause and effect

The video uses a rock simulation to make a drawing-order idea tangible. The planned visual evidence at about 09:01 shows a slide titled “Interactive figures” with two draggable rocks on a layered oval surface, alongside coordinate and depth data. At about 09:11, the presentation shows the same two-rock depth-ordering simulation inside a Notion page.

The important learning sequence is:

1. The learner drags one rock.
2. The figure exposes that rock's position values and depth/Z-order information.
3. The displayed rocks show a different front-versus-behind arrangement.
4. The learner can connect an action in the figure with the state that determines how the scene is painted.

move a rock
    ↓
observe its position and depth information
    ↓
observe which rock appears in front or behind
    ↓
build an intuition for the relationship between state and rendering order

This diagram is a teaching reconstruction of the relationship described in the segment, not source code or a claim about the simulation's implementation.

Two terms that make the demo legible

• Coordinates are values that identify an object's position. The segment uses them as visible position information. It does not specify the axes, units, or formula used by the demo.
• A Z layer here is a depth or drawing-order relationship. It helps determine whether one object is shown in front of or behind another. It need not mean that the display is a physically realistic three-dimensional world.

The useful insight is therefore not merely “the rocks move.” Moving them lets the learner inspect state that would otherwise be easy to miss and relate that state to a visible result.

Static picture versus interactive figure

A static image can explain a fixed arrangement very well. It can label two rocks, show one in front, and point to a depth value. But it asks the learner to imagine what would happen after a change.

An interactive figure can let the learner make that change and inspect the result. That difference matters when the concept is about behavior across states, not only about the state in one snapshot.

A static picture is often enough when…	An interactive figure is useful when…
The learner only needs to identify a fixed part or arrangement.	The learner needs to test how one value or action affects another visible result.
A carefully chosen before-and-after image makes the relationship clear.	The value comes from choosing an input and observing the system respond.
The mechanism is already easy to infer.	The mechanism would otherwise remain hidden behind the final picture.

Teaching interpretation: Interactivity is not a replacement for explanation. Labels, a clear goal, and a short account of what to look for still matter. The interaction gives the learner evidence; the explanation helps them know what that evidence means.

A constraint: do not add interaction just for novelty

The speaker explicitly keeps a limit on this technique. Interactivity can be sloppy or become a crutch. A draggable element is not automatically educational merely because it feels engaging.

The proposed test is stricter: Does this interaction provide understanding that a static picture cannot? In the rock example, the answer is yes because the learner can move the objects and see the position/depth information and front-back ordering change together.

Teaching example, not an example from the video

Imagine a diagram that teaches how cards overlap in a two-dimensional interface. A static picture may show Card A in front of Card B. A small interactive figure could let a learner drag the cards and reveal each card's position and draw-order value as the overlap changes.

That interaction has a specific teaching job: it links an action, hidden values, and the visible overlap. If the diagram only adds decorative movement while teaching no new relationship, a labeled static picture would be clearer and cheaper.

Where this fits in the larger explanation

The previous principle in the lesson is intuition before implementation details. An interactive figure supports that order. Before a learner sees implementation code, they can experiment with a small model and form a question such as: “Why did this rock move behind the other one?” The later code has a purpose to explain rather than appearing as an unexplained mass of detail.

Teaching bridge: This is also a bridge toward the lesson's later microworld technique. A focused interactive figure usually teaches one relationship inside an explanation. A microworld extends the same learning pattern into a larger, bounded environment that a learner can explore. In both cases, the aim is not to entertain the learner. It is to make the system's behavior available for direct investigation.

Putting simulations in a shared page

The speaker presents HTML blocks in Notion as a way for agents to place interactive simulations in shared pages. The important idea is that an explanatory page can include a live, manipulable figure, not only a written account.

Teaching context: HTML is a browser format that can contain interactive content. This segment does not specify how the simulation is implemented. Its point is the learning affordance: an agent can help create a simulation and put it in a page where a person can use it while learning about the change.

A practical design check

The following questions are added teaching guidance, not a checklist stated by the speaker:

1. What hidden relationship should the learner understand?
2. What single action can they take to test that relationship?
3. Which state values and visible outcomes should change together?
4. Would a static picture communicate the same idea just as clearly?
5. After interacting, can the learner explain what changed and why it matters?

If those questions have concrete answers, an interactive figure may deepen an explainer. If they do not, interaction may be the crutch the speaker warns about.

Scope note

The source material establishes a two-rock simulation with position/depth information and changing front-versus-behind ordering. It does not establish the exact appearance of the simulation, its coordinate model, or its implementation. This chapter therefore uses the demo to explain the learning relationship without inferring those missing details.

Takeaway

Interactive figures are valuable when they let a learner manipulate a system and observe a relationship that a static image would hide. In the speaker's rock example, dragging exposes position and depth-order state alongside the visible drawing order. Used with restraint, this kind of simulation gives intuition before code and helps a person stay engaged with how a system works.