Skip to content

Articulate Storyline: Creating A Customized Menu to Display Course Status

The Menu of an e-learning course lists all the slide titles. Course Menu in e-learning courses is one of the in-built features of Articulate Storyline. It can be customized depending on the learning need. Here I am going to share one need faced by our client.

Requirement:

Our client wanted to show learners their course progress through the Menu. The Menu items were to be highlighted as the learners compete the slides (screenshot shown below).

Customized menu with course status

Wondering how to display the course status through a customized menu in an e-learning course using Articulate Storyline? Here are the steps you need to follow:

Step 1:

First, create the slides based on your requirement.

Step1- First, create the slides based on your requirement

Step 2:

Go to the Slide Master, create a layer on the first slide, name it Menu and place the Menu items on it.

Step2 - Go to the Slide Master

Step 3:

Insert an arrow shape beside each Menu item and create three states for the arrow, that is, Normal, Complete, and Incomplete.

Step 3 - Insert an arrow shape beside each Menu

Step 4:

Create a Menu tab on the first slide of the Slide Master as shown in the screenshot below:

Step 4 - Create a Menu tab on the first slide

Step 5:

Create 2 variables for each slide with names identical to the slide names, as it is very easy to identify the appropriate ones.

Step 5 - Create 2 variables

Step 5 - Variable-2

Step 6:

Now, adjust the Slide1incomplete variable to the value True on slide 1, when the Timeline starts.

Step 6 - Timeline-starts

Step 7:

Adjust the Slide1complete variable to the value True on slide 1, when the Timeline ends.

Step 7 - adjust the Slide1incomplete variable

Step 8:

Now, go to the Slide Master and create three triggers for each Menu item.

Trigger 1: Change the state of each arrow to Completed when the timeline starts, if the value of the variable (Slide1complete) on this slide is True.

Step 8 - Adjust the Slide1complete variable

Trigger 2: Change the state of each arrow to Incomplete when the timeline starts, if the value of the variable (Slide1incomplete) on this slide is True and the value of the variable (Slide1complete) on this slide is False.

Step 8 - Change the state of each arrow to Incomplete

Trigger 3: Click each Menu item to jump to the respective slide.

Click each Menu item

Step 9:

The last step is to publish your course and check the output.

Step 9 - Customized menu to display the course status

Using these steps you can create a customized Menu to display the course status in your e-learning course using Articulate Storyline.

Know other ways of accomplishing this?

Please do share your valuable thoughts.

Authoring Tool Finder - Find the Best Suited Authoring Tool for Your Needs