diff --git a/mod/lesson/lang/en/lesson.php b/mod/lesson/lang/en/lesson.php
index dd9dcf8102b..c4bf3784c08 100644
--- a/mod/lesson/lang/en/lesson.php
+++ b/mod/lesson/lang/en/lesson.php
@@ -413,6 +413,7 @@ $string['thatsthecorrectanswer'] = 'That\'s the correct answer';
 $string['thatsthewronganswer'] = 'That\'s the wrong answer';
 $string['thefollowingpagesjumptothispage'] = 'The following pages jump to this page';
 $string['thispage'] = 'This page';
+$string['timeisup'] = 'Time is up';
 $string['timeremaining'] = 'Time remaining';
 $string['timespenterror'] = 'Spend at least {$a} minutes in the lesson';
 $string['timespentminutes'] = 'Time spent (minutes)';
diff --git a/mod/lesson/locallib.php b/mod/lesson/locallib.php
index 9517df2402c..78a0527f9a9 100644
--- a/mod/lesson/locallib.php
+++ b/mod/lesson/locallib.php
@@ -488,14 +488,15 @@ function lesson_clock_block_contents($cmid, $lesson, $timer, $page) {
         return null;
     }
 
-    $content = '<div class="jshidewhenenabled">';
+    $content = '<div id="lesson-timer">';
     $content .=  $lesson->time_remaining($timer->starttime);
     $content .= '</div>';
 
     $clocksettings = array('starttime'=>$timer->starttime, 'servertime'=>time(),'testlength'=>($lesson->maxtime * 60));
-    $page->requires->data_for_js('clocksettings', $clocksettings);
+    $page->requires->data_for_js('clocksettings', $clocksettings, true);
+    $page->requires->strings_for_js(array('timeisup'), 'lesson');
     $page->requires->js('/mod/lesson/timer.js');
-    $page->requires->js_function_call('show_clock');
+    $page->requires->js_init_call('show_clock');
 
     $bc = new block_contents();
     $bc->title = get_string('timeremaining', 'lesson');
diff --git a/mod/lesson/styles.css b/mod/lesson/styles.css
index 583b4f81c76..0d9134c29a2 100644
--- a/mod/lesson/styles.css
+++ b/mod/lesson/styles.css
@@ -78,3 +78,15 @@
 .path-mod-lesson.dir-rtl .standardtable,
 .path-mod-lesson.dir-rtl .mform .box.contents,
 .path-mod-lesson.dir-rtl .invisiblefieldset.fieldsetfix tr {text-align: right;}
+
+/* Countdown timer. */
+#lesson-timer {
+    font-weight: bold;
+    font-size: 14px;
+    text-align: center;
+    background: #ffeeee;
+}
+
+#lesson-timer.timeleft1 {
+    color: #ff1111;
+}
\ No newline at end of file
diff --git a/mod/lesson/timer.js b/mod/lesson/timer.js
index d21267d53ab..4f08317d66c 100644
--- a/mod/lesson/timer.js
+++ b/mod/lesson/timer.js
@@ -18,30 +18,28 @@
 //
 //////////////////////////////////////////////////////////*/
 
-    var myfont_face = "Arial";
-    var myfont_size = "12";
-    var myfont_color = "#000000";
-    var myback_color = "#FFFFFF";
-    var mywidth = 80;
-    var my12_hour = 1;
     var stopclock = 0;
     var myclock = '';
     var timeleft, hours, minutes, secs;
     var javatimeDate = new Date();
     var javatime = javatimeDate.getTime();
-    javatime = Math.floor(javatime/1000);
+    javatime = Math.floor(javatime / 1000);
 
-    var dn = "";
-    var old = "";
-
-    if (document.all||document.getElementById) {
-        document.write('<span id="LiveClockIE" style="width:'+mywidth+'px;"></span>');
-    } else if (document.layers) {
-        document.write('<ilayer id="ClockPosNS"><layer width="'+mywidth+'" id="LiveClockNS"></layer></ilayer>');
-    } else {
-        old = "true"; show_clock();
+    if (typeof(clocksettings) != 'undefined') {
+        if (clocksettings.starttime) {
+            starttime = parseInt(clocksettings.starttime);
+        }
+        if (clocksettings.servertime) {
+            servertime = parseInt(clocksettings.servertime);
+        }
+        if (clocksettings.testlength) {
+            testlength = parseInt(clocksettings.testlength);
+        }
     }
 
+    difference = javatime - servertime;
+    starttime = starttime + difference;
+
     /*function leave() {  // feable attempt to run a script when someone leaves a timed test early, failed so far
         window.onunload = window.open('http://www.google.com','','toolbar=no,menubar=no,location=no,height=500,width=500');
     }
@@ -49,69 +47,37 @@
 
     function show_clock() {
 
-        if (typeof(clocksettings) != 'undefined') {
-            if (clocksettings.starttime) {
-                starttime = parseInt(clocksettings.starttime);
-            }
-            if (clocksettings.servertime) {
-                servertime =  parseInt(clocksettings.servertime);
-            }
-            if (clocksettings.testlength) {
-                testlength =  parseInt(clocksettings.testlength);
-            }
-        }
-
-        difference = javatime - servertime;
-        starttime = starttime + difference;
-
-        //show clock in NS 4
-        if (document.layers)
-                document.ClockPosNS.visibility="show";
-        if (old == "die") { return; }
-
         currentDate = new Date();
         current = currentDate.getTime();
-        current = Math.floor(current/1000);
+        current = Math.floor(current / 1000);
 
-        var myclock = '<font style="color:'+myfont_color+'; font-family:'+myfont_face+'; font-size:'+myfont_size+'pt;">';
+        var mytime = '',
+            myclock = document.getElementById("lesson-timer");
         if (current > starttime + testlength) {
-            myclock += "Time is up";
+            mytime += M.util.get_string('timeisup', 'lesson');
             stopclock = 1;
         } else {
             timeleft = starttime + testlength - current;
-            hours = Math.floor(timeleft/3600);
+            if (timeleft < 60) {
+                myclock.className = "timeleft1";
+            }
+            hours = Math.floor(timeleft / 3600);
             timeleft = timeleft - (hours * 3600);
-            minutes = Math.floor(timeleft/60);
+            minutes = Math.floor(timeleft / 60);
             secs = timeleft - (minutes * 60);
 
             if (secs < 10) {
-                secs = "0"+secs;
+                secs = "0" + secs;
             }
             if (minutes < 10) {
-                minutes = "0"+minutes;
+                minutes = "0" + minutes;
             }
-            myclock += hours+":"+minutes+":"+secs;
-        }
-        myclock += '</font>';
-
-        if (old == "true") {
-            document.write(myclock);
-            old = "die"; return;
+            mytime += hours + ":" + minutes + ":" + secs;
         }
 
-        if (document.layers) {
-            clockpos = document.ClockPosNS;
-            liveclock = clockpos.document.LiveClockNS;
-            liveclock.document.write(myclock);
-            liveclock.document.close();
-        } else if (document.all) {
-            LiveClockIE.innerHTML = myclock;
-        } else if (document.getElementById) {
-            document.getElementById("LiveClockIE").innerHTML = myclock;
-        }
+        myclock.innerHTML = mytime;
 
         if (stopclock == 0) {
-            setTimeout("show_clock()",1000);
+            setTimeout("show_clock()", 1000);
         }
 }
-