Building a Course Outline in Webflow

Progress Tracking

No items found.

In any Learning Management System ( LMS ), progress tracking is an often-desired capability.

Simply put, it means knowing what each student has completed, and what is remaining for them to complete. Usually this is shown visually using checkboxes or something similar.

The Basics

To do progress-tracking you need two things;

  1. Identifiable users, meaning a User ID and some kind of log-in so you know who is progressing through your LMS content.
  2. A way to track which lessons each user has completed. Essentially that means a system which can store the User ID - Lesson ID cross references, and retrieve them efficiently. This is almost always an external system.

Identifying Your Users

Memberstack has the ability to generate and expose a User ID, and also has some cloneables and suggestions for a solution that might work for progress tracking.

Webflow Memberships BETA does not yet have an internal User ID accessible however Sygnal Attributes supports a unique Alternate User ID for Membership BETA users.

Tracking Course Completions

Once you have a unique User ID, you need the ability to flag and track completion of specific Lessons, by Webflow CMS item slug.

Currently the most evolved solution for this seems to be Jetboost- however it's not a completely-built-out solution. You'll need a bit of custom script in order to use Jetboost for this purpose.

Here are some starting points;

Progress Tracking Models

Some reflections & notes from our own team discussions.

We're using the Webflow 101 Crash Course as a reference site;

There are actually quite a few approaches to creating this type of capability, with different advantages and levels of complexity. You'll want to think a lot about what you're trying to track, and how the UI will work.

In general I view it as two different models;

  1. You want to track yes/no whether person X has completed lesson Y. Probably person X must click a checkbox or something when Y is done.
  2. You want to track how far person X has progressed in course Z. Here, X is opening lessons, and then some trigger ( opening the lesson? ) updates the progress-tracker within the course.

You'd implement each of these differently at every level, data, UI, UX, triggers, etc.

One way to do this, sort of, is to have the completed triggers / buttons trigger a form, which triggers Webflow Logic, which updates the CMS. That's kinda cool, and self-contained, but you'll be filling up a tracking table pretty quickly with your X-Y cartesian. 1000 users, 100 courses, means 10,000 records that do nothing but add a little checkbox indication.

A better way is to use an external tracking system, but you may only get the visual effect. I think Memberstack has a cloneable course which has this kind of feature integrated.

Another option is to use script and localData to store that tracking in the browser itself. Nice in that you don't need logins, Terrible in that you don't need logins... so the data isn't transportable if the user logs in to another computer. Plus you get no tracking data as to what people are actually completing.

So lots of ups and downsides of the different possibilities. It's really important for you to decide What you need, and Why, before you start looking for the How.

Introduction & overview
Design Goals
Design Decisions
Sorting CMS Lists Declaratively
Resources & References
Project Map & Notes
Additional Features
Next & Prev Buttons
Members-Only Access
Progress Tracking
No items found.
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.