Merge pull request #335 from pateljannat/quiz-timer

lms/lms/doctype/lms_quiz/lms_quiz.json

@@ -10,7 +10,9 @@
  "field_order": [
   "title",
   "questions",
-  "lesson"
+  "lesson",
+  "max_attempts",
+  "time"
  ],
  "fields": [
   {
@@ -31,11 +33,23 @@
    "label": "Lesson",
    "options": "Course Lesson",
    "read_only": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "max_attempts",
+   "fieldtype": "Int",
+   "label": "Max Attempts"
+  },
+  {
+   "default": "0",
+   "fieldname": "time",
+   "fieldtype": "Int",
+   "label": "Time Per Question (in Seconds)"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2021-09-30 13:10:06.929358",
+ "modified": "2022-05-16 14:47:55.364743",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Quiz",
@@ -57,5 +71,6 @@
  ],
  "sort_field": "modified",
  "sort_order": "DESC",
+ "states": [],
  "track_changes": 1
 }

lms/lms/doctype/lms_quiz/lms_quiz.py

@@ -46,12 +46,13 @@ class LMSQuiz(Document):
 @frappe.whitelist()
 def quiz_summary(quiz, results):
     score = 0
-    results = json.loads(results)
+    results = results and json.loads(results)
 
     for result in results:
         correct = result["is_correct"][0]
         result["question"] = frappe.db.get_value("LMS Quiz Question",
-                            {"parent": quiz, "idx": result["question_index"]},
+            {"parent": quiz,
+             "idx": result["question_index"]},
             ["question"])
 
         for point in result["is_correct"]:

lms/plugins.py

@@ -103,7 +103,25 @@ def set_mandatory_fields_for_profile():
 
 def quiz_renderer(quiz_name):
     quiz = frappe.get_doc("LMS Quiz", quiz_name)
-    context = dict(quiz=quiz)
+
+    context = {
+        "quiz": quiz
+    }
+
+    no_of_attempts = frappe.db.count("LMS Quiz Submission", {
+        "owner": frappe.session.user,
+        "quiz": quiz_name})
+
+    if quiz.max_attempts and no_of_attempts >= quiz.max_attempts:
+        last_attempt_score = frappe.db.get_value("LMS Quiz Submission", {
+            "owner": frappe.session.user,
+            "quiz": quiz_name
+        }, ["score"])
+
+        context.update({
+            "attempts_exceeded": True,
+            "last_attempt_score": last_attempt_score
+        })
     return frappe.render_template("templates/quiz.html", context)
 
 def exercise_renderer(argument):

lms/public/css/style.css

@@ -575,7 +575,7 @@ input[type=checkbox] {
 }
 
 .lesson-content-card {
-  margin-top: 1rem;
+  margin: 3rem 0;
 }
 
 .lesson-page {
@@ -1341,8 +1341,7 @@ pre {
   font-size: var(--text-lg);
   color: var(--gray-900);
   font-weight: 600;
-  flex-grow: 1;
-  margin-left: 1rem;
+  width: 75%;
 }
 
 .profile-page-body {

lms/templates/quiz.html

@@ -1,18 +1,35 @@
-<div id="quiz-title" class="hide">{{ quiz.title }}</div>
+{% if attempts_exceeded %}
+<div class="common-card-style text-center p-5" style="flex-direction: column;">
+    <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> {{ _("Your latest score is {0}.").format(last_attempt_score) }} </div>
+</div>
+{% else %}
+<div id="quiz-title" class="hide" data-max-attempts="{{ quiz.max_attempts }}">{{ quiz.title }}</div>
 
 <div class="common-card-style question-card">
-  <form id="quiz-form">
+    <div id="start-banner" class="text-center">
+        <div class="font-weight-bold mb-3" style="font-size: var(--text-lg);"> {{ quiz.title }} </div>
+        <div class="mb-3">{{ _("There are {0} questions in this quiz.").format(quiz.questions | length) }}{% if quiz.max_attempts %}
+            {% set suffix = "times" if quiz.max_attempts > 1 else "time" %} {{ _("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 %}
+            {% if quiz.time %}{{ _("The quiz has a time limit. Each question will be given {0} seconds.").format(quiz.time) }}{% endif %}
+        </div>
+
+        <button class="button is-default m-auto btn-start-quiz"> {{ _("Start") }} </bu>
+    </div>
+
+  <form id="quiz-form" class="hide">
     <div class="questions">
       {% for question in quiz.questions %}
       {% set instruction = _("Choose all answers that apply") if question.multiple else _("Choose 1 answer") %}
-      <div class="question {% if loop.index == 1 %} active-question {% else %} hide {% endif %}"
-        data-question="{{ question.question }}" data-multi="{{ question.multiple}}" data-qt-index="{{ loop.index }}">
+      <div class="question hide"
+        data-question="{{ question.question }}" data-multi="{{ question.multiple }}" data-qt-index="{{ loop.index }}">
         <div class="question-header">
             <div class="question-number">{{ loop.index }}</div>
             <div class="question-text">
-            <div class="course-meta pull-right ml-2"> {{ instruction }} </div>
                 {{ frappe.utils.md_to_html(question.question) }}
             </div>
+            <div class="course-meta"> {{ instruction }} </div>
         </div>
 
         {% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
@@ -40,15 +57,23 @@
       </div>
       {% endfor %}
     </div>
+
     <div class="quiz-footer">
         <span class="font-weight-bold"> <span class="current-question">1</span> of {{ quiz.questions | length }}</span>
+
+        {% if quiz.time %}
+        <div class="progress timer w-75" data-time="{{ quiz.time }}">
+            <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
+            </div>
+        </div>
+        {% endif %}
+
         <button class="button pull-right is-default" id="check" disabled>{{ _("Check") }}</button>
         <div class="button is-secondary hide" id="next">{{ _("Next Question") }}</div>
         <div class="button is-secondary is-default hide" id="summary">{{ _("Summary") }}</div>
         <small id="submission-message" class="font-weight-bold hide"> {{ _("Please join the course to submit the Quiz.") }} </small>
         <div class="button is-secondary hide" id="try-again">{{ _("Try Again") }}</div>
     </div>
-    <h4 class="success-message"></h4>
-    <h5 class="score text-muted"></h5>
   </form>
 </div>
+{% endif %}

lms/www/batch/learn.js

@@ -45,6 +45,18 @@ frappe.ready(() => {
         clear_work(e);
     });
 
+    $(".btn-start-quiz").click((e) => {
+        $("#start-banner").addClass("hide");
+        $("#quiz-form").removeClass("hide");
+        mark_active_question();
+    });
+
+    if ($("#quiz-title").data("max-attempts")) {
+        window.addEventListener("beforeunload", (e) => {
+            e.returnValue = "";
+            $(".active-question").length && quiz_summary();
+        });
+    }
 });
 
 const save_current_lesson = () => {
@@ -65,19 +77,19 @@ const enable_check = (e) => {
 };
 
 const 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;
-  }
+    $(".timer").addClass("hide");
+    calculate_and_display_time(100);
+    $(".timer").removeClass("hide");
+
+    let current_index = $(".active-question").attr("data-qt-index") || 0;
+    let 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");
     $(".explanation").addClass("hide");
+    initialize_timer();
 };
 
 const mark_progress = (e) => {
@@ -85,7 +97,7 @@ const mark_progress = (e) => {
   if ($(e.currentTarget).prop("nodeName") != "INPUT")
     e.preventDefault();
   else
-    return
+    return;
 
   const target = $(e.currentTarget).attr("data-progress") ? $(e.currentTarget) : $("input.mark-progress");
   const current_status = $(".lesson-progress").hasClass("hide") ? "Incomplete": "Complete";
@@ -152,11 +164,10 @@ const move_to_next_lesson = (status, e) => {
   }
 };
 
-const quiz_summary = (e) => {
-  e.preventDefault();
+const quiz_summary = (e=undefined) => {
+    e && e.preventDefault();
     var quiz_name = $("#quiz-title").text();
     var total_questions = $(".question").length;
-
     frappe.call({
         method: "lms.lms.doctype.lms_quiz.lms_quiz.quiz_summary",
         args: {
@@ -164,12 +175,12 @@ const quiz_summary = (e) => {
             "results": localStorage.getItem(quiz_name)
         },
         callback: (data) => {
-      var message = data.message == total_questions ? "Excellent Work" : "You were almost there."
+            var message = data.message == total_questions ? __("Excellent Work 👏") : __("Better luck next time")
             $(".question").addClass("hide");
             $("#summary").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>`);
+                `<div class="text-center summary"><h2> ${message} </h2>
+                <div class="font-weight-bold">${data.message}/${total_questions}</div></div>`);
             $("#try-again").removeClass("hide");
         }
     })
@@ -179,9 +190,10 @@ const try_quiz_again = (e) => {
   window.location.reload();
 };
 
-const check_answer = (e) => {
-  e.preventDefault();
-
+const check_answer = (e=undefined) => {
+    e && e.preventDefault();
+    clearInterval(self.timer);
+    $(".timer").addClass("hide");
     var quiz_name = $("#quiz-title").text();
     var total_questions = $(".question").length;
     var current_index = $(".active-question").attr("data-qt-index");
@@ -191,18 +203,17 @@ const check_answer = (e) => {
 
     if (current_index == total_questions) {
         if ($(".eligible-for-submission").length) {
-      $("#summary").removeClass("hide")
+            $("#summary").removeClass("hide");
         }
         else {
             $("#submission-message").removeClass("hide");
         }
     }
     else {
-    $("#next").removeClass("hide")
+        $("#next").removeClass("hide");
     }
-
     var [answer, is_correct] = parse_options();
-  add_to_local_storage(quiz_name, current_index, answer, is_correct)
+    add_to_local_storage(quiz_name, current_index, answer, is_correct);
 };
 
 const parse_options = () => {
@@ -381,3 +392,35 @@ const fetch_assignments = () => {
     }
   });
 };
+
+const initialize_timer = () => {
+    this.time_left = $(".timer").data("time");
+    calculate_and_display_time(100, this.time_left);
+    $(".timer").removeClass("hide");
+    const total_time = $(".timer").data("time");
+    this.start_time = new Date().getTime();
+    const self = this;
+    let old_diff;
+
+    this.timer = setInterval(function () {
+        var diff = (new Date().getTime() - self.start_time)/1000;
+        var variation = old_diff ? diff - old_diff : diff;
+        old_diff = diff;
+        self.time_left -= variation;
+        let percent_time = (self.time_left / total_time) * 100;
+        calculate_and_display_time(percent_time);
+        if (self.time_left <= 0) {
+            clearInterval(self.timer);
+            $(".timer").addClass("hide");
+            check_answer();
+        }
+    }, 100);
+};
+
+const calculate_and_display_time = (percent_time) => {
+    $(".timer .progress-bar").attr("aria-valuenow", percent_time);
+    $(".timer .progress-bar").attr("aria-valuemax", percent_time);
+    $(".timer .progress-bar").css("width", `${percent_time}%`);
+    let progress_color = percent_time < 20 ? "red" : "var(--primary-color)";
+    $(".timer .progress-bar").css("background-color", progress_color);
+};