How to Disable the Next Button in Lectora

Lectora template

I was recently asked by a fellow developer how to block the next button in Lectora, so that the user must click all the buttons on the page before the user could proceed. This is something I do all the time, and I imagine many other developers also encounter. I’m a graphic designer and a very visual person, so I’m going to show you, visually, how I make this happen.

So, here I’ve started with a tabbed Lectora template Interaction from our ever-growing Template Library. Many of our interactions will work well if you want to play along.

Lectora interaction template

First, we need to disable the next button. Click on the page and go to Page Properties Ribbon: Inherit Settings, which opens a popup. I make sure to select “Specific objects from parents” and move the course’s next button to the Excluded list (shown below).

Screen2 (1)

Next, we’ll want to put a next button on this page only, so I would just copy and paste the course’s next button on this page. Make sure the button is set up to be “initially hidden” in the button properties ribbon.

Initially, you might think, “Oh, I can just add an action on button six that will show the next button when clicked.” But what if the user clicks the buttons out of order? How can we make sure they click ALL SIX buttons, in any order, and then see a next button appear? The answer… Variables.

Are you new to variables? Don’t worry, I’ll walk you through them. When I was first getting started in Lectora and was learning about variables, a helpful friend told me to imagine that variables are packages which you can add information to, (I’ll show you *what I mean later). So, let’s create a variable by adding an action that modifies a variable. I’ll name this variable “Button” in this example, but you can name yours what you like. Now that you’ve established this new variable, you’ll be able to Add “A” to the Button variable, like in these screen shots below.

Screen3 (1)

Screen4 (1)

You’ll want to add a similar action to each button on the page, using this same variable, but this time adding a different letter to the Button variable. So for the second button, you’ll want to add the letter “B” to the variable, Button 3 will add “C” to the variable, and so on.

Screen5 (1)

Finally, we’ll want to add an action to the buttons that will show the next button if the user has clicked all six buttons. (Back to my friend’s idea). Imagine the button variable as a package, you can then imagine the letters to be unique marbles. In order to show the next button, all six unique marbles must be in the package. In my example, the next button will show once all six letters are added to the Button Var. As you can see in this screenshot, I have added an action that shows the next button if all the conditions are true: Button Contains A, Button Contains B, C, D, E, and F.

Screen6 (1)

Now, technically you’re done, but say your user returns to the page. Do you want to make them click all six buttons AGAIN? Probably not. What I like to do is add an action, that on show of the page, reveals the next button if all those same conditions are true.

Screen7 (1)

———————————————————————————————————————————————-

Take  look at our new Lectora templates! We have a huge selection of Lectora Skin templates, Layout templates, Cutout People images, Interaction Templates, Game Templates, and Scenario Templates.

 

1 Comment

  1. I usually “Hide on Show” the Next button instead of dis-inhieriting it. It’s just a little cleaner. Thanks.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>