Run Progress Nav

The Run Progress component displays learner progress on a specific course run, and allows the learner to navigate through the weeks of the course.

How it works

The component consists of 3 parts (from top to bottom):

• an icon, to indicate a selected or locked week

• a box for each week

• a progress bar to indicate how much of that week the learner has completed in 25% steps

This component’s key functions are to:

• Show the activity status of each course week

  • a locked week - lock icon above, content in a box with a white background, and text to indicate when it unlocks
  • an unlocked week - no icon above, content in a box with a pink background, and text to it is unlocked
  • selected week - pink arrow icon above (this overrides the icon for a locked/unlocked week), and keeps the styles of the locked/unlocked week

• Allow you to navigate to another week in the course

  • The week boxes are interactive and clicking on them allows you to move from week to week