.

sbas/templates/sbas/exam_take.html

@@ -1,7 +1,33 @@
 {% extends 'base.html' %}
 
 {% block content %}
+    {% if request.user.is_authenticated %}
+        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 %}
@@ -62,9 +88,16 @@ CID: {{cid}}
         $(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,6 +120,51 @@ 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>
@@ -100,5 +178,36 @@ CID: {{cid}}
         .selected {
             border: 1px solid purple;
         }
+
+        #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 %}