Skip to content

E
edx-platform
Commit 5c7e67e9 by Matthew Piatetsky
Options

Create test for new version of track selection page 

LEARNER-1312
parent b1e3a454
Showing with 317 additions and 4 deletions
lms/static/sass/_build-lms-v1.scss
...@@ -82,3 +82,4 @@ ...@@ -82,3 +82,4 @@
// overrides // overrides
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
@import 'shame'; // used for any bad-form/orphaned scss @import 'shame'; // used for any bad-form/orphaned scss
@import 'experiments'; // used for any ab tests and other experiments
lms/static/sass/_experiments.scss 0 → 100644
// edX LMS - experiments
// ====================
// NOTE: use this area for css for ab tests and other experiments.
// Please list the ticket number of the experiment
// --------------------
// LEARNER-1312 Track Selection V2
/* This css was added as part of the LEARNER-1312 experiment */
.v2.register-choice {
margin: 0 2% 20px 0 !important
}
.v2.register-choice-certificate .list-actions {
text-align: left !important;
}
.v2.register-choice-donate .list-actions {
margin-bottom: 0 !important;
}
.v2.register-choice-donate .action-select {
display: inline-block !important;
list-style-type: none !important;
width: 100% !important;
}
.v2.register-choice-donate .donation-link {
display: inline-block !important;
padding: 10px 15px !important;
border-radius: 3px !important;
border: 1px solid #D7548E !important;
box-shadow: 0 2px 1px 0 #982c62 !important;
background: white !important;
text-align: center !important;
color: #D7548E !important;
float: left !important;
}
.v2.register-choice-v2-audit {
height: 250px !important;
background: none !important;
border-top-color: grey !important;
border-top-width: 1px !important;
}
.v2.register-choice-v2-audit .list-actions {
margin-bottom: 0 !important;
}
.v2.register-choice-v2-audit .list-actions input {
background: transparent !important;
color: #0075b4 !important;
box-shadow: none !important;
text-decoration: underline !important;
border: none !important;
}
.v2.register-choice-v2-audit .wrapper-copy-inline {
height: 70px !important;
width: 100% !important;
display: flex !important;
}
.v2.register-choice-v2-audit .wrapper-copy {
width: 70% !important;
height: auto !important;
}
.v2.page-header {
padding-bottom: 0;
}
.v2 img {
margin-top: 20px;
margin-left: 5px;
}
.v2 .donation-link {
font-weight: bold !important;
}
@media (min-width: 320px) {
.v2.register-choice-certificate,
.v2.register-choice-donate,
.v2.register-choice-view {
width: 100%;
}
.v2 .wrapper-copy-inline {
max-height: 115px;
}
.v2.register-choice-v2-audit .wrapper-copy-inline {
display: block !important;
}
.v2.register-choice-v2-audit .copy-inline {
width: 100% !important;
}
.v2.register-choice-v2-audit .list-actions {
width: 100% !important;
margin-top: 20px !important;
text-align: center !important;
}
.v2 .wrapper-copy-inline .wrapper-copy {
width: 100% !important;
}
.v2 .donation-link, .v2 input {
width: 100% !important;
font-size: 15px !important;
}
.v2 img {
display: none;
}
}
@media (min-width: 768px) {
.v2.register-choice-certificate,
.v2.register-choice-donate {
width: 48% !important;
display: inline-block;
min-height: 250px;
}
.v2.register-choice-v2-audit .wrapper-copy-inline {
display: flex !important;
}
.v2.register-choice-v2-audit .copy-inline {
width: 40% !important;
}
.v2.register-choice-v2-audit .list-actions {
margin-top: 0 !important;
text-align: right !important;
}
.v2 .wrapper-copy-inline .wrapper-copy {
width: 58% !important;
}
.v2 .donation-link, .v2 input {
font-size: 15px !important;
width: 55% !important;
}
.v2.register-choice-view {
height: 250px;
}
.v2 img {
display: initial;
}
.v2.register-choice {
margin: 0 2% 20px 0;
}
.v2.deco-divider {
width: 3% !important;
box-sizing: border-box;
float: left;
display: inline-block;
height: 400px;
margin: 0px 0 40px 0 !important;
border-left: 4px solid #f5f5f5 !important;
border-top: none !important;
}
}
@media (min-width: 320px) {
.v2 .visual-reference {
width: 38%;
}
}
@media (min-width: 768px) {
@media (min-width: 320px) {
.v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
}
@media (min-width: 768px) {
.v2.register-choice-donate .wrapper-copy-inline .wrapper-copy, .v2.register-choice-certificate .wrapper-copy-inline .wrapper-copy {
width: 60%;
}
}
@media (min-width: 320px) {
.v2.register-choice-view .wrapper-copy-inline .wrapper-copy {
width: 100%;
}
}
@media (min-width: 320px) {
.v2.register-choice {
padding: 15px !important;
}
}
@media (min-width: 768px) {
.v2.register-choice {
padding: 20px !important;
}
.v2.register-choice.register-choice-view {
margin-right: 0;
}
}
@media screen and (min-width: 769px) {
.v2.register-choice .list-actions:last-child {
float: left;
width: 100%;
margin-top: 0px;
}
}
@media screen and (min-width: 769px) {
.v2.register-choice .action-select {
width: 100% !important;
}
}
.v2 .donation-link:hover,
.v2 .donation-link:focus {
background-color: #D7548E !important;
color: white !important;
text-decoration: none;
}
.v2 .donation-link:hover {
cursor: pointer;
}
.v2 .copy li {
margin-bottom: 5px;
}
.v2.register-choice .copy-inline {
width: 100%;
}
.v2.register-choice-donate {
border-color: #D7548E !important;
}
.v2 .register-choice-view {
border-color: #2991c3 !important;
}
.v2 .visual-reference {
vertical-align: top;
}
.v2 .wrapper-copy-inline .wrapper-copy ul {
margin-top: 0px;
padding-left: 30px;
}
.v2 .img-certificate {
border: 2px solid #009b00 !important;
}
.v2 .img-donate {
border: 2px solid #D7548E !important;
}
.v2 .img-view {
border: 2px solid #2991c3 !important;
}
.v2.register-choice .title {
width: 100%;
margin-bottom: 20px;
}
.v2.register-choice.register-choice-view .action-select {
border: 1px solid transparent !important;
border-radius: 3px;
}
.v2.register-choice.register-choice-view .action-select input {
border: 1px solid transparent !important;
}
.v2.register-choice.register-choice-view .action-select:hover {
border: 1px solid #0075b4 !important;
}
.v2.deco-divider {
display: none !important;
}
}
themes/edx.org/lms/templates/course_modes/choose.html
...@@ -72,9 +72,13 @@ from openedx.core.djangolib.markup import HTML, Text ...@@ -72,9 +72,13 @@ from openedx.core.djangolib.markup import HTML, Text
<div class="wrapper-register-choose wrapper-content-main"> <div class="wrapper-register-choose wrapper-content-main">
<article class="register-choose content-main"> <article class="register-choose content-main">
<header class="page-header content-main"> <header class="page-header content-main">
<h3 class="title"> <h3 class="title v1">
${title_content} ${title_content}
</h3> </h3>
<!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
<h3 class="title v2 hidden">
Next, Select Your Learning Path
</h3>
</header> </header>
<form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form"> <form class="form-register-choose" method="post" name="enrollment_mode_form" id="enrollment_mode_form">
...@@ -82,7 +86,28 @@ from openedx.core.djangolib.markup import HTML, Text ...@@ -82,7 +86,28 @@ from openedx.core.djangolib.markup import HTML, Text
b_tag_kwargs = {'b_start': HTML('<b>'), 'b_end': HTML('</b>')} b_tag_kwargs = {'b_start': HTML('<b>'), 'b_end': HTML('</b>')}
%> %>
% if "verified" in modes: % if "verified" in modes:
<div class="register-choice register-choice-certificate"> <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
<div class="register-choice register-choice-certificate v2 hidden">
<h4 class="title">Pursue a Verified Certificate</h4>
<div class="wrapper-copy-inline">
<div class="wrapper-copy-inline">
<div class="wrapper-copy">
Get premium level support throughout the course and commit to completion up front.
</div>
<img src="/static/images/cert-verified-thumb.png" class="visual-reference img-certificate" alt="Visual representation of a Certificate"/>
</div>
</div>
<div class="copy-inline">
<ul class="list-actions">
<li class="action action-select">
<input type="hidden" name="contribution" value="${min_price}" />
<!-- The class verified_mode should be added to this selector if the experiment is implemented-->
<input type="submit" name="verified_mode" value="Upgrade to a Certificate ($${min_price} USD)" />
</li>
</ul>
</div>
</div>
<div class="register-choice register-choice-certificate v1">
<div class="wrapper-copy"> <div class="wrapper-copy">
<span class="deco-ribbon"></span> <span class="deco-ribbon"></span>
% if has_credit_upsell: % if has_credit_upsell:
...@@ -164,11 +189,50 @@ from openedx.core.djangolib.markup import HTML, Text ...@@ -164,11 +189,50 @@ from openedx.core.djangolib.markup import HTML, Text
</ul> </ul>
</div> </div>
% elif "audit" in modes: % elif "audit" in modes:
<span class="deco-divider"> <span class="deco-divider v1">
<span class="copy">${_("or")}</span>
</span>
<!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
<span class="deco-divider v2 hidden">
<span class="copy">${_("or")}</span> <span class="copy">${_("or")}</span>
</span> </span>
<div class="register-choice register-choice-audit"> <!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
<div class="register-choice register-choice-donate v2 hidden">
<h4 class="title">
Donate to Support our Non-Profit Mission
</h4>
<div class="wrapper-copy-inline">
<div class="wrapper-copy">
Any amount will support our mission to make the world's best education more accessible.
</div>
<img src="/static/images/edx-home-graphic.png" class="visual-reference img-donate" alt="Visual of two hands forming a heart shape" >
</div>
<div class="copy-inline">
<ul class="list-actions">
<li class="action action-select">
<a class="donation-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=MJUBGL54QTCTA">Donate and Continue to Course</a>
</li>
</ul>
</div>
</div>
<!-- This div was added as part of the LEARNER-1312 experiment. The v2 class should be removed if the experiment is implemented-->
<div class="register-choice register-choice-v2-audit register-choice-view v2 hidden">
<h4 class="title">I Don't Want to Upgrade or Donate Today</h4>
<div class="wrapper-copy-inline">
<div class="wrapper-copy">
If you do not want to buy a certificate or donate to edX's mission today, you can skip this step for now and continue to the course.
</div>
<div class="copy-inline">
<ul class="list-actions">
<input type="submit" name="audit_mode" value="Continue to Course">
</ul>
</div>
</div>
</div>
<div class="register-choice register-choice-audit v1">
<div class="wrapper-copy"> <div class="wrapper-copy">
<span class="deco-ribbon"></span> <span class="deco-ribbon"></span>
<h4 class="title">${_("Audit This Course (No Certificate)")}</h4> <h4 class="title">${_("Audit This Course (No Certificate)")}</h4>
......
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