I am using jQuery Countdown Timer & Digital Clock Plugin into my moodle page as follows:
My code as follows:
<?php
require_once('../../config.php');
global $DB;
global $COURSE;
$courseid = $COURSE->id;
if (!$course = $DB->get_record('course', array('id' => $courseid))) {
print_error('invalidcourse', 'block_eparticipation', $courseid);
}
require_login($course);
$PAGE->set_url('/blocks/eparticipation/view.php', array('id' => $courseid));
$PAGE->set_pagelayout('standard');
echo $OUTPUT->header();
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/jQuery-Countdown-Timer-Digital-Clock-Plugin-timeTo/timeTo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Countdown-Timer-Digital-Clock-Plugin-timeTo/jquery.timeTo.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Countdown-Timer-Digital-Clock-Plugin-timeTo/jquery.timeTo.min.js"></script>
<script>
$(document).ready(function(){
$('#timerdiv').timeTo({
seconds: 60,
displayHours: false,
countdownAlertLimit: 5,
callback: function () {
}
});
});
</script>
</head>
<body>
<div id="timerdiv"></div>
</body>
<?php echo $OUTPUT->footer(); ?>
</html>
But it gets conflicted with the `moodle` page and I am getting a timer which is not showing correctly as follows:
If I remove `echo $OUTPUT->header();` and `echo $OUTPUT->footer();` from my page then timer works correctly.
Refer Timer API here: http://www.jqueryscript.net/time-clock/jQuery-Countdown-Timer-Digital-Clock-Plugin-timeTo.html
Moodle version: 2.9.1