--- loncom/interface/lonhtmlcommon.pm	2017/11/16 13:31:29	1.390
+++ loncom/interface/lonhtmlcommon.pm	2017/12/18 16:36:34	1.391
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common html routines
 #
-# $Id: lonhtmlcommon.pm,v 1.390 2017/11/16 13:31:29 raeburn Exp $
+# $Id: lonhtmlcommon.pm,v 1.391 2017/12/18 16:36:34 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1344,6 +1344,68 @@ $(document).ready(function(){
 });';
 }
 
+sub countdown {
+
+    # Code to put a due date countdown in 'duedatecountdown' span.
+    # This is currently located in the breadcrumb headers.
+    # note that the dueDateLayout is internatinoalized below.
+    # Here document is used to support the substitution into the javascript below.
+    # ..which unforunately necessitates escaping the $'s in the javascript.
+    # There are several times of importance
+    #
+    # serverDueDate -  The absolute time at which the problem expires.
+    # serverTime    -  The server's time when the problem finished computing.
+    # clientTime    -  The client's time...as close to serverTime as possible.
+    #                  The clientTime will be slightly later due to
+    #                  1. The latency between problem computation and
+    #                     the first network action.
+    #                  2. The time required between the page load-start and the actual
+    #                     initial javascript execution that got clientTime.
+    # These are used as follows:
+    #   The difference between clientTime and serverTime are used to
+    #   correct for differences in clock settings between the browser's system and the
+    #   server's.
+    #
+    #   The difference between clientTime and the time at which the ready() method
+    #   starts executing is used to estimate latencies for page load and submission.
+    #   Since this is an estimate, it is doubled.  The latency estimate + one minute
+    #   is used to determine when the countdown timer turns red to warn the user
+    #   to think about submitting.
+
+
+    my $dueDateLayout = &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} [_1]',
+                            "<span id='submitearly'></span>");
+    my $early = '- <b>'.&mt('Submit Early').'</b>';
+    my $pastdue = '- <b>'.&mt('Past Due').'</b>';
+    return <<"JAVASCRIPT";
+
+    var documentReadyTime;
+
+\$(document).ready(function() {
+   if (typeof(dueDate) != "undefined") {
+       documentReadyTime = (new Date()).getTime();
+      \$("#duedatecountdown").countdown({until: dueDate, compact: true,
+         layout: "$dueDateLayout",
+         onTick: function (periods) {
+            var latencyEstimate = (documentReadyTime - clientTime) * 2;
+            if(\$.countdown.periodsToSeconds(periods) < (300 + latencyEstimate)) {
+               \$("#submitearly").html("$early");
+               if (\$.countdown.periodsToSeconds(periods) < 1) {
+                    \$("#submitearly").html("$pastdue");
+               }
+            }
+            if(\$.countdown.periodsToSeconds(periods) < (60 + latencyEstimate)) {
+               \$(this).css("color", "red");   //Highlight last minute.
+            }
+         }
+      });
+   }
+});
+
+JAVASCRIPT
+
+}
+
 # ----------------------------------------- Script to activate only some fields
 
 sub htmlareaselectactive {
@@ -1567,62 +1629,11 @@ sub htmlareaselectactive {
 
 	});
 ';
-    $output .= &color_picker;
+    $output .= &color_picker();
 
-    # Code to put a due date countdown in 'duedatecountdown' span.
-    # This is currently located in the breadcrumb headers.
-    # note that the dueDateLayout is internatinoalized below.
-    # Here document is used to support the substitution into the javascript below.
-    # ..which unforunately necessitates escaping the $'s in the javascript.
-    # There are several times of importance
-    #
-    # serverDueDate -  The absolute time at which the problem expires.
-    # serverTime    -  The server's time when the problem finished computing.
-    # clientTime    -  The client's time...as close to serverTime as possible.
-    #                  The clientTime will be slightly later due to
-    #                  1. The latency between problem computation and 
-    #                     the first network action.
-    #                  2. The time required between the page load-start and the actual
-    #                     initial javascript execution that got clientTime.
-    # These are used as follows:
-    #   The difference between clientTime and serverTime are used to 
-    #   correct for differences in clock settings between the browser's system and the
-    #   server's.
-    #
-    #   The difference between clientTime and the time at which the ready() method
-    #   starts executing is used to estimate latencies for page load and submission.
-    #   Since this is an estimate, it is doubled.  The latency estimate + one minute
-    #   is used to determine when the countdown timer turns red to warn the user
-    #   to think about submitting.
+    $output .= &countdown();
 
-    my $dueDateLayout = &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} [_1]',
-                            "<span id='submitearly'></span>");
-    my $early = '- <b>'.&mt('Submit Early').'</b>';
-    my $pastdue = '- <b>'.&mt('Past Due').'</b>';
-    $output .= <<JAVASCRIPT;
-
-    var documentReadyTime;
-
-\$(document).ready(function() {
-   if (typeof(dueDate) != "undefined") {
-       documentReadyTime = (new Date()).getTime();
-      \$("#duedatecountdown").countdown({until: dueDate, compact: true, 
-         layout: "$dueDateLayout",
-         onTick: function (periods) {
-	    var latencyEstimate = (documentReadyTime - clientTime) * 2;
-            if(\$.countdown.periodsToSeconds(periods) < (300 + latencyEstimate)) {
-               \$("#submitearly").html("$early");
-               if (\$.countdown.periodsToSeconds(periods) < 1) {
-                    \$("#submitearly").html("$pastdue");
-               }
-            }
-            if(\$.countdown.periodsToSeconds(periods) < (60 + latencyEstimate)) {
-               \$(this).css("color", "red");   //Highlight last minute.
-            }
-         }
-      });
-   }
-});
+    $output .= <<"JAVASCRIPT";
 
     /* This code describes the spellcheck options that will be used for
        items with class 'spellchecked'.  It is necessary for those objects'