All posts

Learning

You don't understand it until you can predict it

Watching an animation feels like learning, but recognition isn't recall. So I built a quiz that makes you commit to the next step before it happens — and made it hard to cram, because every run is a fresh random one and every answer is read straight off the trace that drives the animation.

June 13, 20267 min read

You press play on bubble sort. The bars slide, a pair lights up amber, the sorted tail grows green from the right, and at the end the row is in order. It made sense the whole way through — you nodded along at every step. So you close the tab believing you learned bubble sort.

Then someone hands you a fresh array and asks: after the first full pass, which index is locked in? And you realize you can't answer without watching it again.

That gap has a name. What the animation gave you was recognition — the warm feeling of "yes, I follow this." What the question demanded was recall — actually running the procedure yourself. They feel almost identical from the inside, and animation is dangerously good at manufacturing the first while you walk away convinced you got the second. A smooth visualization is, in this one specific way, a liability: the smoother it is, the more certain you are that you understand it, and the certainty is the part that's fake.

Prediction is the cheapest way to tell the difference

There's an old, well-worn result in learning research: you remember a thing far better if you had to produce it than if you merely saw it. Make yourself guess the answer before it's revealed — even a wrong guess — and the correct answer sticks in a way that passively reading it never does. Retrieval beats review.

So VizLearn now does this literally. The new predict-the-next-step quiz pauses the animation a beat before the next thing happens and makes you call it. Will these two swap, or not? After this pass, which index settles? How many comparisons does the whole sort take? You commit to an answer, then the animation plays out what actually happens, and you find out on the spot whether your model of the algorithm matched reality.

The half-second of "ugh, wait, let me actually think" is the entire product. That's the moment watching turns into knowing.

A fixed quiz is a memorization test wearing a disguise

The obvious way to build this is a question bank: write twenty good questions about bubble sort, shuffle them, show five. It works exactly once. The second time through, the learner isn't running the algorithm anymore — they're remembering that the answer to "which index settles" was 6. You've built a flashcard deck for one particular array and dressed it up as a test of understanding. It measures whether they came back, not whether they learned.

So I built the opposite. Every attempt — including every tap of new questions — rolls a fresh random array and feeds it to the actual player. New input, new run, new trace, new questions about a row of numbers you have never seen before. There is no "answer to question 3" sitting in your memory, because question 3 is about an array that didn't exist until you clicked. The only thing that carries from one attempt to the next is the algorithm itself — which is precisely the thing I want you to carry out the door.

This is what makes it a real check on mastery instead of a check on attendance. You cannot grind it. You can only get better at bubble sort.

The answer is whatever the animation did — never what the quiz recomputed

This is the part that fell out of the way VizLearn was already built.

A quiz has to know the right answer. The tempting way to get it is to compute it in the quiz layer: re-run a little bubble sort off to the side, count the comparisons, store "42," grade against that. The problem is that you now have two implementations of bubble sort — the one driving the animation and the one grading the quiz — and the day they disagree by even one comparison, the quiz marks you wrong for correctly reading the screen. The exam contradicts the textbook, and the learner is the one who pays.

So the quiz computes nothing. Every question is read straight off the same deterministic trace that drives the animation — the frame-is-the-truth idea I wrote about before, pointed at a new surface. "Which index settles after pass three" is answered by looking at what the trace's pass-three boundary literally did. The picture you watched and the answer you're graded against are physically the same source of truth; they cannot drift, because there is only one of them. (The test suite enforces this from the other direction: the answer guards re-derive every expected answer from the trace, so a quiz answer that disagreed with the animation would fail the build, not the learner.)

Not every moment makes a good question

A subtlety surfaced as soon as I started generating questions from the trace. The trace has a beat for every comparison and every swap — and most of them make terrible questions.

Take "will these two bars swap?" One bar is visibly taller than the other. You can read the answer off the picture without knowing a single thing about sorting. A question the image answers for you tests nothing; it's busywork that feels like a quiz.

So every candidate question carries a weight set by how much mental execution it actually demands. The screen-readable ones — will they swap — get a low weight and show up rarely, as warm-ups. The ones that force you to genuinely simulate the algorithm in your head — the total comparison count, whether the optimized early-exit kicks in, which index the green sorted tail just claimed — get the high weight. The quiz samples by weight, so a typical run leans hard on the questions you can't fake by squinting.

The bug that made variety non-optional

The first version shipped with a flaw a learner caught within minutes: a six-question run where four of the six were the identical question — "this pass is finishing; which index locks in?"

The cause was both dumb and instructive. That settle question is a genuinely good one, so it carried a high weight. But the generator emitted one for every pass of the sort — and an eight-pass array produces seven of them. The sampler, faithfully drawing by weight, drew the same excellent question four times over. Each individual draw was fair. Together they tested one skill four times and five other skills zero times.

The fix was nearly one line: cap every repeated type of question — ask the first two of a kind, then move on to something else. But the useful part was underneath the bug. Monotony isn't a cosmetic flaw in a quiz; it's a failure of the test itself. A mastery check that asks the same thing six times lights up one corner of your understanding and leaves the entire rest of the room dark. Variety isn't decoration here — it's coverage, and coverage is the whole job.

The same pattern, aimed at a new verb

This is the same thread that kept showing up elsewhere in VizLearn: the animation is the explanation. The quiz points that habit at a different verb. If the animation is the explanation, then the exam has to be written from the same source the explanation came from — never able to disagree with what you just watched, never memorizable because the run is always new, never wasting a slot on a question the picture already answered.

It's live now as a free taster on bubble sort. Open it, make a prediction, and pay attention to the precise instant you stop watching and start computing. That instant is the one I want the lesson to create.

Try it: open Bubble Sort, hit Quiz, and commit to an answer before you let the animation play it for you.