Skip to content

E
edx-ora2
Commit b266ea39 by Brian Talbot
Options

revising markup, styling, and UI for grade status rendering

parent a22d99be
Showing with 233 additions and 106 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
<!-- CASE: is complete --> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete has--grade">
<div id="openassessment__grade" class="openassessment__grade is--complete has--grade"> <header class="step__header ui-toggle-visibility__control">
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade: </span>
<span class="grade__value">
<span class="grade__value__title">
<span class="grade__value__earned">{{ score.points_earned }}</span> out of <span class="grade__value__potential">{{ score.points_possible }}</span>
</span>
</span>
</span>
</h2>
</header>
<div class="openassessment__grade__content"> <div class="ui-toggle-visibility__content">
<span class="grade__value">{{ score.points_earned }}</span> out of <span class="grade__potential">{{ score.points_possible }}</span> <div class="step__content">
</div>
<!-- PLACEHOLDER: @talbs, you can overwrite this with the actual template -->
<!-- <div class="openassessment__feedback">
{% for asmnt in assessments %}
<div class="openassessment__peer_assessment_{{ forloop.counter }}">
<div>Peer #{{ forloop.counter }}</div>
<div>Feedback: {{ asmnt.feedback }}</div>
</div>
{% endfor %}
</div> -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
{{ student_submission.answer }}
</div>
</article>
<article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">
{{ criterion.total_value }}
<span class="unit">Points</span>
</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
</ol>
</article>
<!-- PLACEHOLDER: @talbs, you can overwrite this with the actual template --> <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<div class="openassessment__feedback"> <h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
{% for asmnt in assessments %}
<div class="openassessment__peer_assessment_{{ forloop.counter }}"> <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<div>Peer #{{ forloop.counter }}</div> <li class="field field--textarea feedback__remarks" id="feedback__remarks">
<div>Feedback: {{ asmnt.feedback|linebreaks }}</div> <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>
</li>
</ol>
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</form>
</div> </div>
{% endfor %}
</div> </div>
</li>
<div class="grade__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a class="action action--view">View in Courseware</a>
</li>
</ul>
</div>
</div>
apps/openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
<!-- CASE: is in-progress and incomplete (peer responses to assess) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses"> <div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses">
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="openassessment__grade__title">Your Grade:</h2>
...@@ -6,4 +5,4 @@ ...@@ -6,4 +5,4 @@
<span class="grade__value">Not Completed</span> <span class="grade__value">Not Completed</span>
<p>You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p> <p>You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</div> </div>
</div> </div>
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
...@@ -5,4 +5,4 @@ ...@@ -5,4 +5,4 @@
<span class="grade__value">Not Completed</span> <span class="grade__value">Not Completed</span>
<p>You have not started this problem</p> <p>You have not started this problem</p>
</div> </div>
</div> </div>
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
<!-- CASE: is in-progress and incomplete (peer evaluations of user's response) --> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete awaiting--peer-evaluations">
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-evaluations"> <header class="step__header ui-toggle-visibility__control">
<h2 class="openassessment__grade__title">Your Grade:</h2> <h2 class="step__title">
<span class="wrapper--copy">
<div class="openassessment__grade__content"> <span class="step__label">Your Grade:</span>
<span class="grade__value">Waiting for Peers to Assess Your Response</span> <span class="grade__value">
<p>Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p> <span class="grade__value__title">Waiting for Peers to Assess Your Response</span>
</div>
</div> <p class="grade__value__description">Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p>
\ No newline at end of file </span>
</span>
</h2>
</header>
</li>
apps/openassessment/templates/openassessmentblock/oa_base.html
<!-- TEMPLATE: status messages -->
<!-- NOTES:
* class of message--warning is added message is a warning/notification to user
* class of message--confirmation is added message is a confirmation to user
* class of has--actions is added when a message has actions associated with it for user to interact with
-->
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic"> <div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<div class="wrapper--grid"> <div class="wrapper--grid">
...@@ -27,7 +15,6 @@ ...@@ -27,7 +15,6 @@
</span> </span>
</h1> </h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents"> <nav class="nav--contents">
<h2 class="title">Skip to a specific step:</h2> <h2 class="title">Skip to a specific step:</h2>
...@@ -43,10 +30,6 @@ ...@@ -43,10 +30,6 @@
</ol> </ol>
</nav> </nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
...@@ -58,14 +41,10 @@ ...@@ -58,14 +41,10 @@
</article> </article>
</div> </div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps"> <ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li> <li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %} {% endfor %}
</ol> </ol>
</div> </div>
</div> </div>
......
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/utilities/_variables.scss
...@@ -26,6 +26,6 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12); ...@@ -26,6 +26,6 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12);
// -------------------- // --------------------
// // application - colors: states // // application - colors: states
// -------------------- // --------------------
$color-incomplete: yellow; $color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(96, 188, 97); $color-complete: rgb(98, 194, 74);
$color-error: red; $color-error: rgb(188, 85, 71);
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -50,6 +50,11 @@ ...@@ -50,6 +50,11 @@
padding-bottom: 0; padding-bottom: 0;
} }
// grade divider UI
&:nth-last-child(2) {
border-bottom: ($baseline-v/10) solid $color-decorative-primary;
}
// step header // step header
.step__header { .step__header {
@extend %trans-opacity; @extend %trans-opacity;
...@@ -59,22 +64,22 @@ ...@@ -59,22 +64,22 @@
@include media($bp-ds) { @include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/1.5);
} }
@include media($bp-dm) { @include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/1.5);
} }
@include media($bp-dl) { @include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/1.5);
} }
@include media($bp-dx) { @include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused; border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/1.5);
} }
.step__deadline { .step__deadline {
...@@ -87,22 +92,18 @@ ...@@ -87,22 +92,18 @@
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(4 of 6); @include span-columns(4 of 6);
vertical-align: middle;
} }
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
vertical-align: middle;
} }
@include media($bp-dl) { @include media($bp-dl) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
vertical-align: middle;
} }
@include media($bp-dx) { @include media($bp-dx) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
vertical-align: middle;
} }
.step__counter, .wrapper--copy { .step__counter, .wrapper--copy {
...@@ -511,21 +512,6 @@ ...@@ -511,21 +512,6 @@
color: $copy-supplemental-color; color: $copy-supplemental-color;
} }
} }
// STATE: displayed response
.submission__answer__display {
@extend %ui-section;
}
.submission__answer__display__title {
@extend %ui-section-title;
}
.submission__answer__display__content {
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
} }
...@@ -749,52 +735,119 @@ ...@@ -749,52 +735,119 @@
// -------------------- // --------------------
// status // grade status
// -------------------- // --------------------
.openassessment__grade { .step--grade {
@include row();
border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding-top: $baseline-v;
.openassessment__grade__title, .openassessment__grade__content { .step__header {
display: inline-block; opacity: 1.0 !important;
vertical-align: top;
} }
.openassessment__grade__title { .step__title {
@extend %hd-4;
margin-right: $baseline-v; @include media($bp-ds) {
color: $heading-tertiary-color; @include span-columns(6 of 6);
} }
@include media($bp-dm) {
@include span-columns(12 of 12);
}
@include media($bp-dl) {
@include span-columns(12 of 12);
}
@include media($bp-dx) {
@include span-columns(12 of 12);
}
.wrapper--copy {
display: block;
}
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
}
.step__label {
margin-right: ($baseline-h/2);
margin-bottom: ($baseline-v/4);
color: $color-decorative-secondary;
}
.openassessment__grade__content {
.grade__value { .grade__value {
@extend %hd-4; border-radius: ($baseline-v/10);
margin-bottom: ($baseline-v/2); padding: ($baseline-v/2) ($baseline-h/2);
background: $color-decorative-tertiary;
}
.grade__value__title {
@extend %hd-6;
} }
.grade__description { .grade__value__description {
@extend %copy-4; @extend %copy-4;
} }
} }
// STATE: is not started .grade__summary {
&.is--unstarted { @extend %copy-2;
}
.grade__status {
}
// CASE: is not started
&.is--unstarted {
display: none;
} }
// STATE: is incomplete // CASE: is incomplete
&.is--incomplete { &.is--incomplete {
.step__header {
border-bottom: none;
padding: 0;
}
} }
// STATE: is complete // CASE: is complete
&.is--complete { &.is--complete {
.grade__value {
background: $color-complete;
color: $white;
}
.grade__value__earned, .grade__value__potential {
@extend %t-weight3;
}
} }
} }
// -------------------- // --------------------
// STATE: graded/complete // UI: submitted repsonse
// --------------------
.submission__answer__display {
@extend %ui-section;
}
.submission__answer__display__title {
@extend %ui-section-title;
}
.submission__answer__display__content {
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
// --------------------
// UI: displayed peer assessments
// -------------------- // --------------------
// peer review summary // peer review summary
...@@ -943,7 +996,6 @@ ...@@ -943,7 +996,6 @@
} }
} }
// -------------------- // --------------------
// STATE: incomplete // STATE: incomplete
// -------------------- // --------------------
......
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