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

.

Browse Source
This commit is contained in:
Ross
2021-12-10 22:13:25 +00:00
parent d6cfb69829
commit 9b1daf5f68
1 changed files with 235 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take.html
+234 -232
View File
@@ -2,277 +2,279 @@
{% block content %} {% block content %}
<div class="physics"> <div class="physics">
<h1>Exam: {{ exam.name }}</h1> <h1>Exam: {{ exam.name }}</h1>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<h3>Instructions</h3> <details>
<p> <summary><h3>Instructions</h3></summary>
Please make sure you submit answers before closing or navigating from this page (as otherwise they will not <p>
be saved). The submit button is at the bottom of the page. Please make sure you submit answers before closing or navigating from this page (as otherwise they will not
</p> be saved). The submit button is at the bottom of the page.
<p> </p>
Click on a question to toggle between true / false. <p>
</p> Click on a question to toggle between true / false.
<p> </p>
Ensure your candidate number is entered in the below box. <p>
</p> Ensure your candidate number is entered in the below box.
</div> </p>
</details>
</div>
<div> <div>
Candidate number: <input type="number" id="cid" name="cid" title="please enter your candidate number"> Candidate number: <input type="number" id="cid" name="cid" title="please enter your candidate number">
</div> </div>
<h2>Questions</h2> <h2>Questions</h2>
{% autoescape off %} {% autoescape off %}
<ol id="full-question-list-physics"> <ol id="full-question-list-physics">
{% for question in questions.all %} {% for question in questions.all %}
<li> <li>
{{ question.stem }} {{ question.stem }}
<ol type="a" class="abcde"> <ol type="a" class="abcde">
<li> <li>
<span class="question-text">{{ question.a }}:</span> <label class="truefalse-switch"> <input <span class="question-text">{{ question.a }}:</span> <label class="truefalse-switch"> <input
type="checkbox" class="question a" id="{{question.pk}}-a-checkbox" data-q="{{question.pk}}" type="checkbox" class="question a" id="{{question.pk}}-a-checkbox" data-q="{{question.pk}}"
data-a="a"> data-a="a">
<div class="slider round a"></div> <div class="slider round a"></div>
</label> </label>
</li> </li>
<li> <li>
<span class="question-text">{{ question.b }}:</span> <label class="truefalse-switch"> <input <span class="question-text">{{ question.b }}:</span> <label class="truefalse-switch"> <input
type="checkbox" class="question b" id="{{question.pk}}-b-checkbox" data-q="{{question.pk}}" type="checkbox" class="question b" id="{{question.pk}}-b-checkbox" data-q="{{question.pk}}"
data-a="b"> data-a="b">
<div class="slider round b"></div> <div class="slider round b"></div>
</label> </label>
</li> </li>
<li> <li>
<span class="question-text">{{ question.c }}:</span> <label class="truefalse-switch"> <input <span class="question-text">{{ question.c }}:</span> <label class="truefalse-switch"> <input
type="checkbox" class="question c" id="{{question.pk}}-c-checkbox" data-q="{{question.pk}}" type="checkbox" class="question c" id="{{question.pk}}-c-checkbox" data-q="{{question.pk}}"
data-a="c"> data-a="c">
<div class="slider round c"></div> <div class="slider round c"></div>
</label> </label>
</li> </li>
<li> <li>
<span class="question-text">{{ question.d }}:</span> <label class="truefalse-switch"> <input <span class="question-text">{{ question.d }}:</span> <label class="truefalse-switch"> <input
type="checkbox" class="question d" id="{{question.pk}}-d-checkbox" data-q="{{question.pk}}" type="checkbox" class="question d" id="{{question.pk}}-d-checkbox" data-q="{{question.pk}}"
data-a="d"> data-a="d">
<div class="slider round d"></div> <div class="slider round d"></div>
</label> </label>
</li> </li>
<li> <li>
<span class="question-text">{{ question.e }}:</span> <label class="truefalse-switch"> <input <span class="question-text">{{ question.e }}:</span> <label class="truefalse-switch"> <input
type="checkbox" class="question e" id="{{question.pk}}-e-checkbox" data-q="{{question.pk}}" type="checkbox" class="question e" id="{{question.pk}}-e-checkbox" data-q="{{question.pk}}"
data-a="e"> data-a="e">
<div class="slider round e"></div> <div class="slider round e"></div>
</label> </label>
</li> </li>
</ol>
</li>
{% endfor %}
</ol> </ol>
</li> {% endautoescape %}
{% endfor %}
</ol>
{% endautoescape %}
<button id="submit">Submit answers</button> <button id="submit">Submit answers</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
window.answers_submitted = false; window.answers_submitted = false;
$(document).ready(function () { $(document).ready(function () {
console.log($(".question-text")); console.log($(".question-text"));
$(".question-text").click(function (evt) { $(".question-text").click(function (evt) {
$(evt.target).parent().find("input").click(); $(evt.target).parent().find("input").click();
}); });
$("#submit").click(() => { $("#submit").click(() => {
let cid = $("#cid").val() let cid = $("#cid").val()
if (cid == "") { if (cid == "") {
alert("You need to enter a valid candidate number."); alert("You need to enter a valid candidate number.");
$("#cid").focus(); $("#cid").focus();
return return
} }
answers = []; answers = [];
$("input.question").each((n, el) => { $("input.question").each((n, el) => {
answers.push([el.dataset.q, el.dataset.a, el.checked]); answers.push([el.dataset.q, el.dataset.a, el.checked]);
})
ans = {
cid: parseInt(cid),
eid: {{exam.pk}},
ans: answers
}
let json = {
eid: {{exam.pk}},
answers: JSON.stringify([ans]),
};
postAnswers(json);
}) })
ans = {
cid: parseInt(cid),
eid: {{exam.pk}},
ans: answers
}
let json = {
eid: {{exam.pk}},
answers: JSON.stringify([ans]),
};
postAnswers(json);
})
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (!window.answers_submitted) {
return "You have attempted to leave this page. Are you sure?";
}
}
function postAnswers(ans) {
console.log(ans);
$.post("{% url 'physics:exam_answers_submit' %}", ans, null, "json").done((data) => {
console.log(data);
if (data.success) {
let ret = confirm(
`Answers sucessfully submitted. Click OK to finish the exam.`
);
if (ret) {
//window.saveSession();
$("#exams-button-link").remove();
$("#submit").after('<button id="exams-button-link">Return to exam list</button>');
$("#exams-button-link").click(() => {
window.location.href = "{% url 'physics:active_exams' %}";
})
window.answers_submitted = true;
} else {
}
} else {
alert(`Error submitting answers: ${data.error}`);
}
}); });
// $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
}
</script> window.onbeforeunload = confirmExit;
function confirmExit() {
if (!window.answers_submitted) {
return "You have attempted to leave this page. Are you sure?";
}
}
<style> function postAnswers(ans) {
.truefalse-switch { console.log(ans);
position: relative; $.post("{% url 'physics:exam_answers_submit' %}", ans, null, "json").done((data) => {
display: inline-block; console.log(data);
width: 100px; if (data.success) {
height: 20px; let ret = confirm(
margin: 0px; `Answers sucessfully submitted. Click OK to finish the exam.`
margin-bottom: -5px; );
float: right;
}
.truefalse-switch input { if (ret) {
display: none; //window.saveSession();
} $("#exams-button-link").remove();
$("#submit").after('<button id="exams-button-link">Return to exam list</button>');
$("#exams-button-link").click(() => {
window.location.href = "{% url 'physics:active_exams' %}";
})
window.answers_submitted = true;
} else {
}
} else {
alert(`Error submitting answers: ${data.error}`);
}
});
// $.post( "http://localhost:8000/submit_answers", JSON.stringify(ans));
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 4, 255, 0.5);
-webkit-transition: .4s;
transition: .4s;
border-radius: 20px;
}
.slider:before { </script>
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider { <style>
background-color: rgba(162, 0, 255, 0.5); .truefalse-switch {
} position: relative;
display: inline-block;
width: 100px;
height: 20px;
margin: 0px;
margin-bottom: -5px;
float: right;
}
input:focus+.slider { .truefalse-switch input {
box-shadow: 0 0 1px #2196F3; display: none;
} }
input:checked+.slider:before { .slider {
-webkit-transform: translateX(26px); position: absolute;
-ms-transform: translateX(26px); cursor: pointer;
transform: translateX(68px); top: 0;
} left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 4, 255, 0.5);
-webkit-transition: .4s;
transition: .4s;
border-radius: 20px;
}
/*------ ADDED CSS ---------*/ .slider:before {
.slider:after { position: absolute;
color: white; content: "";
display: block; height: 16px;
position: absolute; width: 16px;
transform: translate(-50%, -50%); left: 4px;
top: 50%; bottom: 2px;
left: 50%; background-color: white;
font-size: 10px; -webkit-transition: .4s;
font-family: Verdana, sans-serif; transition: .4s;
} border-radius: 50%;
}
.a.slider:after { input:checked+.slider {
content: 'a) FALSE'; background-color: rgba(162, 0, 255, 0.5);
} }
.b.slider:after { input:focus+.slider {
content: 'b) FALSE'; box-shadow: 0 0 1px #2196F3;
} }
.c.slider:after { input:checked+.slider:before {
content: 'c) FALSE'; -webkit-transform: translateX(26px);
} -ms-transform: translateX(26px);
transform: translateX(68px);
}
.d.slider:after { /*------ ADDED CSS ---------*/
content: 'd) FALSE'; .slider:after {
} color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
.e.slider:after { .a.slider:after {
content: 'e) FALSE'; content: 'a) FALSE';
} }
input:checked+.slider.a:after { .b.slider:after {
content: 'a )TRUE'; content: 'b) FALSE';
} }
input:checked+.slider.b:after { .c.slider:after {
content: 'b )TRUE'; content: 'c) FALSE';
} }
input:checked+.slider.c:after { .d.slider:after {
content: 'c )TRUE'; content: 'd) FALSE';
} }
input:checked+.slider.d:after { .e.slider:after {
content: 'd )TRUE'; content: 'e) FALSE';
} }
input:checked+.slider.e:after { input:checked+.slider.a:after {
content: 'e )TRUE'; content: 'a )TRUE';
} }
.question-text { input:checked+.slider.b:after {
display: inline-block; content: 'b )TRUE';
vertical-align: text-top; }
clear: both;
width: 600px;
}
.abcde { input:checked+.slider.c:after {
clear: both; content: 'c )TRUE';
} }
</style>
input:checked+.slider.d:after {
content: 'd )TRUE';
}
input:checked+.slider.e:after {
content: 'e )TRUE';
}
.question-text {
display: inline-block;
vertical-align: text-top;
clear: both;
width: 600px;
}
.abcde {
clear: both;
}
</style>
{% endblock %} {% endblock %}