.

physics/templates/physics/exam_take.html

@@ -2,6 +2,28 @@
 
 {% block content %}
     CID: {{cid}}
+    <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 %}
@@ -100,6 +122,13 @@
                 //        $(el).addClass("selected")
                 //    })
                 //})
+
+                let time_limit = '{{exam_time_limit}}'
+                if (time_limit != "None") {
+                    let end_time = new Date({{cid_user_exam.start_time|date:"U"}}*1000+{{exam.time_limit}}*1000);
+                    initializeClock("clockdiv", end_time);
+                }
+
             {% else %}
                 $(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
                 {{question.get_answers_js}}.forEach((el, n) => {
@@ -134,7 +163,54 @@
                 $("#goto-button").click();
             });
             /* beautify ignore:end */
+
         })
+
+        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) {
+            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();
+        }
+
+
+
     </script>
 {% endblock %}
 {% block css %}
@@ -160,13 +236,13 @@
 
         .answer-true::after {
             content: "[Correct answer: True]";
-            color: purple;
-            
+            color: darkgray;
+
         }
         .answer-false::after {
             content: "[Correct answer: False]";
-            color: purple;
-            
+            color: darkgray;
+
         }
         .answer-correct {
             border: 1px dotted darkgreen;
@@ -183,5 +259,36 @@
             margin-left: 20px;
             content: "False"
         }
+
+        #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 %}

physics/templates/physics/exam_take_overview.html

@@ -18,6 +18,8 @@
             <a href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"><button {% if not answer %}class="unanswered"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
         {% endfor %}
     </div>
+    Start time: {{cid_user_exam.start_time}}<br/>
+    Last change time: {{cid_user_exam.end_time}}
 
 {% endblock %}
 

physics/templates/physics/exams.html

@@ -3,5 +3,7 @@
 {% block navigation %}
 {{block.super}}
 <br/>
-Exams: {{exam.name}}-> <a href="{% url 'physics:exam_overview' pk=exam.pk %}">Overview</a> / <a href="{% url 'physics:exam_scores_cid' pk=exam.pk %}">Scores</a>
+Exams: {{exam.name}}-> <a href="{% url 'physics:exam_overview' pk=exam.pk %}">Overview</a> / 
+<a href="{% url 'physics:exam_scores_cid' pk=exam.pk %}">Scores</a> /
+<a href="{% url 'physics:exam_cids' exam_id=exam.pk %}">Candidates</a>
 {% endblock %}