Skip to content

E
edx-platform
Commit 2f3ff4b3 by Brian Talbot
Options

Verification: revising markup for views

parent e6bfb887
Showing with 499 additions and 243 deletions
common/templates/course_modes/choose.html
...@@ -5,136 +5,193 @@ ...@@ -5,136 +5,193 @@
<%block name="bodyclass">register verification-process step-select-track</%block> <%block name="bodyclass">register verification-process step-select-track</%block>
<%block name="js_extra"> <%block name="js_extra">
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$( ".more" ).hide(); $( ".more" ).hide();
$( ".expand" ).click(function(e) { $( ".expand" ).click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
}); });
</script>
</script>
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header header-white"> <header class="page-header">
<h2 class="title header-white-title">You are registering for ${course_name} (ID Verified)</h2> <h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
</h2>
</header> </header>
<div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main">
<h3 class="title">Select your track:</h3> <h3 class="title">Select your track:</h3>
<form method="post" name="enrollment_mode_form" id="enrollment_mode_form"> <form cass="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
% if "audit" in modes: % if "audit" in modes:
<div class="select"> <div class="register-choice register-choice-audit">
<div class="block block-audit"> <div class="wrapper-copy">
<div class="wrap-copy">
<h4 class="title">Audit This Course</h4> <h4 class="title">Audit This Course</h4>
<div class="copy">
<p>Sign up to audit this course for free and track your own progress.</p> <p>Sign up to audit this course for free and track your own progress.</p>
</div> </div>
</div>
<div class="wrap-action"> <ul class="actions">
<p class="m-btn-primary"> <li class="action action-select">
<input type="submit" name="mode" value="Select Audit" /> <input type="submit" name="mode" value="Select Audit" />
</p> </li>
</div> </ul>
</div> </div>
<div class="divider"><p>or</p></div> <span class="deco-divider">
<span class="copy">or</span>
</span>
% endif % endif
% if "verified" in modes: % if "verified" in modes:
<div class="select"> <div class="register-choice register-choice-certificate">
<div class="block block-cert"> <div class="wrapper-copy">
<span class="deco-ribbon"></span>
<h4 class="title">Certificate of Achievement</h4> <h4 class="title">Certificate of Achievement</h4>
<span class="ribbon"></span> <div class="copy">
<p>Sign up as a verified student and work toward a Certificate of Achievement.</p> <p>Sign up as a verified student and work toward a Certificate of Achievement.</p>
</div>
</div>
<dl> <div class="field field-certificate-contribution">
<dt> <h5 class="label">Select your contribution for this course:</h5>
Select your contribution for this course:
</dt> <ul class="contribution-options">
<dd>
<ul class="pay-options">
% for price in modes["verified"].suggested_prices.split(","): % for price in modes["verified"].suggested_prices.split(","):
<li> <li class="contribution-option">
<input type="radio" name="contribution" value="${price|h}"><label for="contribution-${price|h}">$${price} ${modes["verified"].currency.upper()}</label> <input type="radio" name="contribution" value="${price|h}" />
<label for="contribution-${price|h}" />
<span class="deco-denomination">$</span>
<span class="label-value">${price} ${modes["verified"].currency.upper()}</span>
<span class="denomination-name">USD</span>
</label>
</li> </li>
% endfor % endfor
<li class="other1"> <li class="contribution-option contribution-option-other1">
<input type="radio" id="contribution-other" name="contribution" value=""/> <input type="radio" id="contribution-other" name="contribution" value=""/>
<label for=" contribution-other"><span class="sr">Other</span></label> <label for=" contribution-other"><span class="sr">Other</span></label>
</li> </li>
<li class="other2">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> </label>$<input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" /> <li class="contribution-option contribution-option-other2">
<label for="contribution-other-amt">
<span class="sr">Other Amount</span>
</label>
<div class="wrapper">
<span class="deco-denomination">$</span>
<input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" />
<span class="denomination-name">USD</span>
</div>
</li> </li>
</ul> </ul>
</dd>
</dl>
<p class="tip expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
<div class="more"> <div class="help-tip is-expandable">
<dl class="faq"> <h5 class="title">Why do I have to pay? What if I don't meet all the requirements?</h5>
<dt>Why do I have to pay?</dt>
<dd>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</dd>
<dt>I'd like to pay more than the minimum. Is my contribution tax deductible?</dt> <div class="copy more">
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd> <dl class="list-faq">
<dt class="faq-question">Why do I have to pay?</dt>
<dd class="faq-answer">
<p>Your payment helps cover the costs of verification. As a non-profit, edX keeps these costs as low as possible, Your payment will also help edX with our mission to provide quality education to anyone.</p>
</dd>
<dt class="faq-question">I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd class="faq-answer">
<p>Please check with your tax advisor to determine whether your contribution is tax deductible.</p>
</dd>
% if "honor" in modes: % if "honor" in modes:
<dt>What if I can't afford it?</dt> <dt class="faq-question">What if I can't afford it?</dt>
<dd>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course. <dd class="faq-answer">
<p>If you cannot afford the minimum payment, you can always work towards a free Honor Code Certificate of Achievement for this course.</p>
Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step. <p>Enter $0 above and explain why you would like the fee waived below. Then click Select Certificate button to move on to the next step.</p>
<dl>
<dt><label class="sr" for="explain">Explain your situation:</label></dt>
<dd><p>Tell us why you need help paying for this course in 180 characters or more.</p>
<textarea name="explain" rows="5" cols="50"></textarea>
<ul class="fields">
<li class="field field-explain">
<label for="explain"><span class="sr">Explain your situation: </span>Tell us why you need help paying for this course in 180 characters or more.</label>
<textarea name="explain"></textarea>
</li>
</ul>
</dd> </dd>
</dl>
</dd>
% endif
% if "honor" in modes: <dt class="faq-question">What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dt>What if I don't meet all of the requirements for financial assistance but I still want to work toward a certificate?</dt>
<dd>If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity. <dd class="faq-answer">
<p><input type="checkbox" name="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p> <p>If you don't have a webcam, credit or debit card or acceptable ID, you can opt to simply audit this course, or select to work towards a free Honor Code Certificate of Achievement for this course by checking the box below. Then click the Select Certificate button to complete registration. We won't ask you to verify your identity.</p>
<ul class="fields">
<li class="field field-explain">
<input type="checkbox" name="honor-code" id="honor-code">
<label for="honor-code">Select Honor Code Certificate</label>
</li>
</ul>
</dd> </dd>
% endif % endif
</dl> </dl>
</div> </div>
</div>
<hr />
<p class="tip">
<a href="">What is an ID Verified Certificate?</a>
</p>
<p class="m-btn-primary green">
<input type="submit" name="mode" value="Select Certificate" />
</p>
</div> </div>
<div class="tips"> <ul class="actions">
<p> <li class="action action-select">
To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. <a href="">View requirements</a> <input type="submit" name="mode" value="Select Certificate" />
</p> </li>
</ul>
</div> </div>
% endif % endif
</div>
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form> </form>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title">What is an ID Verified Certificate?</h3>
<div class="copy">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Verified Certificate of Achievement Requirememts</h3>
<div class="copy">
<p>To register for a Verified Certificate of Achievement option, you will need a webcam, a credit or debit card, and an ID. <a href="">View requirements</a></p>
</div>
</li>
<p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p> <li class="help-item">
<p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p> <h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
<div class="copy">
<p>Please read <a href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Not the course you wanted?</h3>
<div class="copy">
<p><a href="">Return to our course listings to find another course</a></p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
</%block> </%block>
lms/templates/verify_student/photo_verification.html
...@@ -159,263 +159,389 @@ ...@@ -159,263 +159,389 @@
initSnapshotHandler("photo_id"); initSnapshotHandler("photo_id");
}); });
</script> </script>
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper">
<header class="page-header"> <header class="page-header">
<h2 class="title">You are registering for ${course_name} (ID Verified)</h2> <h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
</h2>
</header> </header>
<div class="wrapper-progress">
<section class="progress"> <section class="progress">
<header class="section-head">
<h3 class="sr title">Your Progress</h3> <h3 class="sr title">Your Progress</h3>
</header>
<!--<span class="progress-status"></span><span class="progress-status-value"></span>--> <span class="progress-status">
<span class="progress-status-value"></span>
</span>
<ol class="progress-steps"> <ol class="progress-steps">
<li class="progress-step done" id="progress-step0"><span class="mini number"></span> Intro</li> <li class="progress-step is-completed" id="progress-step0">
<li class="progress-step current" id="progress-step1"><span class="sr">Current Step: </span> <span class="number">1</span> Take Photo</li> <span class="step-number">0</span>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li> <span class="step-name">Intro</span>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li> </li>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li> <li class="progress-step" id="progress-step1">
<span class="step-number">1</span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="step-number">2</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="step-number">3</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="step-number">4</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="step-number">5</span>
<span class="step-name">Confirmation</span>
</li>
</ol> </ol>
</section> </section>
</div>
<div class="wrapper-content-main">
<article class="content-main">
<section class="wrapper carousel" data-transition="slide"> <section class="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="block-photo"> <div id="wrapper-view wrapper-facephoto" class="block-photo">
<div class="facephoto view">
<h3 class="title">Take Your Photo</h3> <h3 class="title">Take Your Photo</h3>
<div class="instruction">
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p> <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
</div>
<div class="wrapper-up"> <div class="wrapper-task">
<div id="facecam" class="task cam">
<div id="facecam" class="cam"> <div class="placeholder-cam">
<div class="wrapper-cam"> <video id="face_video" width="400" height="300" autoplay></video><br/>
<video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas> <canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div> </div>
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="list-controls">
<li class="control control-redo" id="face_reset_button"> <li class="control control-redo" id="face_reset_button">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
</a>
</li> </li>
<li class="control control-do" id="face_capture_button"> <li class="control control-do" id="face_capture_button">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a> <a class="action action-do" href="">
<i class="icon-camera"></i><span class="sr">Take photo</span>
</a>
</li> </li>
<li class="control control-approve" id="face_approve_button"> <li class="control control-approve" id="face_approve_button">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="help photo-tips facetips"> <div class="wrapper-help">
<div class="help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4> <h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
<ul> <ul>
<li>Make sure your face is well-lit</li> <li>Make sure your face is well-lit</li>
<li>Be sure your entire face is inside the frame</li> <li>Be sure your entire face is inside the frame</li>
<li>Can we match the photo you took with the one on your ID?</li> <li>Can we match the photo you took with the one on your ID?</li>
<li>Click the checkmark once you are happy with the photo</li> <li>Click the checkmark once you are happy with the photo</li>
</ul> </ul>
</div>
</div>
<div class="help-faq facefaq">
<h4 class="sr title">Common Questions</h4>
<h4 class="title">Common Questions</h4> <div class="copy">
<dl> <dl class="list-faq">
<dt>Why do you need my photo?</dt> <dt class="faq-question">Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd> <dd class="faq-answer">We need your photo to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt> <dt class="faq-question">What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd> <dd class="faq-answer">We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl> </dl>
</div> </div>
</div> </div>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="face_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</p>
<p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</div>
</div> </div>
</div> </div>
<div id="wrapper-idphoto" class="block block-photo"> <nav class="nav-wizard">
<h3 class="title">Take Your Photo</h3> <span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next" id="face_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</li>
</ol>
</nav>
<div class="wrapper-up"> </div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="idcam" class="cam"> <div id="wrapper-view wrapper-idphoto" class="block-photo">
<div class="idphoto view">
<h3 class="title">Show Us Your ID</h3>
<div class="instruction">
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
</div>
<div class="wrapper-cam"> <div class="wrapper-task">
<video id="photo_id_video" width="500" height="375" autoplay></video><br/> <div id="idcam" class="task cam">
<div class="placeholder-cam">
<video id="photo_id_video" width="400" height="300" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas> <canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div> </div>
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="list-controls">
<li class="control control-redo" id="photo_id_reset_button"> <li class="control control-redo" id="photo_id_reset_button">
<a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" href="">
<i class="icon-undo"></i> <span class="sr">Retake</span>
</a>
</li> </li>
<li class="control control-do" id="photo_id_capture_button"> <li class="control control-do" id="photo_id_capture_button">
<a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a> <a class="action action-do" href="">
<i class="icon-camera"></i> <span class="sr">Take photo</span>
</a>
</li> </li>
<li class="control control-approve" id="photo_id_approve_button"> <li class="control control-approve" id="photo_id_approve_button">
<a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" href="">
<i class="icon-ok"></i> <span class="sr">Looks good</span>
</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="photo-tips idtips"> <div class="wrapper-help">
<div class="help-task photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4> <h4 class="title">Tips on taking a successful photo</h4>
<div class="copy">
<ul> <ul>
<li>Make sure your ID is well-lit</li> <li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li> <li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li> <li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li> <li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul> </ul>
</div>
</div>
<h4 class="title">Common Questions</h4> <div class="help-faq facefaq">
<dl> <h4 class="sr title">Common Questions</h4>
<dt>Why do you need a photo of my ID?</dt>
<dd>We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt> <div class="copy">
<dd>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.</dd> <dl class="list-faq">
</dl> <dt class="faq-question">Why do you need a photo of my ID?</dt>
<dd class="faq-answer">We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt class="faq-question">What do you do with this picture?</dt>
<dd class="faq-answer">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.</dd>
</dl>
</div> </div>
</div> </div>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="photo_id_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</p>
<p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</div> </div>
</div> </div>
</div> <nav class="nav-wizard">
<span class="help help-inline">Once you verify your ID photo looks good, you can move on to step 3.</span>
<ol class="wizard-steps">
<li class="wizard-step">
<a class="next" id="photo_id_next_button" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</li>
</ol>
</nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
<div id="wrapper-review" class="block block-photo"> <div id="wrapper-view wrapper-review">
<div class="review view">
<h3 class="title">Verify Your Submission</h3> <h3 class="title">Verify Your Submission</h3>
<div class="instruction">
<p>Make sure we can verify your identity with the photos and information below.</p> <p>Make sure we can verify your identity with the photos and information below.</p>
<div class="review-name">
<h3>Check Your Name</h3>
<p>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.</p>
<p><a href="#">Edit my name</a></p>
</div> </div>
<div class="wrapper-up"> <div class="wrapper-task">
<div id="review-facephoto" class="review-photo"> <ol class="review-tasks">
<div class="wrapper-photo"> <li class="review-task">
<img id="face_image" width="500" height="375" src=""/> <h4 class="title">Check Your Name</h4>
<div class="copy">
<p>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.</p>
</div> </div>
<h4 class="title">The photo above needs to meet the following requirements:</h4> <ul class="actions">
<ul> <li class="action action-editname">
<li>Be well lit</li> <a rel="modal" class="edit-name" href="#">Edit my name</a>
<li>Show your whole face</li> </li>
<li>Match your ID</li>
</ul> </ul>
</li>
<li class="review-task">
<h4 class="title">Review the Photos You've Taken</h4>
<div class="copy">
<p>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.</p>
</div> </div>
<div id="review-idphoto" class="review-photo"> <ol class="wrapper-photos">
<div class="wrapper-photo"> <li class="wrapper-photo">
<img id="photo_id_image" width="500" height="375" src=""/> <div class="placeholder-photo">
<img id="face_image" width="512" height="384" src=""/>
</div> </div>
<h4 class="title">The photo above needs to meet the following requirements:</h4> <div class="help-tips">
<ul> <h5>The photo above needs to meet the following requirements:</h5>
<li>Be readable (not too far away, no glare)</li> <ul class="list-tips">
<li>Show your name</li> <li class="tip">Be well lit</li>
<li>Match the photo of your face and your name above</li> <li class="tip">Show your whole face</li>
<li class="tip">Match your ID</li>
</ul> </ul>
</div> </div>
</li>
<li class="wrapper-photo">
<div class="placeholder-photo">
<img id="photo_id_image" width="512" height="384" src=""/>
</div>
<div class="help-tips">
<h5>The photo above needs to meet the following requirements:</h5>
<ul class="list-tips">
<li class="tip">Be readable (not too far away, no glare)</li>
<li class="tip">Show your name</li>
<li class="tip">Match the photo of your face and your name above</li>
</ul>
</div> </div>
<p>Photos don't meet the requirements? <a href="#">Retake the photos</a>.</p> </li>
</ol>
</li>
<hr /> <li class="review-task">
<h4 class="title">Check Your Contribution Level</h4>
<div class="wrapper-down"> <div class="copy">
<h3>Check Your Contribution</h3> <p>Please confirm your contribution for this course:</p>
</div>
<dl> <ul class="contribution-options">
<dt> <li class="contribution-option">
Select your contribution for this course: <input type="radio" id="contribution-25" name="contribution">
</dt> <label for="contribution-25">
<dd> <span class="deco-denomination">$</span>
<ul class="pay-options"> <span class="label-value">25</span>
<li> <span class="denomination-name">USD</span>
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label> </label>
</li> </li>
<li> <li class="contribution-option">
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label> <input type="radio" id="contribution-50" name="contribution">
<label for="contribution-50">
<span class="deco-denomination">$</span>
<span class="label-value">50</span>
<span class="denomination-name">USD</span>
</label>
</li> </li>
<li> <li class="contribution-option">
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label> <input type="radio" id="contribution-100" name="contribution">
<label for="contribution-100">
<span class="deco-denomination">$</span>
<span class="label-value">100</span>
<span class="denomination-name">USD</span>
</label>
</li> </li>
<li class="other1"> <li class="contribution-option contribution-option-other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label> <input type="radio" id="contribution-other" name="contribution">
<label for="contribution-other"><span class="sr">Other</span></label>
</li> </li>
<li class="other2"> <li class="contribution-option contribution-option-other2">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt"> <label for="contribution-other-amt">
<span class="sr">Other Amount</span>
</label>
<div class="wrapper">
<span class="deco-denomination">$</span>
<input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt" />
<span class="denomination-name">USD</span>
</div>
</li> </li>
</ul> </ul>
</dd> </li>
</dl> </ol>
</div> </div>
<hr /> <nav class="nav-wizard">
<span class="help help-inline">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</span>
<div class="next-step">
<ol class="wizard-steps">
<li class="wizard-step">
<form id="pay_form" method="post" action="${purchase_endpoint}"> <form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <a href="#">Go to Step 4: Secure Payment</a> -->
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
<input type="hidden" name="course_id" value="${course_id | h}" />
<input type="checkbox" name="match" id="confirm_pics_good" /> <label for="match">Yes! My details all match.</label><br /> <ul class="list-fields">
<li class="field field-match">
<input type="checkbox" name="match" id="confirm_pics_good" />
<label for="match">Yes! My details all match.</label>
</li>
</ul>
<input type="hidden" name="course_id" value="${course_id | h}" />
<p class="m-btn-primary" id="pay_button_frame">
<input type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment"> <input type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment">
</p>
</form> </form>
<p class="tip">Once you verify your details match the requirements, <br />you can move on to step 4, payment on our secure server.</p> </li>
</div> </ol>
</div> </nav>
</div> <!-- /view -->
</div> <!-- /wrapper-view -->
</section> </section>
</article>
</div> <!-- /wrapper-content-main -->
<div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
<div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<section class="support"> <div class="copy">
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p> <p>You can always <a href="">Audit the course for free</a> without verifying.</p>
<p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p> </div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section> </section>
</div> </div>
<section id="edit-name" class="modal"> <section id="edit-name" class="modal">
<header> <header>
<h4>${_("Edit Your Full Name")}</h4> <h4>${_("Edit Your Full Name")}</h4>
...@@ -441,6 +567,4 @@ ...@@ -441,6 +567,4 @@
<span class="label">close</span> <span class="label">close</span>
</a> </a>
</section> </section>
</%block> </%block>
lms/templates/verify_student/show_requirements.html
...@@ -7,65 +7,140 @@ ...@@ -7,65 +7,140 @@
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header header-white"> <header class="page-header">
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2> <h2 class="title">
<span class="status-track">(ID Verified)</span>
<span class="status">You are registering for</span>
<span class="status-course">${course_id} </span>
</h2>
</header> </header>
<div class="wrapper-progress">
<section class="progress"> <section class="progress">
<header class="section-head"> <h3 class="sr title">Your Progress</h3>
<h3 class="sr">Your Progress</h3>
</header> <span class="progress-status">
<!--<span class="progress-line"></span><span class="progress-line-done"></span>--> <span class="progress-status-value"></span>
<ol> </span>
<li class="progress-step current" id="progress-step0"><span class="sr">Current Step: </span> <span class="mini number"></span> Intro</li>
<li class="progress-step" id="progress-step1"><span class="number">1</span> Take Photo</li> <ol class="progress-steps">
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li> <li class="progress-step is-completed" id="progress-step0">
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li> <span class="step-number">0</span>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li> <span class="step-name">Intro</span>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li> </li>
<li class="progress-step" id="progress-step1">
<span class="step-number">1</span>
<span class="step-name"><span class="sr">Current Step: </span>Take Photo</span>
</li>
<li class="progress-step" id="progress-step2">
<span class="step-number">2</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step3">
<span class="step-number">3</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step4">
<span class="step-number">4</span>
<span class="step-name">Intro</span>
</li>
<li class="progress-step" id="progress-step5">
<span class="step-number">5</span>
<span class="step-name">Confirmation</span>
</li>
</ol> </ol>
</section> </section>
</div>
<section class="reqs-section"> <div class="wrapper-content-main">
<header class="section-head"> <article class="content-main">
<h3 class="title">What You Will Need to Register</h3> <h3 class="title">What You Will Need to Register</h3>
</header>
<div class="instruction">
<p>There are a few things you will need to register as an ID verified student:</p> <p>There are a few things you will need to register as an ID verified student:</p>
<div class="reqs"> </div>
<div class="req1 req">
<ul class="list-reqs">
<li class="req req-1 req-id">
<h4>Identification</h4> <h4>Identification</h4>
<div class="art"><i class="icon-id"></i></div> <div class="placeholder-art">
<p>A photo identification document <span class="tip">a drivers license, passport, student ID, or other ID with your name and picture on it</span></p> <i class="icon-credit-card"></i>
</div>
<div class="copy">
<p>
<span class="copy-super">A photo identification document</span>
<span class="copy-sub">a drivers license, passport, student ID, or other ID with your name and picture on it</span>
</p>
</div> </div>
</li>
<div class="req2 req"> <li class="req req-2 req-webcam">
<h4>Webcam</h4> <h4>Webcam</h4>
<div class="placeholder-art">
<i class="icon-facetime-video"></i> <i class="icon-facetime-video"></i>
<p>A webcam and a modern browser <span class="tip">Firefox, Chrome, or Opera</span></p>
</div> </div>
<div class="req3 req"> <div class="copy">
<p>
<span class="copy-super">A webcam and a modern browser</span>
<span class="copy-sub">Firefox, Chrome, or Opera</span>
</p>
</div>
</li>
<li class="req req-3 req-payment">
<h4>Credit or Debit Card</h4> <h4>Credit or Debit Card</h4>
<div class="placeholder-art">
<i class="icon-credit-card"></i> <i class="icon-credit-card"></i>
<p>A major credit or debit card <span class="tip">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span></p>
</div>
</div> </div>
<div class="next-step"> <div class="copy">
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p> <p>
<p class="tip">Change your mind? <a href="">You can always Audit.</a></p> <span class="copy-super">A major credit or debit card</span>
<span class="copy-sub">Visa, Master Card, Maestro, Amex, Discover, JCB with Discover logo, Diners Club</span>
</p>
</div> </div>
</section> </li>
</ul>
<nav class="nav-wizard">
<span class="help help-inline">Once you verify your photo looks good, you can move on to step 2.</span>
<section class="support"> <ol class="wizard-steps">
<p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p> <li class="wizard-step">
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p> <a class="next" id="face_next_button" href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a>
</section> </li>
</ol>
</nav>
</article>
</div> <!-- /wrapper-content-main -->
</section> <div class="wrapper-content-supplementary">
<aside class="content-supplementary">
<ul class="list-help">
<li class="help-item">
<h3 class="title"><i class="icon-question-sign"></i> Have questions?</h3>
<div class="copy">
<p>Please read <a rel="external" href="">our FAQs to view common questions about our certificates</a>.</p>
</div>
</li>
<li class="help-item">
<h3 class="title">Change your mind?</h3>
<div class="copy">
<p>You can always <a href="">Audit the course for free</a> without verifying.</p>
</div>
</li>
</ul>
</aside>
</div> <!-- /wrapper-content-supplementary -->
</section>
</div> </div>
</%block> </%block>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment