How Do I Make a Reset Button?

Imagine you’ve created an e-Learning interaction (like a drag-and-drop or a tabbed activity). Then, you receive a request for a reset button that will allow learners to try the exercise again with a single push of a button!
…Now what?

As we’re creating interactive slides during our hands-on Storyline 360 training, the conversation around building reset buttons regularly arises. Why don’t we answer this “as heard in training” question today: “How do I make a reset button?”

So, we want an activity with a reset button, just like our activity here.

Sure, the Storyline 360 player comes with a restart button on the seekbar, but in some cases, you might elect to create your own. Maybe a slide isn’t utilizing the seekbar, your design calls for a larger or more custom reset button to animate onto the slide, or perhaps you want to delay the reset button until the learner’s completed certain steps in the interaction.

For any of those reasons and more, here’s how we tackle custom reset buttons at Yukon Learning!

 

Step One: Button

The first step is to add a button or shape that will serve to reset the slide. Take a moment to enter text into your new button like “Reset” or “Start Over” and adjust the size and positioning, maybe the visual formatting, and entrance animation before moving on.

Tip: A nice touch is to incorporate a button icon, and in this case, we might choose the “refresh” icon! To do so, navigate to the Button Tools | Format tab (with the button still selected). You can choose an icon from the left of this pane, as well as icon alignment and color. Resize the icon by adjusting font size. (Not enough icon options? Insert a Content Library 360 icon from the Insert tab instead for endless customization.)

 

Step Two: Trigger

Next, we’ll give the button its functionality by creating a new trigger.

The triggered action for a reset button is to jump to the very same slide we’re already on. (Yes, you read that right!) So, in the Trigger Wizard, your trigger settings will need to be as follows: Jump to slide, this slide, when the user clicks the object—your new custom button.

Tip: Before you preview this slide to test the trigger, be sure to read on to the final step!

 

Step Three: Revisiting Property

For this to work, we must verify the Slide Properties to ensure the slide itself resets when revisited.

Though it doesn’t really feel like it, when our new custom reset button is selected, the learner leaves the slide and returns very quickly. So, the slide’s revisiting property is the ticket here!

To access Slide Properties, select the slide while in Story View and you’ll see the Slide Properties panel appear in the lower right. Alternatively, while in Slide View, select the gear icon in the lower-right corner of the Layers panel (ensuring the Base is selected or you’ll end up with Layer Properties instead).

Once in Slide Properties, switch the revisiting property to Reset to initial state.

Tip: While the content on the slide resets beautifully using this method, remember that variables can’t be so easily persuaded to reset. (Their long-term memory is kind of what makes variables so cool!) You’d have one more step to trigger to adjust variables to their default value if you wanted to reset the variables as well.

That’s the build! Download our example source file if you’d like to explore further!

Adding your own custom reset button to a slide is quick and painless—if you remember to adjust your Slide Properties. Have you used this technique before? Do you have other ideas when using a custom reset button? We’d love to hear from you!

~ John M.