Skip to content

Goal Horizon Timeline

Run MicroSim in Fullscreen

Specification

The full specification below is extracted from Chapter 3: Concept Dependencies and Prerequisites.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Type: chart
**sim-id:** goal-horizon-timeline<br/>
**Library:** vis-timeline<br/>
**Status:** Specified

Purpose: Show a single learner's position on a prerequisite chain and let them see which upcoming concept counts as their immediate goal, which counts as an intermediate goal, and which is the ultimate goal of the course.

Bloom Level: Understand (L2)
Bloom Verb: classify, distinguish

Learning objective: Given a learner's current position on a displayed chain, the learner can correctly classify each remaining concept as an immediate, intermediate, or ultimate goal.

Timeline items (7 concepts in sequence, left to right): "Number Sense" (mastered), "Arithmetic" (mastered), "Algebra" (current frontier), "Functions" , "Derivatives", "Integrals", "Applied Calculus" (course capstone)

Interactive controls:
- Draggable "You are here" marker, defaults positioned after "Algebra"
- As the marker moves, the timeline recolors: mastered concepts (left of marker) gray, the single next concept immediately right of the marker gold and badged "Immediate Goal," concepts further right but before the last item blue and badged "Intermediate Goal," and the rightmost concept ("Applied Calculus") always badged "Ultimate Goal" in purple regardless of marker position

Visual styling:
- vis-timeline horizontal axis, one item per concept, connecting line between consecutive items
- Badges rendered as small pills above each timeline item

Canvas size: responsive, 100% width, 480px height

Implementation: vis-timeline JavaScript library; badge assignment recalculated in a "rangechange"/drag event handler based on the marker's item index