Revealing a path one cell at a time: a small UI pattern that makes puzzle solvers teach instead of spoil

Answer sites usually ship a screenshot of the finished solution. That format works for verification and fails at everything else: you cannot see which decision you got wrong, and you cannot unsee the answer if you were only halfway through the puzzle.

A path-reveal interface fixes that with a single interaction rule. The grid itself is the answer key, and the reader chooses how much of the key to unlock.

The rule: reveal up to the cell you clicked

For a path-based puzzle such as LinkedIn's 6x6 Zip, the solution is an ordered list of 36 cells. Model it as an array and the whole UI falls out of an index:

• Clicking cell i reveals path.slice(0, indexOf(i) + 1) and nothing more.
• Clicking an already-revealed cell truncates the path back to that point, which doubles as "undo my reveal".
• A Next step control increments the visible length by one.
• Reveal all sets the visible length to path.length.

Because every state is derived from a single integer (how many steps are visible) plus a cell index, there is no separate "solved" flag to keep in sync, and truncation is free rather than a special case.

Why incremental reveal actually teaches

A solver who has already tried the puzzle arrives with a mental model that is wrong in one specific place. Stopping the reveal at that cell shows the divergence and the surrounding constraint — the wall that blocked one direction, the checkpoint ordering that forced another — while leaving the rest of the route unread. The lesson lands at the point of failure instead of arriving as a wall of 36 numbers.

The same page then works for practice: the archive of past puzzles reuses the identical component, so an older grid behaves exactly like today's.

Cost and constraints

The whole thing is a static page with a small amount of client-side JavaScript. No account, no network call per reveal, no state beyond two integers. On mobile the grid is a CSS grid and cell tap targets are the only real design constraint.

If you want to see the pattern in practice, Zip Answer Today applies it to the daily LinkedIn Zip grid and the other LinkedIn daily games, including a free practice mode that generates fresh 6x6 layouts.

The takeaway generalises beyond puzzle answers: when the content is a sequence, expose the sequence length as state and let the reader scrub it. It costs almost nothing to build and turns a spoiler into a hint.