How to create locked module button until previous module has been completed.

Ask the community
,
1

Hey all, hopefully that question makes sense. I’ll explain a little more down below though.

First, I want to say that I am not a developer, and I definitely don’t understand JS. So I’m hoping I can get some solid guidance on this one.

I’m helping my wife build out a “masterclass” on her site. I have at least the basics created (Paid plan locked pages, multiple modules with text/video/image/downloads, etc). We’re trying to emulate something that you’d see on a masterclass course such as Kajabi/Teachable/Clickfunnels.

What I’m struggling to do is the following.
I have a main page (Course Content Page) that has all of the modules in the training visible as individual buttons (The idea here was that at any point a user can come back to the main page and watch a previously completed module at the click of a button)

The problem is, we don’t want anyone to be able to skip ahead. So we need to make future module buttons un-clickable until the module just before it has been completed.

Hopefully someone can help with this.

Yes I know I should learn JS (I’m just getting in to it, but its so overwhelming right now that I’m lost, and my wife needs to get this course running soon so I’m trying to figure it all out for her)

Thanks!

2

I’ll assume that you’re not using apps like the ready-made form or booking app etc… because they only have limited control.
If you use a regular button, you can make it disabled on load (open the property panel, click the button and uncheck on the property panel).
Then when it’s time for moving to the next level, run this code:

$w('#button1').enable();
3

Got me a step closer. Thank you!

I’ve figured out how to hide the button on loading the page. My question now is this.

After someone watches module one and they click the “complete this module” button at the bottom of the module page, they will be redirected to module 2’s page.

Using the code you provided, how do I set the “module 2” button to become visible on the Course Content Page at that point?

4

Sorry, but the question is not clear enough. I don’t understand the exact flow, what should happen after what.

5

On my Main Course Page (Table of Contents) I will have the following.

  • Welcome message

  • 26 Module buttons

  • At the start of the course I want only 1 module button visible

  • I know how to do this now

  • As they complete module 1, I would like the button for module 2 (on the Main Course Page) to become visible. That way, if they ever go back to the Main Course Page they will be able to click on module 2 (or the last module they “Unlocked”) and start from there

Within each module there will be varying numbers of “sections”, each section will have “pagination” buttons to be able to go to the previous or next section

  • I know how to do this
    The last section in the module would have a “Complete Module” button

  • This, would be the button that indicates when to make “Module 2’s button” visible.

I hope this makes sense.

6

So you should store the status of each user in the database and use it to hide or show the buttons.
Let’s say the _id of this collection is the user id and there completedLevel filed which is a number.
On each the main page you get the user status using .get()
and you hide and show the buttons based on the completedLevel value.
Once the user clicks complete level you update the level in the database and reveal the buttons in accordance.

7

This is the question I want to ask too… wonder if Wix has this function at all…