create e-learning toggle button

Have you ever noticed courses that use audio or video clips controlled by a custom play/pause button? This cool custom touch is easy as pie to create in Articulate Storyline with a key feature called a toggle.

In case you’re unfamiliar with the word “toggle,” it’s a switch that has two positions. For example, a light switch is a toggle because it can be set as either on or off. And your smartphone probably uses many toggles, such as to turn wifi or Bluetooth on or off. Toggles actually exist all around us, and we use them all the time.

In Storyline, you can easily create an e-learning toggle button that plays and pauses a multimedia clip with just one variable and a few triggers. I’ll walk you through the process in four steps to show you how I created this example:

View Demo.

(Psst … I’ll even give you the .story file as a free download so you can open it up and take a closer look after!)

Add a Button to Your Slide

The first thing you’ll do is insert a button on your slide with two states: one for “pause” and one for “play.”

We’ll leave the default normal state as the pause state, and I’ll create a new custom state called “play.” I used the button icons available on the format tab of the ribbon to insert the appropriate symbols directly into my button.

Create a True/False Variable

You need to work with a true/false variable to execute the toggle trigger, so the next thing we’ll do is create one.

I created my true/false variable in the variables manager and named my variable AudioOn. I set its default value to True.

In my example, the audio will be playing when the slide starts; the user can then click Pause to pause the audio, and Play to resume the audio. The button will toggle back and forth between the pause and play modes.

Create the Toggle Trigger

Here’s the toggle magic! To create the toggle trigger, we add a trigger to our button. There’s already a link associated with the button in the trigger panel you can click to pop in this new trigger.

The trigger action is to Adjust the AudioOn variable, and the operator you’ll choose from the drop-down menu is “= NOT Assignment.” Our trigger wizard looks something like this:

You click “OK” and that’s it! You’ve created a toggle trigger. It shows up in the triggers panel looking like this:

When the slide begins, the AudioOn variable will be set to True. When learners click the button, the variable becomes False. Click it again, back to True, and so on and so forth.

Tip: When you’re setting up a toggle trigger you should consider adding a reference to the trigger on the slide with the toggle. This helps with the testing and troubleshooting, because it lets you see the value of your toggle variable and helps to ensure everything is working as it should.

Create Additional Triggers

The final step is to add the triggers to the button that tell Storyline to pause and play the audio, and to adjust the states on the button. This is an important step because this is where you get all the interactivity working.

First, we’ll add the triggers that pause and play the multimedia when the button is clicked.

The first trigger will use the “pause timeline” action to pause the slide IF (here’s the condition!) the AudioOn variable is equal to True.

The second trigger will use the “resume timeline” action to resume the timeline IF (again, we need a condition!) the value of AudioOn is equal to False.

In other words, if the variable is equal to “True,” clicking the button pauses the timeline, but if the variable is equal to “False,” clicking that same button resumes the timeline.

Please note that trigger order is extremely important in this example. Your “toggle variable” trigger needs to be moved down in the list, so it appears after the triggers that pause and resume the timeline. Your trigger panel should look like this:

The last step is to add the triggers that will adjust the states on the button from Pause to Play. Again we set up two simple triggers with conditions that reference the value of the AudioOn variable.

We show the “Normal” state (which shows the Pause icon) when the AudioOn variable is equal to True, and we show the “Play” state when the AudioOn variable is equal to false. Once we’ve added in those final two triggers, our trigger panel looks like this:

And now let’s take a look at the final product:

View Demo.

There we have it! Four easy steps to creating a toggle button that alternates between states. The toggle feature is a great one that will save you a lot of time.

Don’t forget to grab this file as a free download if you want to take a closer look at exactly how I created this. There’s also a tutorial available here with step-by-step instructions if you want additional guidance: How to Create a Toggle Button in Storyline 2.

Have you used the toggle trigger before? If so, let me know where and when, and if you have any tips or tricks of your own for working with them, in the comments below!

Want to try something you learned here, but don’t have Articulate software? Download a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

1 Comment