Share Twitter Facebook LinkedIn Google+

Make Content Visually Presentable Using the Toggle Button in Articulate Storyline

Make Content Visually Presentable Using the Toggle Button in Articulate Storyline

In most cases, when we work with buttons in Articulate Storyline, we create interactivities such as click-on-tabs, which tend to have two or three buttons. What can you do when you don’t have enough space on the screen to place two or three tabs? I worked on a course where the client asked me to use only a single button to reveal two different pieces of content. Furthermore, the text on the button/tab needs to be changed based on the piece of the content displayed.

This is when I came across the Toggle Variable. Let me tell you a little about the Toggle Variable; this variable is very useful when you have only one tab to click, and the same tab needs to be clicked to display two or three different pieces of content in a single slide.

This how you can use the Toggle Variable.

Toggle Variable Creation: It is created while adjusting the variable section. In this section, we mostly set the operator value as Assignment to set the value of variable as either true of false. But, here, instead of Assignment, use the value Not Assignment to get the toggle variable. We can get the Not Assignment option when we choose the variable type as true or false only. It automatically assigns its values as either true or false on clicking the button.

Toggle variable creation

Create Toggle variable

I have inserted one rectangular shape which is used as a button and named it as button1 and added one state called 1. I call the button when it is in state 1 as button2.

States to the shape

Then, I took the two different pieces of text for the different states of the button and change the state of the text to hidden.

Two different contents

After adding the text, I created a variable and named it asVariable1. And I toggle this variable as explained in the first two paragraphs.

Variable creation

Here, I applied triggers to change the states of the button by using Variable1. Below are the triggers to generate the Toggle condition.

Change state trigger for button1

Change state trigger for button2

After assigning these triggers, I showed the respective content for the button on clicking. For button1, the corresponding text is displayed using the below triggers.

Button1 text showing trigger

Button1 text hiding trigger

And for the button2, the correposnding text is displayed using the following triggers.

Button2 text showing trigger

Button2 text hiding trigger

Here are all these triggers on the Object Trigger panel.

Trigger wizard

After assigning all these triggers, when I clicked the button1, it changed to button2 and the content of button2 is displayed. The button2 has a different color. When I click the same button, it changed to button1 and corresponding content is displayed.

In this way, you can use the toggle variable to reduce the number of tabs, and thereby, make the optimal use of the limited space on the screen. Hope you find this post useful. Do share your views.

View the webinar on Articulate Storyline - A Boon for Learning Designers and Stakeholders


Subscribe to Our Blogs

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

eLearning Learning