ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improving physics / sba exams

Browse Source
This commit is contained in:
Ross
2023-12-11 13:57:02 +00:00
parent 66ce7b42ac
commit 472fe6ee96
13 changed files with 280 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_start.html
+4
View File
@@ -11,6 +11,10 @@
<p><input id="cid-box" type="text" value="Candidate ID"></p>
<p><input id="passcode-box" type="text" value="Passcode"></p>
{% if exam.time_limit %}
This exam has a time limit of {{ exam.get_time_limit }}. The time will start when you click the Start Exam button below.<br/>
{% endif %}
<button>Start exam</button>
<script type="text/javascript">
physics/templates/physics/exam_take.html
+37 -109
View File
@@ -2,34 +2,13 @@
{% block content %}
<span id="user-id">
{% if request.user.is_authenticated %}
User: {{request.user}}
{% else %}
CID: {{cid}}
{% endif %}
{% if request.user.is_authenticated %}
User: {{request.user}}
{% else %}
CID: {{cid}}
{% endif %}
</span>
<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>
{% include "exam_clock.html" %}
<div class="no-select">
<h2>{{exam.name}}: Question [<span id="question-number">{{pos|add:1}}</span>/<span id="exam-length">{{exam_length}}</span>]</h2>
{% if exam.publish_results %}
@@ -54,7 +33,11 @@
{{ form.a.errors }}
<label for="{{ form.a.id_for_label }}" class="flex-8 question-text">{{question.a|safe}}</label>
<span class="flex-1">{{ form.a }}<span class="postinput"></span></span>
</div>
{% if exam.publish_results and question.a_feedback %}
<span class="feedback">Feedback: {{question.a_feedback}}</span>
{% endif %}
</li>
<li data-ans="b">
<div class="fieldWrapper flex-container">
@@ -88,22 +71,18 @@
</div>
{% if previous > -1 %}
<button type="submit" name="previous" class="save btn btn-default">Previous</button>
<button type="submit" name="previous" class="save btn btn-default" title="Click to save your answer(s) and go to the previous question">Previous</button>
{% endif %}
{% if next %}
<button type="submit" name="next" class="save btn btn-default">Next</button>
<button type="submit" name="next" class="save btn btn-default" title="Click to save your answer(s) and go to the next quesiton">Next</button>
{% else %}
{% if not exam.publish_results %}
<button type="submit" name="save" class="save btn btn-default">Save</button>
<button type="submit" name="save" class="save btn btn-default" title="Click to save your current answer(s)">Save</button>
{% endif %}
{% endif %}
{% comment %} {% if exam.publish_results and question.feedback %}
<h3>Feedback</h3>
<p>{{question.feedback|safe}}</p>
{% endif %} {% endcomment %}
<br />
<button type="submit" name="finish" class="save btn btn-default">Overview</button>
<button type="submit" name="finish" class="save btn btn-default" title="Click to go to the overview page (your answers will be saved).">Overview</button>
<button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
</form>
</div>
@@ -113,6 +92,11 @@
<div id="menu-list">
</div>
<details><summary>Help</summary>
<p>Each question contains a list of 5 different statements. These are either True or False</p>
<p>Click on each statement to toggle between True and False. The current state can be seen to the right of the statement. </p>
<p>Your answers are saved when navigating between questions (or if the save button is clicked on the final question). An overview of all the questions can be seen by clicking on the overview button (or by clicking <a target="_blank" href="{% url 'physics:exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}">here</a>).</p>
</details>
{% endblock %}
{% block js %}
@@ -151,8 +135,10 @@
{% 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>`));
qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
if (i == {{pos}}) {qbutton.addClass("current-question")}
$("#menu-list").append(qbutton);
}
$("button.question-menu-item").on("click", (e) => {
@@ -164,48 +150,6 @@
})
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();
}
@@ -232,14 +176,18 @@
border: 1px solid purple;
}
.answer-true::after {
.answer-true::before {
content: "[Correct answer: True]";
color: darkgray;
float: right;
opacity: 50%;
}
.answer-false::after {
.answer-false::before {
content: "[Correct answer: False]";
color: darkgray;
float: right;
opacity: 50%;
}
.answer-correct {
@@ -249,6 +197,11 @@
border: 1px dashed darkred;
}
.physics-answer-list li {
margin-top: 5px;
margin-bottom: 5px;
}
.physics-answer-list input:checked+.postinput::after {
margin-left: 20px;
content: "True"
@@ -258,35 +211,10 @@
content: "False"
}
#clockdiv{
font-family: sans-serif;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 12px;
display: none;
color: darkgray;
.feedback {
padding: 20px;
display: block;
}
#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
+24 -4
View File
@@ -1,11 +1,14 @@
{% extends 'base.html' %}
{% block content %}
<span id="user-id">
{% if request.user.is_authenticated %}
User: {{request.user}}
{% else %}
CID: {{cid}}
{% endif %}
</span>
{% include "exam_clock.html" %}
<h2>Exam: {{exam.name}}</h2>
@@ -20,27 +23,44 @@
{% endif %}
</div>
{% endif %}
{% if not exam.publish_results and answer_count != exam_length %}
<div id="unanswered-questions-alert" class="alert alert-warning" role="alert">
You have unanswered questions.
</div>
{% endif %}
<div><p>Questions</p></div>
<div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Click to go to question.</div>
<div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <p>Click to go to a question.</p></div>
<div class="physics-finish-list">
{% for question, answer in question_answer_tuples %}
{% if request.user.is_authenticated %}
<a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"><button {% if not answer %}class="unanswered"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
<a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
{% else %}
<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>
<a href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
{% endif %}
{% endfor %}
</div>
<div id="time-details">
Start time: {{cid_user_exam.start_time}}<br/>
Last change time: {{cid_user_exam.end_time}}
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(() => {
{% 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);
}
{% endif %}
})
</script>
{% endblock %}