Merge pull request #126 from edx/hasnain-naveed/PHX-133-avoid-multiple-click

PHX-133/avoid multiple click

edx_proctoring/templates/proctoring/seq_proctored_exam_entrance.html

@@ -25,7 +25,7 @@
       {% endblocktrans %}
     </p>
 
-    <i class="fa fa-arrow-circle-right start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false></i>
+    <i class="fa fa-arrow-circle-right"></i>
   </button>
   <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true>
     <span><i class="fa fa-unlock"></i></span>
@@ -38,14 +38,30 @@
         even if you achieve a passing grade.
       {% endblocktrans %}
     </p>
-      <i class="fa fa-arrow-circle-right start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true></i>
+      <i class="fa fa-arrow-circle-right"></i>
   </button>
 </div>
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 
 <script type="text/javascript">
-  $('.start-timed-exam').click(
-    function(event) {
+
+  var inProcess = false;
+
+  var disableClickEvent = function () {
+    inProcess = true;
+    $('body').css('cursor', 'wait');
+    $('.start-timed-exam').css('cursor', 'wait');
+  };
+
+  var enableClickEvent = function () {
+    inProcess = false;
+    $('body').css('cursor', 'auto');
+    $('.start-timed-exam').css('cursor', 'auto');
+  };
+
+  $('.start-timed-exam').click(function () {
+      if (!inProcess) {
+        disableClickEvent();
         var action_url = $(this).data('ajax-url');
         var exam_id = $(this).data('exam-id');
         var attempt_proctored = $(this).data('attempt-proctored');
@@ -57,13 +73,16 @@
             "You will no longer be eligible to use this course for academic credit."
           );
           if (!confirm(msg)) {
+            enableClickEvent();
             return;
           }
         }
 
-      if (typeof action_url === "undefined" ) {
+        if (typeof action_url === "undefined") {
+          enableClickEvent();
           return false;
         }
+        var self = $(this);
         $.post(
           action_url,
           {
@@ -71,11 +90,23 @@
             "attempt_proctored": attempt_proctored,
             "start_clock": start_immediately
           },
-        function(data) {
+          function (data) {
             // reload the page, because we've unlocked it
             location.reload();
           }
+        ).fail(function(){
+          enableClickEvent();
+          var msg = gettext(
+            "There has been a problem starting your exam.\n\n" +
+            "Possible reasons are that your account has not been fully activated,\n" +
+            "you have are experiencing a network connection problem, or there has been\n" +
+            "a service disruption. Please check these and try again."
           );
+          alert(msg);
+        });
+      } else {
+        return false;
+      }
     }
   );
 </script>

edx_proctoring/templates/proctoring/seq_proctored_practice_exam_entrance.html

@@ -28,15 +28,34 @@
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 
 <script type="text/javascript">
-  $('.start-timed-exam').click(
-    function(event) {
+
+  var inProcess = false;
+
+  var disableClickEvent = function () {
+    inProcess = true;
+    $('body').css('cursor', 'wait');
+    $('.start-timed-exam').css('cursor', 'wait');
+  };
+
+  var enableClickEvent = function () {
+    inProcess = false;
+    $('body').css('cursor', 'auto');
+    $('.start-timed-exam').css('cursor', 'auto');
+  };
+
+  $('.start-timed-exam').click(function () {
+      if (!inProcess) {
+        disableClickEvent();
         var action_url = $(this).data('ajax-url');
         var exam_id = $(this).data('exam-id');
         var attempt_proctored = $(this).data('attempt-proctored');
         var start_immediately = $(this).data('start-immediately');
-      if (typeof action_url === "undefined" ) {
+
+        if (typeof action_url === "undefined") {
+          enableClickEvent();
           return false;
         }
+        var self = $(this);
         $.post(
           action_url,
           {
@@ -44,11 +63,23 @@
             "attempt_proctored": attempt_proctored,
             "start_clock": start_immediately
           },
-        function(data) {
+          function (data) {
             // reload the page, because we've unlocked it
             location.reload();
           }
+        ).fail(function(){
+          enableClickEvent();
+          var msg = gettext(
+            "There has been a problem starting your exam.\n\n" +
+            "Possible reasons are that your account has not been fully activated,\n" +
+            "you have are experiencing a network connection problem, or there has been\n" +
+            "a service disruption. Please check these and try again."
           );
+          alert(msg);
+        });
+      } else {
+        return false;
+      }
     }
   );
 </script>

edx_proctoring/templates/proctoring/seq_timed_exam_entrance.html

@@ -24,8 +24,24 @@
 {% include 'proctoring/seq_timed_exam_footer.html' %}
 
 <script type="text/javascript">
-  $('.start-timed-exam').click(
-    function(event) {
+
+  var inProcess = false;
+
+  var disableClickEvent = function () {
+    inProcess = true;
+    $('body').css('cursor', 'wait');
+    $('.start-timed-exam').css('cursor', 'wait');
+  };
+
+  var enableClickEvent = function () {
+    inProcess = false;
+    $('body').css('cursor', 'auto');
+    $('.start-timed-exam').css('cursor', 'auto');
+  };
+
+  $('.start-timed-exam').click(function () {
+      if (!inProcess) {
+        disableClickEvent();
         var action_url = $(this).data('ajax-url');
         var exam_id = $(this).data('exam-id');
 
@@ -35,11 +51,23 @@
             "exam_id": exam_id,
             "start_clock": true
           },
-        function(data) {
+          function (data) {
             // reload the page, because we've unlocked it
             location.reload();
           }
+        ).fail(function(){
+          enableClickEvent();
+          var msg = gettext(
+            "There has been a problem starting your exam.\n\n" +
+            "Possible reasons are that your account has not been fully activated,\n" +
+            "you have are experiencing a network connection problem, or there has been\n" +
+            "a service disruption. Please check these and try again."
           );
+          alert(msg);
+        });
+      } else {
+        return false;
+      }
     }
   );
 </script>