Creating Customized Tab in Articulate Storyline Player

Creating Customized Tab in Articulate Storyline Player

Creating Customized Tab in Articulate Storyline Player

Articulate Storyline, as you can see in the below screenshot, has three default tabs. One of our clients wanted to remove these tabs and have a single custom made tab. Upon clicking the tab, learners should be able to download the printable material of the course.

In this post, I would like to share with you how to create a customized tab and add an action to it in Articulate Storyline. Follow the steps below for the process:

Default tabs

Step 1: Create the preferred number of slides and add respective content to them.

Step 1

Step 2: Go to the Slide Master from View -> Slide Master, and add a layer on first slide to put our menu items. I have created a layer with the name Menu Layer.

Step 3: Add buttons such that the number of buttons is equal to number of slides. Name the buttons in a way that they represent corresponding slide titles.

Step 3

Step 4: Create a variable of Text type with default value ‘off’ to switch the current state of menu. I have named it as ‘MenuVar’ here.

Step 4

Step 5: Now, add the following triggers for each button/ menu item such that:

  1. Each button should navigate to the corresponding slide.
  2. Change the current state of menu to on/ off.

Make sure that the trigger which changes state of MenuVar should be on top, so that it first changes the state and then navigates to the corresponding slide.

Step 5

Step 6: Add two triggers on the Base layer of slide master to show/ hide Menu Layer, when value of the variable MenuVar changes.

Step 6

Step 7: Now, create a new tab Custom Menu on the player to link our menu to the player. Do this by clicking on Player -> Features -> Player Tabs option. Give trigger to Execute JavaScript (in Action property), when the user clicks that tab.

Step 7

We can delete the custom tabs from the same window, by unchecking the checkmarks of default tabs, as shown in the screenshot below. We can even rearrange the order in which they appear, using the arrows provided.

Step 7

Step 8: Coming to the last step, add a piece of JavaScript code which gets current state and toggles state based on learner’s action.

Step 8

You are done! In the same way, we can create functionalities for other tabs also. By this, we can reduce a few triggers. Note that this can also be done using triggers. But this adds a few more triggers in the source.

Customized Tab

Find this post useful? Please share your comments.

View eBook On Articulate Storyline for Building E-learning Courses