68 lines
2.4 KiB
HTML
68 lines
2.4 KiB
HTML
<h3 id="title">{{ quiz.title }}</h3>
|
|
<form id="quiz-form">
|
|
{% for question in quiz.questions %}
|
|
<div class="question mb-5" data-question="{{ question.question }}"
|
|
data-multi="{{ question.multiple_correct_answers}}">
|
|
<p> {{ loop.index }}. {{ question.question }}</p>
|
|
{% set options = question.options.split(",") %}
|
|
{% for option in options %}
|
|
<div class="checkbox">
|
|
<input {% if question.multiple_correct_answers %} type="checkbox" {% else %} type="radio"
|
|
name="{{ question.question | urlencode }}" {% endif %} class="option" value="{{ option }}">
|
|
<span class="label-area">{{ option }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
<button class="btn btn-secondary hide mb-5" id="try-again">Try Again</button>
|
|
<button class="btn btn-primary" id="submit">Submit</button>
|
|
<h4 class="success-message"></h4>
|
|
<h5 class="score text-muted"></h5>
|
|
</form>
|
|
<script>
|
|
frappe.ready(() => {
|
|
$("#submit").click((e) => {
|
|
e.preventDefault();
|
|
var result = [];
|
|
$('.question').each((i, element) => {
|
|
var options = $(element).find(".option");
|
|
var answers = [];
|
|
options.filter((i, op) => $(op).prop("checked")).each((i, elem) => answers.push(elem.value));
|
|
result.push({
|
|
"question": element.dataset.question,
|
|
"answer": answers
|
|
});
|
|
});
|
|
frappe.call({
|
|
method: "community.lms.doctype.lms_quiz.lms_quiz.submit",
|
|
args: {
|
|
quiz: $("#title").text(),
|
|
result: result
|
|
},
|
|
callback: (data) => {
|
|
$("#submit").addClass("hide");
|
|
$("#try-again").removeClass("hide");
|
|
$(":input[type='checkbox']").prop("disabled", true);
|
|
$(":input[type='radio']").prop("disabled", true);
|
|
if (data.message == result.length) {
|
|
$(".success-message").text("Congratulations, you cleared the quiz!");
|
|
}
|
|
else {
|
|
$(".success-message").text("Some of your answers weren't correct. You can give it another shot.");
|
|
}
|
|
$(".score").text(`Score: ${data.message}/${result.length}`);
|
|
}
|
|
})
|
|
})
|
|
|
|
$("#try-again").click((e) => {
|
|
e.preventDefault();
|
|
$("#quiz-form").trigger("reset");
|
|
$(".success-message").text("");
|
|
$(".score").text("");
|
|
$("#submit").removeClass("hide");
|
|
$("#try-again").addClass("hide");
|
|
})
|
|
})
|
|
</script>
|