Skip to content

E
edx-ora2
Commit 44d69399 by Christina Roberts Committed by GitHub
Options

Merge pull request #940 from edx/christina/colors 

Fix color contrast issues in ORA
parents a9650aba 9f290006
Showing with 212 additions and 365 deletions
openassessment/templates/openassessmentblock/oa_base.html
...@@ -21,12 +21,14 @@ ...@@ -21,12 +21,14 @@
<ol class="openassessment__steps"> <ol class="openassessment__steps">
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
<li class="{{ assessment.class_id }} openassessment__steps__step is--loading"> <li class="{{ assessment.class_id }} openassessment__steps__step is--loading">
<header class="step__header"> <header class="step__header ui-slidable__container">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> <button class="ui-slidable" aria-expanded="false" disabled>
<span class="wrapper--copy"> <span class="step__counter"></span>
<span class="step__label">{% trans assessment.title %}</span> <span class="wrapper--copy">
</span> <span class="step__label">{% trans assessment.title %}</span>
</span>
</button>
<span class="step__status"> <span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span> <span class="step__status__label">{% trans "This step's status:" %}</span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% block list_item %} {% block list_item %}
<li <li
id="openassessment__peer-assessment__{{ xblock_id }}" id="openassessment__peer-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}" class="openassessment__steps__step step--peer-assessment is--in-progress is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}"
data-submission-uuid="{{ peer_submission.uuid }}" data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1" tabindex="-1"
> >
......
openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1"> <li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--incomplete is--showing ui-slidable__container" tabindex="-1">
{% endblock %} {% endblock %}
......
openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load i18n %} {% load i18n %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li class="openassessment__steps__step step--response is--showing ui-slidable__container" <li class="openassessment__steps__step step--response is--in-progress is--showing ui-slidable__container"
tabindex="-1"> tabindex="-1">
{% endblock %} {% endblock %}
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment__{{ xblock_id }}" <li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}" class="openassessment__steps__step step--self-assessment is--showing is--in-progress ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1"> tabindex="-1">
{% endblock %} {% endblock %}
......
openassessment/templates/openassessmentblock/student_training/student_training.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% load tz %} {% load tz %}
{% spaceless %} {% spaceless %}
{% block list_item %} {% block list_item %}
<li class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}" <li class="openassessment__steps__step step--student-training is--showing is--in-progress ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1"> tabindex="-1">
{% endblock %} {% endblock %}
......
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/sass/oa/elements/_staff.scss
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.ui-staff__title { .ui-staff__title {
@extend %t-heading; @extend %t-heading;
color: $copy-staff-color; color: $heading-staff-color;
} }
.ui-staff__subtitle { .ui-staff__subtitle {
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
.ui-staff__content { .ui-staff__content {
margin-top: $baseline-v; margin-top: $baseline-v;
color: $copy-staff-color; color: $heading-staff-color;
} }
.ui-staff__content__section { .ui-staff__content__section {
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
.wrapper--content { .wrapper--content {
padding: $baseline-v ($baseline-h/2); padding: $baseline-v ($baseline-h/2);
background-color: $bg-content; background-color: $bg-content;
color: $copy-color;
} }
} }
...@@ -91,14 +92,10 @@ ...@@ -91,14 +92,10 @@
.openassessment_student_info_form { .openassessment_student_info_form {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
.list--actions__item { .action--submit-username {
@include text-align(left); @extend %btn--primary;
.action--submit-username {
@extend %btn--secondary;
margin-left: 0; @include margin-left(0);
}
} }
} }
...@@ -124,7 +121,7 @@ ...@@ -124,7 +121,7 @@
} }
th, td { th, td {
border: 1px solid rgba($copy-staff-color, 0.25); border: 1px solid rgba($heading-staff-color, 0.25);
padding: ($baseline-v/2) ($baseline-h/4); padding: ($baseline-v/2) ($baseline-h/4);
} }
...@@ -168,7 +165,7 @@ ...@@ -168,7 +165,7 @@
.staff-assessment__display__title { .staff-assessment__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
} }
...@@ -319,7 +316,7 @@ ...@@ -319,7 +316,7 @@
.staff-info__cancel-submission__content { .staff-info__cancel-submission__content {
.comments__label { .comments__label {
color: $copy-secondary-color; color: $copy-color;
} }
.cancel_submission_comments { .cancel_submission_comments {
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -27,10 +27,6 @@ ...@@ -27,10 +27,6 @@
// Developer styles for Staff Section // Developer styles for Staff Section
// -------------------- // --------------------
// edX constants
$lighter-base-font-color: rgb(100,100,100);
$link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/
.wrapper--openassessment .wrapper--staff-area { .wrapper--openassessment .wrapper--staff-area {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
...@@ -50,7 +46,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -50,7 +46,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
font-size: 12px; font-size: 12px;
border-radius: ($baseline-v/4); border-radius: ($baseline-v/4);
text-transform: uppercase; text-transform: uppercase;
color: $lighter-base-font-color; color: $copy-color;
background-color: $shadow-l2; background-color: $shadow-l2;
&.is--active { &.is--active {
...@@ -64,7 +60,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -64,7 +60,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
&:hover { &:hover {
color: white; color: white;
background-color: $link-hover; background-color: $action-primary-color;
} }
} }
} }
...@@ -121,7 +117,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -121,7 +117,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
} }
.student__answer__display__content { .student__answer__display__content {
border: 1px solid rgba($copy-staff-color, 0.25); border: 1px solid rgba($heading-staff-color, 0.25);
padding: ($baseline-v/2) ($baseline-h/4); padding: ($baseline-v/2) ($baseline-h/4);
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
} }
...@@ -163,7 +159,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -163,7 +159,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
.student-training__display__title { .student-training__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
.student-training__display__response { .student-training__display__response {
...@@ -1120,7 +1116,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -1120,7 +1116,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
.leaderboard__title { .leaderboard__title {
@extend %t-superheading; @extend %t-superheading;
color: $heading-primary-color; color: $heading-color;
} }
.list.leaderboard__score__list { .list.leaderboard__score__list {
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -84,6 +84,11 @@ ...@@ -84,6 +84,11 @@
} }
} }
// STATE: is in-progress
&.is--in-progress {
border-top-color: $action-primary-color;
}
// STATE: is complete // STATE: is complete
&.is--complete { &.is--complete {
border-top-color: $color-complete; border-top-color: $color-complete;
...@@ -202,7 +207,7 @@ ...@@ -202,7 +207,7 @@
@extend %copy-3; @extend %copy-3;
@extend %t-strong; @extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style margin-bottom: 0; // FIX: need to reset base label style
color: $copy-secondary-color; color: $copy-color;
} }
.answer__value { .answer__value {
...@@ -247,7 +252,7 @@ ...@@ -247,7 +252,7 @@
@extend %copy-3; @extend %copy-3;
@include margin-right($baseline-v); @include margin-right($baseline-v);
color: $copy-secondary-color; color: $copy-color;
@include media($bp-dm) { @include media($bp-dm) {
@include bidi-span-columns(6 of 8); @include bidi-span-columns(6 of 8);
...@@ -274,7 +279,7 @@ ...@@ -274,7 +279,7 @@
.answer__points { .answer__points {
@extend %t-score; @extend %t-score;
color: $copy-secondary-color; color: $copy-color;
@include media($bp-dm) { @include media($bp-dm) {
@include float(right); @include float(right);
...@@ -295,7 +300,7 @@ ...@@ -295,7 +300,7 @@
.answer__points__label { .answer__points__label {
display: inline-block; // FIX: need to reset base label style display: inline-block; // FIX: need to reset base label style
@include margin-left(($baseline-v/4)); @include margin-left(($baseline-v/4));
color: $copy-secondary-color; color: $copy-color;
} }
// ELEM: criterion selects // ELEM: criterion selects
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
.openassessment__steps .openassessment__steps__step .step__header { .openassessment__steps .openassessment__steps__step .step__header {
.step__deadline { .step__deadline {
color: $heading-secondary-color; color: $heading-color;
} }
// step title/name // step title/name
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
@extend %t-strong; @extend %t-strong;
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
color: $color-decorative-tertiary; color: $copy-color;
} }
} }
} }
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
.self-assessment__display__title, .peer-assessment__display__title { .self-assessment__display__title, .peer-assessment__display__title {
margin-bottom: ($baseline-v/2) !important; margin-bottom: ($baseline-v/2) !important;
color: $heading-secondary-color !important; color: $heading-color !important;
} }
// shown submission/results // shown submission/results
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
} }
// actions // actions
.action--submit, .action--save { .action--submit, .action--save, .action--upload {
text-shadow: none !important; text-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
.action--submit { .action--submit {
@extend %btn--primary; @extend %btn--primary;
@extend %action-2; @extend %action-2;
margin-left: ($baseline-v/2); @include margin-left($baseline-v/2);
margin-top: ($baseline-v/2); margin-top: ($baseline-v/2);
.copy, .icon { .copy, .icon {
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
display: none; display: none;
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
color: $color-decorative-tertiary; color: $copy-color;
} }
@include media($bp-dm) { @include media($bp-dm) {
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
.step__deadline { .step__deadline {
@extend %hd-4; @extend %hd-4;
color: $heading-secondary-color; color: $heading-color;
} }
} }
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
.step__instruction { .step__instruction {
@extend %copy-2; @extend %copy-2;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
color: $copy-secondary-color; color: $copy-color;
} }
// step content // step content
...@@ -286,7 +286,7 @@ ...@@ -286,7 +286,7 @@
} }
.step__counter:before, .step__label, .step__deadline { .step__counter:before, .step__label, .step__deadline {
color: $color-unavailable; color: $copy-color;
} }
.step__status__value { .step__status__value {
...@@ -298,11 +298,11 @@ ...@@ -298,11 +298,11 @@
.icon { .icon {
display: inline-block; display: inline-block;
color: $copy-secondary-color; color: $copy-color;
} }
.copy { .copy {
color: $copy-secondary-color; color: $copy-color;
} }
} }
} }
...@@ -311,15 +311,15 @@ ...@@ -311,15 +311,15 @@
&.is--incomplete { &.is--incomplete {
.step__counter:before { .step__counter:before {
border-color: rgba($color-incomplete, 0.5); border-color: $color-incomplete;
color: $color-incomplete; color: $copy-color;
} }
.step__status__value { .step__status__value {
background: $color-incomplete; background: $color-incomplete;
.copy, .icon { .copy, .icon {
color: $white-t; color: $copy-color;
} }
} }
} }
...@@ -328,7 +328,7 @@ ...@@ -328,7 +328,7 @@
&.is--unavailable { &.is--unavailable {
.step__counter:before, .step__label, .step__deadline { .step__counter:before, .step__label, .step__deadline {
color: $color-unavailable; color: $copy-color;
} }
.step__status__value { .step__status__value {
...@@ -336,11 +336,11 @@ ...@@ -336,11 +336,11 @@
.icon { .icon {
display: inline-block; display: inline-block;
color: $copy-secondary-color; color: $copy-color;
} }
.copy { .copy {
color: $copy-secondary-color; color: $copy-color;
} }
} }
} }
...@@ -349,7 +349,7 @@ ...@@ -349,7 +349,7 @@
&.is--waiting { &.is--waiting {
.step__counter:before, .step__label, .step__deadline { .step__counter:before, .step__label, .step__deadline {
color: $color-unavailable; color: $copy-color;
} }
.step__status__value { .step__status__value {
...@@ -357,11 +357,11 @@ ...@@ -357,11 +357,11 @@
.icon { .icon {
display: inline-block; display: inline-block;
color: $copy-secondary-color; color: $copy-color;
} }
.copy { .copy {
color: $copy-secondary-color; color: $copy-color;
} }
} }
...@@ -370,7 +370,7 @@ ...@@ -370,7 +370,7 @@
} }
.step__instruction, .grade__value__description { .step__instruction, .grade__value__description {
color: $copy-secondary-color; color: $copy-color;
} }
} }
...@@ -389,7 +389,31 @@ ...@@ -389,7 +389,31 @@
} }
.copy, .icon { .copy, .icon {
color: $white-t; color: $copy-inverse-color;
}
}
button {
opacity: 1;
}
}
// STATE: in-progress
&.is--in-progress {
.step__counter:before {
color: $action-primary-color;
}
.step__status__value {
background: $action-primary-color;
.icon {
display: inline-block;
}
.copy, .icon {
color: $copy-inverse-color;
} }
} }
...@@ -410,7 +434,7 @@ ...@@ -410,7 +434,7 @@
background: $color-error; background: $color-error;
.copy, .icon { .copy, .icon {
color: $white-t; color: $copy-inverse-color;
} }
} }
...@@ -525,7 +549,7 @@ ...@@ -525,7 +549,7 @@
div.submission__answer__part__text__value { div.submission__answer__part__text__value {
border: 1px solid $color-decorative-secondary; border: 1px solid $color-decorative-secondary;
background-color: $white-t; background-color: $white;
padding: $baseline-v; padding: $baseline-v;
} }
...@@ -557,13 +581,13 @@ ...@@ -557,13 +581,13 @@
@extend %t-score; @extend %t-score;
padding: ($baseline-v/4) ($baseline-h/4); padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-secondary; background: $color-decorative-secondary;
color: $white-t; color: $copy-inverse-color;
} }
} }
.response__submission__label { .response__submission__label {
@extend %t-score; @extend %t-score;
color: $action-secondary-color; color: $copy-color;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-left(($baseline-h/4)); @include margin-left(($baseline-h/4));
...@@ -638,7 +662,7 @@ ...@@ -638,7 +662,7 @@
.peer-assessment__display__title { .peer-assessment__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
} }
...@@ -706,7 +730,7 @@ ...@@ -706,7 +730,7 @@
.self-assessment__display__title { .self-assessment__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
.self-assessment__display__response { .self-assessment__display__response {
...@@ -853,7 +877,7 @@ ...@@ -853,7 +877,7 @@
.submission__answer__display__title { .submission__answer__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
.submission__answer__display__content { .submission__answer__display__content {
...@@ -887,7 +911,7 @@ ...@@ -887,7 +911,7 @@
.submission__peer-evaluations__title { .submission__peer-evaluations__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-secondary-color; color: $heading-color;
} }
// rubric questions // rubric questions
...@@ -935,18 +959,18 @@ ...@@ -935,18 +959,18 @@
.question__score__value { .question__score__value {
@extend %t-strong; @extend %t-strong;
color: $heading-primary-color; color: $heading-color;
&:after { &:after {
content: "/"; content: "/";
@include margin-left(($baseline-v/4)); @include margin-left(($baseline-v/4));
color: $heading-secondary-color; color: $heading-color;
} }
} }
.question__score__potential { .question__score__potential {
@extend %t-strong; @extend %t-strong;
color: $heading-secondary-color; color: $heading-color;
.unit { .unit {
@extend %t-strong; @extend %t-strong;
...@@ -1001,18 +1025,18 @@ ...@@ -1001,18 +1025,18 @@
@extend %t-strong; @extend %t-strong;
@extend %t-titlecase; @extend %t-titlecase;
display: block; display: block;
color: $heading-secondary-color; color: $heading-color;
.answer__source__value-with-points { .answer__source__value-with-points {
@extend %t-score; @extend %t-score;
color: $heading-primary-color; color: $heading-color;
} }
} }
.answer__value { .answer__value {
display: block; display: block;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $heading-primary-color; color: $heading-color;
.answer__value__raw { .answer__value__raw {
white-space: pre-wrap; white-space: pre-wrap;
...@@ -1038,7 +1062,7 @@ ...@@ -1038,7 +1062,7 @@
.answer__score, .answer__score__value { .answer__score, .answer__score__value {
@extend %t-score; @extend %t-score;
display: block; display: block;
color: $heading-primary-color; color: $heading-color;
} }
} }
...@@ -1084,7 +1108,7 @@ ...@@ -1084,7 +1108,7 @@
@extend %t-strong; @extend %t-strong;
@extend %t-titlecase; @extend %t-titlecase;
display: block; display: block;
color: $heading-secondary-color; color: $heading-color;
} }
.feedback__value { .feedback__value {
...@@ -1130,7 +1154,7 @@ ...@@ -1130,7 +1154,7 @@
.submission__feedback__instructions { .submission__feedback__instructions {
@extend %copy-2; @extend %copy-2;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
color: $copy-secondary-color; color: $copy-color;
} }
.submission__feedback__elements { .submission__feedback__elements {
......
openassessment/xblock/static/sass/themes/edx/_utilities.scss
...@@ -10,47 +10,11 @@ ...@@ -10,47 +10,11 @@
// -------------------- // --------------------
$edx-blue: rgb(58, 162, 224); $edx-blue: rgb(58, 162, 224);
$edx-blue-l1: tint($edx-blue,20%); $edx-blue-l1: tint($edx-blue,20%);
$edx-blue-l2: tint($edx-blue,40%);
$edx-blue-l3: tint($edx-blue,60%);
$edx-blue-l4: tint($edx-blue,80%);
$edx-blue-l5: tint($edx-blue,90%);
$edx-blue-d1: shade($edx-blue,20%);
$edx-blue-d2: shade($edx-blue,40%);
$edx-blue-d3: shade($edx-blue,60%);
$edx-blue-d4: shade($edx-blue,80%);
$edx-blue-d5: shade($edx-blue,90%);
$edx-blue-s1: saturate($edx-blue,15%);
$edx-blue-s2: saturate($edx-blue,30%);
$edx-blue-s3: saturate($edx-blue,45%);
$edx-blue-u1: desaturate($edx-blue,15%);
$edx-blue-u2: desaturate($edx-blue,30%);
$edx-blue-u3: desaturate($edx-blue,45%);
$edx-blue-t0: rgba($edx-blue,0.125);
$edx-blue-t1: rgba($edx-blue,0.25);
$edx-blue-t2: rgba($edx-blue,0.50);
$edx-blue-t3: rgba($edx-blue,0.75);
$edx-pink: rgb(182,37,104); $edx-pink: rgb(182,37,104);
$edx-pink-l1: tint($edx-pink,20%);
$edx-pink-l2: tint($edx-pink,40%);
$edx-pink-l3: tint($edx-pink,60%);
$edx-pink-l4: tint($edx-pink,80%);
$edx-pink-l5: tint($edx-pink,90%);
$edx-pink-d1: shade($edx-pink,20%); $edx-pink-d1: shade($edx-pink,20%);
$edx-pink-d2: shade($edx-pink,40%);
$edx-pink-d3: shade($edx-pink,60%);
$edx-pink-d4: shade($edx-pink,80%);
$edx-pink-d5: shade($edx-pink,90%);
$edx-pink-s1: saturate($edx-pink,15%);
$edx-pink-s2: saturate($edx-pink,30%);
$edx-pink-s3: saturate($edx-pink,45%);
$edx-pink-u1: desaturate($edx-pink,15%);
$edx-pink-u2: desaturate($edx-pink,30%);
$edx-pink-u3: desaturate($edx-pink,45%);
$edx-pink-t0: rgba($edx-pink,0.125);
$edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75);
$edx-gray: rgb(164, 165, 168); $edx-gray: rgb(164, 165, 168);
$edx-gray-l1: tint($edx-gray,20%); $edx-gray-l1: tint($edx-gray,20%);
...@@ -74,19 +38,10 @@ $edx-gray-t1: rgba($edx-gray,0.25); ...@@ -74,19 +38,10 @@ $edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50); $edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75); $edx-gray-t3: rgba($edx-gray,0.75);
$edx-lms-header: rgb(100, 100, 100);
$edx-lms-copy: rgb(60, 60, 60);
$edx-lms-action-primary: rgb(29, 157, 217);
$edx-lms-action-secondary: rgb(135, 135, 135);
// -------------------- // --------------------
// variables: overrides // variables: overrides
// -------------------- // --------------------
// colors
$white-t: rgb(255,255,255);
$black-t: rgb(0,0,0);
// fonts // fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
...@@ -100,74 +55,26 @@ $gutter: $baseline-v; ...@@ -100,74 +55,26 @@ $gutter: $baseline-v;
$f-title: $f-sans-serif; $f-title: $f-sans-serif;
$f-copy: $f-sans-serif; $f-copy: $f-sans-serif;
$f-action: $f-sans-serif; $f-action: $f-sans-serif;
$f-base-color: $edx-gray;
// application - colors
$color-primary: $edx-lms-action-primary;
$color-secondary: $edx-lms-action-secondary;
$color-tertiary: $gray-l1;
$color-quarternary: $gray-l2;
// application - colors: decorative
$color-decorative-primary: $gray-d3;
// application - colors: states
$color-disabled: $edx-gray-l4;
$color-focused: $edx-gray;
// application - colors: copy and headings
$heading-color: $edx-lms-header;
$copy-color: $edx-lms-copy;
// application - colors:states
$selected-bg: $edx-blue-t1;
$selected-color: $edx-blue;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
$action-primary-color-focus: saturate($color-primary,25%);
$action-primary-color-active: $color-primary;
$action-primary-color-visited: shade($color-primary,20%);
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: shade($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: shade($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: transparent; $bg-view: transparent;
$bg-header-main: $white-t;
$color-header-main: $black; $color-header-main: $black;
$bg-content: $white-t;
$color-content: $gray-d1; $color-content: $gray-d1;
$bg-content-main: $gray-l5; $bg-content-main: $gray-l5;
$color-content-main: $gray-d1; $color-content-main: $gray-d1;
// application - colors: states
$selected-color: $black-t;
// application - colors: staff UI // application - colors: staff UI
$color-decorative-staff: $edx-pink; $color-decorative-staff: $edx-pink;
// -------------------- // --------------------
// mixins:
// --------------------
// --------------------
// extends: // extends:
// -------------------- // --------------------
%hd-problem { %hd-problem {
@extend %hd-3; @extend %hd-3;
@extend %t-titlecase; @extend %t-titlecase;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
color: $heading-secondary-color; color: $heading-color;
} }
openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -26,40 +26,6 @@ ...@@ -26,40 +26,6 @@
} }
} }
// links - meta
%link-meta {
@include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
border-bottom: 1px solid transparent;
color: $action-secondary-color;
text-decoration: none;
&:hover, &:focus {
color: $action-secondary-color-focus;
border-color: $action-secondary-color-focus;
}
&:active, &.is--current {
color: $action-secondary-color-active;
border-color: $action-secondary-color-active;
}
}
// links - page nav
%link-nav-page {
@include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
display: block;
border-right: 1px solid solid $gray-l5;
padding: ($baseline-v/2) ($baseline-h/4);
color: $gray-l3;
font-family: $f-action;
text-decoration: none;
&:hover, &:active {
border-left-color: $action-secondary-color-focus;
color: $action-secondary-color-focus;
}
}
// -------------------- // --------------------
// buttons // buttons
// -------------------- // --------------------
...@@ -117,14 +83,14 @@ ...@@ -117,14 +83,14 @@
border-image: none; border-image: none;
} }
// buttons - primary (assuming dark bg/light copy) // buttons - primary
%btn--primary { %btn--primary {
@extend %btn-pill; @extend %btn-pill;
@extend %t-strong; @extend %t-strong;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color; background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%); border: 1px solid $action-primary-color;
color: tint($action-primary-color, 90%); color: $copy-inverse-color;
.copy { .copy {
@extend %t-strong; @extend %t-strong;
...@@ -133,7 +99,6 @@ ...@@ -133,7 +99,6 @@
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-primary-color-focus; background: $action-primary-color-focus;
border-color: $action-primary-color-focus; border-color: $action-primary-color-focus;
color: tint($action-primary-color, 99%);
} }
&.current, &.active { &.current, &.active {
...@@ -146,33 +111,36 @@ ...@@ -146,33 +111,36 @@
} }
&.disabled, &.is--disabled, &[disabled] { &.disabled, &.is--disabled, &[disabled] {
opacity: 0.4; color: $action-primary-color-disabled;
border-color: $action-primary-color-disabled;
background: $action-primary-color-disabled-back;
} }
} }
// buttons - secondary (assuming dark bg/light copy) // buttons - secondary
%btn--secondary { %btn--secondary {
@extend %btn-pill; @extend %btn-pill;
@extend %t-strong; @extend %t-strong;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color; background: $white;
border: 1px shade($action-secondary-color, 10%); border: 1px solid $uxpl-primary-dark;
color: tint($action-secondary-color, 90%); color: $uxpl-primary-dark;
.copy { .copy {
@extend %t-strong; @extend %t-strong;
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-secondary-color-focus; background: $action-primary-color;
border-color: $action-secondary-color-focus; border-color: $action-primary-color;
color: tint($action-secondary-color, 99%); color: $copy-inverse-color;
} }
&.current, &.active { &.current, &.active {
background: $action-secondary-color-active; background: $white;
border-color: $action-secondary-color-active; border-color: $uxpl-primary-dark;
color: $uxpl-primary-dark;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
...@@ -180,40 +148,8 @@ ...@@ -180,40 +148,8 @@
} }
&.disabled, &.is--disabled, &[disabled] { &.disabled, &.is--disabled, &[disabled] {
opacity: 0.4; background: $white;
} border-color: $action-primary-color-disabled;
} color: $action-primary-color-disabled;
// buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary {
@extend %btn-edged;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color;
border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-strong;
}
&:hover, &:active, &:focus {
background: $action-tertiary-color-focus;
border-color: $action-tertiary-color-focus;
color: tint($action-tertiary-color, 99%);
}
&.current, &.active {
background: $action-tertiary-color-active;
border-color: $action-tertiary-color-active;
&:hover, &:active, &:focus {
}
}
&.disabled, &.is-disabled, &[disabled] {
opacity: 0.5;
} }
} }
openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
@include placeholder { @include placeholder {
@extend %t-regular; @extend %t-regular;
color: $copy-secondary-color; color: $copy-color;
} }
// STATE: focus // STATE: focus
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
.tip { .tip {
display: block; display: block;
@extend %copy-4; @extend %copy-4;
color: $copy-secondary-color; color: $copy-color;
} }
} }
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
@extend %copy-3; @extend %copy-3;
@extend %t-strong; @extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style margin-bottom: 0; // FIX: need to reset base label style
color: $copy-secondary-color; color: $copy-color;
} }
.option__input { .option__input {
......
openassessment/xblock/static/sass/xb/elements/_system-feedback.scss
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
.message__content { .message__content {
@extend %copy-3; @extend %copy-3;
color: $copy-secondary-color; color: $copy-color;
p { p {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
...@@ -42,50 +42,40 @@ ...@@ -42,50 +42,40 @@
// TYPE: error // TYPE: error
.message--error { .message--error {
background: tint($color-error, 95%); background: $color-error-back;
.message__title { .message__title {
color: $color-error; color: $copy-color;
border-bottom-color: $color-error; border-bottom-color: $color-error;
} }
} }
// TYPE: warning // TYPE: warning
.message--warning { .message--warning {
background: tint($color-warning, 95%); background: $color-warning-back;
.message__title { .message__title {
color: $color-warning; color: $copy-color;
border-bottom-color: $color-warning; border-bottom-color: $color-warning;
} }
} }
// TYPE: confirmation
.message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete // TYPE: complete
.message--complete { .message--complete {
background: tint($color-complete, 95%); background: $color-complete-back;
.message__title { .message__title {
color: $color-complete; color: $copy-color;
border-bottom-color: $color-complete; border-bottom-color: $color-complete;
} }
} }
// TYPE: incomplete // TYPE: incomplete
.message--incomplete { .message--incomplete {
background: tint($color-incomplete, 95%); background: $color-incomplete-back;
.message__title { .message__title {
color: $color-incomplete; color: $copy-color;
border-bottom-color: $color-incomplete; border-bottom-color: $color-incomplete;
} }
} }
...@@ -114,30 +104,26 @@ ...@@ -114,30 +104,26 @@
margin-bottom: 0; margin-bottom: 0;
border: none; border: none;
padding-bottom: 0; padding-bottom: 0;
color: $white-t; color: $copy-inverse-color;
} }
&.message--error { &.message--error {
background: tint($color-error, 15%); background: $color-error;
.message__content { .message__content {
color: tint($color-error, 90%); color: $copy-inverse-color;
} }
} }
&.message--warning { &.message--warning {
background: tint($color-warning, 15%); background: $color-warning;
.message__content { .message__content {
color: tint($color-warning, 90%); color: $uxpl-gray-dark;
} }
}
&.message--confirm { .message__title {
background: tint($color-warning, 15%); color: $uxpl-gray-dark;
.message__content {
color: tint($color-confirm, 90%);
} }
} }
} }
...@@ -162,7 +148,7 @@ ...@@ -162,7 +148,7 @@
.icon, .copy { .icon, .copy {
display: block; display: block;
color: $copy-secondary-color; color: $copy-color;
} }
.icon { .icon {
......
openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -39,57 +39,26 @@ $gray-d3: shade($gray,60%); ...@@ -39,57 +39,26 @@ $gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%); $gray-d4: shade($gray,80%);
$gray-d5: shade($gray,90%); $gray-d5: shade($gray,90%);
$gray-d6: shade($gray,95%); $gray-d6: shade($gray,95%);
$gray-d7: shade($gray,99%);
$gray-t0: rgba($gray,0.125);
$gray-t1: rgba($gray,0.25);
$gray-t2: rgba($gray,0.50);
$gray-t3: rgba($gray,0.75);
// blacks // blacks
$black: $gray-d6; // system black $black: $gray-d6;
$black-t: $gray-d7; $black-t: rgb(0,0,0);
$black-t0: rgba($black,0.125);
$black-t1: rgba($black,0.25);
$black-t2: rgba($black,0.50);
$black-t3: rgba($black,0.75); $black-t3: rgba($black,0.75);
// whites // whites
$white: $gray-l6; // system white $white: rgb(255, 255, 255);
$white-t: $gray-l7;
$white-t0: rgba($white,0.125);
$white-t1: rgba($white,0.25);
$white-t2: rgba($white,0.50);
$white-t3: rgba($white,0.75);
// shadows // shadows
$shadow: rgba($black,0.2); $shadow: rgba($black,0.2);
$shadow-l1: rgba($black,0.1); $shadow-l1: rgba($black,0.1);
$shadow-l2: rgba($black,0.05); $shadow-l2: rgba($black,0.05);
$shadow-d1: rgba($black,0.4); $shadow-d1: rgba($black,0.4);
$shadow-d2: rgba($black,0.6);
// blue // blue
$blue: rgb(128, 169, 204); $blue: rgb(128, 169, 204);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%);
$blue-l4: tint($blue,80%);
$blue-l5: tint($blue,90%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%);
$blue-d5: shade($blue,90%);
$blue-s1: saturate($blue,15%); $blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%); $blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%); $blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$blue-t0: rgba($blue,0.125);
$blue-t1: rgba($blue,0.25);
$blue-t2: rgba($blue,0.50);
$blue-t3: rgba($blue,0.75);
// -------------------- // --------------------
// fonts // fonts
...@@ -114,6 +83,21 @@ $tmg-f3: 0.125s; ...@@ -114,6 +83,21 @@ $tmg-f3: 0.125s;
// animation-based settings // animation-based settings
$anim-distance-offviewport: ($baseline-h*100); // for larger/page-level animations $anim-distance-offviewport: ($baseline-h*100); // for larger/page-level animations
//---------------------
// UXPL colors
//---------------------
$uxpl-gray-base: rgb(65, 65, 65);
$uxpl-gray-dark: rgb(17, 17, 17);
$uxpl-gray-back: rgb(217, 217, 217);
$uxpl-gray-x-back: rgb(245, 245, 245);
$uxpl-primary-base: rgb(0, 117, 180);
$uxpl-primary-dark: rgb(6, 86, 131);
$uxpl-success-text: rgb(0, 129, 0);
$uxpl-success-back: rgb(236, 250, 236);
$uxpl-warning-accent: rgb(255, 192, 31) ;
$uxpl-warning-back: rgb(255, 249, 235);
$uxpl-error-text: rgb(178, 6, 16);
$uxpl-error-back: rgb(254, 236, 237);
// -------------------- // --------------------
// application - fonts // application - fonts
...@@ -121,7 +105,7 @@ $anim-distance-offviewport: ($baseline-h*100); // for large ...@@ -121,7 +105,7 @@ $anim-distance-offviewport: ($baseline-h*100); // for large
$f-title: $f-sans-serif; $f-title: $f-sans-serif;
$f-copy: $f-serif; $f-copy: $f-serif;
$f-action: $f-sans-serif; $f-action: $f-sans-serif;
$f-base-color: $gray-l2; $f-base-color: $uxpl-gray-base;
// type sizes // type sizes
$f-size-xsmall: 10; $f-size-xsmall: 10;
...@@ -131,19 +115,14 @@ $f-size-medium: 16; ...@@ -131,19 +115,14 @@ $f-size-medium: 16;
$f-size-large: 18; $f-size-large: 18;
$f-size-xlarge: 22; $f-size-xlarge: 22;
// -------------------- // --------------------
// application - colors // application - colors
// -------------------- // --------------------
// application - colors: basic
$color-primary: $blue;
$color-secondary: $blue-u1;
$color-teritary: $blue-u2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: tint($color-decorative-primary, 30%); $color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary: tint($color-decorative-primary, 60%); $color-decorative-tertiary: $uxpl-gray-back;
$color-decorative-quaternary: tint($color-decorative-primary, 90%); $color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%); $color-decorative-quinternary: tint($color-decorative-primary, 98%);
...@@ -153,31 +132,19 @@ $color-unfocused: $gray-l2; ...@@ -153,31 +132,19 @@ $color-unfocused: $gray-l2;
$color-focused: $blue-u2; $color-focused: $blue-u2;
// application - colors: actions // application - colors: actions
$action-primary-color: tint($color-primary,10%); $action-primary-color: $uxpl-primary-base;
$action-primary-color-focus: saturate($color-primary,25%); $action-primary-color-focus: $uxpl-primary-dark;
$action-primary-color-active: $color-primary; $action-primary-color-active: $uxpl-primary-base;
$action-primary-color-visited: shade($color-primary,20%); $action-primary-color-disabled: rgb(180,179,179);
$action-primary-color-disabled-back: $uxpl-gray-x-back;
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: saturate($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: saturate($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: shade($f-base-color, 50%); $heading-color: $f-base-color;
$heading-primary-color: shade($f-base-color, 66%);
$heading-secondary-color: tint($f-base-color, 33%);
$copy-color: $f-base-color; $copy-color: $f-base-color;
$copy-secondary-color: tint($copy-color, 25%); $copy-inverse-color: $white;
// application - colors: states // application - colors: states
$selected-bg: $blue-t1; $selected-color: $black-t;
$selected-color: $blue-s1;
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: $gray-l7; $bg-view: $gray-l7;
...@@ -187,17 +154,24 @@ $bg-message: $black; ...@@ -187,17 +154,24 @@ $bg-message: $black;
// -------------------- // --------------------
// // application - colors: states // // application - colors: states
// -------------------- // --------------------
$color-error: rgb(188, 85, 71); $color-error: $uxpl-error-text;
$color-warning: rgb(229, 166, 53); $color-error-back: $uxpl-error-back;
$color-complete: rgb(98, 194, 74);
$color-warning: $uxpl-warning-accent;
$color-warning-back: $uxpl-warning-back;
$color-complete: $uxpl-success-text;
$color-complete-back: $uxpl-success-back;
$color-incomplete: $color-warning; $color-incomplete: $color-warning;
$color-confirm: $heading-primary-color; $color-incomplete-back: $color-warning-back;
$color-unavailable: tint($copy-color, 85%);
$color-confirm: $heading-color;
$color-unavailable: $uxpl-gray-back;
// -------------------- // --------------------
// // application - colors: staff UI // // application - colors: staff UI
// -------------------- // --------------------
$color-decorative-staff: $color-decorative-primary; $color-decorative-staff: $color-decorative-primary;
$copy-staff-color: $gray-l3;
$heading-staff-color: $white; $heading-staff-color: $white;
$staff-bg: $gray-d1; $staff-bg: $gray-d1;
test/acceptance/accessibility.py
...@@ -24,16 +24,11 @@ class OpenAssessmentA11yTest(OpenAssessmentTest): ...@@ -24,16 +24,11 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
page.a11y_audit.config.set_scope( page.a11y_audit.config.set_scope(
exclude=[ exclude=[
"#footer-edx-v3", # Links to Facebook, Twitter, etc. Populated in production, but not here. "#footer-edx-v3", # Links to Facebook, Twitter, etc. Populated in production, but not here.
".instructor-info-action", # Staff Debug Info link (general for all XBlocks). ".instructor-info-action", # Staff Debug Info link (general for all XBlocks)
".is--disabled", # TODO: TNL-5183
], ],
) )
page.a11y_audit.config.set_rules({
"ignore": [
"color-contrast", # TODO: TNL-5104
]
})
class SelfAssessmentA11yTest(OpenAssessmentA11yTest): class SelfAssessmentA11yTest(OpenAssessmentA11yTest):
""" """
...@@ -295,7 +290,6 @@ class FileUploadA11yTest(OpenAssessmentA11yTest): ...@@ -295,7 +290,6 @@ class FileUploadA11yTest(OpenAssessmentA11yTest):
super(FileUploadA11yTest, self)._configure_a11y_audit_config(page) super(FileUploadA11yTest, self)._configure_a11y_audit_config(page)
page.a11y_audit.config.set_rules({ page.a11y_audit.config.set_rules({
"ignore": [ "ignore": [
"color-contrast", # TODO: TNL-5104
"list", # TODO: TNL-5900 "list", # TODO: TNL-5900
] ]
}) })
......
test/acceptance/pages.py
...@@ -38,6 +38,7 @@ class BaseAssessmentPage(PageObject): ...@@ -38,6 +38,7 @@ class BaseAssessmentPage(PageObject):
loc=self._problem_location loc=self._problem_location
) )
class MultipleAssessmentPage(BaseAssessmentPage): class MultipleAssessmentPage(BaseAssessmentPage):
""" """
Page object for subsection unit containing multiple ORA problems Page object for subsection unit containing multiple ORA problems
...@@ -63,7 +64,9 @@ class OpenAssessmentPage(BaseAssessmentPage): ...@@ -63,7 +64,9 @@ class OpenAssessmentPage(BaseAssessmentPage):
The default implementation just returns the selector The default implementation just returns the selector
""" """
return "{vertical_index_class} {selector}".format(vertical_index_class=self.vertical_index_class, selector=selector) return "{vertical_index_class} {selector}".format(
vertical_index_class=self.vertical_index_class, selector=selector
)
@property @property
def vertical_index_class(self): def vertical_index_class(self):
...@@ -215,12 +218,35 @@ class AssessmentMixin(object): ...@@ -215,12 +218,35 @@ class AssessmentMixin(object):
>>> page.assess([0, 2, 1]) >>> page.assess([0, 2, 1])
""" """
for criterion_num, option_num in enumerate(options_selected): def selector(criterion_num, option_num):
sel = ".rubric_{criterion_num}_{option_num}".format( sel = ".rubric_{criterion_num}_{option_num}".format(
criterion_num=criterion_num, criterion_num=criterion_num,
option_num=option_num option_num=option_num
) )
self.q(css=self._bounded_selector(sel)).first.click() return sel
def select_criterion():
for criterion_num, option_num in enumerate(options_selected):
sel = selector(criterion_num, option_num)
self.q(css=self._bounded_selector(sel)).first.click()
def criterion_selected():
for criterion_num, option_num in enumerate(options_selected):
sel = selector(criterion_num, option_num)
if not self.q(css=self._bounded_selector(sel))[0].is_selected():
return False
return True
# When selecting the criteria for the 2nd training assessment, sometimes
# radio buttons are not selected after the click, causing the test to fail (because the
# Submit button never becomes enabled). Since tests that use training assessments tend
# to be very long (meaning there is a high cost to retrying the whole test),
# retry just selecting the criterion a few times before failing the whole test.
attempts = 0
while not criterion_selected() and attempts < 5:
select_criterion()
attempts+=1
self.submit_assessment() self.submit_assessment()
return self return self
......
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