PHX-43 Implemented proctored start page

edx_proctoring/api.py

@@ -248,7 +248,7 @@ def get_student_view(user_id, course_id, content_id, context):
         has_time_expired = now_utc > expires_at
 
     if not has_started_exam:
-        # determine whether to show a timed exam only entrace screen
+        # determine whether to show a timed exam only entrance screen
         # or a screen regarding proctoring
         if is_proctored:
             student_view_template = 'proctoring/seq_proctored_exam_entrance.html'

edx_proctoring/templates/proctoring/seq_proctored_exam_entrance.html

 {% load i18n %}
 <div class="sequence" data-exam-id="{{exam_id}}">
-This is to be developed!
 </div>
-{% include 'proctoring/seq_timed_exam_footer.html' %}
+<div class="sequence proctored-exam entrance" data-exam-id="{{exam_id}}">
+  <h3>
+    {% blocktrans %}
+      Would you Like to take {{ display_name }} as Proctored Exam?
+    {% endblocktrans %}
+  </h3>
+  <p>
+    {% blocktrans %}
+      Since you're enrolled in this course as a verified student, you have the option to take this exam
+      with online proctoring. Online proctoring is one requirement towards being eligible for credit.
+    {% endblocktrans %}
+  </p>
+  <div class="gated-sequence">
+    <span><i class="fa fa-lock"></i></span>
+    <a class="start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}">
+        {% blocktrans %}
+          Yes, take this exam as a proctored exam (and be eligible for credit)
+        {% endblocktrans %}
+    </a>
+    <p>
+      {% blocktrans %}
+        You will need to <strong>download and install edX-approved software </strong>for the online proctoring
+        of your exam. After successful installation, you will be <strong>guided through setting up your
+        proctored session and begin the exam immediately </strong>afterwards.</p>
+      {% endblocktrans %}
+    <i class="fa fa-arrow-circle-right"></i>
+  </div>
+  <div class="gated-sequence">
+    <span><i class="fa fa-unlock"></i></span>
+    <a class="start-timed-exam">
+      No, take this exam as an open exam (and not be eligible for credit)
+    </a>
+    <p>
+      {% blocktrans %}
+        You may proceed and begin the exam at your leisure, but <strong>you will not be able to apply for college
+        credit </strong>upon completing the exam or this course in general.
+      {% endblocktrans %}
+    </p>
+      <i class="fa fa-arrow-circle-right"></i>
+  </div>
+</div>
+{% include 'proctoring/seq_proctored_exam_footer.html' %}
 
+<script type="text/javascript">
+  $('.start-timed-exam').click(
+    function(event) {
+      var action_url = $(this).data('ajax-url');
+      var exam_id = $(this).data('exam-id');
+      if (typeof action_url === "undefined" ) {
+        return false;
+      }
+      $.post(
+        action_url,
+        {
+          "exam_id": exam_id
+        },
+        function(data) {
+          // reload the page, because we've unlocked it
+          location.reload();
+        }
+      );
+    }
+  );
+</script>
\ No newline at end of file

edx_proctoring/templates/proctoring/seq_proctored_exam_footer.html

+{% load i18n %}
+<div class="footer-sequence">
+  <h4> {% trans "Why i am seeing these options?" %} </h4>
+    <p>
+    {% blocktrans %}
+      Text to be added here.
+    {% endblocktrans %}
+  </p>
+</div>
+<div class="faq-proctoring-exam">
+  <h4> {% trans "See Also" %} </h4>
+    <p>
+    {% blocktrans %}
+      <a class="footer-link" href="#">
+        Frequently asked questions about proctoring and earning college credit.
+      </a>
+      <a class="footer-link" href="#">
+        Technical Requirements for taking a proctored exam
+      </a>
+    {% endblocktrans %}
+  </p>
+</div>
\ No newline at end of file