Skip to content

E
edx-platform
Commit b2ddea7a by Frances Botsford
Options

updated copy for vcert flow

parent 2e3a918d
Showing with 61 additions and 46 deletions
common/templates/course_modes/_contribution.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</li> </li>
% endfor % endfor
<li class="field"> <li class="field contribution-option">
<ul class="field-group field-group-other"> <ul class="field-group field-group-other">
<li class="contribution-option contribution-option-other1"> <li class="contribution-option contribution-option-other1">
<input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} /> <input type="radio" id="contribution-other" name="contribution" value="" ${'checked' if (chosen_price and chosen_price not in suggested_prices) else ''} />
......
common/templates/course_modes/choose.html
...@@ -96,7 +96,7 @@ $(document).ready(function() { ...@@ -96,7 +96,7 @@ $(document).ready(function() {
<dl class="list-faq"> <dl class="list-faq">
<dt class="faq-question">${_("Why do I have to pay?")}</dt> <dt class="faq-question">${_("Why do I have to pay?")}</dt>
<dd class="faq-answer"> <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> <p>${_("As a not-for-profit, edX uses your contribution to support our mission to provide quality education to everyone around the world. While we have established a minimum fee, we ask that you contribute as much as you can.")}</p>
</dd> </dd>
<dt class="faq-question">${_("I'd like to pay more than the minimum. Is my contribution tax deductible?")}</dt> <dt class="faq-question">${_("I'd like to pay more than the minimum. Is my contribution tax deductible?")}</dt>
...@@ -105,29 +105,19 @@ $(document).ready(function() { ...@@ -105,29 +105,19 @@ $(document).ready(function() {
</dd> </dd>
% if "honor" in modes: % if "honor" in modes:
<dt class="faq-question">${_("What if I can't afford it?")}</dt> <dt class="faq-question">${_("What if I can't afford it or don't have the necessary equipment?")}</dt>
<dd class="faq-answer"> <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> <p>${_("If you can't afford the minimum fee, don't have a webcam, credit card, debit card or acceptable ID, you can audit the course for free. You may also elect to pursue an Honor Code certificate, but you will need to tell us why you would like the fee waived below. Then click the 'Select Certificate' button to complete your registration.")}</p>
<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> <ul class="list-fields">
<li class="field field-honor-code checkbox">
<ul class="fields"> <input type="checkbox" name="honor-code" id="honor-code">
<li class="field field-explain"> <label for="honor-code">${_("Select Honor Code Certificate")}</label>
<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> </li>
</ul>
</dd>
<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>
<dd class="faq-answer">
<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"> <li class="field field-explain">
<input type="checkbox" name="honor-code" id="honor-code"> <label for="explain"><span class="sr">${_("Explain your situation: ")}</span>${_("Tell us why you would like the fee waived for this course in at least 180 characters.")}</label>
<label for="honor-code">${_("Select Honor Code Certificate")}</label> <textarea name="explain"></textarea>
</li> </li>
</ul> </ul>
</dd> </dd>
......
lms/static/sass/views/_verification.scss
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
visibility: none; visibility: none;
height: 0; height: 0;
opacity: 0.0; opacity: 0.0;
overflow: scroll; overflow-y: scroll;
} }
} }
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
.expandable-area { .expandable-area {
visibility: visible; visibility: visible;
height: ($baseline*12); height: ($baseline*16);
opacity: 1.0; opacity: 1.0;
} }
} }
...@@ -230,6 +230,14 @@ ...@@ -230,6 +230,14 @@
letter-spacing: 0; letter-spacing: 0;
} }
.checkbox label {
display: inline-block;
}
input[type="checkbox"] {
width: auto;
}
// reset: lists // reset: lists
.list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group { .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group {
@extend .ui-no-list; @extend .ui-no-list;
...@@ -601,6 +609,7 @@ ...@@ -601,6 +609,7 @@
// help - general list // help - general list
.list-help { .list-help {
margin-top: ($baseline/2);
.help-item { .help-item {
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
...@@ -879,6 +888,7 @@ ...@@ -879,6 +888,7 @@
.cam { .cam {
.placeholder-cam { .placeholder-cam {
position: relative;
width: 95%; width: 95%;
height: 375px; height: 375px;
margin: ($baseline/2) auto; margin: ($baseline/2) auto;
...@@ -886,13 +896,23 @@ ...@@ -886,13 +896,23 @@
// placeholders // placeholders
.placeholder-art { .placeholder-art {
opacity: 0.5; opacity: 0.7;
z-index: 100;
.copy {
position: absolute;
top: 40%;
margin: 0 40px;
text-align: center;
}
} }
// previously defined in HTML // previously defined in HTML
video, canvas { video, canvas {
position: relative;
display: block; display: block;
@include size(100% 100%); @include size(100% 100%);
z-index: 500;
} }
} }
...@@ -1397,17 +1417,18 @@ ...@@ -1397,17 +1417,18 @@
.req-activate { .req-activate {
float: left; float: left;
text-align: center; text-align: center;
border-color: $m-pink-l4; border-color: $m-pink-l3;
.title { .title {
@extend .t-title4; @extend .t-title4;
@extend .t-weight4; @extend .t-weight4;
border-bottom-color: $m-pink-l4; border-bottom-color: $m-pink-l3;
background: $m-pink-l5; background: tint($m-pink, 95%);
color: $m-pink;
} }
.placeholder-art { .placeholder-art {
background: $m-pink-l4; background: $m-pink-l1;
} }
.copy-super { .copy-super {
......
lms/templates/verify_student/photo_verification.html
...@@ -79,6 +79,7 @@ ...@@ -79,6 +79,7 @@
<div class="placeholder-cam" id="face_capture_div"> <div class="placeholder-cam" id="face_capture_div">
<div class="placeholder-art"> <div class="placeholder-art">
<p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
</div> </div>
<video id="face_video" autoplay></video><br/> <video id="face_video" autoplay></video><br/>
...@@ -128,7 +129,7 @@ ...@@ -128,7 +129,7 @@
<div class="copy"> <div class="copy">
<dl class="list-faq"> <dl class="list-faq">
<dt class="faq-question">${_("Why do you need my photo?")}</dt> <dt class="faq-question">${_("Why do you need my photo?")}</dt>
<dd class="faq-answer">${_("We need your photo to confirm that you are you.")}</dd> <dd class="faq-answer">${_("As part of the verification process, we need your photo to confirm that you are you.")}</dd>
<dt class="faq-question">${_("What do you do with this picture?")}</dt> <dt class="faq-question">${_("What do you do with this picture?")}</dt>
<dd class="faq-answer">${_("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>
...@@ -155,7 +156,7 @@ ...@@ -155,7 +156,7 @@
<div class="idphoto view"> <div class="idphoto view">
<h3 class="title">${_("Show Us Your ID")}</h3> <h3 class="title">${_("Show Us Your ID")}</h3>
<div class="instruction"> <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 ID so we can match it with your photo and the name on your account.")}</p>
</div> </div>
<div class="wrapper-task"> <div class="wrapper-task">
...@@ -163,6 +164,7 @@ ...@@ -163,6 +164,7 @@
<div class="placeholder-cam" id="photo_id_capture_div"> <div class="placeholder-cam" id="photo_id_capture_div">
<div class="placeholder-art"> <div class="placeholder-art">
<p class="copy">Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission</p>
</div> </div>
<video id="photo_id_video" autoplay></video><br/> <video id="photo_id_video" autoplay></video><br/>
...@@ -193,15 +195,16 @@ ...@@ -193,15 +195,16 @@
</div> </div>
<div class="wrapper-help"> <div class="wrapper-help">
<div class="help help-task photo-tips facetips"> <div class="help help-task photo-tips idtips">
<h4 class="title">${_("Tips on taking a successful photo")}</h4> <h4 class="title">${_("Tips on taking a successful photo")}</h4>
<div class="copy"> <div class="copy">
<ul> <ul class="list-help">
<li>${_("Make sure your ID is well-lit")}</li> <li class="help-item">${_("Make sure your ID is well-lit")}</li>
<li>${_("Check that there isn't any glare")}</li> <li class="help-item">${_("Check that there isn't any glare")}</li>
<li>${_("Ensure that you can see your photo and read your name")}</li> <li class="help-item">${_("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 class="help-item">${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
<li class="help-item">${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -249,7 +252,7 @@ ...@@ -249,7 +252,7 @@
<div class="copy"> <div class="copy">
<!-- FIXME: not sure how to handle variables w/in translation context --> <!-- FIXME: not sure how to handle variables w/in translation context -->
${_("Contact {platform_name}").format(platform_name=settings.PLATFORM_NAME)} ${_("Contact {platform_name}").format(platform_name=settings.PLATFORM_NAME)}
<p>${_("Make sure your full name on your edX account, {}, matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p> <p>${_("Make sure your full name on your edX account ({}) matches your ID. We will also use this as the name on your certificate.").format(user_full_name)}</p>
</div> </div>
<ul class="list-actions"> <ul class="list-actions">
...@@ -263,7 +266,7 @@ ...@@ -263,7 +266,7 @@
<h4 class="title">${_("Review the Photos You've Taken")}</h4> <h4 class="title">${_("Review the Photos You've Taken")}</h4>
<div class="copy"> <div class="copy">
<p>${_("Curabitur blandit tempus porttitor. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.")}</p> <p>${_("Please review the photos below and verify that they meet the requirements listed below.")}</p>
</div> </div>
<ol class="wrapper-photos"> <ol class="wrapper-photos">
...@@ -291,8 +294,9 @@ ...@@ -291,8 +294,9 @@
<h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5> <h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
<ul class="list-help list-tips copy"> <ul class="list-help list-tips copy">
<li class="tip">${_("Be readable (not too far away, no glare)")}</li> <li class="tip">${_("Be readable (not too far away, no glare)")}</li>
<li class="tip">${_("Show your name")}</li> <li class="tip">${_("Show your full name")}</li>
<li class="tip">${_("Match the photo of your face and your name above")}</li> <li class="tip">${_("The photo on your ID matches the photo of your face")}</li>
<li class="tip">${_("The name on your ID matches the name on your account above")}</li>
</ul> </ul>
</div> </div>
</li> </li>
......
lms/templates/verify_student/show_requirements.html
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
<div class=" msg msg-activate"> <div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i> <i class="msg-icon icon-warning-sign"></i>
<div class="msg-content"> <div class="msg-content">
<h3 class="title">${_("You need to activate your account before proceeding")}</h3> <h3 class="title">${_("You need to activate your edX account before proceeding")}</h3>
<div class="copy"> <div class="copy">
<p>${_("Please check your email for further instructions on verifying your new account.")}</p> <p>${_("Please check your email for further instructions on activating your new account.")}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<h3 class="title">${_("What You Will Need to Register")}</h3> <h3 class="title">${_("What You Will Need to Register")}</h3>
<div class="instruction"> <div class="instruction">
<p>${_("There are a few things you will need to register as an ID verified student:")}</p> <p>${_("There are three things you will need to register as an ID verified student:")}</p>
</div> </div>
<ul class="list-reqs ${"account-not-activated" if is_not_active else ""}"> <ul class="list-reqs ${"account-not-activated" if is_not_active else ""}">
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-super">${_("Check Your Email")}</span> <span class="copy-super">${_("Check Your Email")}</span>
<span class="copy-sub">${_("Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum")}.</span> <span class="copy-sub">${_("you need an active edX account before registering - check your email for instructions")}</span>
</p> </p>
</div> </div>
</li> </li>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-super">${_("A photo identification document")}</span> <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> <span class="copy-sub">${_("a drivers license, passport, or other goverment-issued ID with your name and picture on it")}</span>
</p> </p>
</div> </div>
</li> </li>
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-super">${_("A webcam and a modern browser")}</span> <span class="copy-super">${_("A webcam and a modern browser")}</span>
<span class="copy-sub">${_("Firefox, Chrome, or Opera")}</span> <span class="copy-sub">${_("Firefox, Chrome, Safari, IE9+")}</span>
</p> </p>
</div> </div>
</li> </li>
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<div class="copy"> <div class="copy">
<p> <p>
<span class="copy-super">${_("A major credit or debit card")}</span> <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> <span class="copy-sub">${_("Visa, Master Card, American Express, Discover, Diners Club, JCB with Discover logo")}</span>
</p> </p>
</div> </div>
</li> </li>
......
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