-
{{ loop.index }}. {{ question.question }}
- {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
- {% for option in options %}
- {% if option %}
-
-
-
{{ option }}
+
{{ quiz.title }}
+
+
+
+
- {% endfor %}
-
-
-
-
-
+
+
Try Again
+
+
+
+
diff --git a/community/www/batch/learn.js b/community/www/batch/learn.js
index e9898843..27bd9dca 100644
--- a/community/www/batch/learn.js
+++ b/community/www/batch/learn.js
@@ -1,13 +1,27 @@
frappe.ready(() => {
+ localStorage.removeItem($("#quiz-title").text());
+
save_current_lesson();
+ $(".option").click((e) => {
+ enable_check(e);
+ })
+
$("#progress").click((e) => {
mark_progress(e);
});
- $("#submit-quiz").click((e) => {
- submit_quiz(e);
+ $("#summary").click((e) => {
+ quiz_summary(e);
+ });
+
+ $("#check").click((e) => {
+ check_answer(e);
+ });
+
+ $("#next").click((e) => {
+ mark_active_question(e);
});
$("#try-again").click((e) => {
@@ -25,6 +39,27 @@ var save_current_lesson = () => {
}
}
+var enable_check = (e) => {
+ if ($(".option:checked").length && $("#check").attr("disabled")) {
+ $("#check").removeAttr("disabled");
+ }
+}
+
+var mark_active_question = (e = undefined) => {
+ var current_index;
+ var next_index = 1;
+ if (e) {
+ e.preventDefault();
+ current_index = $(".active-question").attr("data-qt-index");
+ next_index = parseInt(current_index) + 1;
+ }
+ $(".question").addClass("hide").removeClass("active-question");
+ $(`.question[data-qt-index='${next_index}']`).removeClass("hide").addClass("active-question");
+ $(".current-question").text(`${next_index}`);
+ $("#check").removeClass("hide").attr("disabled", true);
+ $("#next").addClass("hide");
+}
+
var mark_progress = (e) => {
var status = $(e.currentTarget).attr("data-progress");
frappe.call({
@@ -56,47 +91,77 @@ var change_progress_indicators = (status, e) => {
$(e.currentTarget).text(label).attr("data-progress", data_progress);
}
-var submit_quiz = (e) => {
+var quiz_summary = (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(decodeURIComponent(elem.value)));
- result.push({
- "question": element.dataset.question,
- "answer": answers
- });
- });
+ var quiz_name = $("#quiz-title").text();
+ var total_questions = $(".question").length;
+
frappe.call({
- method: "community.lms.doctype.lms_quiz.lms_quiz.submit",
+ method: "community.lms.doctype.lms_quiz.lms_quiz.quiz_summary",
args: {
- quiz: $("#title").text(),
- result: result
+ "quiz": quiz_name,
+ "results": localStorage.getItem(quiz_name)
},
callback: (data) => {
- $("#submit-quiz").addClass("hide");
+ var message = data.message == total_questions ? "Excellent Work" : "You were almost there."
+ $(".question").addClass("hide");
+ $(".quiz-footer").addClass("hide");
+ $("#quiz-form").parent().prepend(
+ `
${message} 👏
+
${data.message}/${total_questions} correct.
`);
$("#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}`);
}
})
}
var try_quiz_again = (e) => {
- e.preventDefault();
- $(":input[type='checkbox']").prop("disabled", false);
- $(":input[type='radio']").prop("disabled", false);
- $("#quiz-form").trigger("reset");
- $(".success-message").text("");
- $(".score").text("");
- $("#submit-quiz").removeClass("hide");
- $("#try-again").addClass("hide");
+ window.location.reload();
+}
+
+var check_answer = (e) => {
+ e.preventDefault();
+
+ var quiz_name = $("#quiz-title").text();
+ var total_questions = $(".question").length;
+ var current_index = $(".active-question").attr("data-qt-index");
+
+ $(".explanation").removeClass("hide");
+ $("#check").addClass("hide");
+ current_index == total_questions ? $("#summary").removeClass("hide") : $("#next").removeClass("hide");
+
+ var [answer, is_correct] = parse_options();
+ add_to_local_storage(quiz_name, current_index, answer, is_correct)
+}
+
+var parse_options = () => {
+ var answer = [];
+ var is_correct = [];
+ $(".active-question input").each((i, element) => {
+ var correct = parseInt($(element).attr("data-correct"));
+ if ($(element).prop("checked")) {
+ answer.push(decodeURIComponent($(element).val()));
+ correct && is_correct.push(1);
+ correct ? add_icon(element, "check") : add_icon(element, "wrong");
+ }
+ else {
+ correct && is_correct.push(0);
+ correct ? add_icon(element, "minus-circle-green") : add_icon(element, "minus-circle");
+ }
+ })
+ return [answer, is_correct];
+}
+
+var add_icon = (element, icon) => {
+ $(element).parent().empty().html(`
`);
+}
+
+var add_to_local_storage = (quiz_name, current_index, answer, is_correct) => {
+ var quiz_stored = JSON.parse(localStorage.getItem(quiz_name));
+ var quiz_obj = {
+ "question_index": current_index,
+ "answer": answer.join(),
+ "is_correct": is_correct
+ }
+ quiz_stored ? quiz_stored.push(quiz_obj) : quiz_stored = [quiz_obj]
+ localStorage.setItem(quiz_name, JSON.stringify(quiz_stored))
}