Merge pull request #548 from edx/matthugs/proctoring-avoid-multiple-d…

…ownload_software_clicked Proctoring - avoid multiple visits to download_software_clicked-land
openedx · Mar 6, 2019 · 271442e · 271442e
2 parents db1a9d4 + 4056c16
commit 271442e
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 48 deletions.
diff --git a/edx_proctoring/__init__.py b/edx_proctoring/__init__.py
@@ -5,6 +5,6 @@
 from __future__ import absolute_import
 
 # Be sure to update the version number in edx_proctoring/package.json
-__version__ = '1.5.17'
+__version__ = '1.5.18'
 
 default_app_config = 'edx_proctoring.apps.EdxProctoringConfig'  # pylint: disable=invalid-name
diff --git a/edx_proctoring/templates/proctored_exam/instructions.html b/edx_proctoring/templates/proctored_exam/instructions.html
@@ -1,10 +1,10 @@
 {% load i18n %}
 <div class="sequence proctored-exam instructions message-left-bar" data-exam-id="{{exam_id}}" data-exam-started-poll-url="{{exam_started_poll_url}}">
 
-  <div class="">
+  <div>
     <h3>
     {% blocktrans %}
-      Follow these steps to set up and start your proctored exam.
+      Set up and start your proctored exam
     {% endblocktrans %}
     </h3>
     {% if backend_instructions %}
@@ -30,47 +30,60 @@ <h3>
         </p>
       {% endif %}
       <button id="software_download_link" class="exam-action-button btn-pl-primary" data-action="click_download_software">{% trans "Start System Check" %}</button>
+      <div class="footer-sequence border-b-0 padding-b-0">
+        <button href="#" class="exam-action-button js-start-proctored-exam btn btn-secondary">{% trans "Start Exam" %}</button>
+      </div>
     {% else %}
-    <p>
-      {% blocktrans %}
-        1. Copy this unique exam code. You will be prompted to paste this code later before you start the exam.
-      {% endblocktrans %}
-    </p>
+      <h4>
+        {% blocktrans %}
+          Step 1
+        {% endblocktrans %}
+      </h4>
+      <p>
+        {% blocktrans %}
+          Copy this unique exam code. You will be prompted to paste this code later before you start the exam.
+        {% endblocktrans %}
+      </p>
     <p>
       <span class="proctored-exam-code">{{exam_code}}</span>
     </p>
     <p>
       {% blocktrans %}
-        Select the exam code, then copy it using Command+C (Mac) or Control+C (Windows).
+        Select the exam code, then copy it using Control + C (Windows) or Command + C (Mac).
       {% endblocktrans %}
     </p>
+      <h4>
+        {% blocktrans %}
+          Step 2
+        {% endblocktrans %}
+      </h4>
     <p>
       {% blocktrans %}
-        2. Click the button below to set up proctoring.
-      {% endblocktrans %}
-    </p>
-    <button id="software_download_link" class="exam-action-button btn-pl-primary" data-action="click_download_software">{% trans "Start System Check" %}</button>
-    <p>
-      {% blocktrans %}
-        A new window will open. You will run a system check before downloading the proctoring application.
+        Start your system check now. A new window will open for this step and you will verify your identity.
       {% endblocktrans %}
     </p>
     <p>
       {% blocktrans %}
-        You will be asked to verify your identity as part of the proctoring exam set up.
-        Make sure you are on a computer with a webcam, and that you have valid photo identification
-        such as a driver's license or passport, before you continue.
+        Make sure you:
       {% endblocktrans %}
     </p>
+    <ul>
+      <li>{% blocktrans %}Have a computer with a functioning webcam{% endblocktrans %}</li>
+      <li>{% blocktrans %}Have your valid photo ID (e.g. driver's license or passport) ready{% endblocktrans %}</li>
+    </ul>
+    <button id="software_download_link" class="exam-action-button btn-pl-primary" data-action="click_download_software">{% trans "Start System Check" %}</button>
+      <h4>
+        {% blocktrans %}
+          Step 3
+        {% endblocktrans %}
+      </h4>
     <p>
         {% blocktrans %}
-          3. When you have finished setting up proctoring, start the exam.
+          When you've finished the system check and verified your identity, begin your exam.
         {% endblocktrans %}
     </p>
+    <button href="#" class="exam-action-button js-start-proctored-exam btn btn-secondary">{% trans "Start Exam" %}</button>
     {% endif %}
-    <div class="footer-sequence border-b-0 padding-b-0">
-      <a href="#" class="start-proctored-exam">{% trans "Start Proctored Exam" %}</a>
-    </div>
   </div>
 </div>
 {% include 'proctored_exam/error_modal.html' %}
@@ -88,7 +101,6 @@ <h3>
 {% include 'proctored_exam/footer.html' %}
 
 <script type="text/javascript">
-
   $('.proctored-decline-exam').click(
     function(e) {
       e.preventDefault();
@@ -120,36 +132,32 @@ <h3>
     }
   );
 
-  function check_exam_started(e) {
-    e.preventDefault();
+  function setPrimacyOfButtons(systemCheckIsPrimary) {
+    var $primaryButton = systemCheckIsPrimary ? $('#software_download_link') : $('.js-start-proctored-exam');
+    var $secondaryButton = systemCheckIsPrimary ? $('.js-start-proctored-exam') : $('#software_download_link');
+    $primaryButton.removeClass('btn-secondary').addClass('btn-pl-primary');
+    $secondaryButton.removeClass('btn-pl-primary').addClass('btn-secondary');
+  }
+
+  function check_exam_started(successCallback, failureCallback) {
     var url = $('.instructions').data('exam-started-poll-url') + '?sourceid=instructions';
     $.ajax(url).success(function(data){
       if (data.status === 'ready_to_start') {
-        // we've state transitioned, so refresh the page
-        // to reflect the new state (which will expose the test)
-        location.reload();
+        successCallback();
       } else {
-          // The proctoring setup is not yet complete.
-          // Show a modal indicating that the user is not done yet.
-          edx.courseware.proctored_exam.accessibleError(
-              gettext("Cannot Start Proctored Exam"),
-              gettext("You must complete the proctoring setup before you can start the exam.")
-          );
+        failureCallback();
       }
     });
   }
 
-  $('.start-proctored-exam').click(check_exam_started);
-
-  $("#software_download_link").click(function (e) {
-    e.preventDefault();
+  function launchSystemCheck() {
+    setPrimacyOfButtons(false);
     var url = $('.instructions').data('exam-started-poll-url');
-    var action = $(this).data('action');
+    var action = $('#software_download_link').data('action');
     // open the new tab in the click event with an empty URL but show the message.
     var newWindow = window.open("", "_blank");
     $(newWindow.document.body).html("<p>Please wait while you are being redirected...</p>");
 
-    var self = this;
     $.ajax({
       url: url,
       type: 'PUT',
@@ -162,6 +170,35 @@ <h3>
     }).fail(function(){
       newWindow.close();
     });
+  }
+
+  $('.js-start-proctored-exam').click(function(e) {
+    e.preventDefault();
+    check_exam_started(function() {
+      // we've state transitioned, so refresh the page
+      // to reflect the new state (which will expose the test)
+      location.reload();
+    }, function() {
+      // The proctoring setup is not yet complete.
+      // Show a modal indicating that the user is not done yet.
+      edx.courseware.proctored_exam.accessibleError(
+        gettext("Cannot Start Proctored Exam"),
+        gettext("You must complete the proctoring setup before you can start the exam.")
+      );
+      setPrimacyOfButtons(true);
+    });
+  });
+
+  $("#software_download_link").click(function (e) {
+    e.preventDefault();
+    check_exam_started(function() {
+      // The proctoring setup is complete.
+      // Show a modal indicating that the user is ready to proceed.
+      edx.courseware.proctored_exam.accessibleError(
+        gettext("System Check Succeeded"),
+        gettext('Click "Start Proctored Exam" to proceed.')
+      );
+      setPrimacyOfButtons(false);
+    }, launchSystemCheck);
   });
-{{backend_js|safe}}
 </script>
diff --git a/edx_proctoring/tests/test_student_view.py b/edx_proctoring/tests/test_student_view.py
@@ -58,7 +58,7 @@ def setUp(self):
         self.submitted_timed_exam_msg_with_due_date = 'After the due date has passed,'
         self.exam_time_expired_msg = 'You did not complete the exam in the allotted time'
         self.exam_time_error_msg = 'A technical error has occurred with your proctored exam'
-        self.chose_proctored_exam_msg = 'Follow these steps to set up and start your proctored exam'
+        self.chose_proctored_exam_msg = 'Set up and start your proctored exam'
         self.proctored_exam_optout_msg = 'Take this exam without proctoring'
         self.proctored_exam_completed_msg = 'Are you sure you want to end your proctored exam'
         self.proctored_exam_submitted_msg = 'You have submitted this proctored exam for review'
@@ -775,9 +775,9 @@ def test_get_onboarding_no_perm(self):
 
     @ddt.data(
         (ProctoredExamStudentAttemptStatus.created,
-         'Follow these steps to set up and start your proctored exam'),
+         'Set up and start your proctored exam'),
         (ProctoredExamStudentAttemptStatus.download_software_clicked,
-         'Follow these steps to set up and start your proctored exam'),
+         'Set up and start your proctored exam'),
         (ProctoredExamStudentAttemptStatus.ready_to_start,
          'Proctored Exam Rules'),
         (ProctoredExamStudentAttemptStatus.error,
@@ -806,9 +806,9 @@ def test_get_studentview_created_status_onboarding(self, status, expected_messag
 
     @ddt.data(
         (ProctoredExamStudentAttemptStatus.created,
-         'Follow these steps to set up and start your proctored exam'),
+         'Set up and start your proctored exam'),
         (ProctoredExamStudentAttemptStatus.download_software_clicked,
-         'Follow these steps to set up and start your proctored exam'),
+         'Set up and start your proctored exam'),
         (ProctoredExamStudentAttemptStatus.submitted,
          'You have submitted this practice proctored exam'),
         (ProctoredExamStudentAttemptStatus.error,

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@edx/edx-proctoring",
   "//": "Be sure to update the version number in edx_proctoring/__init__.py",
   "//": "Note that the version format is slightly different than that of the Python version when using prereleases.",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "main": "edx_proctoring/static/index.js",
   "repository": {
     "type": "git",