Skip to content

E
edx-platform
Commit 15b23a16 by David Ormsbee
Options

Merge in latest design for enrollment mode selection

parent 2012bb01
Showing with 78 additions and 32 deletions
common/templates/course_modes/choose.html
...@@ -2,16 +2,29 @@ ...@@ -2,16 +2,29 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%block name="bodyclass">register verification select</%block> <%block name="bodyclass">register verification select-track</%block>
<%block name="js_extra">
<script type="text/javascript">
$(document).ready(function() {
$( ".more" ).slideUp();
$( ".expand" ).click(function(e) {
e.preventDefault();
$(this).next().slideToggle();
});
});
</script>
</%block>
<%block name="content"> <%block name="content">
<div class="container"> <div class="container">
<section class="wrapper"> <section class="wrapper">
<header class="page-header"> <header class="page-header header-white">
<h2 class="title">You are registering for ${course_name} (ID Verified)</h2> <h2 class="title header-white-title">You are registering for ${course_name} (ID Verified)</h2>
</header> </header>
<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 method="post" name="enrollment_mode_form" id="enrollment_mode_form">
...@@ -19,57 +32,95 @@ ...@@ -19,57 +32,95 @@
% if "audit" in modes: % if "audit" in modes:
<div class="select"> <div class="select">
<div class="block block-audit"> <div class="block block-audit">
<h4 class="title">Audit</h4> <div class="wrap-copy">
<h4 class="title">Audit This Course</h4>
<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 class="wrap-action">
<p class="m-btn-primary">
<input type="submit" name="mode" value="Select Audit" /> <input type="submit" name="mode" value="Select Audit" />
<!-- Design original:
<p class="btn">
<a href="">Select Audit</a>
</p> </p>
-->
</div> </div>
</div> </div>
<div class="divider"><p>or</p></div>
% endif % endif
% if "verified" in modes: % if "verified" in modes:
<div class="select"> <div class="select">
<div class="block block-cert"> <div class="block block-cert">
<h4 class="title">Certificate of Achievement</h4> <h4 class="title">Certificate of Achievement</h4>
<span class="ribbon"></span>
<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>
<form>
<dl> <dl>
<dt> <dt>
Select your contribution for this course (in ${modes["verified"].currency.upper()|h}): Select your contribution for this course:
</dt> </dt>
<dd> <dd>
<ul> <ul class="pay-options">
% for price in modes["verified"].suggested_prices.split(","): % for price in modes["verified"].suggested_prices.split(","):
<li> <li>
<input type="radio" name="contribution" value="${price|h}"><label for="contribution-${price|h}">$${price}</label> <input type="radio" name="contribution" value="${price|h}"><label for="contribution-${price|h}">$${price} ${modes["verified"].currency.upper()}</label>
</li> </li>
% endfor % endfor
<li>
<input type="radio" name="contribution" value=""/> <li class="other1">
<label for="contribution-other-amt">Other Amount</label> <input type="radio" id="contribution-other" name="contribution" value=""/>
$<input type="text" name="contribution-other-amt" id="contribution-other-amt" /> <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> </li>
</ul> </ul>
</dd> </dd>
</dl> </dl>
<p class="tip tip-input expand">
<a href="">Why do I have to pay? What if I don't meet all the requirements?</a> <a href="">Why do I have to pay? What if I don't meet all the requirements?</a>
</p>
<img src="" /> <div class="more">
<dl class="faq">
<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>
<p> % if "honor" in modes:
<dt>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.
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.
<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>
</dd>
</dl>
</dd>
% endif
<dt>I'd like to pay more than the minimum. Is my contribution tax deductible?</dt>
<dd>Please check with your tax advisor to determine whether your contribution is tax deductible.</dd>
% if "honor" in modes:
<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.
<p><input type="checkbox" name="honor-code"> <label for="honor-code">Select Honor Code Certificate</label></p>
</dd>
% endif
</dl>
</div>
<hr />
<p class="tip">
<a href="">What is an ID Verified Certificate?</a> <a href="">What is an ID Verified Certificate?</a>
</p> </p>
<!-- <p class="m-btn-primary green">
<p class="btn">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a>
</p>
-->
<input type="submit" name="mode" value="Select Certificate" /> <input type="submit" name="mode" value="Select Certificate" />
</p>
</div> </div>
<div class="tips"> <div class="tips">
...@@ -77,18 +128,13 @@ ...@@ -77,18 +128,13 @@
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> 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> </p>
</div> </div>
</div>
% endif % endif
</div>
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form> </form>
<p class="tip"><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p>
<p><i class="icon-question-sign"></i> Have questions? <a href="">Check out our FAQs.</a></p> <p class="tip">Not the course you wanted? <a href="">Return to our course listings</a>.</p>
<p>Not the course you wanted? <a href="">Return to our course listings</a>.</p> </section>
</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