Guide · 12 of 15
Timeline
A timeline is a sequence of steps the learner plays through in order. Each step can narrate, set state instantly, or animate to new values. Great for walkthroughs and guided reveals.
step#
One beat in the timeline. The learner presses play to advance. Narrate text appears as a caption. Steps accumulate — state set in step 1 stays in step 2. hint adds an optional nudge behind a "Hint" button, for a step that isn't obvious on its own. wait holds the timeline on this step until the condition is true, so a step can ask the learner to do something ("now shrink the gap") before the story moves on. An exercise with after: <n> stays hidden until the timeline reaches step n, which is how a question appears partway through a worked example.
Steps can also point at things. indicate gives the named objects a short pulse, focus dims everything else, and surround draws a dashed ring round an object, for as long as the step is showing, in 3D and on a numberline too. Separately, hovering a coloured word in the prose (a colour role, see role) pulses every object playing that role.
step ["narrate text"] { [set: {k: v}], [animate: {k: v}], [dur: <ms>], [ease: <curve>], [hint: "..."], [wait: <condition>], [indicate: [ids]], [focus: [ids]], [surround: [ids]] }
| prop | type | description |
|---|---|---|
| hint | string | nudge shown behind a Hint button on this step |
| wait | condition | hold on this step until the condition over scene state is true |
| indicate | [ids] | pulse these objects during the step |
| focus | [ids] | dim everything except these objects |
| surround | [ids] | ring these objects during the step |
Example