Why You Should Include Video in your Learning Curriculum
January 22, 2014
What Learners Want – Learning Preferences Infographic
February 9, 2014
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 download 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:
- 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.
- 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.
- 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 secondsOur 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.
To display and initiate the timer, we execute another Advanced Action on the slide’s On Enter event of Slide 2.
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.
- We’ve added a few dummy slides, slides 3 and 4, to demonstrate the ability to span slides.
- 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.
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!
35 Comments
Having read your article on the timer in captivate, can it be paused at anytime during the slide, I am working on a project that requires the timer to be paused at anytime during play
Thanks for your question. It can be paused with a slight modification and two new functions. You’ll need to move the variable declaration “var countDown” outside of the startTimer function, so replace:
var timerSS, newTime;
with:
var timerSS, newTime, countDown;
Remove the “var” from “var countDown = setInterval(function()”.
Add the following functions to the end of the timer-swf.js file.
function timerPause()
{
clearTimeout(countDown);
}
function resumeTimer()
{
startTimer();
}
Create a button in CP and execute JavaScript timerPause() and another button to execute JavaScript resumeTimer().
Thanks for the information, however. The type of timer I was looking to use on my project was much like the captivate
widget, actually showing the time being counted down, and not hidden. The widget timer supplied with captivate is ideal
for the purpose, however. It can not be paused at anytime during the individual slide. The timer required shows the
hhmmss on the slide it is displayed as 00:04:00:00 and the end just stops.
To use this Timer you must create a Text Caption in Captivate with the specific name and variables associated for the JavaScript to work. There are instructions included with the add-in. You must also trigger JavaScript to start the timer and have the timer.js file attached. This Timer is similar to the one in Captivate except that it can be custom styled.
Hi. I’m having an issue with this script. First off, it’s AWESOME!!!! So thanks!!!! 🙂
It won’t work for me if it’s in an advanced action. It only works when I use “Execute Javascript” directly from the action menu. Have you seen this issue before?
Thanks!
Kevin
Thanks Kevin! No, I’ve never had a problem executing it from Advanced Actions. If you republished, make sure that the JavaScript include statement is in the header, it may have been removed.
Soon we’ll be repackaging the download to include a version with pause and resume functionality. It uses an Advanced Action to start the timer. All subscribers will be notified of the update.
Thanks for the quick reply!
That’s weird, I put the js into the standard.js folder so it gets included that way for swf output and added it to assets/js so it gets included that way as well.
So the include statement is in the head of the html page?
I just downloaded this and tried the swf example in the downloaded zip file. It is not counting down. The HTML 5 appears to be working correctly but I need to work with the swf version. Suggestions?
There is a file called CP-Custom-swf.js that needs to be included in the head of the html file. Put it under the include for the standard.js so it looks like this:
Copy the CP-Custom-swf.js into the same location as the html file is running.
I copied the CP-custom-swf.js file into the html folder but the counter still refuses to countdown when i open it in a web browser.
Did you include the path to the .js file in the head of the html page?
I have used this and it works fine for HTML5, not tried the flash version. Wanted to pose this in case anyone else hit the same issue I did when you put the course in an LMS.
I used the Learn upon LMS and it puts the course in multiple iframes and thus breaks all the scope of the javascript.
If this is the same for you, you have to make sure you target the iframe document that contains the course. You can do this using something like…
var doc = document.getElementById(‘scorm_iframe’).contentWindow.document.getElementById(‘scorm_module_window’).contentWindow;
Then once you have the doc var you can target the variables/functions you need. e.g.
cpCmndGotoSlideAndResume
would be
doc.cpCmndGotoSlideAndResume
slideArray = cp.model.data.project_main.slides.split(‘,’);
would be
slideArray = doc.cp.model.data.project_main.slides.split(‘,’);
Hope this helps someone.
This would also be the case for any other custom javascript used with captivate.
Thank you, that’s very interesting. we’ve have never had a problem with scope of the included scripts in Learn.com or Blackboard.
Hi
I have implemented the timer into a captivate 7 project and it seems to count down as expected. My issue is that when the timer finished it does not jump to the slide I require. I have ensured that I am jumping to the correct number (Zero index). The Quiz I am timing is a graded quiz within pools, would this have any affect? Also it is the swf version I am using.
Thanks
If you have selected “Required – the user must take this quiz to continue”, Captivate will block the jump from executing. One option is to allow the user to skip the question in the quiz settings. Our work-around is the create our own SCORM wrapper and NOT use Captivates SCORM publishing options.
I’m having problems getting this to work in the “swf” version of the publish. If I run from index.html, the counter works fine. But it doesn’t work from the [project_name].htm file.
I’ve added the code to the index.html, the [project_name].htm, the standard.js, and included the two custom js files.
Ideas?
I would need to see your project to determine what the issue is. You need to make sure that the external js files are “included” in the project.htm.
I am facing the same issue. It works in HTML5 output, but not in SWF output.
Here is my tag:
I published the project to the folder. I have the following files in the output folder now:
captivate.css
CP-Custom-swf.js
standard.js
SWF Output2.htm
SWF Output2.swf
Does your html page have the JavaScript include for the CP-Custom-swf.js?
Yes. I have added the following within script tags in my (project).htm page.
src=”CP-Custom-swf.js” type=”text/javascript”
Perhaps you could share your files on DropBox or something so we can take a look?
First of, thanks for sharing!
Is there a version with the pause and resume functionality available?
Not at the moment. I’ll try to get one out this weekend. Thanks.
Thank you for sharing! I really don’t like how we can’t change the look of the timer that comes with Captivate 7.
I am exporting to SWF, for use as a SCORM package. The timer is running well, but I was wondering whether you think it is possible to resume the timer if the user exits the Scorm package at any point. At the moment it restarts the timer.
I’m sure it would be possible, the variable that is displayed may already be saved in the suspend data. You would need some way of knowing if the timer was visible and running when the course was resumed. I think you’s need to set some other variables or use a widget to do this.
Hi TLC Media,
Thanks so much for sharing the timer Cp functionality. Oddy I’m having issues getting this to publish correctly in HTML5. I add the js to my published assets/js folder and add the include statement before and when I launch the published file, the timer does not count down……arg. Any ideas?
Ryan
Make sure you test it on a server as sometimes JavaScript won’t execute correctly on your local drive. Try replacing the entire startTimer function with his code:
function startTimer(navSlide)
{
timerSS = cpInfoCurrentSlideIndex;
getSlides();
var oldTime = myTime;
var secOnly = (myTime.length == 3) ? true : false;
var timerCount = (secOnly) ? myTime.substring(myTime.lastIndexOf(':') + 1) : parseTime(myTime);
var countDown = setInterval(function()
{
timerCount--;
if (timerCount < 0) { myTime = oldTime; cp.jumpToSlide(slideArray[navSlide]); clearInterval(countDown); } else { timerCount = Number(timerCount); var h = Math.floor(timerCount / 3600); var m = Math.floor(timerCount % 3600 / 60); var s = Math.floor(timerCount % 3600 % 60); if (secOnly) { if (s < 10) { newTime = ":0" + s; } else { newTime = ":" + s; } } else { newTime = ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s); } myTime = String(newTime); if (cp.model.data.myTimerc.visible == 0) { myTime = oldTime; clearInterval(countDown); } } }, 1000); }
Thank you for the timer. Is it possible to use different times counting down on different slides.
E.g. slide one 30 seconds, slide two 35 seconds.
Andrew
Without testing it, I think you can just start the timer again using the code you use to start it initially, startTimer(1). You would also need to reset the variable myTime to “:30 or “:35″
Hi,
Will this work with a responsive project?
Jose
We haven’t tested it, responsive wasn’t an option when we wrote the blog.
Hi TLC Media Design,
Thanks for replying. I was unable to get it to work in a responsive project, but I’ll keep tinkering around.
I would like to know more about the javascript used…I am working on a project where i need timer through out the quiz and it jumps to a page/result page once the timer is over.
Currently i am not able to figure out how to put the timer in the right format and also jump to the screen only happens when i click on any interactive button after the timer is over.
Not sure how you could go about that without creating a variable that indicates the timer ran out and then creating conditional advanced actions for all of your interactive objects.