Skip to content

E
edx-platform
Commit b41f68c8 by Brian Talbot
Options

pearson registration - changing registration status states to progress-based states UI - wip

parent 2ec11e5b
Showing with 238 additions and 72 deletions
lms/static/sass/multicourse/_dashboard.scss
...@@ -488,6 +488,7 @@ ...@@ -488,6 +488,7 @@
.message-copy { .message-copy {
margin-top: 5px; margin-top: 5px;
width: 60%;
} }
} }
......
lms/static/sass/multicourse/_testcenter-register.scss
...@@ -283,9 +283,13 @@ $red: rgb(178, 6, 16); ...@@ -283,9 +283,13 @@ $red: rgb(178, 6, 16);
.message-status { .message-status {
@include border-radius(3px); @include border-radius(3px);
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
padding: $baseline;
border: 1px solid #ccc; border: 1px solid #ccc;
background: tint($yellow,85%); padding: 0;
background: tint($yellow,90%);
> * {
padding: $baseline;
}
p { p {
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
...@@ -298,67 +302,194 @@ $red: rgb(178, 6, 16); ...@@ -298,67 +302,194 @@ $red: rgb(178, 6, 16);
display: block; display: block;
} }
.label { h3, h4, h5 {
margin-right: ($baseline/4); font-family: $sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
} }
.value { h3 {
color: rgba(0,0,0,0.9); border-bottom: 1px solid tint(rgb(0,0,0), 90%);
font-size: 14px; padding-bottom: ($baseline*0.75);
} }
.registration-status { h4 {
margin: 0 0 ($baseline/2) 0; margin-bottom: ($baseline/4);
}
.label { .status-list {
margin: 0 0 ($baseline/2) 0; list-style: none;
color: #ccc; margin: 0;
padding: $baseline;
> .item {
@include clearfix();
margin: 0 0 ($baseline*0.75) 0;
border-bottom: 1px solid tint(rgb(0,0,0), 95%);
padding: 0 0 ($baseline/2) 0;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.title {
margin-bottom: ($baseline/4);
position: relative;
font-weight: bold;
font-size: 14px;
&:after {
position: absolute;
top: 0;
right: $baseline;
margin-left: $baseline;
content: "testing";
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
opacity: 0.5;
}
}
.details, .item {
@include transition(opacity, 0.10s, ease-in-out);
font-size: 13px;
opacity: 0.65;
}
&:before {
@include border-radius($baseline);
position: relative;
top: 3px;
display: block;
float: left;
width: ($baseline/2);
height: ($baseline/2);
margin: 0 ($baseline/2) 0 0;
background: $dark-gray;
content: "";
}
// specific states
&.status-accepted {
&:before {
background: green;
}
.title:after {
color: green;
content: "accepted";
}
}
&.status-pending {
&:before {
background: transparent;
border: 1px dotted gray;
}
.title:after {
color: gray;
content: "pending";
}
}
&.status-rejected {
&:before {
background: $red;
}
.title:after {
color: red;
content: "rejected";
}
}
&:hover {
.details, .item {
opacity: 1.0;
}
}
}
// sub menus
.accommodations-list {
list-style: none;
margin: ($baseline/2) 0;
padding: 0;
font-size: 13px;
.item {
margin: 0 0 ($baseline/4) 0;
padding: 0;
}
} }
} }
.registration-number { // actions
.actions {
@include box-shadow(inset 0 1px 1px 0px rgba(0,0,0,0.2));
border-top: 1px solid tint(rgb(0,0,0), 90%);
padding-top: ($baseline*0.75);
background: tint($yellow,70%);
font-size: 14px;
.label, .value {
display: inline-block;
}
.label { .label {
text-transform: none; margin-right: ($baseline/4);
letter-spacing: 0;
} }
.label, .value { .value {
display: inline-block font-weight: bold;
} }
}
.message-copy { .message-copy {
margin: 0; font-size: 13px;
color: rgba(0,0,0,0.65); }
.exam-button {
@include button(simple, $pink);
display: block;
margin: ($baseline/2) 0 0 0;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
} }
}
.registration-accepted { .registration-number {
.message-copy { .label {
margin: 0 0 ($baseline/2) 0; text-transform: none;
letter-spacing: 0;
}
} }
.exam-button { .registration-accepted {
@include button(simple, $pink);
display: block;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
&:hover { .message-copy {
text-decoration: none; margin: 0 0 ($baseline/2) 0;
} }
} }
} }
.details { > .details {
border-bottom: 1px solid rgba(216, 223, 230, 0.5); border-bottom: 1px solid rgba(216, 223, 230, 0.5);
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
padding: 0 0 $baseline 0; padding: 0 $baseline $baseline $baseline;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 14px; font-size: 14px;
......
lms/templates/dashboard.html
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
% if registration is None and testcenter_exam_info.is_registering(): % if registration is None and testcenter_exam_info.is_registering():
<div class="message message-status is-shown exam-register"> <div class="message message-status is-shown exam-register">
<a href="${testcenter_register_target}" class="exam-button" id="exam_register_button">Register for Pearson exam</a> <a href="${testcenter_register_target}" class="exam-button" id="exam_register_button">Register for Pearson exam</a>
<p class="message-copy">Registration for the Pearson exam is now open.</p> <p class="message-copy">Registration for the Pearson exam is now open and will close on <strong>${testcenter_exam_info.registration_end_date_text}</strong></p>
</div> </div>
% endif % endif
<!-- display a registration for a current exam, even if the registration period is over --> <!-- display a registration for a current exam, even if the registration period is over -->
......
lms/templates/test_center_register.html
...@@ -290,45 +290,79 @@ ...@@ -290,45 +290,79 @@
<aside> <aside>
% if registration: % if registration:
<h3 class="is-hidden">Registration Details</h3>
% if registration.is_accepted(): <!-- REG: Dem accepted, Accom pending, Registration pending -->
<div class="message message-status registration-pending is-shown">
<h3>Pearson Exam Registration Status</h3>
<ol class="status-list">
<li class="item status status-accepted status-demographics">
<h4 class="title">Demographic Information</h4>
<p class="details">The demographic information you most recently provided has been accepted</p>
</li>
<li class="item status status-pending status-accommodations">
<h4 class="title">Accommodations Request</h4>
<p class="details">Your requested accommodations are pending. Within a few days, you should see confirmation here of granted accommodations.</p>
</li>
<li class="item status status-pending status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration is pending. Once all of the above steps are accepted your registration will be forwarded to Pearson and you will be able to schedule an exam.</p>
</li>
</ol>
</div>
<!-- REG: Dem accepted, Accom accepted, Registration accepted -->
<div class="message message-status registration-accepted is-shown"> <div class="message message-status registration-accepted is-shown">
<% regstatus = "Registration approved by Pearson" %> <h3>Pearson Exam Registration Status</h3>
<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> <ol class="status-list">
<p class="message-copy">Write this down! You’ll need it to schedule your exam.</p> <li class="item status status-accepted status-demographics">
<!-- TODO: pull this link out into some settable parameter. --> <h4 class="title">Demographic Information</h4>
<a href="https://www1.pearsonvue.com/testtaker/signin/SignInPage/EDX" class="button exam-button">Schedule Pearson exam</a> <p class="details">The demographic information you most recently provided has been accepted</p>
</li>
<li class="item status status-accepted status-accommodations">
<h4 class="title">Accommodations Request</h4>
<p class="details">Your requested accommodations have been accepted and include:</p>
<ul class="accommodations-list">
<li class="item">Extra Time - Double Time</li>
<li class="item">Separate Room & Reader/Recorder</li>
<li class="item">Equipment</li>
</ul>
</li>
<li class="item status status-accepted status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration has been accepted and has been forwarded to Pearson. You are now able to schedule an exam.</p>
</li>
</ol>
<div class="actions">
<span class="label">Registration number: </span> <span class="value">12345678901</span>
<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>
</div> </div>
% endif
<!-- REG: Dem rejected, Accom none, Registration rejected -->
% if registration.is_rejected():
<!-- TODO: the registration may be failed because of the upload of the demographics or of the upload of the registration.
Fix this so that the correct upload error message is displayed. -->
<div class="message message-status registration-rejected is-shown"> <div class="message message-status registration-rejected is-shown">
<% regstatus = "Registration rejected by Pearson: %s" % registration.upload_error_message %> <h3>Pearson Exam Registration Status</h3>
<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():
<div class="message message-status registration-pending is-shown">
<% regstatus = "Registration pending approval of accommodation request" %>
<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(): <ol class="status-list">
<div class="message message-status registration-pending is-shown"> <li class="item status status-rejected status-demographics">
<% regstatus = "Registration pending acknowledgement by Pearson" %> <h4 class="title">Demographic Information</h4>
<p class="registration-status"><span class="label">Registration Status: </span><span class="value">${regstatus}</span></p> <p class="details">The demographic information you most recently provided has been rejected by Pearson. You can correct it and submit again</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> </li>
<li class="item status status-rejected status-registration">
<h4 class="title">Registration Request</h4>
<p class="details">Your exam registration has been rejected by Pearson. <strong>You currently cannot schedule an exam</strong>.</p>
</li>
</ol>
<div class="actions">
<span class="label">Pearson Testing Support</span> <span class="value">1-800-555-5555</span>
<p class="message-copy">Please contact the number above for further questions about your test</p>
</div>
</div> </div>
% endif
% endif % endif
......
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