Ideally, I'd like this to be a little more engaging however, perhaps with three states and 2 levels of detail.
Data model
Keep in mind the basic data model of a Lesson is:
A Lesson has 1 or more Section
A Section has 1 or more Steps
A Step is either:
Narrative text with Instructional or Challenge components
Narrative text with Quiz components
States
Off screen
In this state, the famous hamburger triple lines conceals the progress trail
Basic trail
Here, after clicking the hamburger, the basic trail, like the site above, shows.
Extended
Here, the panel slides over to 80 percent or perhaps just goes full-screen modal, and takes on more of a gallery / media panel style, with these ideal features:
An image or gallery that captures the intent of the Step
Tags that reflect the topics and skills learned within a Step
Summary about other students engagement with this Step, such as
Number of views
Number of comments about the Step
If the Step results in completed code, then links to the /gallery/:challengeName
etc...
Notes
The Extended view concepts can and should apply to the Lesson as a whole, which is already sort of in progress in /lessonProgress
I like the vertical, circle-connected progression trail popular on courseware sites. See the example here:
http://angular-meteor.com/tutorial/step_00
Ideally, I'd like this to be a little more engaging however, perhaps with three states and 2 levels of detail.
Data model
Keep in mind the basic data model of a Lesson is:
States
Off screen
In this state, the famous hamburger triple lines conceals the progress trail
Basic trail
Here, after clicking the hamburger, the basic trail, like the site above, shows.
Extended
Here, the panel slides over to 80 percent or perhaps just goes full-screen modal, and takes on more of a gallery / media panel style, with these ideal features:
Notes
The Extended view concepts can and should apply to the Lesson as a whole, which is already sort of in progress in /lessonProgress