From b24fda6970cb844bc80577b7c2a4279610a40abd Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sun, 4 Sep 2022 11:43:36 +0100
Subject: [PATCH] .

---
 sbas/templates/sbas/exam_take.html | 275 ++++++++++++++++++++---------
 1 file changed, 192 insertions(+), 83 deletions(-)

diff --git a/sbas/templates/sbas/exam_take.html b/sbas/templates/sbas/exam_take.html
index e2791abc..6d9db8ea 100755
--- a/sbas/templates/sbas/exam_take.html
+++ b/sbas/templates/sbas/exam_take.html
@@ -1,104 +1,213 @@
 {% extends 'base.html' %}
 
 {% block content %}
-CID: {{cid}}
-<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">
-        Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
-    </div>
+    {% if request.user.is_authenticated %}
+        User: {{request.user}}
+    {% else %}
+        CID: {{cid}}
     {% endif %}
-
-    <div>
-        <p>{{question.stem|safe}}</p>
+    <div id="timeup">
+        Allocated time over.
     </div>
-    <ul class="sba-answer-list">
-        <li data-ans="a">{{question.a_answer|safe}}</li>
-        <li data-ans="b">{{question.b_answer|safe}}</li>
-        <li data-ans="c">{{question.c_answer|safe}}</li>
-        <li data-ans="d">{{question.d_answer|safe}}</li>
-        <li data-ans="e">{{question.e_answer|safe}}</li>
-    </ul>
-
-
-    <div>
-
-        <form method="POST" class="post-form">{% csrf_token %}
-            <div class="form-contents">
-                {{form}}
+    <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">
+                Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
             </div>
+        {% endif %}
 
-            {% if previous > -1 %}
-            <button type="submit" name="previous" class="save btn btn-default">Previous</button>
-            {% endif %}
-            {% if next %}
-            <button type="submit" name="next" class="save btn btn-default">Next</button>
-            {% else %}
-            {% if not exam.publish_results %}
-            <button type="submit" name="save" class="save btn btn-default">Save</button>
-            {% endif %}
-            {% endif %}
+        <div>
+            <p>{{question.stem|safe}}</p>
+        </div>
+        <ul class="sba-answer-list">
+            <li data-ans="a">{{question.a_answer|safe}}</li>
+            <li data-ans="b">{{question.b_answer|safe}}</li>
+            <li data-ans="c">{{question.c_answer|safe}}</li>
+            <li data-ans="d">{{question.d_answer|safe}}</li>
+            <li data-ans="e">{{question.e_answer|safe}}</li>
+        </ul>
 
-            {% if exam.publish_results and question.feedback %}
-            <h3>Feedback</h3>
-            <p>{{question.feedback|safe}}</p>
-            {% endif %}
-            <br />
-            <button type="submit" name="finish" class="save btn btn-default">Overview</button>
-            <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
-        </form>
+
+        <div>
+
+            <form method="POST" class="post-form">{% csrf_token %}
+                <div class="form-contents">
+                    {{form}}
+                </div>
+
+                {% if previous > -1 %}
+                    <button type="submit" name="previous" class="save btn btn-default">Previous</button>
+                {% endif %}
+                {% if next %}
+                    <button type="submit" name="next" class="save btn btn-default">Next</button>
+                {% else %}
+                    {% if not exam.publish_results %}
+                        <button type="submit" name="save" class="save btn btn-default">Save</button>
+                    {% endif %}
+                {% endif %}
+
+                {% if exam.publish_results and question.feedback %}
+                    <h3>Feedback</h3>
+                    <p>{{question.feedback|safe}}</p>
+                {% endif %}
+                <br />
+                <button type="submit" name="finish" class="save btn btn-default">Overview</button>
+                <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
+            </form>
+        </div>
     </div>
-</div>
 
-<h4>Questions</h4>
-<div id="menu-list">
+    <h4>Questions</h4>
+    <div id="menu-list">
 
-</div>
+    </div>
 {% endblock %}
 
 {% block js %}
-<script>
-    $(document).ready(() => {
-        /* beautify ignore:start */
-        {% if not exam.publish_results %}
-        $("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")
-            })
-        }) 
-        {% else %}
-        $("ul.sba-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
-        {% endif %}
+    <script>
+        $(document).ready(() => {
+            /* beautify ignore:start */
+            {% if not exam.publish_results %}
 
-        {% if saved_answer %}
-        $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
+                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);
 
-        for (let i = 0; i < {{ exam_length }}; i++) {
-        $("#menu-list").append($(
-            `<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`));
+                    initializeClock("clockdiv", end_time);
+                }
 
-        }
-        $("button.question-menu-item").on("click", (e) => {
-            console.log(e.currentTarget.dataset.qn);
-            document.getElementById("goto-button").value = e.currentTarget.dataset.qn;
-            $("#goto-button").click();
-        });
-        /* beautify ignore:end */
-    })
-</script>
+                $("ul.sba-answer-list li").each((n, el) => {
+                    $(el).click((e) => {
+                        $("#id_answer").val(el.dataset.ans);
+                        $("ul.sba-answer-list li").removeClass("selected");
+                        $(el).addClass("selected")
+                    })
+                })
+            {% else %}
+                $("ul.sba-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
+            {% endif %}
+
+            {% if saved_answer %}
+                $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
+
+            for (let i = 0; i < {{ exam_length }}; i++) {
+                $("#menu-list").append($(
+                    `<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`));
+
+            }
+            $("button.question-menu-item").on("click", (e) => {
+                console.log(e.currentTarget.dataset.qn);
+                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>
 {% endblock %}
 {% block css %}
-<style type="text/css">
-    .form-contents {
-        display: none;
-    }
+    <style type="text/css">
+        .form-contents {
+            display: none;
+        }
 
-    .selected {
-        border: 1px solid purple;
-    }
-</style>
+        .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 %}
\ No newline at end of file