How to create a checkbox marking progress

Design help General
1

Hi! I want to implement a checkbox beside a navigation item similar to this website: Learning Path - Client-First.

The checkbox is used to help keep track of the user’s progress when reading series of posts such as web docs. As much as I want to have this feature, I have absolutely no idea how to implement something like this. Any idea how to make something like this? Your response would be appreciated.

2

There are a few key decisions you have to make first, including;

  1. Is this information tied to a User, or to a Computer?
  2. If the User goes to another Computer, do they need to see that same progress?
  3. How often will documents, and the navigation hierarchy change?
  4. Is progress binary, i.e. 0% / 100% complete, or are there gradations of completion?

Once you’ve decided those, you’ll know more about your approach.

Let’s assume the easiest case, which is Computer, no, rarely, and binary.
There you can avoid user accounts, and store progress locally in localData.
You’ll also be able to simply store e.g. LessonID, progress=10. In your nav, you’d figure out which lesson you’re on, and e.g. tick off the first 10 items.

Super crude, but this is the easiest scenario.

Let’s assume the hardest case which is User, yes, often, and gradiations.
This changes everything…

  • You must have User accounts and logins, e.g. Webflow Memberships or MemberStack.
  • You must store progress on a server somewhere, so that it can travel with the user. That means building some kind of tracking system.
  • You must ID and track lesson parts individually, so that if you add/delete/move lessons, you still know what’s completed, and what’s not.
  • You also need some way to detect how far they’ve scrolled, what videos they’ve watched, or what parts they’ve completed, so you can determine and update the % complete.
3

Yea that’s a nice UI feature. It’s basically what course sites use to mark a lesson as completed by the student.

That’s finsweet’s stuff and I was surprised to find they didn’t have this as a nice feature for you to drop into your Webflow site.

Maybe I’ve just missed it?

Based on your comment it sounds to me like you desire more of a plug-n-play solution.

If that’s the case, I’d strongly consider JetBoost’s favoriting feature: CMS Item Favoriting for Webflow | Jetboost

Screen Shot 2022-10-24 at 2.26.42 PM
Screen Shot 2022-10-24 at 2.26.42 PM2574×1106 293 KB

Even though it says “favoriting” on the tin, it’s the same thing as marking a lesson complete (checkout their demo).

Look at the features it gives you (screenshot above) most of which are exactly what you need to make this work out-of-the-box.

4

What would a “user” be? As in, do you have some sort of authentication happening, or are users logged out and this is just based on device cookies?