allow completion of sbas / physics exams

This commit is contained in:
Ross
2024-12-30 11:12:36 +00:00
parent 13713d870f
commit 7493d55bc2
17 changed files with 362 additions and 240 deletions
+4 -2
View File
@@ -9,13 +9,14 @@
{% endif %}
{% if request.user.is_authenticated and valid_user %}
<a href="{% url 'physics:exam_take_user' pk=exam.pk sk=0 %}">Start Exam</a>
<a href="{% url 'physics:exam_take_user' pk=exam.pk sk=0 %}" title="Click to start the exam"><button class="btn btn-primary">Start Exam</button></a>
{% else %}
Enter your CID and passcode in the below boxes.<br />
<p><input id="cid-box" type="text" value="Candidate ID"></p>
<p><input id="passcode-box" type="text" value="Passcode"></p>
<button>Start exam</button>
<button type="button" class="btn btn-primary">Start exam</button>
<script type="text/javascript">
$(document).ready(function () {
@@ -53,4 +54,5 @@
});
</script>
{% endif %}
{% include "physics/exam_take_help.html" %}
{% endblock %}
+99 -104
View File
@@ -15,6 +15,10 @@
<div class="alert alert-primary review-mode-alert" role="alert">
Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='physics' pk=question.pk %}')">here</a>.
</div>
{% elif cid_user_exam.completed %}
<div class="alert alert-primary review-mode-alert" role="alert">
Exam completed.
</div>
{% endif %}
<div>
@@ -92,135 +96,126 @@
<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="
{% if cid %}
{% url 'physics:exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}
{% else %}
{% url 'physics:exam_scores_user' pk=exam.pk %}
{% endif %}
">here</a>).</p>
</details>
{% endblock %}
{% include "physics/exam_take_help.html" %}
{% block js %}
<script>
$(document).ready(() => {
{% endblock %}
{% block js %}
<script>
$(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);
}
{% else %}
$(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
{{question.get_answers_js}}.forEach((el, n) => {
console.log(el)
li_el = $(`ol.physics-answer-list li:eq(${n})`)//.addClass(`answer-${el}`)
if (el) {
li_el.addClass("answer-true");
} else {
li_el.addClass("answer-false");
}
if (el == li_el.find("input").get(0).checked) {
li_el.addClass("answer-correct");
} else {
li_el.addClass("answer-incorrect");
{% if not exam.publish_results and not cid_user_exam.completed %}
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);
}
});
{% elif exam.publish_result %}
$(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
{{question.get_answers_js}}.forEach((el, n) => {
console.log(el)
li_el = $(`ol.physics-answer-list li:eq(${n})`)//.addClass(`answer-${el}`)
if (el) {
li_el.addClass("answer-true");
} else {
li_el.addClass("answer-false");
}
if (el == li_el.find("input").get(0).checked) {
li_el.addClass("answer-correct");
} else {
li_el.addClass("answer-incorrect");
}
});
//$("ul.physics-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
{% endif %}
{% endif %}
for (let i = 0; i < {{ exam_length }}; i++) {
qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)
for (let i = 0; i < {{ exam_length }}; i++) {
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);
if (i == {{pos}}) {qbutton.addClass("current-question")}
$("#menu-list").append(qbutton);
}
$("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();
});
}
$("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>
{% endblock %}
{% block css %}
<style type="text/css">
</script>
{% endblock %}
{% block css %}
<style type="text/css">
/* .form-contents {
display: none;
} */
.flex-container {
display: flex;
}
.flex-container {
display: flex;
}
.flex-1 {
flex: 1;
}
.flex-1 {
flex: 1;
}
.flex-8 {
flex: 8;
}
.flex-8 {
flex: 8;
}
.selected {
border: 1px solid purple;
}
.selected {
border: 1px solid purple;
}
.answer-true::before {
content: "[Correct answer: True]";
color: darkgray;
float: right;
opacity: 50%;
.answer-true::before {
content: "[Correct answer: True]";
color: darkgray;
float: right;
opacity: 50%;
}
.answer-false::before {
content: "[Correct answer: False]";
color: darkgray;
float: right;
opacity: 50%;
}
.answer-false::before {
content: "[Correct answer: False]";
color: darkgray;
float: right;
opacity: 50%;
}
.answer-correct {
border: 1px dotted darkgreen;
}
.answer-incorrect {
border: 1px dashed darkred;
}
}
.answer-correct {
border: 1px dotted darkgreen;
}
.answer-incorrect {
border: 1px dashed darkred;
}
.physics-answer-list li {
margin-top: 5px;
margin-bottom: 5px;
}
.physics-answer-list li {
margin-top: 5px;
margin-bottom: 5px;
}
.physics-answer-list input:checked+.postinput::after {
margin-left: 20px;
content: "True"
}
.physics-answer-list input:not(:checked)+.postinput::after {
margin-left: 20px;
content: "False"
}
.physics-answer-list input:checked+.postinput::after {
margin-left: 20px;
content: "True"
}
.physics-answer-list input:not(:checked)+.postinput::after {
margin-left: 20px;
content: "False"
}
.feedback {
padding: 20px;
display: block;
}
.feedback {
padding: 20px;
display: block;
}
</style>
{% endblock %}
</style>
{% endblock %}
@@ -0,0 +1,14 @@
<details class="help-text pt-3">
<summary><i class="bi bi-info-circle"></i> 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.</p>
<p>Results are also available on the results page
<a target="_blank" href="
{% if cid %}
{% url 'physics:exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}
{% else %}
{% url 'physics:exam_scores_user' pk=exam.pk %}
{% endif %}
">here</a>.</p>
</details>
@@ -2,7 +2,7 @@
{% block content %}
<span id="user-id">
{% if request.user.is_authenticated %}
{% if not cid %}
User: {{request.user}}
{% else %}
CID: {{cid}}
@@ -22,9 +22,16 @@
<a href="{% url 'physics:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
{% endif %}
</div>
{% endif %}
{% if not exam.publish_results and answer_count != exam_length %}
{% elif cid_user_exam.completed %}
<div class="alert alert-primary review-mode-alert" role="alert">
Exam completed. Answers are available
{% if request.user.is_authenticated %}
<a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>
{% else %}
<a href="{% url 'physics:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
{% endif %}
{% elif answer_count != exam_length %}
<div id="unanswered-questions-alert" class="alert alert-warning" role="alert">
You have unanswered questions.
</div>
@@ -34,7 +41,7 @@
<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 %}
{% if not cid %}
<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 %}
@@ -44,15 +51,26 @@
</div>
<div id="time-details">
Start time: {{cid_user_exam.start_time}}<br/>
Last change time: {{cid_user_exam.end_time}}
Last change time: {{cid_user_exam.end_time}}<br/>
Completed: {{cid_user_exam.completed}}
</div>
{% if not cid_user_exam.completed %}
{% if not cid %}
<button hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
{% else %}
<button hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
{% endif %}
{% endif %}
{% include "physics/exam_take_help.html" %}
{% endblock %}
{% block js %}
<script>
$(document).ready(() => {
{% if not exam.publish_results %}
{% if not exam.publish_results and not cid_user_exam.completed %}
let time_limit = '{{exam.time_limit}}'
if (time_limit != "None") {