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 -->
<div id="openassessment__grade" class="openassessment__grade is--complete has--grade">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete has--grade">
<header class="step__header ui-toggle-visibility__control">
<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">
<span class="grade__value">{{ score.points_earned }}</span> out of <span class="grade__potential">{{ score.points_possible }}</span>
</div>
<div class="ui-toggle-visibility__content">
<div class="step__content">
<!-- 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 -->
<div class="openassessment__feedback">
{% for asmnt in assessments %}
<div class="openassessment__peer_assessment_{{ forloop.counter }}">
<div>Peer #{{ forloop.counter }}</div>
<div>Feedback: {{ asmnt.feedback|linebreaks }}</div>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<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.</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>
{% endfor %}
</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">
<h2 class="openassessment__grade__title">Your Grade:</h2>
......@@ -6,4 +5,4 @@
<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>
</div>
</div>
\ No newline at end of file
</div>
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
......@@ -5,4 +5,4 @@
<span class="grade__value">Not Completed</span>
<p>You have not started this problem</p>
</div>
</div>
\ No newline at end of file
</div>
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
<!-- CASE: is in-progress and incomplete (peer evaluations of user's response) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-evaluations">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Waiting for Peers to Assess Your Response</span>
<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>
</div>
</div>
\ No newline at end of file
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete awaiting--peer-evaluations">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade:</span>
<span class="grade__value">
<span class="grade__value__title">Waiting for Peers to Assess Your Response</span>
<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>
</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="openassessment" id="openassessment">
<div class="wrapper--grid">
......@@ -27,7 +15,6 @@
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a specific step:</h2>
......@@ -43,10 +30,6 @@
</ol>
</nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
......@@ -58,14 +41,10 @@
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
{% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %}
</ol>
</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);
// --------------------
// // application - colors: states
// --------------------
$color-incomplete: yellow;
$color-complete: rgb(96, 188, 97);
$color-error: red;
$color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(98, 194, 74);
$color-error: rgb(188, 85, 71);
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -50,6 +50,11 @@
padding-bottom: 0;
}
// grade divider UI
&:nth-last-child(2) {
border-bottom: ($baseline-v/10) solid $color-decorative-primary;
}
// step header
.step__header {
@extend %trans-opacity;
......@@ -59,22 +64,22 @@
@include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2);
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2);
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2);
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/2);
padding-bottom: ($baseline-v/1.5);
}
.step__deadline {
......@@ -87,22 +92,18 @@
@include media($bp-ds) {
@include span-columns(4 of 6);
vertical-align: middle;
}
@include media($bp-dm) {
@include span-columns(9 of 12);
vertical-align: middle;
}
@include media($bp-dl) {
@include span-columns(9 of 12);
vertical-align: middle;
}
@include media($bp-dx) {
@include span-columns(9 of 12);
vertical-align: middle;
}
.step__counter, .wrapper--copy {
......@@ -511,21 +512,6 @@
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 @@
// --------------------
// status
// grade status
// --------------------
.openassessment__grade {
@include row();
border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding-top: $baseline-v;
.step--grade {
.openassessment__grade__title, .openassessment__grade__content {
display: inline-block;
vertical-align: top;
.step__header {
opacity: 1.0 !important;
}
.openassessment__grade__title {
@extend %hd-4;
margin-right: $baseline-v;
color: $heading-tertiary-color;
}
.step__title {
@include media($bp-ds) {
@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 {
@extend %hd-4;
margin-bottom: ($baseline-v/2);
border-radius: ($baseline-v/10);
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;
}
}
// STATE: is not started
&.is--unstarted {
.grade__summary {
@extend %copy-2;
}
.grade__status {
}
// CASE: is not started
&.is--unstarted {
display: none;
}
// STATE: is incomplete
// CASE: is incomplete
&.is--incomplete {
.step__header {
border-bottom: none;
padding: 0;
}
}
// STATE: is complete
// CASE: 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
......@@ -943,7 +996,6 @@
}
}
// --------------------
// 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