Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge design and dev JS/UI for verify student

Browse Source
This commit is contained in:
David Ormsbee
2013-08-26 14:31:36 -04:00
parent 874c6314f5
commit dd50ec4e82
7 changed files with 114 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lms/templates/courseware/course_about.html
View File

@@ -101,7 +101,7 @@
%else:
<a href="#" class="register">${_("Register for {course.display_number_with_default}").format(course=course) | h}</a>
<a href="${reverse('verify_student/show_requirements')}">Mock Verify Enrollment</a>
<a href="${reverse('verify_student_show_requirements')}">Mock Verify Enrollment</a>
<div id="register_error"></div>
%endif

2
lms/templates/verify_student/photo_id_upload.html
View File

@@ -122,7 +122,7 @@ $(document).ready(function() {
</p>
<p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
<a href="${reverse('verify_student_show_requirements')}">Select Certificate</a>
</p>
</div>

153
lms/templates/verify_student/photo_verification.html
View File

@@ -93,13 +93,44 @@
}, onVideoFail);
}
function initPhotoBlocks() {
// Photo wrapping
$('.block-photo .control-redo').addClass('is-hidden');
$('.block-photo .control-approve').addClass('is-hidden');
$('.block-photo .m-btn-primary').addClass('disabled');
$( "#wrapper-facephoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-facephoto .control-redo').toggleClass('is-shown');
$('#wrapper-facephoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-facephoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-facephoto .m-btn-primary').removeClass('disabled');
});
$( "#wrapper-idphoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-idphoto .control-redo').toggleClass('is-shown');
$('#wrapper-idphoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-idphoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
});
}
$(document).ready(function() {
$(".carousel-nav").addClass('sr');
$("#pay_button").click(submitToPaymentProcessing);
initPhotoBlocks();
initVideoCapture();
initSnapshotHandler("face");
initSnapshotHandler("photo_id");
});
</script>
@@ -141,12 +172,12 @@
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" id="face_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo">
<a class="action action-redo" id="face_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li>
<li class="control control-do">
<a class="action action-do" id="face_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve">
<a class="action action-approve" id="face_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li>
@@ -169,32 +200,25 @@
<div class="wrapper-down">
<div class="faq facefaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl>
<dl>
<dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
</li>
</ul>
<div class="next-step">
<p class="m-btn-primary">
<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 id="wrapper-idphoto" class="block-photo">
<div id="wrapper-idphoto" class="block block-photo">
<h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
@@ -209,18 +233,17 @@
<div class="controls photo-controls">
<ul class="controls-list">
<li class="control control-do">
<a class="action action-do" id="photo_id_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo">
<a class="action action-redo" id="photo_id_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li>
<li class="control control-do">
<a class="action action-do" id="photo_id_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve">
<a class="action action-approve" id="photo_id_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li>
</ul>
</div>
</div>
<div class="photo-tips idtips">
@@ -239,7 +262,7 @@
<div class="faq idfaq">
<h4 class="sr">Common Questions</h4>
<dl>
<dl class="faq">
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
@@ -250,27 +273,24 @@
</dl>
</div>
<div class="actions">
<ul>
<li class="action action-next">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
</li>
</ul>
<div class="next-step">
<p class="m-btn-primary">
<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 id="wrapper-review" class="block-photo">
<div id="wrapper-review" class="block block-photo">
<h3 class="title">Verify Your Submission</h3>
<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, <b>${user_full_name}</b>, matches your ID. We will also use this as the name on your certificate.</p>
<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>
@@ -302,37 +322,54 @@
</div>
</div>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<dl>
<dt>
Select your contribution for this course:
</dt>
<dd>
<ul class="pay-options">
<li>
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
</li>
<li>
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
</li>
<li>
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li>
<li class="other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
</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>
</ul>
</dd>
</dl>
</div>
<div class="next-step">
<div class="next">
<p>Photos don't meet the requirements? <a href="#start">Retake the photos</a>.</p>
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
<div class="actions">
<ul>
<li class="action action-next">
<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="course_id" value="${course_id | h}" />
<input type="button" id="pay_button" value="Go to Step 4" name="payment">
</form>
<p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</li>
</ul>
</div>
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</div>
</section>
<section class="support">
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
<p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
</section>

7
lms/templates/verify_student/show_requirements.html
View File

@@ -8,7 +8,7 @@
<section class="wrapper">
<header class="page-header header-white">
<h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2>
<h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
</header>
<section class="progress">
@@ -52,7 +52,7 @@
<h3 class="title">Steps to get Verified</h3>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
</div>
<h4 class="step"><span class="number">1</span> Take Your Photo</h4>
@@ -82,9 +82,8 @@
<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
<div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
<p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
</div>
</section>