How To Create A Custom Countdown Timer In Storyline 3 Or 360
How to Create a Countdown Timer in Articulate Storyline 360
Setting Up Variables
- The tutorial begins with an introduction on creating a countdown timer for quizzes and tests in Articulate Storyline 360.
- Two variables are created: minutes (type: number, default value: blank) and seconds (type: number, default value: 60).
- A link to a video about variables in Articulate Storyline is provided for further learning.
Creating the Timer Layer
- The next step involves creating the timer on the master slide to ensure visibility across the project.
- A new layer named timer is created, with its duration set to one second.
Adding Triggers for Countdown Functionality
- Three triggers are established:
- Subtracting one from the seconds variable when the timeline ends on this layer.
- Hiding the timer layer when it ends.
- Showing the timer layer again after it has been hidden, creating a loop effect.
Initializing the Timer Layer
- An additional trigger is added on the base layer of the master slide to initially show the timer layer when the timeline starts.
Testing and Displaying Timer Values
- A text box referencing the seconds variable is added to display countdown values visually.
- After closing master slide view and previewing, it confirms that both timers work correctly across slides.
Implementing Minutes Countdown Logic
- Triggers for minutes are added similarly; subtracting one from minutes if seconds drop below zero and resetting seconds back to 59.
Final Adjustments and Testing
- The setup includes conditions ensuring that minutes only decrement when necessary, maintaining accurate time tracking throughout.
How to Create a Countdown Timer in Articulate Storyline
Setting Up the Text Box
- The presenter begins by copying a text box and navigating to the slide master to set up the countdown timer.
Adding States for Seconds
- A new state is created for seconds, labeled "seconds Conine a 1/8," with an extra zero added to indicate different states of the timer.
Creating Triggers for State Changes
- Two triggers are established: one changes the text box state when a variable (seconds) changes, specifically when it equals 9.
- Another trigger is added to revert the text box back to its normal state when seconds equal 59.
Previewing and Adjusting Timer Functionality
- After previewing, adjustments are made to ensure that both timers function correctly, confirming that they count down from 60 seconds properly.
Enhancing Visual Appearance
- The presenter copies a background from another module and pastes it into the current slide master for aesthetic improvement.
Formatting Text Boxes
- The minutes and seconds text boxes are moved on top of shapes, with formatting changes applied such as bold font and increased size (80).
Adjusting Spacing Between Elements
- Spacing adjustments are made between elements in the timer display to improve visual clarity.
Finalizing Timer Design
- Further spacing adjustments are applied to ensure consistency across all states of the timer display.
Conclusion on Building Flip Counter
- The process concludes with confirmation that a simple flip counter has been successfully built in Articulate Storyline.
Access Additional Resources