Skip to content

E
edx-ora2
Commit a81a8f56 by Brian Talbot
Options

revising markup and styling for problems further 

* markup indentation and class consistency
* basic responsive styles for response submission UI
* styling for feedback form (sans submitted/error states)
parent 883ab7f8
Showing with 345 additions and 273 deletions
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -46,14 +46,14 @@ ...@@ -46,14 +46,14 @@
<div class="step__content"> <div class="step__content">
<form id="response__submission" class="response__submission"> <form id="response__submission" class="response__submission">
<ol class="list list--fields"> <ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label> <label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
<textarea class="text" id="submission__answer__value" placeholder=""></textarea> <textarea id="submission__answer__value" placeholder=""></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions"> <ul class="list list--actions response__submission__actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button> <button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span> <span class="tip">you may continue to work on your response until you submit</span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -16,70 +16,71 @@ ...@@ -16,70 +16,71 @@
{% block body %} {% block body %}
<div class="step__content"> <div class="step__content">
<!-- user's response --> <!-- user's response -->
<article class="submission__answer__display"> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content"> <div class="submission__answer__display__content">
{{ student_submission.answer }} {{ student_submission.answer }}
</div> </div>
</article> </article>
<!-- peer evaluations --> <!-- peer evaluations -->
<article class="submission__peer-evaluations"> <article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3> <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions"> <ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %} {% with criterion_num=forloop.counter %}
<!-- individual question from rubric --> <!-- individual question from rubric -->
<li class="question question--{{ criterion_num }} ui-toggle-visibility"> <li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control"> <h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">{{ criterion.name }}</span> <span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score"> <span class="question__score">
<span class="label sr">Overall Question Score</span> <span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span> <span class="question__score__value">{{ criterion.median_score }}</span>
<span class="label label--divider sr">out of</span> <span class="label label--divider sr">out of</span>
<span class="question__score__potential"> <span class="question__score__potential">
{{ criterion.total_value }} {{ criterion.total_value }}
<span class="unit">Points</span> <span class="unit">Points</span>
</span> </span>
</span> </span>
</h4> </h4>
<ul class="question__answers ui-toggle-visibility__content"> <ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %} {% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %} {% with peer_num=forloop.counter %}
{% for part in assessment.parts %} {% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %} {% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}" <li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}"> id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title"> <h5 class="answer__title">
<span class="answer__source"> <span class="answer__source">
<span class="label sr">Assessor: </span> <span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span> <span class="value">Peer {{ peer_num }}</span>
</span> </span>
<span class="answer__value"> <span class="answer__value">
<span class="label sr">Peer's Assessment: </span> <span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span> <span class="value">{{ part.option.name }}</span>
</span> </span>
</h5> </h5>
<span class="answer__content"> <span class="answer__content">
{{ part.option.explanation }} {{ part.option.explanation }}
</span> </span>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</ul> </ul>
</li> </li>
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</ol> </ol>
</article>
<!-- peer assessment feedback --> <!-- peer assessment feedback -->
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post"> <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
...@@ -87,17 +88,16 @@ ...@@ -87,17 +88,16 @@
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content"> <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks"> <li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</label> <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea> <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions"> <ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button> <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li> </li>
</ul> </ul>
</form> </form>
</article>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</header> </header>
{% block body %} {% block body %}
<div class="step--content"> <div class="step__content">
<article class="self-assessment" id="self-assessment"> <article class="self-assessment" id="self-assessment">
<header class="self-assessment__header"> <header class="self-assessment__header">
<h3 class="self-assessment__title">Your Submitted Response</h3> <h3 class="self-assessment__title">Your Submitted Response</h3>
......
apps/openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -4,32 +4,6 @@ ...@@ -4,32 +4,6 @@
// NOTES: // NOTES:
// * The basic view and all of its states of the openassessment xblock // * The basic view and all of its states of the openassessment xblock
// --------------------
// in-view extends
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
%ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
.wrapper--openassessment { .wrapper--openassessment {
position: relative; position: relative;
} }
...@@ -52,42 +26,12 @@ ...@@ -52,42 +26,12 @@
@extend %hd-charlie; @extend %hd-charlie;
display: block; display: block;
margin-bottom: $spacing-delta; margin-bottom: $spacing-delta;
@include media($bp-m) {
}
@include media($bp-ds) {
}
@include media($bp-dm) {
}
@include media($bp-dl) {
}
@include media($bp-dx) {
}
} }
.openassessment__title--sub { .openassessment__title--sub {
@extend %hd-golf; @extend %hd-golf;
display: block; display: block;
color: $heading-tertiary-color; color: $heading-tertiary-color;
@include media($bp-m) {
}
@include media($bp-ds) {
}
@include media($bp-dm) {
}
@include media($bp-dl) {
}
@include media($bp-dx) {
}
} }
// steps // steps
...@@ -293,7 +237,23 @@ ...@@ -293,7 +237,23 @@
// step actions // step actions
.step__actions { .step__actions {
text-align: right; text-align: center;
@include media($bp-ds) {
text-align: right;
}
@include media($bp-dm) {
text-align: right;
}
@include media($bp-dl) {
text-align: right;
}
@include media($bp-dx) {
text-align: right;
}
.action--submit { .action--submit {
@extend %btn--primary; @extend %btn--primary;
...@@ -467,197 +427,104 @@ ...@@ -467,197 +427,104 @@
// response form // response form
.response__submission { .response__submission {
padding: $spacing-charlie $spacing-charlie $spacing-bravo $spacing-charlie; padding: $spacing-charlie;
background: $color-decorative-tertiary; background: $color-decorative-tertiary;
border-radius: ($baseline-v/10);
.submission__answer { .submission__answer {
margin-bottom: $spacing-charlie; margin-bottom: $spacing-charlie;
label {
@extend %text-sr;
}
textarea {
@extend %ui-content-longanswer;
width: 100%;
min-height: ($baseline-v*10);
}
} }
}
.action--submit, .tip { .response__submission__content {
display: inline-block; label {
vertical-align: middle; @extend %text-sr;
} }
.action--submit { textarea {
@extend %btn--secondary; @extend %ui-content-longanswer;
@extend %action-delta; min-height: ($baseline-v*10);
margin-right: $spacing-charlie;
} }
.tip {
@extend %copy-epsilon;
color: $copy-supplemental-color;
}
}
// STATE: displayed response
.submission__answer__display {
@extend %ui-section;
} }
.submission__answer__display__title { .response__submission__actions {
@extend %ui-section-title;
}
.submission__answer__display__content {
@extend %copy-charlie;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
// --------------------
// STATE: graded/complete
// --------------------
// peer review summary
.submission__peer-evaluations {
@extend %ui-section;
}
.submission__peer-evaluations__title {
@extend %ui-section-title;
}
// rubric questions
.submission__peer-evaluations__questions {
@extend %no-list;
@extend %ui-section-content;
margin-bottom: $spacing-charlie; // override city
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
// individual question .action--submit, .tip {
.question { display: block;
width: 100%;
margin-bottom: $spacing-charlie; margin-bottom: $spacing-charlie;
@extend %wipe-last-child;
}
.question__title {
@include clearfix();
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
}
.question__title__copy {
@extend %hd-delta;
@extend %t-weight3;
float: left;
color: $heading-secondary-color;
}
.question__score {
@extend %copy-foxtrot;
@extend %t-titlecase;
float: right;
position: relative;
bottom: -($spacing-delta);
margin-left: $spacing-bravo;
padding: $spacing-delta $spacing-charlie;
background: $color-decorative-tertiary;
color: $white;
}
.question__score__value {
color: $color-complete;
&:after { @include media($bp-ds) {
content: "/"; display: inline-block;
margin-left: $spacing-delta; vertical-align: middle;
color: $heading-secondary-color; width: auto;
} }
}
.question__score__potential { @include media($bp-dm) {
color: $heading-secondary-color; display: inline-block;
vertical-align: middle;
width: auto;
}
.unit { @include media($bp-dl) {
margin-left: $spacing-delta; display: inline-block;
vertical-align: middle;
width: auto;
} }
}
.question__answers { @include media($bp-dx) {
@extend %no-list; display: inline-block;
@extend %wipe-last-child; vertical-align: middle;
@include row(); width: auto;
}
} }
// individual answers .action--submit {
.answer { @extend %btn--secondary;
margin-bottom: $spacing-bravo; @extend %action-delta;
display: block;
@include media($bp-m) { text-align: center;
}
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(3 of 6); display: inline-block;
@include omega(2n); margin-right: $spacing-charlie;
} }
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(3 of 12); display: inline-block;
@include omega(3n); margin-right: $spacing-charlie;
} }
@include media($bp-dl) { @include media($bp-dl) {
@include span-columns(3 of 12); display: inline-block;
@include omega(3n); margin-right: $spacing-charlie;
} }
@include media($bp-dx) { @include media($bp-dx) {
@include span-columns(3 of 12); display: inline-block;
@include omega(3n); margin-right: $spacing-charlie;
} }
} }
.answer__source { .tip {
@extend %hd-golf; @extend %copy-epsilon;
display: block;
color: $heading-tertiary-color;
}
.answer__value {
@extend %copy-charlie;
display: block;
margin-bottom: $spacing-charlie;
color: $heading-primary-color;
}
.answer__content {
@extend %copy-delta;
display: block;
color: $copy-supplemental-color; color: $copy-supplemental-color;
} }
} }
// feedback form // STATE: displayed response
.submission__feeedback { .submission__answer__display {
@extend %ui-section-content; @extend %ui-section;
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
padding-top: $spacing-bravo;
} }
.submission__feeedback__title { .submission__answer__display__title {
@extend %ui-section-title;
} }
.submission__feeedback__content { .submission__answer__display__content {
@extend %copy-charlie;
@extend %ui-content-longanswer;
@extend %ui-section-content;
} }
} }
...@@ -723,6 +590,156 @@ ...@@ -723,6 +590,156 @@
} }
} }
// --------------------
// STATE: graded/complete
// --------------------
// peer review summary
.submission__peer-evaluations {
@extend %ui-section;
}
.submission__peer-evaluations__title {
@extend %ui-section-title;
}
// rubric questions
.submission__peer-evaluations__questions {
@extend %no-list;
@extend %ui-section-content;
margin-bottom: $spacing-charlie; // override city
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
// individual question
.question {
margin-bottom: $spacing-charlie;
@extend %wipe-last-child;
}
.question__title {
@include clearfix();
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
}
.question__title__copy {
@extend %hd-delta;
@extend %t-weight3;
float: left;
color: $heading-secondary-color;
}
.question__score {
@extend %copy-foxtrot;
@extend %t-titlecase;
float: right;
position: relative;
bottom: -($spacing-delta);
margin-left: $spacing-bravo;
padding: $spacing-delta $spacing-charlie ($spacing-delta/2) $spacing-charlie;
background: $color-decorative-tertiary;
color: $white;
}
.question__score__value {
color: $color-complete;
&:after {
content: "/";
margin-left: $spacing-delta;
color: $heading-secondary-color;
}
}
.question__score__potential {
color: $heading-secondary-color;
.unit {
margin-left: $spacing-delta;
}
}
.question__answers {
@extend %no-list;
@extend %wipe-last-child;
@include row();
}
// individual answers
.answer {
margin-bottom: $spacing-bravo;
@include media($bp-ds) {
@include span-columns(3 of 6);
@include omega(2n);
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega(3n);
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega(3n);
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega(3n);
}
}
.answer__source {
@extend %hd-golf;
display: block;
color: $heading-tertiary-color;
}
.answer__value {
@extend %copy-charlie;
display: block;
margin-bottom: $spacing-charlie;
color: $heading-primary-color;
}
.answer__content {
@extend %copy-delta;
display: block;
color: $copy-supplemental-color;
}
}
// feedback form
.submission__feeedback {
@extend %ui-section;
}
.submission__feeedback__title {
@extend %ui-section-title;
}
.submission__feeedback__content {
@extend %ui-section-content;
}
.submission__feeedback__actions {
@extend %ui-section-content;
padding-top: 0;
.action--submit {
@extend %btn--secondary;
@extend %action-delta;
margin-right: $spacing-charlie;
}
}
// -------------------- // --------------------
// STATE: incomplete // STATE: incomplete
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -11,14 +11,15 @@ ...@@ -11,14 +11,15 @@
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
textarea.text { textarea {
@extend %t-weight2;
border: 1px solid $color-decorative-secondary; border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie; padding: $spacing-charlie;
font-family: $f-copy; font-family: $f-copy;
outline: 0; outline: 0;
@include placeholder { @include placeholder {
color: $copy-supplemental-color; color: $copy-supplemental-color-alt;
} }
&:focus { &:focus {
...@@ -27,5 +28,19 @@ ...@@ -27,5 +28,19 @@
outline: 0; outline: 0;
} }
} }
.field {
label, .label {
@extend %copy-delta;
display: block;
margin-bottom: $spacing-charlie;
color: $copy-color;
}
textarea {
width: 100%;
}
}
} }
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
...@@ -164,9 +164,49 @@ ...@@ -164,9 +164,49 @@
box-shadow: 0 1px 2px 0 $shadow-l1; box-shadow: 0 1px 2px 0 $shadow-l1;
} }
// -------------------- // --------------------
// Decorative: round/circular elements // Decorative: round/circular elements
// -------------------- // --------------------
%deco-circle { %deco-circle {
border-radius: 99999em; border-radius: 99999em;
} }
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-quaternary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-focus {
border-color: $color-decorative-tertiary;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-quaternary;
color: $heading-tertiary-color;
}
%ui-section-title-focus {
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -143,7 +143,7 @@ $color-teritary: $blue-u2; ...@@ -143,7 +143,7 @@ $color-teritary: $blue-u2;
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4; $color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6; $color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: $gray-l7; $color-decorative-quaternary: tint($gray-l6, 10%);
// application - colors: states // application - colors: states
$color-disabled: $gray-l4; $color-disabled: $gray-l4;
......
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