Jumping to a step with a link
Each reported step is one chart change. An instant jump skips the steps in between; a smooth scroll passes through them. The wait loop polls for the observer's report, it does not measure time.
One chart, many states: each step of the story is a named state, and the chart is a function of the active step. That is why scrolling back up, jumping with a link, resizing and opening the page half-way down all work without special cases.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a state weekend to the library that shows the season bands and marks nothing, and call show("weekend", 0) in a scratch copy of the first example. Say what you had to change besides the STATES entry.
Write closestStep(centres, mid) that returns the index of the centre nearest mid and the lowest index on a tie. Test it with an empty list, one centre and a tie.
Explain it without notes
Why define each step as a full state instead of a change from the previous step?
What happens to a running transition when a newer one starts on the same element, and what must your code do about end()?
What does the observer report when a link jumps from step 0 to step 4, and what with smooth scrolling?
Why is the last reported step not always the active one, and how do you choose?
Preview
Console
Nothing logged yet.Expected console output
page opened, first report: 0
instant jump to step 4 -> steps reported: 4
instant jump to step 1 -> steps reported: 1
smooth jump to step 3 -> steps reported: 2, 3