I know I'm missing something obvious. the "Close" button is supposed
to stop both countdown timers and manually toggle the quiz to the quiz
complete div. It doesn't. So what simple thing am I missing here. :-)
###
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ui test</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.min.js"></
script>
<style type="text/css">@import "/css/jquery.countdown.css";
#quizCountdown { width: 440px; height: 45px; }
#quizCountdown2 { display: none; width: 440px; height: 45px; }
#quizc { display: none; }
</style>
<script type="text/javascript">
$(function () {
var aDay = new Date();
aDay = '+3s';
$('#quizCountdown').countdown({until: aDay,
description: 'Countdown is informational only, server times are used.
<b>Do not reload the page</b>',
layout: 'Quiz Time Remaining: {mn} {ml}, {sn} {sl} ',
onExpiry: liftOff
});
});
function liftOff() {
var bDay = new Date();
bDay = '+5s';
$('#quizCountdown2').countdown({until: bDay,
description: 'Countdown is informational only, server times are used.
<b>Do not reload the page</b>',
layout: '<font color=red>Overtime Quiz Time Remaining: {mn} {ml},
{sn} {sl} </font>',
onExpiry: liftoff2
});
$("#quizCountdown, #quizCountdown2").toggle();
}
function liftoff2() {
$("#quiz, #quizc, #quizCountdown2").toggle();
}
$('#closeButton').click(function() {
$('#quizCountdown').countdown('destroy');
$('#quizCountdown2').countdown('destroy');
$("#quiz, #quizc").toggle();
}
);
</script>
</head>
<div id="quizCountdown"></div>
<div id="quizCountdown2"></div>
<div id=quiz>This is the quiz<div><button type="button"
id="closeButton">Close</button></p>
</div></div>
<div id=quizc><b>The quiz is completed</b><p>Please click on the
Continue button below to load the problems and their solutions.</div>
