.
This commit is contained in:
Ross
@@ -2,277 +2,279 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="physics">
|
||||
<h1>Exam: {{ exam.name }}</h1>
|
||||
<div class="physics">
|
||||
<h1>Exam: {{ exam.name }}</h1>
|
||||
|
||||
<div class="alert alert-info" role="alert">
|
||||
<h3>Instructions</h3>
|
||||
<p>
|
||||
Please make sure you submit answers before closing or navigating from this page (as otherwise they will not
|
||||
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>
|
||||
Ensure your candidate number is entered in the below box.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<details>
|
||||
<summary><h3>Instructions</h3></summary>
|
||||
<p>
|
||||
Please make sure you submit answers before closing or navigating from this page (as otherwise they will not
|
||||
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>
|
||||
Ensure your candidate number is entered in the below box.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Candidate number: <input type="number" id="cid" name="cid" title="please enter your candidate number">
|
||||
</div>
|
||||
<div>
|
||||
Candidate number: <input type="number" id="cid" name="cid" title="please enter your candidate number">
|
||||
</div>
|
||||
|
||||
<h2>Questions</h2>
|
||||
<h2>Questions</h2>
|
||||
|
||||
{% autoescape off %}
|
||||
<ol id="full-question-list-physics">
|
||||
{% for question in questions.all %}
|
||||
{% autoescape off %}
|
||||
<ol id="full-question-list-physics">
|
||||
{% for question in questions.all %}
|
||||
|
||||
<li>
|
||||
{{ question.stem }}
|
||||
<ol type="a" class="abcde">
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="a">
|
||||
<div class="slider round a"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="b">
|
||||
<div class="slider round b"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="c">
|
||||
<div class="slider round c"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="d">
|
||||
<div class="slider round d"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="e">
|
||||
<div class="slider round e"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
{{ question.stem }}
|
||||
<ol type="a" class="abcde">
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="a">
|
||||
<div class="slider round a"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="b">
|
||||
<div class="slider round b"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="c">
|
||||
<div class="slider round c"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="d">
|
||||
<div class="slider round d"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<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}}"
|
||||
data-a="e">
|
||||
<div class="slider round e"></div>
|
||||
</label>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% endautoescape %}
|
||||
{% 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;
|
||||
$(document).ready(function () {
|
||||
console.log($(".question-text"));
|
||||
$(".question-text").click(function (evt) {
|
||||
$(evt.target).parent().find("input").click();
|
||||
});
|
||||
window.answers_submitted = false;
|
||||
$(document).ready(function () {
|
||||
console.log($(".question-text"));
|
||||
$(".question-text").click(function (evt) {
|
||||
$(evt.target).parent().find("input").click();
|
||||
});
|
||||
|
||||
$("#submit").click(() => {
|
||||
let cid = $("#cid").val()
|
||||
if (cid == "") {
|
||||
alert("You need to enter a valid candidate number.");
|
||||
$("#cid").focus();
|
||||
return
|
||||
}
|
||||
$("#submit").click(() => {
|
||||
let cid = $("#cid").val()
|
||||
if (cid == "") {
|
||||
alert("You need to enter a valid candidate number.");
|
||||
$("#cid").focus();
|
||||
return
|
||||
}
|
||||
|
||||
answers = [];
|
||||
answers = [];
|
||||
|
||||
|
||||
$("input.question").each((n, el) => {
|
||||
answers.push([el.dataset.q, el.dataset.a, el.checked]);
|
||||
$("input.question").each((n, el) => {
|
||||
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>
|
||||
.truefalse-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0px;
|
||||
margin-bottom: -5px;
|
||||
float: right;
|
||||
}
|
||||
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.`
|
||||
);
|
||||
|
||||
.truefalse-switch input {
|
||||
display: none;
|
||||
}
|
||||
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));
|
||||
}
|
||||
|
||||
.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 {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</script>
|
||||
|
||||
input:checked+.slider {
|
||||
background-color: rgba(162, 0, 255, 0.5);
|
||||
}
|
||||
<style>
|
||||
.truefalse-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
margin: 0px;
|
||||
margin-bottom: -5px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
.truefalse-switch input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(68px);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/*------ ADDED CSS ---------*/
|
||||
.slider:after {
|
||||
color: white;
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 10px;
|
||||
font-family: Verdana, sans-serif;
|
||||
}
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.a.slider:after {
|
||||
content: 'a) FALSE';
|
||||
}
|
||||
input:checked+.slider {
|
||||
background-color: rgba(162, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.b.slider:after {
|
||||
content: 'b) FALSE';
|
||||
}
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
|
||||
.c.slider:after {
|
||||
content: 'c) FALSE';
|
||||
}
|
||||
input:checked+.slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(68px);
|
||||
}
|
||||
|
||||
.d.slider:after {
|
||||
content: 'd) FALSE';
|
||||
}
|
||||
/*------ ADDED CSS ---------*/
|
||||
.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 {
|
||||
content: 'e) FALSE';
|
||||
}
|
||||
.a.slider:after {
|
||||
content: 'a) FALSE';
|
||||
}
|
||||
|
||||
input:checked+.slider.a:after {
|
||||
content: 'a )TRUE';
|
||||
}
|
||||
.b.slider:after {
|
||||
content: 'b) FALSE';
|
||||
}
|
||||
|
||||
input:checked+.slider.b:after {
|
||||
content: 'b )TRUE';
|
||||
}
|
||||
.c.slider:after {
|
||||
content: 'c) FALSE';
|
||||
}
|
||||
|
||||
input:checked+.slider.c:after {
|
||||
content: 'c )TRUE';
|
||||
}
|
||||
.d.slider:after {
|
||||
content: 'd) FALSE';
|
||||
}
|
||||
|
||||
input:checked+.slider.d:after {
|
||||
content: 'd )TRUE';
|
||||
}
|
||||
.e.slider:after {
|
||||
content: 'e) FALSE';
|
||||
}
|
||||
|
||||
input:checked+.slider.e:after {
|
||||
content: 'e )TRUE';
|
||||
}
|
||||
input:checked+.slider.a:after {
|
||||
content: 'a )TRUE';
|
||||
}
|
||||
|
||||
.question-text {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
clear: both;
|
||||
width: 600px;
|
||||
}
|
||||
input:checked+.slider.b:after {
|
||||
content: 'b )TRUE';
|
||||
}
|
||||
|
||||
.abcde {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
input:checked+.slider.c:after {
|
||||
content: 'c )TRUE';
|
||||
}
|
||||
|
||||
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 %}
|
||||
|
||||
Reference in New Issue
Block a user