Create Countdown Timer in Captivate

[AngieZerbe]

We are creating a quick game-type Captivate where the user has one minute to answer a few questions. We want to display a countdown timer on the screen in MM:SS format (1:00, 0:60, 0:59 etc). At the end of the minute, we want to redirect to a "Opps! You ran out of time!" screen.

And we need to publish in HTML5 for web and mobile delivery. I am running Captivate 6.1 (but could bump up to Cap7 if that helps). I have played around with the Timer widget, but am nervous about it's HTML 5 compatability since it looks like it was still incompatible earlier in 2013.

I set up variables & actions like http://blog.lilybiri.com/quiz-showing-elapsed-time, but that's showing elapsed time not a countdown timer. And it displays a long string for the time (miliseconds). I'm thinking I can create a variable vTime and then use an expression like vTime = 60 - cpInfoElapsedTime. But I can't find anyway to truncate the time so it only shows 0:60, 0:59 etc. Is truncating possible?

As a backup plan, I also am considering just showing staggered captions, each displaying for one second, to simulate the countdown (like suggested here: http://forums.adobe.com/message/5270717) yet cannot figure out how to get this to display over all slides. I would need to make a project that only had one slide for all the questions. Everything would be hidden and triggering something else... very complicated! My other backup plan is to give users 20 seconds per question using the same setup. At least then I only have 1 question per slide!

Anyone have any success creating a countdown timer? Any other ideas? Thanks!

[Lilybiri]

Which version are you using? Is the DigitalTimer interaction not suited? It will display the message when time has run out.  I have more than one blog post about showing time, also with calculations. Here is one that explains the use of the Timer widget (the interaction is a new version that is also suited for HTML output):

http://blog.lilybiri.com/timer-widget-to-stress-your-learners

Lilybiri

[AngieZerbe]

Yes, I was using your blog posts to develop the test cases. Very helpful!

I am running 6.1 but could bump up to 7 for this project. But I have not found confirmation that the digital timer interaction will work when published in html5. Is the DigitalTimer interaction compatible for html5 output?

[Lilybiri]

AFAIK the only interaction that is not compatible with HTML5 output yet is the Memory Game.

Lilybiri

[AngieZerbe]

Thanks - I hadn't seen confirmation anywhere so appreciate it.

[AngieZerbe]

Downloaded and tested Timer Widget and Interaction with Captivate 7. Looks like it could work, however the visual style cannot be changed.

Unless you are working with a style similar to this, it's not very helpful. I tried to place a Smart Shape over the widget (rectangle with 0% fill and 50 width border), but on publish the widget comes to the front.

Anyone know of any way to rig this up to remove the little legs on the clock? Change the overall shape of the borders? Change the display color even?

[Lilybiri]

Yes, I know, that is very annoying. You are not the only one to complain. You can only change the total alpha of an interaction.

[TLCMediaDesign]

I created a countdown timer for HTML5 output that makes use of the styles of a Text Caption, it can also be configured to use a custom graphic. I'll be posting a blog today or tomorrow, where you can sign-up and get the HTML5 and swf versions. It reads the value of a custom variable in any of the following formats:

•          :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

So if you want 1 hour and 30 mins you set the value of the variable to 01:30 or 1:30. It can span several slides. It will also jump to any slide you want when the timer expires, when including an argument in the calling the js function.

[TLCMediaDesign]

Busy with other things but as promised, here is the post on how to create a countdown timer using text captions instead of the widget. Works for SWF and HTML5 output.

http://www.tlcmediadesign.com/blog/2014/01/controlling-captivate-countdown-timer/

[avary_s]

Hi Lilybiri,

I would like to implement the approach described on this blog post. I am using CP 7 and don't have the "TimerWidget" in my widgets panel. When I browse the Appplication > Widgets folder it's not there either. How do I get this widget into CP 7?

Thanks!

[Lilybiri]

Discovered like you that they took out the Timer widget. You have two interactions that have almost the same functionality, like the blue Timer that you see in another screenshot in this thread. Sorry, I stll have the old widget because I have other versions installed on my system, but it is no longer there in 7. It had the big advantage over the new interactions that the digital one had no color, was easier to fit in with brand colors.

Lilybiri

[avary_s]

Ok thanks! I prefer to use CP 7 but I do have a licence to CP 6.1 and 5.5. Am I able to import the CP 6 widgets into my CP 7 project without causing issues in publishing?

[Lilybiri]

I'm using 7 mosty as well. Probably it will not be functional for HTML5 output, that is why they replaced by the interactions (digital timer and hourglass). Checked and you can still use it in 7 for SWF-output.

[avary_s]

Ok great thanks this does work!