.

sbas/templates/sbas/exam_take.html

@@ -1,8 +1,34 @@
 {% extends 'base.html' %}
 
 {% block content %}
-CID: {{cid}}
+    {% if request.user.is_authenticated %}
-<div class="no-select">
+        User: {{request.user}}
+    {% else %}
+        CID: {{cid}}
+    {% endif %}
+    <div id="timeup">
+        Allocated time over.
+    </div>
+    <div id="clockdiv">
+        Time remaining:
+        {% comment %} <div>
+            <span class="days"></span>
+            <div class="smalltext">Days</div>
+        </div> {% endcomment %}
+        <div>
+            <span class="hours num"></span>
+            <span class="smalltext">Hours</span>
+        </div>
+        <div>
+            <span class="minutes num"></span>
+            <span class="smalltext">Minutes</span>
+        </div>
+        <div>
+            <span class="seconds num"></span>
+            <span class="smalltext">Seconds</span>
+        </div>
+    </div>
+    <div class="no-select">
         <h2>{{exam.name}}: Question [{{pos|add:1}}/{{exam_length}}]</h2>
         {% if exam.publish_results %}
             <div class="alert alert-primary" role="alert">
@@ -49,22 +75,29 @@ CID: {{cid}}
                 <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
             </form>
         </div>
-</div>
+    </div>
 
-<h4>Questions</h4>
+    <h4>Questions</h4>
-<div id="menu-list">
+    <div id="menu-list">
 
-</div>
+    </div>
 {% endblock %}
 
 {% block js %}
-<script>
+    <script>
         $(document).ready(() => {
             /* beautify ignore:start */
             {% if not exam.publish_results %}
+
+                let time_limit = '{{exam.time_limit}}'
+                if (time_limit != "None") {
+                    let end_time = new Date({{cid_user_exam.start_time|date:"U"}}*1000+parseInt('{{exam.time_limit}}')*1000);
+
+                    initializeClock("clockdiv", end_time);
+                }
+
                 $("ul.sba-answer-list li").each((n, el) => {
                     $(el).click((e) => {
-                console.log(1, el.dataset.ans);
                         $("#id_answer").val(el.dataset.ans);
                         $("ul.sba-answer-list li").removeClass("selected");
                         $(el).addClass("selected")
@@ -87,12 +120,57 @@ CID: {{cid}}
                 document.getElementById("goto-button").value = e.currentTarget.dataset.qn;
                 $("#goto-button").click();
             });
+
+
+            function getTimeRemaining(endtime) {
+                const total = Date.parse(endtime) - Date.parse(new Date());
+                const seconds = Math.floor((total / 1000) % 60);
+                const minutes = Math.floor((total / 1000 / 60) % 60);
+                const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
+                //const days = Math.floor(total / (1000 * 60 * 60 * 24));
+
+                return {
+                    total,
+                    //days,
+                    hours,
+                    minutes,
+                    seconds
+                };
+            }
+
+            function initializeClock(id, endtime) {
+                console.log("Start clock", endtime)
+                const clock = document.getElementById(id);
+                clock.style.display = "block"
+                const daysSpan = clock.querySelector('.days');
+                const hoursSpan = clock.querySelector('.hours');
+                const minutesSpan = clock.querySelector('.minutes');
+                const secondsSpan = clock.querySelector('.seconds');
+
+                function updateClock() {
+                    const t = getTimeRemaining(endtime);
+
+                    //daysSpan.innerHTML = t.days;
+                    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+                    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+                    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+                    if (t.total <= 0) {
+                        clearInterval(timeinterval);
+                        timeup.style.display = "block"
+                        clock.style.display = "none"
+                    }
+                }
+
+                const timeinterval = setInterval(updateClock, 1000);
+                updateClock();
+            }
             /* beautify ignore:end */
         })
-</script>
+    </script>
 {% endblock %}
 {% block css %}
-<style type="text/css">
+    <style type="text/css">
         .form-contents {
             display: none;
         }
@@ -100,5 +178,36 @@ CID: {{cid}}
         .selected {
             border: 1px solid purple;
         }
-</style>
+
+        #clockdiv{
+            font-family: sans-serif;
+            display: inline-block;
+            font-weight: 100;
+            text-align: center;
+            font-size: 12px;
+            display: none;
+            color: darkgray;
+        }
+
+        #clockdiv > div{
+            padding: 1px;
+            border-radius: 3px;
+            {% comment %} background: purple; {% endcomment %}
+            display: inline-block;
+        }
+        #clockdiv div > span.num{
+            color: white;
+            padding: 1px;
+            border-radius: 3px;
+            display: inline-block;
+        }
+
+        #timeup {
+            display: none;
+            color: red;
+            font-weight: 100;
+            text-align: center;
+            font-size: 12px;
+        }
+    </style>
 {% endblock %}