Train the Trainer E-learning Course This Thanksgiving
Share Twitter Facebook LinkedIn Google+

Creating A Customized Menu Slide with Highlighted Buttons in Articulate Storyline

Creating A Customized Menu Slide with Highlighted Buttons in Articulate Storyline

Designing a user-friendly Menu for an e-learning course is very important as it helps learners navigate easily through the course and find the information they want quickly.

Though Articulate Storyline offers a default menu, you may wish to have custom-made menu for your e-learning course. In this post, we will see how to customize a menu in Articulate Storyline. Let’s check a sample scenario.

The menu slide contains 4 buttons. When the learner clicks a button, the course will navigate to the respective scene. In the last slide of each scene, the learner will be directed back to the menu slide and the respective button will change to the visited state and get highlighted.

Here are the steps involved to customize the menu according to this functionality.

Step 1: Create a menu slide with clickable buttons as shown in the screenshot.

Create menu slide with clickable buttons

Step 2: Go to slide properties and change the When revisiting property to “Resume saved state”.

Change the revisiting property to resume

Step 3: Add the Highlighted state for each button. The first button in the initial state will be highlighted when the timeline starts.

Add the highlighted space to each button

Step 4: Create branching scenes for each button.

Create branching scenes

Step 5: Add a trigger to Button 1 to go to the respective scene when the learner clicks it.

Add a trigger to button 1

Add similar triggers to Button 2, Button 3, and Button 4.

Step 6: Create boolean variables for each scene with the initial value False.

Create boolean variable to each scene

Here four variables are created for the four scenes – Var_Scene1, Var_Scene2, Var_Scene3, and Var_Scene4.

Step 7: Go to the last slide in Scene1 and add the following triggers.

Adjust Var_Scene1 to True when the timeline starts.

Adjust variable scene 1

Jump to the menu slide when the learner clicks the Next button.

Jump to the menu slide

Repeat this step for all the scenes.

Step 8: Go to the menu slide and add the following triggers.

Trigger 1: Change the state of Button 2 to Highlighted when the timeline starts, if Var_Scene1 is True.

Change the state of the button1

Trigger 2: Change the state of Button 1 to Visited when the timeline starts, if Var_Scene1 is True.

Var scene equal to true

Add similar triggers to Button 2, Button 3, and Button 4 if the respective variables are True when the timeline of the menu slide starts.The order of triggers will be the same.

Publish or preview the course and see the output.

Preview the course

This is how we can customize the menu slide with highlighted buttons in Articulate Storyline. Hope you found this post useful. Also, here is another post that highlights on how to show or hide menu in Articulate Storyline. Do share your thoughts.

View E-book on How to Select the Right Rapid Authoring Tool

Share
Topics:

Subscribe to Our Blogs

Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below:

 
eLearning Learning