feat: lms quizzes

community/lms/widgets/Quiz.html

@@ -0,0 +1,67 @@
+<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>