352 lines
18 KiB
HTML
352 lines
18 KiB
HTML
<%!
|
||
from django.core.urlresolvers import reverse
|
||
from courseware.courses import course_image_url, get_course_about_section
|
||
from courseware.access import has_access
|
||
from certificates.models import CertificateStatuses
|
||
from student.models import get_testcenter_registrations_for_user_and_course
|
||
%>
|
||
<%inherit file="main.html" />
|
||
|
||
<%namespace name='static' file='static_content.html'/>
|
||
|
||
<%block name="title"><title>Pearson VUE Test Center Proctoring - Sign Up</title></%block>
|
||
|
||
<%block name="js_extra">
|
||
<script type="text/javascript">
|
||
(function() {
|
||
|
||
$(document).on('ajax:success', '#testcenter_register_form', function(data, json, xhr) {
|
||
if(json.success) {
|
||
// when a form is successfully filled out, return back to the dashboard.
|
||
location.href="${reverse('dashboard')}";
|
||
} else {
|
||
// This is performed by the following code that parses the errors returned as json by the
|
||
// registration form validation.
|
||
var field_errors = json.field_errors;
|
||
var non_field_errors = json.non_field_errors;
|
||
var fieldname;
|
||
var field_errorlist;
|
||
var field_error;
|
||
var error_msg;
|
||
var num_errors = 0;
|
||
var error_html = '';
|
||
// first get rid of any errors that are already present:
|
||
$(".field.error").removeClass('error');
|
||
$("#submission-error-list").html(error_html);
|
||
// start to display new errors:
|
||
$(".submission-error").addClass("is-shown");
|
||
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.
|
||
// for convenience, use the "data-field" attribute to identify the one matching the errant field's name.
|
||
$("[data-field='"+fieldname+"']").addClass('error')
|
||
field_errorlist = field_errors[fieldname];
|
||
for (i=0; i < field_errorlist.length; i+= 1) {
|
||
field_error = field_errorlist[i];
|
||
error_msg = fieldname + ": " + field_error;
|
||
error_html = error_html + '<li class="to-be-determined">' + error_msg + '</li>';
|
||
num_errors += 1;
|
||
}
|
||
}
|
||
for (i=0; i < non_field_errors.length; i+= 1) {
|
||
error_msg = non_field_errors[i];
|
||
error_html = error_html + '<li class="to-be-determined">' + error_msg + '</li>';
|
||
num_errors += 1;
|
||
}
|
||
if (num_errors == 1) {
|
||
error_msg = 'was an error';
|
||
} else {
|
||
error_msg = 'were ' + num_errors + ' errors';
|
||
}
|
||
$('#submission-error-heading').text("We're sorry, but there " + error_msg + " in the information you provided below:")
|
||
$("#submission-error-list").html(error_html);
|
||
}
|
||
});
|
||
|
||
$("form :input").focus(function() {
|
||
$("label[for='" + this.id + "']").addClass("is-focused");
|
||
}).blur(function() {
|
||
$("label").removeClass("is-focused");
|
||
});
|
||
|
||
})(this)
|
||
</script>
|
||
</%block>
|
||
|
||
<section class="testcenter-register container">
|
||
|
||
<section class="introduction">
|
||
<header>
|
||
<hgroup>
|
||
<h2>${get_course_about_section(course, 'university')} ${course.number} ${course.title}</h2>
|
||
|
||
% if registration:
|
||
<h1>Your Pearson VUE Proctored Exam Registration</h1>
|
||
% else:
|
||
<h1>Register for a Pearson VUE Proctored Exam</h1>
|
||
% endif
|
||
</hgroup>
|
||
</header>
|
||
</section>
|
||
|
||
<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 -->
|
||
<div class="message message-status submission-saved">
|
||
<p class="message-copy">Your registration data has been updated and saved.</p>
|
||
</div>
|
||
|
||
<!-- NOTE: BT - Sample markup for error message. To display, add "is-shown" class to div -->
|
||
<div class="message message-status submission-error">
|
||
<p id="submission-error-heading" class="message-copy"></p>
|
||
<ul id="submission-error-list"/>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="content">
|
||
<header>
|
||
<h3 class="is-hidden">Registration Form</h3>
|
||
</header>
|
||
<form id="testcenter_register_form" method="post" data-remote="true" action="/create_test_registration">
|
||
|
||
% if registration:
|
||
<p class="instructions">
|
||
Please complete the following form to update your demographic information used in your Pearson VUE Proctored Exam. Required fields are noted by <strong>bold text and an asterisk (*)</strong>.
|
||
</p>
|
||
% else:
|
||
<p class="instructions">
|
||
Please provide the following demographic information to register for a Pearson VUE Proctored Exam. Required fields are noted by <strong>bold text and an asterisk (*)</strong>.
|
||
</p>
|
||
% endif
|
||
|
||
<!-- include these as pass-throughs -->
|
||
<input id="id_email" type="hidden" name="email" maxlength="75" value="${user.email}" />
|
||
<input id="id_username" type="hidden" name="username" maxlength="75" value="${user.username}" />
|
||
<input id="id_course_id" type="hidden" name="course_id" maxlength="75" value="${course.id}" />
|
||
|
||
<div class="form-fields-primary">
|
||
<fieldset class="group group-form group-form-personalinformation">
|
||
<legend class="is-hidden">Personal Information</legend>
|
||
|
||
<ol class="list-input">
|
||
<li data-field="salutation" class="field">
|
||
<label for="salutation">Salutation</label>
|
||
<input class="short" id="salutation" type="text" name="salutation" value="${testcenteruser.salutation}" placeholder="e.g. Mr., Ms., Mrs., Dr." />
|
||
</li>
|
||
<li data-field="first_name" class="field required">
|
||
<label for="name-first">First Name </label>
|
||
<input id="name-first" type="text" name="first_name" value="${testcenteruser.first_name}" placeholder="e.g. Albert" />
|
||
</li>
|
||
<li data-field="middle_name" class="field">
|
||
<label for="name-middle">Middle Name</label>
|
||
<input id="name-middle" type="text" name="middle_name" value="${testcenteruser.middle_name}" placeholder="" />
|
||
</li>
|
||
<li data-field="last_name" class="field required">
|
||
<label for="name-last">Last Name</label>
|
||
<input id="name-last" type="text" name="last_name" value="${testcenteruser.last_name}" placeholder="e.g. Einstein" />
|
||
</li>
|
||
<li data-field="suffix" class="field">
|
||
<label for="name-suffix">Suffix</label>
|
||
<input class="short" id="name-suffix" type="text" name="suffix" value="${testcenteruser.suffix}" placeholder="e.g. Jr., Sr. " />
|
||
</li>
|
||
</ol>
|
||
</fieldset>
|
||
|
||
<fieldset class="group group-form group-form-mailingaddress">
|
||
<legend class="is-hidden">Mailing Address</legend>
|
||
|
||
<ol class="list-input">
|
||
<li data-field="address_1" class="field required">
|
||
<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" />
|
||
</li>
|
||
<li class="field-group addresses">
|
||
<div data-field="address_2" class="field">
|
||
<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" />
|
||
</div>
|
||
<div data-field="address_3" class="field">
|
||
<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" />
|
||
</div>
|
||
</li>
|
||
<li class="field-group postal">
|
||
<div data-field="city" class="field required">
|
||
<label for="city">City</label>
|
||
<input id="city" class="short" type="text" name="city" value="${testcenteruser.city}" placeholder="e.g. Newark" />
|
||
</div>
|
||
<div data-field="state" class="field">
|
||
<label for="state">State/Province</label>
|
||
<input id="state" class="short" type="text" name="state" value="${testcenteruser.state}" placeholder="e.g. NJ" />
|
||
</div>
|
||
<div data-field="postal_code" class="field">
|
||
<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" />
|
||
</div>
|
||
<div data-field="country" class="field required">
|
||
<label class="short" for="country-code">Country Code</label>
|
||
<input id="country-code" class="short" type="text" name="country" value="${testcenteruser.country}" placeholder="e.g. USA" />
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</fieldset>
|
||
|
||
<fieldset class="group group-form group-form-contactinformation">
|
||
<legend class="is-hidden">Contact & Other Information</legend>
|
||
|
||
<ol class="list-input">
|
||
<li class="field-group phoneinfo">
|
||
<div data-field="phone" class="field required">
|
||
<label for="phone">Phone Number</label>
|
||
<input id="phone" type="text" name="phone" value="${testcenteruser.phone}" placeholder="e.g. 1-55-555-5555" />
|
||
</div>
|
||
<div data-field="extension" class="field">
|
||
<label for="phone-extension">Extension</label>
|
||
<input id="phone-extension" class="short" type="text" name="extension" value="${testcenteruser.extension}" placeholder="e.g. 555" />
|
||
</div>
|
||
<div data-field="phone_country_code" class="field required">
|
||
<label for="phone-countrycode">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" />
|
||
</div>
|
||
</li>
|
||
<li class="field-group faxinfo">
|
||
<div data-field="fax" class="field">
|
||
<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" />
|
||
</div>
|
||
<div data-field="fax_country_code" class="field">
|
||
<label for="fax-countrycode">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" />
|
||
</div>
|
||
</li>
|
||
<li data-field="company_name" class="field">
|
||
<label for="company">Company</label>
|
||
<input id="company" type="text" name="company_name" value="${testcenteruser.company_name}" placeholder="e.g. American Association of University Professors" />
|
||
</li>
|
||
</ol>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="form-fields-secondary">
|
||
<!-- 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:
|
||
<p class="instructions">Fields below this point are not part of the demographics, and are not editable currently.</p>
|
||
% else:
|
||
<p class="instructions">Fields below this point are not part of the demographics, and cannot be changed once submitted.</p>
|
||
% endif
|
||
|
||
<fieldset class="group group-form group-form-optional">
|
||
<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: Bug. It is not enough to set the value of the disabled control. It does
|
||
not display any text. Perhaps we can use a different control. -->
|
||
<ol class="list-input">
|
||
% if registration:
|
||
% if registration.accommodation_request and len(registration.accommodation_request) > 0:
|
||
<li class="field disabled">
|
||
<label for="accommodations">Accommodations Requested</label>
|
||
<textarea class="long" id="accommodations" value="${registration.accommodation_request}" placeholder="" disabled="disabled"></textarea>
|
||
</li>
|
||
% endif
|
||
% else:
|
||
<li data-field="accommodation_request" class="field">
|
||
<label for="accommodations">Accommodations Requested</label>
|
||
<textarea class="long" id="accommodations" name="accommodation_request" value="" placeholder=""></textarea>
|
||
</li>
|
||
% endif
|
||
</ol>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
% if registration:
|
||
<button type="submit" id="submit" class="action action-primary action-update">Update Demographics</button>
|
||
% else:
|
||
<button type="submit" id="submit" class="action action-primary action-register">Register for Pearson VUE Test</button>
|
||
% endif
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<aside>
|
||
% if registration:
|
||
<h3 class="is-hidden">Registration Details</h3>
|
||
|
||
<!-- NOTE: BT - state for if registration is accepted -->
|
||
% if registration.is_accepted():
|
||
<% regstatus = "Registration approved by Pearson" %>
|
||
<div class="message message-status registration-accepted is-shown">
|
||
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
|
||
<p class="registration-number"><span class="label">Registration number: </span> <span class="value">${registration.client_authorization_id}</span></p>
|
||
<p class="message-copy">Write this down! You’ll need it to schedule your exam.</p>
|
||
<a href="https://www1.pearsonvue.com/testtaker/signin/SignInPage/EDX" class="button exam-button">Schedule Pearson exam</a>
|
||
</div>
|
||
% endif
|
||
|
||
% if registration.is_rejected():
|
||
<!-- NOTE: BT - state for if registration is rejected -->
|
||
<% regstatus = "Registration rejected by Pearson: %s" % registration.upload_error_message %>
|
||
<div class="message message-status registration-rejected is-shown">
|
||
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
|
||
<p class="message-copy">Your registration for the Pearson exam has been rejected. Please contact Pearson VUE for further information regarding your registration.</p>
|
||
</div>
|
||
% endif
|
||
|
||
% if registration.is_pending_accommodation():
|
||
<% regstatus = "Registration pending approval of accommodation request" %>
|
||
<!-- NOTE: BT - state for if registration is pending -->
|
||
<div class="message message-status registration-pending is-shown">
|
||
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
|
||
<p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see confirmation here of granted accommodations.
|
||
At that point, your registration will be forwarded to Pearson.</p>
|
||
</div>
|
||
% endif
|
||
|
||
% if registration.is_pending_acknowledgement():
|
||
<% regstatus = "Registration pending acknowledgement by Pearson" %>
|
||
<!-- NOTE: BT - state for if registration is pending -->
|
||
<div class="message message-status registration-pending is-shown">
|
||
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p>
|
||
<p class="message-copy">Your registration for the Pearson exam is pending. Within a few days, you should see a confirmation number here, which can be used to schedule your exam.</p>
|
||
</div>
|
||
% endif
|
||
|
||
% endif
|
||
|
||
<div class="details details-course">
|
||
<!-- NOTE: showing course details -->
|
||
<h4>About ${get_course_about_section(course, 'university')} ${course.number}</h4>
|
||
<p>
|
||
% if course.has_ended():
|
||
<span class="label">Course Completed:</span> <span class="value">${course.end_date_text}</span>
|
||
% elif course.has_started():
|
||
<span class="label">Course Started:</span> <span class="value">${course.start_date_text}</span>
|
||
% else: # hasn't started yet
|
||
<span class="label">Course Starts:</span> <span class="value">${course.start_date_text}</span>
|
||
% endif
|
||
</p>
|
||
</div>
|
||
|
||
<div class="details details-registration">
|
||
<!-- NOTE: showing test details -->
|
||
<h4>Pearson VUE Test Details</h4>
|
||
% if exam_info is not None:
|
||
<!-- TODO: BT - Can we obtain a more human readable value for test-type (e.g. "Final Exam" or "Midterm Exam")? -->
|
||
<ul>
|
||
<li>
|
||
<span class="label">Exam Series Code:</span> <span class="value">${exam_info.get('Exam_Series_Code')}</span>
|
||
</li>
|
||
<li>
|
||
<span class="label">First Eligible Appointment Date:</span> <span class="value">${exam_info.get('First_Eligible_Appointment_Date')}</span>
|
||
</li>
|
||
<li>
|
||
<span class="label">Last Eligible Appointment Date:</span> <span class="value">${exam_info.get('Last_Eligible_Appointment_Date')}</span>
|
||
</li>
|
||
</ul>
|
||
% endif
|
||
</div>
|
||
</aside>
|
||
</section>
|