From 2f3ff4b3ebeb2f84f124709615e9c94d19a20c0c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 28 Aug 2013 12:57:13 -0400 Subject: [PATCH] Verification: revising markup for views --- common/templates/course_modes/choose.html | 243 +++++--- .../verify_student/photo_verification.html | 544 +++++++++++------- .../verify_student/show_requirements.html | 167 ++++-- 3 files changed, 605 insertions(+), 349 deletions(-) diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html index c5c20fb859..3a8d6ccaf4 100644 --- a/common/templates/course_modes/choose.html +++ b/common/templates/course_modes/choose.html @@ -5,136 +5,193 @@ <%block name="bodyclass">register verification-process step-select-track <%block name="js_extra"> - +}); + <%block name="content">
-
-

You are registering for ${course_name} (ID Verified)

+
+

+ (ID Verified) + You are registering for + ${course_id} +

-

Select your track:

-
+
+
+

Select your track:

- % if "audit" in modes: -
-
-
-

Audit This Course

-

Sign up to audit this course for free and track your own progress.

+ + + % if "audit" in modes: +
+
+

Audit This Course

+
+

Sign up to audit this course for free and track your own progress.

+
+
+ +
    +
  • + +
    • +
-
-

- -

-
-
+ + or + + % endif -

or

- % endif + % if "verified" in modes: +
+
+ +

Certificate of Achievement

+
+

Sign up as a verified student and work toward a Certificate of Achievement.

+
+
- % if "verified" in modes: -
-
-

Certificate of Achievement

- -

Sign up as a verified student and work toward a Certificate of Achievement.

+
+
Select your contribution for this course:
-
-
- Select your contribution for this course: -
-
-
    +
      % for price in modes["verified"].suggested_prices.split(","): -
    • - +
    • + +
      • % endfor -
    • +
      • -
    • - $ + +
    • + +
      + $ + + USD +
    -
-
-

- Why do I have to pay? What if I don't meet all the requirements? -

+ +
+ +
    +
  • + +
    • +
+ % endif -
-

- What is an ID Verified Certificate? -

-

- -

-
+ + +
+
-
-

- To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. View requirements -

-
- % endif -
- - +
+ +
diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html index fc7244c511..b2f41953fd 100644 --- a/lms/templates/verify_student/photo_verification.html +++ b/lms/templates/verify_student/photo_verification.html @@ -159,263 +159,389 @@ initSnapshotHandler("photo_id"); }); - - <%block name="content">
-
-

You are registering for ${course_name} (ID Verified)

-
+
-
-
-

Your Progress

+
+

+ (ID Verified) + You are registering for + ${course_id} +

- -
    -
  1. Intro
    2. -
  2. Current Step: 1 Take Photo
    3. -
  3. 2 Take ID Photo
    4. -
  4. 3 Confirm Submission
    5. -
  5. 4 Make Payment
    6. -
  6. Confirmation
    7. -
-
+
+
+

Your Progress

-
-
-

Take Your Photo

-

Use your webcam to take a picture of your face so we can match it with the picture on your ID.

+ + + -
+
    +
  1. + 0 + Intro +
    2. -
    -
    -
    - -
    +
  2. + 1 + Current Step: Take Photo +
    3. -
    - -
    +
  3. + 2 + Intro +
    4. -
    +
  4. + 3 + Intro +
    5. -
    -

    Tips on taking a successful photo

    -
      -
    • Make sure your face is well-lit
      • -
    • Be sure your entire face is inside the frame
      • -
    • Can we match the photo you took with the one on your ID?
      • -
    • Click the checkmark once you are happy with the photo
      • -
    +
  5. + 4 + Intro +
    6. - -

    Common Questions

    -
    -
    Why do you need my photo?
    -
    We need your photo to confirm that you are you.
    - -
    What do you do with this picture?
    -
    We only use it to verify your identity. It is not displayed anywhere.
    -
    - - -
    -
- -
- -
-

- -

-

Once you verify your photo looks good, you can move on to step 2.

-
-
+
  • + 5 + Confirmation +
    • + +
    -
    -

    Take Your Photo

    -

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    +
    +
    -
    +
    +
    +
    +

    Take Your Photo

    +
    +

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    +
    -
    +
    +
    +
    +
    + +
    -
    -
    - -
    +
    +
    +
  • + + Take photo + +
    • -
    -

    Tips on taking a successful photo

    -
      -
    • Make sure your ID is well-lit
      • -
    • Check that there isn't any glare
      • -
    • Ensure that you can see your photo and read your name
      • -
    • Try to keep your fingers at the edge to avoid covering important information
      • -
    +
  • + + Looks good + +
    • + +
    +
    -

    Common Questions

    -
    -
    Why do you need a photo of my ID?
    -
    We need to match your ID with your photo and name to confirm that you are you.
    +
    +
    +

    Tips on taking a successful photo

    -
    What do you do with this picture?
    -
    We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.
    -
    +
    +
      +
    • Make sure your face is well-lit
      • +
    • Be sure your entire face is inside the frame
      • +
    • Can we match the photo you took with the one on your ID?
      • +
    • Click the checkmark once you are happy with the photo
      • +
    +
    +
    -
    +
    +

    Common Questions

    -
    +
    +
    +
    Why do you need my photo?
    +
    We need your photo to confirm that you are you.
    -
    +
    What do you do with this picture?
    +
    We only use it to verify your identity. It is not displayed anywhere.
    +
    +
    +
    +
    +
    -
    -

    - -

    -

    Once you verify your ID photo looks good, you can move on to step 3.

    -
    -
    +
    +
      +
    1. + +
      2. +
    + +
    + -
    -

    Verify Your Submission

    -

    Make sure we can verify your identity with the photos and information below.

    +
    +
    +

    Show Us Your ID

    +
    +

    Use your webcam to take a picture of your face so we can match it with the picture on your ID.

    +
    -
    -

    Check Your Name

    -

    Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.

    -

    Edit my name

    -
    +
    +
    +
    +
    + +
    -
    -
    -
    - -
    +
    +
      +
    • + + Retake + +
      • -

      The photo above needs to meet the following requirements:

      -
        -
      • Be well lit
        • -
      • Show your whole face
        • -
      • Match your ID
        • -
      -
    +
  • + + Take photo + +
    • -
    -
    - -
    +
  • + + Looks good + +
    • + +
    +
    -

    The photo above needs to meet the following requirements:

    -
      -
    • Be readable (not too far away, no glare)
      • -
    • Show your name
      • -
    • Match the photo of your face and your name above
      • -
    -
    +
    +
    +

    Tips on taking a successful photo

    +
    +
      +
    • Make sure your ID is well-lit
      • +
    • Check that there isn't any glare
      • +
    • Ensure that you can see your photo and read your name
      • +
    • Try to keep your fingers at the edge to avoid covering important information
      • +
    +
    +
    -
    -

    Photos don't meet the requirements? Retake the photos.

    +
    +

    Common Questions

    -
    +
    +
    +
    Why do you need a photo of my ID?
    +
    We need to match your ID with your photo and name to confirm that you are you.
    -
    -

    Check Your Contribution

    +
    What do you do with this picture?
    +
    We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.
    +
    +
    +
    +
    +
    -
    -
    - Select your contribution for this course: -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    -
    + +
    +
    -
    +
    +
    +

    Verify Your Submission

    +
    +

    Make sure we can verify your identity with the photos and information below.

    +
    -
    - - +
    +
      +
    1. +

      Check Your Name

      -
      +
      +

      Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.

      +
      - -

      - -

      -
      2. -

      Once you verify your details match the requirements,
      you can move on to step 4, payment on our secure server.

      -
    -
    + + + +
  • +

    Review the Photos You've Taken

    + +
    +

    Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.

    +
    + +
      +
    1. +
      + +
      + +
      +
      The photo above needs to meet the following requirements:
      +
        +
      • Be well lit
        • +
      • Show your whole face
        • +
      • Match your ID
        • +
      +
      +
      2. + +
    2. +
      + +
      + +
      +
      The photo above needs to meet the following requirements:
      +
        +
      • Be readable (not too far away, no glare)
        • +
      • Show your name
        • +
      • Match the photo of your face and your name above
        • +
      +
      +
      3. +
    +
    • + +
  • +

    Check Your Contribution Level

    + +
    +

    Please confirm your contribution for this course:

    +
    + +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + +
      + $ + + USD +
      +
      • +
    +
    • + +
    + + +
    + + + + + +
    + +
    - - - -
    -

    More questions? Check out our FAQs.

    -

    Change your mind? You can always Audit the course for free without verifying.

    -
    - - - - - - diff --git a/lms/templates/verify_student/show_requirements.html b/lms/templates/verify_student/show_requirements.html index ce8715764e..aeba9edad7 100644 --- a/lms/templates/verify_student/show_requirements.html +++ b/lms/templates/verify_student/show_requirements.html @@ -7,65 +7,140 @@
    -
    -

    You are registering for ${course_id} (ID Verified)

    +
    +

    + (ID Verified) + You are registering for + ${course_id} +

    +
    +
    +

    Your Progress

    -
    -
    -

    Your Progress

    -
    - -
      -
    1. Current Step: Intro
      2. -
    2. 1 Take Photo
      3. -
    3. 2 Take ID Photo
      4. -
    4. 3 Confirm Submission
      5. -
    5. 4 Make Payment
      6. -
    6. Confirmation
      7. -
    -
    + + + -
    -
    +
      +
    1. + 0 + Intro +
      2. + +
    2. + 1 + Current Step: Take Photo +
      3. + +
    3. + 2 + Intro +
      4. + +
    4. + 3 + Intro +
      5. + +
    5. + 4 + Intro +
      6. + +
    6. + 5 + Confirmation +
      7. +
    +
    +
    + + +
    +

    What You Will Need to Register

    -
    -

    There are a few things you will need to register as an ID verified student:

    -
    -
    -

    Identification

    -
    -

    A photo identification document a drivers license, passport, student ID, or other ID with your name and picture on it

    +
    +

    There are a few things you will need to register as an ID verified student:

    -
    -

    Webcam

    - -

    A webcam and a modern browser Firefox, Chrome, or Opera

    -
    +
      +
    • +

      Identification

      +
      + +
      -
      -

      Credit or Debit Card

      - -

      A major credit or debit card Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club

      -
      -
    +
    +

    + A photo identification document + a drivers license, passport, student ID, or other ID with your name and picture on it +

    +
    + -
    -

    Go to Step 1: Take my Photo

    -

    Change your mind? You can always Audit.

    -
    -
    +
  • +

    Webcam

    +
    + +
    +
    +

    + A webcam and a modern browser + Firefox, Chrome, or Opera +

    +
    +
    • -
    -

    Missing something? You can always Audit the course.

    -

    More questions? Check out our FAQs.

    -
    +
  • +

    Credit or Debit Card

    +
    + +
    +
    +

    + A major credit or debit card + Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club +

    +
    +
    • + + + + +
    + +
    + +
    -