.
This commit is contained in:
Ross
@@ -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 %}
|
||||
Reference in New Issue
Block a user