Controlling Captivate – Countdown Timer

Welcome to another installment of Controlling Captivate – Countdown Timer. We’ve read many complaints over the years about the limits of the Timer Widget supplied in Captivate. These range from: “the visual style cannot be changed”, “you cannot have an action triggered when time is up”, and even “it’s very annoying”. We decided to alleviate these constraints and create a FREE, customizable, JavaScript-based countdown timer.

What are the benefits of using this timer?

Since it is based on a text caption, you can apply any available styles to the timer. You can choose from several formats for the display of the timer. In addition, you can use this timer to constrain the amount of time spent during a quiz, or any specific interaction, AND navigate to the slide of your choice when the timer runs out. The timer works for both HTML and SWF output. You can even use this timer to “Stress your Learners,” as noted Captivate blogger and expert, Lieve Weymeis, has said.

So let’s take a look. Click here to launch the HTML5 demo of the timer in action.

How Does It WorK?

Now let’s review how we’ve set up our file to be published for HTML5 output:

  1. On Slide 1 we’ve create a text caption in Captivate named “myTimer” and selected the Glass Gray style. The text caption is set to display for the rest of the project. Captivate text caption properties accordian.
  2. Next we created an Advanced Action to be executed on the slide’s On Enter event to ensure the timer is not displayed when you don’t need it. Captivate advanced actions panel.
  3. We then created a user variable named “myTime”. The value of this variable is extremely important as it is used to format display of the timer text. Available options are:

    :00 – Enter up to 60 seconds
    0:00 – Enter up to 9 minutes 59 seconds
    00:00 – Enter up to 10 minutes, 59 seconds
    0:00:00 – Enter up to 9 hours, 59 minutes, 59 seconds
    00:00:00 – Enter up to 99 hours, 59 minutes, 59 seconds

    Our timer is set to “:30”, which means it will start at 30 seconds and countdown to 0 keeping the format of a colon and two placeholders. Want the timer set to an hour and-a-half? Just enter “1:30” or “01:30” for the value of the variable.

  4. To display and initiate the timer, we execute another Advanced Action on the slide’s On Enter event of Slide 2. Captivate advanced actions panel
    The JavaScript to start the timer is “timerStart(4)”. The argument “4” is used to designate the zero-based slide number to navigate to when the timer runs out. In this case, the project will navigate to Slide 5.
  5. We’ve added a few dummy slides, slides 3 and 4, to demonstrate the ability to span slides.
  6. Slide 5 is the “Time-out” slide. We’ve added a button that can be used to navigate to the slide where the timer was initiated, which resets the timer and lets the user “try again”.

Get the Files Now

If you like to obtain a copy of the demo files, for both SWF and HTML5 operation, click the Sign-Up button below. Need this timer customized? Perhaps you’d like it to count up? We’re happy to help..just contact us at info@tlcmediadesign.com or give us a call at 937.291.3888 | 855.399.4581 (Toll Free).

Drop us a comment below if there are other Captivate issues you’ve experienced. Perhaps we’ll write one of our upcoming blogs based on your topic!

Sign-up for freebies from TLC Media Design.