How to Set Up Navigation and Tracking for Menu-Based Content

We’re seeing more and more clients exploring menu-based content navigation approaches instead of the traditional start-to-finish elearning course approach.

In this type of navigation, the course has a main page that offers links to each of the sections, and the learner chooses those links to view and complete the content. Often the sections can be taken in any order.

We’ve created a simple example of this approach to help us explain a few key design details to help you try this for your own content.

The sample has a menu page with three links. To keep things simple, each “section” of content is only one page and at the bottom of each page is a link to return to the menu page. We also added a blank page at the end – and we’ll explain why in just a bit.

Here’s what the structure looks like:

Here’s what happens in the sample.

As the learner completes a section, the image on the menu page is faded down and we show a check mark.

Once the learner has completed all three sections – in any order – the content gets marked as completed.

The sample uses a No Navigation theme.

The standard Course Player doesn’t make sense because we don’t want our learners using the Next/Back buttons to navigate.

We also turned off the Swipe navigation option in the Publishing Profile so the learner can’t just swipe to move between pages.

Instead of a navigation bar we used Page Links for all the navigation.

The main menu page has links on each of the images to take the learner to the respective page. And each page has a Return to Menu button that links back to the main menu page.

Here’s how to set up a page link:

We applied these steps for all three images on the Main Menu page plus the Return to Menu buttons on each of the three section pages.

Now that we’ve got the navigation all working, let’s take on the task of showing the learner what they’ve completed.

We’re showing a checkmark under each logo as a status indicator, but you could use all kinds of other design ideas for this as well. Just adapt these basic steps to your own design.

Showing the status is a two-part process. First, we use the Return to Menu button on each page to set a custom Boolean variable to True. Then, on the Menu Page we have a Page Action to evaluate the variable and, if true, carry out the Show action for the checkmark.

Here’s how to have the Return to Menu button set a Boolean variable to true:

Back on the Menu Page, we’ll add a Page Action that will evaluate the variable and, if it’s True, show the associated checkmark.

Here’s how to do that:

Once you set this up, use the Full Course Preview to view it all in action.

This step is only needed if you're going to track completion, for example in a SCORM package to run in your LMS.

If you're planning on publishing the project as a web app package and don't care about tracking then you can skip this step altogether.

As we noted above, if the learner uses a Page Link to jump over other pages in the structure, those jumped-over pages get marked as complete in the SCORM data.

What we don’t want in this case is that the learner selects only the Capture option and gets the whole course marked as completed – we want completion to be based on viewing all three options.

To solve this, we’ve added a blank page at the end. The learner can’t get to it and therefore going to the Capture option first won’t set the whole course as Complete in the SCORM data.

So how can the course be marked as complete if the learner can’t get to the blank page?

We'll use the completion status of the three content pages to tell the course to mark itself as complete.

One of the available Player Control actions is Complete the course’s learning. We’ll set up a Page Action on the Menu Page that triggers this Player Control only if all three page completion variables are true.

In other words, we’ll look at the three page completion variables and set the course completion only if all three pages have been viewed.

Here’s how to set that up:

You won’t be able to see that the course is sending a SCORM completion message when you run this in Full Course Preview, so this will be something to be sure to test as a SCORM package either in your LMS or in SCORMCloud.

The example we've created here is pretty basic but you can elaborate on it in many ways.

We only used one page of content for each section but you can have as many pages as you need. Just add Previous and Next buttons at the bottom of each plus a Return to Menu on the last page of the section. Each section could even be a separate Learning Object (LO).

For indicating the section status on the Menu Page, you could show other symbols, try a Swap action to change to a different image or use a Fade Animation to set each image to be half transparent to indicate it's been completed.

When learners complete all the sections you could trigger a popup alert box or other display event to let them know they've been marked completed. Just evaluate the three section completion variables as the trigger for this like we did for the course completion Player Control action. 

What other ideas do you have?