fix: quiz max attempts

This commit is contained in:
Jannat Patel
2023-06-21 20:11:30 +05:30
parent da72513f6a
commit 7d18e1d928
14 changed files with 262 additions and 162 deletions

View File

@@ -1,16 +1,26 @@
{% if attempts_exceeded %}
<div class="">
<h2 class="mt-3">
{{ quiz.title }}
</h2>
<div class="alert alert-info medium mb-0">
{{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }}
{{ _("Your latest score is {0}.").format(last_attempt_score) }}
</div>
</div>
{% if not hide_quiz %}
<div class="mt-4">
<ul class="alert alert-info pl-8">
<li>
{{ _("This quiz consists of {0} questions.").format(quiz.questions | length) }}
</li>
{% if quiz.max_attempts %}
{% set suffix = "times" if quiz.max_attempts > 1 else "time" %}
<li>
{{ _("You can attempt this quiz only {0} {1}").format(quiz.max_attempts, suffix) }}
</li>
{% endif %}
{% if quiz.time %}
<li class="alert alert-info medium">
{{ _("The quiz has a time limit. For each question you will be given {0} seconds.").format(quiz.time) }}
</li>
{% endif %}
</ul>
{% else %}
<div class="">
<div id="start-banner" class="common-card-style column-card align-items-center">
<div class="text-center my-10">
@@ -18,30 +28,17 @@
{{ quiz.title }}
</div>
<div class="">
{{ _("This quiz consists of {0} questions.").format(quiz.questions | length) }}
{% if not quiz.max_attempts or no_of_attempts < quiz.max_attempts %}
<button class="btn btn-secondary btn-sm btn-start-quiz mt-4">
{{ _("Start") }}
</button>
{% else %}
<div>
{{ _("You have already exceeded the maximum number of attempts allowed for this quiz.") }}
</div>
{% endif %}
</div>
{% if quiz.max_attempts %}
{% set suffix = "times" if quiz.max_attempts > 1 else "time" %}
<div class="alert alert-info medium">
{{ _("This quiz can only be taken {0} {1}. If you attempt the quiz but leave the page before submitting,
the quiz will be automatically submitted.").format(quiz.max_attempts, suffix) }}
</div>
{% endif %}
{% if quiz.time %}
<div class="alert alert-info medium">
{{ _("The quiz has a time limit. For each question you will be given {0} seconds.").format(quiz.time) }}
</div>
{% endif %}
<button class="btn btn-secondary btn-sm btn-start-quiz mt-4">
{{ _("Start the Quiz") }}
</button>
</div>
</div>
<form id="quiz-form" class="common-card-style column-card hide">
@@ -108,20 +105,50 @@
</div>
{% endif %}
<button class="btn btn-secondary btn-sm pull-right" id="check" disabled>
{{ _("Check") }}
</button>
<div class="btn btn-secondary btn-sm hide" id="next">
<button class="btn btn-secondary btn-sm hide" id="next">
{{ _("Next Question") }}
</div>
<div class="btn btn-secondary btn-sm hide" id="summary">
</button>
<button class="btn btn-secondary btn-sm hide" id="summary">
{{ _("Submit") }}
</div>
<div class="btn btn-secondary btn-sm hide" id="try-again">
</button>
<button class="btn btn-secondary btn-sm mx-auto hide" id="try-again">
{{ _("Try Again") }}
</div>
</button>
</div>
</form>
</div>
{% endif %}
{% if all_submissions | length %}
<article class="mt-8">
<div class="field-label">
{{ _("All Submissions") }}
</div>
<div class="form-grid">
<div class="grid-heading-row">
<div class="grid-row">
<div class="data-row row">
<div class="col grid-static-col">{{ _("No.") }}</div>
<div class="col grid-static-col">{{ _("Date") }}</div>
<div class="col grid-static-col text-right">{{ _("Score") }}</div>
</div>
</div>
</div>
<div>
{% for submission in all_submissions %}
<div class="grid-row">
<div class="data-row row">
<div class="col grid-static-col">{{ loop.index }}</div>
<div class="col grid-static-col">{{ frappe.utils.format_datetime(submission.creation, "medium") }}</div>
<div class="col grid-static-col text-right">{{ submission.score }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</article>
{% endif %}

View File

@@ -3,6 +3,7 @@ frappe.ready(() => {
this.answer = [];
this.is_correct = [];
const self = this;
localStorage.removeItem($("#quiz-title").data("name"));
$(".btn-start-quiz").click((e) => {
$("#start-banner").addClass("hide");
@@ -19,15 +20,18 @@ frappe.ready(() => {
});
$("#summary").click((e) => {
e.preventDefault();
add_to_local_storage();
quiz_summary(e);
});
$("#check").click((e) => {
e.preventDefault();
check_answer(e);
});
$("#next").click((e) => {
e.preventDefault();
add_to_local_storage();
mark_active_question(e);
});
@@ -35,15 +39,6 @@ frappe.ready(() => {
$("#try-again").click((e) => {
try_quiz_again(e);
});
if ($("#quiz-title").data("max-attempts")) {
window.addEventListener("beforeunload", (e) => {
e.returnValue = "";
if ($(".active-question").length && !self.quiz_submitted) {
quiz_summary();
}
});
}
});
const mark_active_question = (e = undefined) => {
@@ -122,13 +117,15 @@ const quiz_summary = (e = undefined) => {
callback: (data) => {
$(".question").addClass("hide");
$("#summary").addClass("hide");
$(".quiz-footer").prepend(
`<div class="summary">
<div class="font-weight-bold"> ${__("Score")}: ${
data.message
}/${total_questions} </div>
</div>`
$(".quiz-footer span").addClass("hide");
$("#quiz-form").prepend(
`<div class="summary bold-heading text-center">
${__("Your score is ")} ${data.message.score} ${__(
" out of "
)} ${total_questions}
</div>`
);
$("#try-again").data("submission", data.message.submission);
$("#try-again").removeClass("hide");
self.quiz_submitted = true;
},
@@ -136,7 +133,14 @@ const quiz_summary = (e = undefined) => {
};
const try_quiz_again = (e) => {
window.location.reload();
if (window.location.href.includes("new-submission")) {
window.location.href = window.location.pathname.replace(
"new-submission",
$
);
} else {
window.location.reload();
}
};
const check_answer = (e = undefined) => {