Pages Navigation Menu

Awesome eLearning Templates and eLearning Custom Development

Building a Better Next Button in Lectora

Next Button in Lectora

Here is the thing—next buttons are great (and evil). They are what I consider an often-necessary evil in the eLearning world. As an instructional designer, they are the bane of my existence; it’s an immediate, obvious reminder to the learner that they are in an eLearning environment. If possible, I would like to avoid them altogether. As a developer and programmer, you’d think I’d love next buttons. After all, a linear course with a static element that I can place throughout a course just once. Right?

Here is the real issue…

The development problem with the next button is that we frequently need to control exactly when, where, and how that button works. The typical solution that many developers use is to create multiple next buttons. For example, a simple next button that just goes to the next page, a custom next button for the end of a chapter that returns to a home or branching selection page, a locked next button that won’t activate until a certain action or piece of content is visited, another locked next button for quiz pages or knowledge/skill checks, etc.

But believe me, there’s a way to incorporate almost every one of these circumstances in a single, course-wide next button!

Why the Extra Work? (Wait, I Hate Variables!)

Well, the most obvious reason is change. Suppose you program or build all these disparate next buttons, and they are gorgeous and work beautifully. Then the client or your boss says, “I’ve decided to use this picture my kid drew of an arrow for the next button. It’s the best arrow I’ve ever seen!” Now you’ve got to change the image for every single individual instance of the next button, course-wide, probably by hand. Apart from that, what if the overall structure of your course changes? Doesn’t happen often, but when it does, it can be a NIGHTMARE to try and sort out, and all those next buttons you made special will have to be changed one-by-one.

A lot of this does depend on variables and conditional (If / Else) functions, so it is “programmy-ER” than your typical next button, but it is a worthwhile endeavor for two reasons:

  1. It solves the “course-wide changes” or “new next button” problems mentioned above.
  2. It is a GREAT way to learn and get familiar with variables and conditionals.

The Basic Next Button

Your average next button in Lectora has just one simple action: OnMouseClick, GoTo, Next Page. So start by giving yourself one of those. It’s action should look like this:

I like to give my actions “human” names – in this case, “Go to Next Page.”

Dealing With the Last Page of a Course

This is probably the easiest problem to fix. You don’t need a next button on the last page of the course, right? So add the following action to your next button:

  1. Select the Next button in the Title Explorer
  2. Click the Action tab in the Ribbon Bar
  3. Click Add Action, and give your action a meaningful name, like Hide on Last Page
  4. Set the trigger to Page Show
  5. Set the Action to Hide, and the Target to Next (your next button)
  6. We need a condition so this only happens on the last page of the course, so click Conditions
  7. Make sure “Any condition can be true” is selected from the drop-down at the top of the conditions pop-up
  8. Set the Variable to PageInTitle, the Relationship to Equal To, and the Value to VAR(PagesInTitle).
  9. Click OK to save your conditions for this action

The Last Page in a Section or Chapter (Return to Main/Menu Page)

Sometimes, you want your next button to go to a home or menu page at the end of a chapter or section instead of the “next page.” Here’s how to accomplish that feat, again, with the SAME next button:

  1. Select the Go to Next Page action of the Next button in the Title Explorer
  2. Click the Action tab in the Ribbon Bar
  3. Click Conditions
  4. Make sure “Any condition can be true” is selected from the drop-down at the top of the conditions pop-up
  5. Set the Variable to PageInChapter, the Relationship to Less Than, and the Value to VAR(PagesInChapter). Note: For this same trick at the section-level, you’d choose a Variable of PageInSection, the Relationship would still be Less Than, and the Value would be VAR(PagesInSection)
  6. Click OK to save your conditions for this action
  7. Now we need to tell Lectora what to do if these conditions are NOT met, so we’ll set an Else action. Click the No Action clapper in the Else Action pane of the Action Ribbon.
  8. Set the action to Go To, and choose your menu, home, or main page as the Target.

Order of Actions

Now a final bit of clean up. Actions are run from top to bottom in Lectora, so let’s make sure ours are in the right order.

First, we check to see if it’s the last page in the title. If it is, we hide the button. Everything below this action won’t even happen when it’s hidden, so this one HAS to be first!

Now, if the button is visible, we do our paging actions. First, if it’s anything but the last page in a chapter (our main action Condition), we go to the next page. Otherwise, it’s the last page in the chapter, so we go back to the main menu page (our Else action).

Wrap Up

That’s it, kids—the smartest and most portable Next button in your Lectora arsenal. It’s just one button, two actions, at the top-level of the course. And it’s self-healing as you move content around in your course. Also, think about other cool ways to apply what we’ve done here. You could use conditions to:

  • Replace the active next button with an inactive, desaturated version using the Change Contents action until the learner has performed certain page interactions.
  • Make the Next button on the menu or main page inactive until all branches, chapters, etc., have been visited.

And you can swap out the button course-wide really easily; just build or import your new button, move the actions from the old button to the new one, then delete the old button. If you need buttons for your courses check out the eLearning Template Library.

The possibilities are limited only by your imagination!

 

One Comment

  1. It is true that actions are executed from top to bottom in the title explorer. But, I have seen instances where there wee several actions on a Next button saying go here and go there depending on condition. Problem was that when more than one of them were true I could NOT always get the first true one to be the one that worked. It would fire but before the browser had time to actually leave the page, it had gone on and a later one fired and it went to that page. So, If you use this technique, you have to be sure that only one of the conditions is true otherwise you may end up somehwhere else. That was with earlier versions of Lectora, I have not tried it with 11.

Leave 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>

elearning_template