fix: submit quiz if user leaves page

This commit is contained in:
Jannat Patel
2022-05-17 17:12:54 +05:30
parent a460ea5194
commit 1ef70dd4e4
2 changed files with 36 additions and 26 deletions

View File

@@ -1,23 +1,25 @@
{% if attempts_exceeded %} {% if attempts_exceeded %}
<div class="common-card-style text-center p-5" style="flex-direction: column;"> <div class="common-card-style text-center p-5" style="flex-direction: column;">
<div id="quiz-title" class="font-weight-bold mb-4" style="font-size: var(--text-lg);">{{ quiz.title }}</div> <div class="font-weight-bold mb-4" style="font-size: var(--text-lg);">{{ quiz.title }}</div>
<div> {{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }} </div> <div> {{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }} </div>
<div> {{ _("You latest score is {0}.").format(last_attempt_score) }} </div> <div> {{ _("You latest score is {0}.").format(last_attempt_score) }} </div>
</div> </div>
{% else %} {% else %}
<div id="quiz-title" class="hide">{{ quiz.title }}</div> <div id="quiz-title" class="hide" data-max-attempts="{{ quiz.max_attempts }}">{{ quiz.title }}</div>
<div class="common-card-style question-card"> <div class="common-card-style question-card">
<div id="start-banner" class="text-center"> <div id="start-banner" class="text-center">
<div class="font-weight-bold mb-2" style="font-size: var(--text-lg);"> {{ quiz.title }} </div> <div class="font-weight-bold mb-2" style="font-size: var(--text-lg);"> {{ quiz.title }} </div>
<div class="mb-2"> <div class="mb-2">
{{ _("This quiz has {0} questions.").format(quiz.questions | length) }} {{ _("There are {0} questions in this quiz.").format(quiz.questions | length) }}
{% if quiz.max_attempts %} {% if quiz.max_attempts %}
{% set suffix = "times" if quiz.max_attempts > 1 else "time" %} {% set suffix = "times" if quiz.max_attempts > 1 else "time" %}
{{ _("You can attempt this quiz {0} {1}.").format(quiz.max_attempts, suffix) }} {{ _("This quiz can only be taken {0} {1}. If you attempt the quiz and leave the page before submitting, the quiz will be automatically submitted.").format(quiz.max_attempts, suffix) }}
{% endif %} {% endif %}
{% if quiz.time %} {% if quiz.time %}
{{ _("The quiz is time bound. You will have {0} seconds per question.").format(quiz.time) }} {{ _("The quiz has a time limit. Each question will be given {0} seconds.").format(quiz.time) }}
{% endif %} {% endif %}
</div> </div>

View File

@@ -49,8 +49,16 @@ frappe.ready(() => {
$("#start-banner").addClass("hide"); $("#start-banner").addClass("hide");
$("#quiz-form").removeClass("hide"); $("#quiz-form").removeClass("hide");
mark_active_question(); mark_active_question();
}) });
if ($("#quiz-form").length) {
window.addEventListener("beforeunload", (e) => {
e.preventDefault();
if ($("#quiz-title").data("max-attempts") && $(".active-question").length)
quiz_summary();
e.returnValue = '';
});
}
}); });
const save_current_lesson = () => { const save_current_lesson = () => {
@@ -158,27 +166,27 @@ const move_to_next_lesson = (status, e) => {
} }
}; };
const quiz_summary = (e) => { const quiz_summary = (e=undefined) => {
e.preventDefault(); e && e.preventDefault();
var quiz_name = $("#quiz-title").text(); var quiz_name = $("#quiz-title").text();
var total_questions = $(".question").length; var total_questions = $(".question").length;
frappe.call({ frappe.call({
method: "lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary", method: "lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary",
args: { args: {
"quiz": quiz_name, "quiz": quiz_name,
"results": localStorage.getItem(quiz_name) "results": localStorage.getItem(quiz_name)
}, },
callback: (data) => { callback: (data) => {
var message = data.message == total_questions ? "Excellent Work" : "You were almost there." var message = data.message == total_questions ? "Excellent Work" : "You were almost there."
$(".question").addClass("hide"); $(".question").addClass("hide");
$("#summary").addClass("hide"); $("#summary").addClass("hide");
$("#quiz-form").parent().prepend( $("#quiz-form").parent().prepend(
`<div class="text-center summary"><h2>${message} 👏 </h2> `<div class="text-center summary"><h2>${message} 👏 </h2>
<div class="font-weight-bold">${data.message}/${total_questions} correct.</div></div>`); <div class="font-weight-bold">${data.message}/${total_questions} correct.</div></div>`);
$("#try-again").removeClass("hide"); $("#try-again").removeClass("hide");
} }
}) })
}; };
const try_quiz_again = (e) => { const try_quiz_again = (e) => {