fix: quiz enhancements and tests

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(
+        `<div class="text-center summary"><h2>${message} 👏 </h2>
+          <div class="font-weight-bold">${data.message}/${total_questions} correct.</div></div>`);
       $("#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(`<img class="mr-3" src="/assets/community/icons/${icon}.svg">`);
+}
+
+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))
 }