Merge pull request #79 from edx/cdodge/link-to-button

Cdodge/link to button

edx_proctoring/templates/proctoring/seq_proctored_exam_entrance.html

@@ -11,9 +11,9 @@
       To be eligible to earn credit for this course, you must take and pass the proctoring review for this exam.
     {% endblocktrans %}
   </p>
-  <div class="gated-sequence">
+  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
     <span><i class="fa fa-lock"></i></span>
-    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
+    <a>
       {% trans "Yes, I want to take this exam with online proctoring (and be eligible for credit)" %}
     </a>
     <p>
@@ -26,10 +26,10 @@
     </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>
-  </div>
-  <div class="gated-sequence">
+  </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>
-    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true>
+    <a>
       {% trans "No, I want to take this exam without proctoring (and not be eligible for credit)" %}
     </a>
     <p>
@@ -39,7 +39,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=false data-start-immediately=true></i>
-  </div>
+  </button>
 </div>
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 

edx_proctoring/templates/proctoring/seq_proctored_exam_instructions.html

@@ -2,27 +2,48 @@
 <div class="sequence proctored-exam instructions message-top-bar" data-exam-id="{{exam_id}}" data-exam-started-poll-url="{{exam_started_poll_url}}">
   <h3>
     {% blocktrans %}
-      Awaiting Proctoring Software Installation and Setup
+      You Have Chosen to take a Proctored Exam
     {% endblocktrans %}
   </h3>
   <p>
     {% blocktrans %}
-      You have chosen to take {{display_name}} as a proctored exam. You should be directed to a new window
-      with installation and setup instructions. You can also <a href="{{software_download_url}}" target="_blank">open the installation window directly.</a>
+    You must set up and start the proctoring software before you begin your exam
     {% endblocktrans %}
   </p>
   <div class="proctored-exam-message">
     <h3>
     {% blocktrans %}
-      Here is your unique exam code. You will be asked for it during the setup.
+      Install and Set Up Proctoring Software
     {% endblocktrans %}
     </h3>
-    <h2> {{exam_code}}<span class='copy-to-clipboard'></span></h2>
+    <p>
+      {% blocktrans %}
+        1. Open the procotring software installation window and follow the instructions to <a href="{{software_download_url}}" target="_blank">install and set up the proctoring software</a>.
+      {% endblocktrans %}
+    </p>
+    <p>
+      {% blocktrans %}
+        2. Dopy this unique exam code and poste it in the proctoring software window when you are asked for it.
+      {% endblocktrans %}
+    </p>
+    <p>
+      <span class="proctored-exam-code">{{exam_code}}</span>&nbsp;<button class='proctored-exam-select-code'>Click to select exam code</button>
+    </p>
     <p>
       {% blocktrans %}
         Do not share this code. It is linked to your {{platform_name}} account and can be used only once.
       {% endblocktrans %}
     </p>
+    <p>
+      {% blocktrans %}
+        3. Keep the proctoring sesion window open while you are taking the exam. If you close it, the proctoring recording is stopped and you will not successfully complete the proctored exam.
+      {% endblocktrans %}
+    </p>
+    <p>
+      {% blocktrans %}
+        4. Return to the {{platform_name}} courseware to start your exam
+      {% endblocktrans %}
+    </p>
   </div>
 </div>
 <div class="footer-sequence border-b-0 padding-b-0">
@@ -82,49 +103,32 @@
     }
   );
 
-  $(document).ready(function(){
+  $('.proctored-exam-select-code').click(function() {
+    selectText($('.proctored-exam-code'));
+    $(event.currentTarget).blur();
+  });
 
-    var hasFlash = false;
-    try {
-      var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
-      if (fo) {
-        hasFlash = true;
-      }
-    } catch (e) {
-      if (navigator.mimeTypes
-            && navigator.mimeTypes['application/x-shockwave-flash'] != undefined
-            && navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
-        hasFlash = true;
-      }
-    }
+  function selectText(textToBeSelected) {
+    // this selects all the text in an element
+    // http://stackoverflow.com/questions/12243898/how-to-select-all-text-in-contenteditable-div
+    var doc = document,
+      range, selection,
+      element = textToBeSelected[0];
 
-    if (hasFlash) {
-      $('.copy-to-clipboard').html(
-        '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" \
-        width="110" \
-        height="14" \
-        id="clippy" > \
-          <param name="movie" value="/static/proctoring/clippy.swf"/> \
-          <param name="allowScriptAccess" value="always" /> \
-          <param name="quality" value="high" /> \
-          <param name="scale" value="noscale" /> \
-          <param NAME="FlashVars" value="text={{exam_code}}"> \
-          <param name="bgcolor" value="#F2F4F5"> \
-          <embed src="/static/proctoring/clippy.swf" \
-            width="110" \
-             height="14" \
-             name="clippy" \
-             quality="high" \
-            allowScriptAccess="always" \
-            type="application/x-shockwave-flash" \
-            pluginspage="http://www.macromedia.com/go/getflashplayer" \
-            FlashVars="text={{exam_code}}" \
-            bgcolor="#F2F4F5" \
-          /> \
-        </object>'
-      );
+    if (doc.body.createTextRange) {
+      range = doc.body.createTextRange();
+      range.moveToElementText(element);
+      range.select();
+    } else if (window.getSelection) {
+      selection = window.getSelection();
+      range = doc.createRange();
+      range.selectNodeContents(element);
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
+  }
 
+  $(document).ready(function(){
     _waiting_for_proctored_interval = setInterval(
       poll_exam_started,
       5000

edx_proctoring/templates/proctoring/seq_proctored_practice_exam_entrance.html

@@ -10,9 +10,9 @@
       You can try this practice exam as many times as you want.
     {% endblocktrans %}
   </p>
-  <div class="gated-sequence">
+  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
     <span><i class="fa fa-lock"></i></span>
-    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
+    <a>
       {% trans "Yes, I want to take this practice exam with online proctoring" %}
     </a>
     <p>
@@ -23,7 +23,7 @@
     </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>
-  </div>
+  </button>
 </div>
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 

edx_proctoring/templates/proctoring/seq_proctored_practice_exam_error.html

@@ -19,12 +19,12 @@
     {% endblocktrans %}
   </p>
   <hr>
-  <div class="gated-sequence">
+  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
     <span><i class="fa fa-lock"></i></span>
-    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
+    <a>
       {% trans "Try this practice exam again" %}
     </a>
-  </div>
+  </button>
 </div>
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 <script type="text/javascript">

edx_proctoring/templates/proctoring/seq_proctored_practice_exam_submitted.html

@@ -18,12 +18,12 @@
       You have completed this practice exam and can continue with your course.
     {% endblocktrans %}
   </p>
-  <div class="gated-sequence">
+  <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
     <span><i class="fa fa-lock"></i></span>
-    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false>
+    <a>
       {% trans "You can also retry this practice exam" %}
     </a>
-  </div>
+  </button>
 </div>
 <script type="text/javascript">
   $('.start-timed-exam').click(

edx_proctoring/tests/test_api.py

@@ -96,7 +96,7 @@ class ProctoredExamApiTests(LoggedInTestCase):
         self.timed_exam_msg = '%s is a Timed Exam'
         self.exam_time_expired_msg = 'You did not complete the exam in the allotted time'
         self.exam_time_error_msg = 'There was a problem with your proctoring session'
-        self.chose_proctored_exam_msg = 'You have chosen to take %s as a proctored exam'
+        self.chose_proctored_exam_msg = 'You Have Chosen to take a Proctored Exam'
         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'
         self.proctored_exam_verified_msg = 'Your proctoring session was reviewed and passed all requirements'
@@ -805,7 +805,7 @@ class ProctoredExamApiTests(LoggedInTestCase):
                 'default_time_limit_mins': 90
             }
         )
-        self.assertIn(self.chose_proctored_exam_msg % self.exam_name, rendered_response)
+        self.assertIn(self.chose_proctored_exam_msg, rendered_response)
 
     def test_declined_attempt(self):
         """