choose.html 11.1 KB
Newer Older
1
<%inherit file="../main.html" />
2 3 4 5
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
%>
6

7
<%block name="bodyclass">register verification-process step-select-track</%block>
8
<%block name="pagetitle">
9
    ${_("Enroll In {} | Choose Your Track").format(course_name)}
10
</%block>
11 12

<%block name="js_extra">
13 14 15 16 17 18 19 20 21 22 23
    <script type="text/javascript">
        var expandCallback = function(event) {
            event.preventDefault();
            $(this).next('.expandable-area').slideToggle();
            var title = $(this).parent();
            title.toggleClass('is-expanded');
            if (title.attr("aria-expanded") === "false") {
                title.attr("aria-expanded", "true");
            } else {
                title.attr("aria-expanded", "false");
            }
vkaracic committed
24
        };
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

        $(document).ready(function() {
            $('.expandable-area').slideUp();
            $('.is-expandable').addClass('is-ready');

            $('.is-expandable .title-expand').click(expandCallback);
            $('.is-expandable .title-expand').keypress(function(e) {
                if (e.which == 13) {  // only activate on pressing enter
                    expandCallback.call(this, e); // make sure that we bind `this` correctly
                }
            });

            $('#contribution-other-amt').focus(function() {
                $('#contribution-other').attr('checked',true);
            });

vkaracic committed
41 42 43 44 45 46
            % if use_ecommerce_payment_flow:
            $('input[name=verified_mode]').click(function(e){
                e.preventDefault();
                window.location.href = '${ecommerce_payment_page}?sku=${sku}';
            });
            % endif
47 48
        });
    </script>
49
</%block>
50

51
<%block name="content">
52 53 54
    % if error:
        <div class="wrapper-msg wrapper-msg-error">
            <div class=" msg msg-error">
55
                <i class="msg-icon icon fa fa-exclamation-triangle"></i>
56
                <div class="msg-content">
57
                    <h3 class="title">${_("Sorry, there was an error when trying to enroll you")}</h3>
58
                    <div class="copy">
59
                        <p>${error}</p>
60
                    </div>
61
                </div>
62
            </div>
63
        </div>
64 65
    %endif

66 67 68 69
    <div class="container">
        <section class="wrapper">
            <div class="wrapper-register-choose wrapper-content-main">
                <article class="register-choose content-main">
70 71 72 73 74
                    <header class="page-header content-main">
                        <h3 class="title">
                            ${_("Congratulations!  You are now enrolled in {course_name}").format(course_name=course_name)}
                        </h3>
                    </header>
75 76

                    <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
77 78 79
                        <%
                        b_tag_kwargs = {'b_start': '<b>', 'b_end': '</b>'}
                        %>
80 81 82 83
                        % if "verified" in modes:
                            <div class="register-choice register-choice-certificate">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
84 85 86 87
                                    % if has_credit_upsell:
                                    <h4 class="title">${_("Pursue Academic Credit with a Verified Certificate")}</h4>

                                    <div class="copy">
88
                                        <p>${_("Become eligible for academic credit and highlight your new skills and knowledge with a verified certificate. Use this valuable credential to qualify for academic credit, advance your career, or strengthen your school applications.")}</p>
89 90 91 92 93
                                        <p>
                                            <div class="wrapper-copy-inline">
                                                <div class="copy-inline">
                                                    <h4>${_("Benefits of a Verified Certificate")}</h4>
                                                    <ul>
94 95 96
                                                        <li>${_("{b_start}Eligible for credit:{b_end} Receive academic credit after successfully completing the course").format(**b_tag_kwargs)}</li>
                                                        <li>${_("{b_start}Official:{b_end} Receive an instructor-signed certificate with the institution's logo").format(**b_tag_kwargs)}</li>
                                                        <li>${_("{b_start}Easily shareable:{b_end} Add the certificate to your CV or resume, or post it directly on LinkedIn").format(**b_tag_kwargs)}</li>
97 98 99 100 101 102
                                                    </ul>
                                                </div>
                                                <div class="copy-inline list-actions">
                                                    <ul class="list-actions">
                                                        <li class="action action-select">
                                                            <input type="hidden" name="contribution" value="${min_price}" />
103
                                                            <input type="submit" name="verified_mode" value="${_('Pursue a Verified Certificate')} ($${min_price} USD)" />
104 105 106 107 108 109 110
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </p>
                                    </div>
                                    % else:
111 112
                                    <h4 class="title">${_("Pursue a Verified Certificate")}</h4>

113
                                    <div class="copy">
114
                                        <p>${_("Highlight your new knowledge and skills with a verified certificate. Use this valuable credential to improve your job prospects and advance your career, or highlight your certificate in school applications.")}</p>
115 116 117
                                        <p>
                                            <div class="wrapper-copy-inline">
                                                <div class="copy-inline">
118
                                                    <h4>${_("Benefits of a Verified Certificate")}</h4>
119
                                                    <ul>
120 121 122 123
                                                        <li>${_("{b_start}Official: {b_end}Receive an instructor-signed certificate with the institution's logo").format(**b_tag_kwargs)}</li>
                                                        <li>${_("{b_start}Easily shareable: {b_end}Add the certificate to your CV or resume, or post it directly on LinkedIn").format(**b_tag_kwargs)}</li>
                                                        <li>${_("{b_start}Motivating: {b_end}Give yourself an additional incentive to complete the course").format(**b_tag_kwargs)}</li>
                                                        <li>${_("{b_start}Support our Mission: {b_end} EdX, a non-profit, relies on verified certificates to help fund free education for everyone globally").format(**b_tag_kwargs)}</li>
124 125 126 127 128 129
                                                    </ul>
                                                </div>
                                                <div class="copy-inline list-actions">
                                                    <ul class="list-actions">
                                                        <li class="action action-select">
                                                            <input type="hidden" name="contribution" value="${min_price}" />
130
                                                            <input type="submit" name="verified_mode" value="${_('Pursue a Verified Certificate')} ($${min_price} USD)" />
131 132 133
                                                        </li>
                                                    </ul>
                                                </div>
134
                                            </div>
135 136
                                        </p>
                                    </div>
137
                                    % endif
138 139 140 141
                                </div>
                            </div>
                        % endif

142 143 144 145
                        % if "honor" in modes:
                            <span class="deco-divider">
                                <span class="copy">${_("or")}</span>
                            </span>
146

147 148 149
                            <div class="register-choice register-choice-audit">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
Bill DeRusha committed
150
                                    <h4 class="title">${_("Audit This Course")}</h4>
151
                                    <div class="copy">
Bill DeRusha committed
152
                                        <p>${_("Audit this course for free and have complete access to all the course material, activities, tests, and forums.")}</p>
153 154 155 156 157
                                    </div>
                                </div>

                                <ul class="list-actions">
                                    <li class="action action-select">
Bill DeRusha committed
158
                                        <input type="submit" name="honor_mode" value="${_('Audit This Course')}" />
159 160 161 162 163 164 165 166 167 168 169
                                    </li>
                                </ul>
                            </div>
                        % elif "audit" in modes:
                            <span class="deco-divider">
                                <span class="copy">${_("or")}</span>
                            </span>

                            <div class="register-choice register-choice-audit">
                                <div class="wrapper-copy">
                                    <span class="deco-ribbon"></span>
Bill DeRusha committed
170
                                    <h4 class="title">${_("Audit This Course (No Certificate)")}</h4>
171
                                    <div class="copy">
Bill DeRusha committed
172 173
                                        ## Translators: b_start notes the beginning of a section of text bolded for emphasis, and b_end marks the end of the bolded text.
                                        <p>${_("Audit this course for free and have complete access to all the course material, activities, tests, and forums.  {b_start}Please note that this track does not offer a certificate for learners who earn a passing grade.{b_end}".format(**b_tag_kwargs))}</p>
174 175
                                    </div>
                                </div>
176 177 178

                                <ul class="list-actions">
                                    <li class="action action-select">
179
                                        <input type="submit" name="audit_mode" value="${_('Audit This Course')}" />
180 181 182
                                    </li>
                                </ul>
                            </div>
183 184 185 186 187 188 189 190
                        % endif

                        <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
                    </form>
                </article>
            </div> <!-- /wrapper-content-main -->
        </section>
    </div>
191
</%block>