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.
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.
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.
After adding the text, I created a variable and named it asVariable1. And I toggle this variable as explained in the first two paragraphs.
Here, I applied triggers to change the states of the button by using Variable1. Below are the triggers to generate the Toggle condition.
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.
And for the button2, the correposnding text is displayed using the following triggers.
Here are all these triggers on the Object Trigger panel.
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.