Skip to content

E
edx-platform
Commit 2ec11e5b by Brian Talbot
Options

pearson registration - refined error output and accommodation field display toggling

parent e57656e2
Showing with 186 additions and 83 deletions
lms/static/sass/multicourse/_testcenter-register.scss
...@@ -97,6 +97,10 @@ $red: rgb(178, 6, 16); ...@@ -97,6 +97,10 @@ $red: rgb(178, 6, 16);
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
text-align: center; text-align: center;
} }
&.error {
}
} }
.list-input { .list-input {
...@@ -115,14 +119,13 @@ $red: rgb(178, 6, 16); ...@@ -115,14 +119,13 @@ $red: rgb(178, 6, 16);
padding-bottom: 0; padding-bottom: 0;
} }
&.disabled { &.disabled, &.submitted {
color: rgba(0,0,0,.25); color: rgba(0,0,0,.25);
label { label {
color: rgba(0,0,0,.25); cursor: text;
&:after { &:after {
content: "(Disabled Currently)";
margin-left: ($baseline/4); margin-left: ($baseline/4);
} }
} }
...@@ -133,6 +136,28 @@ $red: rgb(178, 6, 16); ...@@ -133,6 +136,28 @@ $red: rgb(178, 6, 16);
} }
} }
&.disabled {
label:after {
color: rgba(0,0,0,.35);
content: "(Disabled Currently)";
}
}
&.submitted {
label:after {
content: "(Previously Submitted and Not Editable)";
}
.value {
@include border-radius(3px);
border: 1px solid #C8C8C8;
padding: $baseline ($baseline*0.75);
background: #FAFAFA;
font-family: $sans-serif;
}
}
&.error { &.error {
label { label {
...@@ -228,6 +253,28 @@ $red: rgb(178, 6, 16); ...@@ -228,6 +253,28 @@ $red: rgb(178, 6, 16);
} }
} }
// form - specifics
.form-fields-secondary {
display: none;
&.is-shown {
display: block;
}
}
.form-fields-secondary-visibility {
display: block;
margin: 0;
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 13px;
text-align: right;
&.is-hidden {
display: none;
}
}
// aside // aside
aside { aside {
...@@ -382,10 +429,54 @@ $red: rgb(178, 6, 16); ...@@ -382,10 +429,54 @@ $red: rgb(178, 6, 16);
&.submission-error { &.submission-error {
border: 1px solid tint($red,85%); border: 1px solid tint($red,85%);
background: tint($red,95%); background: tint($red,95%);
font-size: 14px;
#submission-error-heading {
margin-bottom: ($baseline/2);
border-bottom: 1px solid tint($red, 85%);
padding-bottom: ($baseline/2);
font-weight: bold;
}
.field-name, .field-error {
display: inline-block;
}
.field-name {
margin-right: ($baseline/4);
}
.field-error {
color: tint($red, 55%);
}
p { p {
color: $red; color: $red;
} }
ul {
margin: 0 0 ($baseline/2) 0;
padding: 0;
list-style: none;
li {
margin-bottom: ($baseline/2);
padding: 0;
span {
color: $red;
}
a {
color: $red;
text-decoration: none;
&:hover, &:active {
text-decoration: underline;
}
}
}
}
} }
// submission success // submission success
......
lms/templates/test_center_register.html
...@@ -14,6 +14,15 @@ ...@@ -14,6 +14,15 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
$(".form-fields-secondary-visibility").click(function(e){
console.log("clicked");
e.preventDefault();
$(this).addClass("is-hidden");
$(".form-fields-secondary").addClass("is-shown");
});
$(document).on('ajax:success', '#testcenter_register_form', function(data, json, xhr) { $(document).on('ajax:success', '#testcenter_register_form', function(data, json, xhr) {
if(json.success) { if(json.success) {
// when a form is successfully filled out, return back to the dashboard. // when a form is successfully filled out, return back to the dashboard.
...@@ -30,19 +39,24 @@ ...@@ -30,19 +39,24 @@
var num_errors = 0; var num_errors = 0;
var error_html = ''; var error_html = '';
// first get rid of any errors that are already present: // first get rid of any errors that are already present:
$(".field.error").removeClass('error'); $(".field.error", ".form-actions").removeClass('error');
$("#submission-error-list").html(error_html); $("#submission-error-list").html(error_html);
// start to display new errors: // start to display new errors:
$(".form-actions").addClass("error");
$(".submission-error").addClass("is-shown"); $(".submission-error").addClass("is-shown");
for (fieldname in field_errors) { for (fieldname in field_errors) {
// to inform a user of what field the error occurred on, add a class of .error to the .field element. // to inform a user of what field the error occurred on, add a class of .error to the .field element.
// for convenience, use the "data-field" attribute to identify the one matching the errant field's name. // for convenience, use the "data-field" attribute to identify the one matching the errant field's name.
$("[data-field='"+fieldname+"']").addClass('error') var field_id = "field-" + fieldname;
var field_label = $("[id='"+field_id+"'] label").text();
$("[id='"+field_id+"']").addClass('error');
field_errorlist = field_errors[fieldname]; field_errorlist = field_errors[fieldname];
for (i=0; i < field_errorlist.length; i+= 1) { for (i=0; i < field_errorlist.length; i+= 1) {
field_error = field_errorlist[i]; field_error = field_errorlist[i];
error_msg = fieldname + ": " + field_error; error_msg = '<span class="field-name">' + field_label + ':</span>' + '<span class="field-error">' + field_error + '</span>';
error_html = error_html + '<li class="to-be-determined">' + error_msg + '</li>'; error_html = error_html + '<li>' + '<a href="#field-' + fieldname + '">' + error_msg + '</a></li>';
num_errors += 1; num_errors += 1;
} }
} }
...@@ -89,20 +103,6 @@ ...@@ -89,20 +103,6 @@
<section class="status"> <section class="status">
<!-- NOTE: BT - registration data updated confirmation message - in case upon successful submit we're directing
folks back to this view. To display, add "is-shown" class to div.
NOTE: BW - not planning to do this, but instead returning user to student dashboard.
<div class="message message-status submission-saved">
<p class="message-copy">Your registration data has been updated and saved.</p>
</div>
-->
<!-- Markup for error message will be written here by ajax handler. To display, it adds "is-shown" class to div,
and adds specific error messages under the list. -->
<div class="message message-status submission-error">
<p id="submission-error-heading" class="message-copy"></p>
<ul id="submission-error-list"/>
</div>
</section> </section>
<section class="content"> <section class="content">
...@@ -132,25 +132,25 @@ ...@@ -132,25 +132,25 @@
<legend class="is-hidden">Personal Information</legend> <legend class="is-hidden">Personal Information</legend>
<ol class="list-input"> <ol class="list-input">
<li data-field="salutation" class="field"> <li data-field="salutation" class="field" id="field-salutation">
<label for="salutation">Salutation</label> <label for="salutation">Salutation</label>
<input class="short" id="salutation" type="text" name="salutation" value="${testcenteruser.salutation}" placeholder="e.g. Mr., Ms., Mrs., Dr." /> <input class="short" id="salutation" type="text" name="salutation" value="${testcenteruser.salutation}" placeholder="e.g. Mr., Ms., Mrs., Dr." />
</li> </li>
<li data-field="first_name" class="field required"> <li data-field="first_name" class="field required" id="field-first_name">
<label for="name-first">First Name </label> <label for="first_name">First Name </label>
<input id="name-first" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" /> <input id="first_name" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" />
</li> </li>
<li data-field="middle_name" class="field"> <li data-field="middle_name" class="field" id="field-middle_name">
<label for="name-middle">Middle Name</label> <label for="middle_name">Middle Name</label>
<input id="name-middle" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" /> <input id="middle_name" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
</li> </li>
<li data-field="last_name" class="field required"> <li data-field="last_name" class="field required" id="field-last_name">
<label for="name-last">Last Name</label> <label for="last_name">Last Name</label>
<input id="name-last" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" /> <input id="last_name" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" />
</li> </li>
<li data-field="suffix" class="field"> <li data-field="suffix" class="field" id="field-suffix">
<label for="name-suffix">Suffix</label> <label for="suffix">Suffix</label>
<input class="short" id="name-suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="e.g. Jr., Sr. " /> <input class="short" id="suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="e.g. Jr., Sr. " />
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
...@@ -159,36 +159,36 @@ ...@@ -159,36 +159,36 @@
<legend class="is-hidden">Mailing Address</legend> <legend class="is-hidden">Mailing Address</legend>
<ol class="list-input"> <ol class="list-input">
<li data-field="address_1" class="field required"> <li data-field="address_1" class="field required" id="field-address_1">
<label class="long" for="address-1">Address Line #1</label> <label class="long" for="address_1">Address Line #1</label>
<input id="address-1" type="text" name="address_1" value="${testcenteruser.address_1}" placeholder="e.g. 112 Mercer Street" /> <input id="address_1" type="text" name="address_1" value="${testcenteruser.address_1}" placeholder="e.g. 112 Mercer Street" />
</li> </li>
<li class="field-group addresses"> <li class="field-group addresses">
<div data-field="address_2" class="field"> <div data-field="address_2" class="field" id="field-address_2">
<label for="address-2">Address Line #2</label> <label for="address_2">Address Line #2</label>
<input id="address-2" class="long" type="text" name="address_2" value="${testcenteruser.address_2}" placeholder="e.g. Apartment 123" /> <input id="address_2" class="long" type="text" name="address_2" value="${testcenteruser.address_2}" placeholder="e.g. Apartment 123" />
</div> </div>
<div data-field="address_3" class="field"> <div data-field="address_3" class="field" id="field-address_3">
<label for="address-3">Address Line #3</label> <label for="address_3">Address Line #3</label>
<input id="address-3" class="long" type="text" name="address_3" value="${testcenteruser.address_3}" placeholder="e.g. Attention: Albert Einstein" /> <input id="address_3" class="long" type="text" name="address_3" value="${testcenteruser.address_3}" placeholder="e.g. Attention: Albert Einstein" />
</div> </div>
</li> </li>
<li class="field-group postal"> <li class="field-group postal">
<div data-field="city" class="field required"> <div data-field="city" class="field required" id="field-city">
<label for="city">City</label> <label for="city">City</label>
<input id="city" class="short" type="text" name="city" value="${testcenteruser.city}" placeholder="e.g. Newark" /> <input id="city" class="short" type="text" name="city" value="${testcenteruser.city}" placeholder="e.g. Newark" />
</div> </div>
<div data-field="state" class="field"> <div data-field="state" class="field" id="field-state">
<label for="state">State/Province</label> <label for="state">State/Province</label>
<input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="e.g. NJ" /> <input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="e.g. NJ" />
</div> </div>
<div data-field="postal_code" class="field"> <div data-field="postal_code" class="field" id="field-postal_code">
<label for="postal-code">Postal Code</label> <label for="postal_code">Postal Code</label>
<input id="postal-code" class="short" type="text" name="postal_code" value="${testcenteruser.postal_code}" placeholder="e.g. 08540" /> <input id="postal_code" class="short" type="text" name="postal_code" value="${testcenteruser.postal_code}" placeholder="e.g. 08540" />
</div> </div>
<div data-field="country" class="field required"> <div data-field="country" class="field required" id="field-country">
<label class="short" for="country-code">Country Code</label> <label class="short" for="country">Country Code</label>
<input id="country-code" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="e.g. USA" /> <input id="country" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="e.g. USA" />
</div> </div>
</li> </li>
</ol> </ol>
...@@ -199,67 +199,66 @@ ...@@ -199,67 +199,66 @@
<ol class="list-input"> <ol class="list-input">
<li class="field-group phoneinfo"> <li class="field-group phoneinfo">
<div data-field="phone" class="field required"> <div data-field="phone" class="field required" id="field-phone">
<label for="phone">Phone Number</label> <label for="phone">Phone Number</label>
<input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" /> <input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" />
</div> </div>
<div data-field="extension" class="field"> <div data-field="extension" class="field" id="field-extension">
<label for="phone-extension">Extension</label> <label for="extension">Extension</label>
<input id="phone-extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" /> <input id="extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
</div> </div>
<div data-field="phone_country_code" class="field required"> <div data-field="phone_country_code" class="field required" id="field-phone_country_code">
<label for="phone-countrycode">Phone Country Code</label> <label for="phone_country_code">Phone Country Code</label>
<input id="phone-countrycode" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" placeholder="e.g. USA" /> <input id="phone_country_code" class="short" type="text" name="phone_country_code" value="${testcenteruser.phone_country_code}" placeholder="e.g. USA" />
</div> </div>
</li> </li>
<li class="field-group faxinfo"> <li class="field-group faxinfo">
<div data-field="fax" class="field"> <div data-field="fax" class="field" id="field-fax">
<label for="fax">Fax Number</label> <label for="fax">Fax Number</label>
<input id="fax" type="text" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" /> <input id="fax" type="text" class="short" name="fax" value="${testcenteruser.fax}" placeholder="e.g. 1-55-555-5555" />
</div> </div>
<div data-field="fax_country_code" class="field"> <div data-field="fax_country_code" class="field" id="field-fax_country_code">
<label for="fax-countrycode">Fax Country Code</label> <label for="fax_country_code">Fax Country Code</label>
<input id="fax-countrycode" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" placeholder="e.g. USA" /> <input id="fax_country_code" class="short" type="text" name="fax_country_code" value="${testcenteruser.fax_country_code}" placeholder="e.g. USA" />
</div> </div>
</li> </li>
<li data-field="company_name" class="field"> <li data-field="company_name" class="field" id="field-company_name">
<label for="company">Company</label> <label for="company_name">Company</label>
<input id="company" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" /> <input id="company_name" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" />
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
</div> </div>
<div class="form-fields-secondary"> % if registration:
<!-- NOTE: BT - Assuming accommodations cannot be edited after a user originally submits registration, I've disabled the field and provided different text. Correct if this is not the case. --> % if registration.accommodation_request and len(registration.accommodation_request) > 0:
<div class="form-fields-secondary is-shown" id="form-fields-secondary">
% endif
% else:
<div class="form-fields-secondary" id="form-fields-secondary">
% endif
% if registration: % if registration:
<p class="instructions">Fields below this point are not part of the demographics, and are not editable currently.</p> <p class="instructions">Fields below this point are not part of your demographic information, and <strong>are not editable currently</strong>.</p>
% else: % else:
<p class="instructions">Fields below this point are not part of the demographics, and cannot be changed once submitted.</p> <p class="instructions">Fields below this point are not part of your demographic information, <strong>and cannot be changed once submitted</strong>.</p>
% endif % endif
<fieldset class="group group-form group-form-optional"> <fieldset class="group group-form group-form-optional">
<legend class="is-hidden">Optional Information</legend> <legend class="is-hidden">Optional Information</legend>
<!-- Only display an accommodation request if one had been specified at registration time.
So only prompt for an accommodation request if no registration exists.
BW to BT: It is not enough to set the value of the disabled control. It does
not display any text. Perhaps we can use a different markup instead of a control. -->
<ol class="list-input"> <ol class="list-input">
% if registration: % if registration:
% if registration.accommodation_request and len(registration.accommodation_request) > 0: % if registration.accommodation_request and len(registration.accommodation_request) > 0:
<li class="field disabled"> <li data-field="accommodation_request" class="field submitted" id="field-accommodation_request">
<label for="accommodations">Accommodations Requested</label> <label for="accommodation_request">Accommodations Requested</label>
<!-- <p class="value" id="accommodations">${registration.accommodation_request}</p>
<textarea class="long" id="accommodations" value="${registration.accommodation_request}" placeholder="" disabled="disabled"></textarea>
-->
<p id="accommodations">${registration.accommodation_request}</p>
</li> </li>
% endif % endif
% else: % else:
<li data-field="accommodation_request" class="field"> <li data-field="accommodation_request" class="field" id="field-accommodation_request">
<label for="accommodations">Accommodations Requested</label> <label for="accommodation_request">Accommodations Requested</label>
<textarea class="long" id="accommodations" name="accommodation_request" value="" placeholder=""></textarea> <textarea class="long" id="accommodation_request" name="accommodation_request" value="" placeholder=""></textarea>
</li> </li>
% endif % endif
</ol> </ol>
...@@ -272,8 +271,21 @@ ...@@ -272,8 +271,21 @@
% else: % else:
<button type="submit" id="submit" class="action action-primary action-register">Register for Pearson VUE Test</button> <button type="submit" id="submit" class="action action-primary action-register">Register for Pearson VUE Test</button>
% endif % endif
</div>
<div class="message message-status submission-error">
<p id="submission-error-heading" class="message-copy"></p>
<ul id="submission-error-list"></ul>
</div>
</div>
</form> </form>
% if registration:
% if registration.accommodation_request and len(registration.accommodation_request) > 0:
<a class="actions form-fields-secondary-visibility is-hidden" href="#form-fields-secondary">Looking for Optional Accomodations?</a>
% endif
% else:
<a class="actions form-fields-secondary-visibility" href="#form-fields-secondary">Looking for Optional Accomodations?</a>
% endif
</section> </section>
<aside> <aside>
......
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