Skip to content

E
edx-ora2
Commit d9cca545 by Brian Talbot
Options

Merge pull request #75 from edx/talbs/ui-gradestatus 

Grade Status Template/Styling Work
parents a22d99be d6af43e1
Showing with 323 additions and 193 deletions
apps/openassessment/assessment/serializers.py
......@@ -151,7 +151,7 @@ def get_assessment_review(submission):
rendering the complete peer grading workflow.
Examples:
>>> get_assessment_review(submission)
>>> get_assessment_review(submission, score_type)
[{
'submission': 1,
'rubric': {
......
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">
<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 %}
{% for part in self_assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer self-assessment"
id="question--{{ criterion_num }}__answer--self">
<h5 class="answer__title">
<span class="answer__source">
<span class="value">Your Answer</span>
</span>
<span class="answer__value">
<span class="label sr">Your Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
<li class="question question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">Additional feedback on your response</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% if assessment.feedback %}
<li class="answer peer-evaluation--{{ peer_num }}" id="question--feedback__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Evaluator's Assessment: </h6>
<div class="value">
<p>{{ assessment.feedback }}</p>
</div>
</div>
</li>
{% endif %}
{% endwith %}
{% endfor %}
</ul>
<!-- 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>
</li>
</ol>
</article>
<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>
<div class="openassessment__grade__content">
<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
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete">
<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">Not Completed</span>
<p class="grade__value__description">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>
</span>
</span>
</h2>
</header>
</li>
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
<div id="openassessment__grade" class="openassessment__grade is--unstarted">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted">
<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">
<p>You have not started this problem</p>
<div class="openassessment__grade__content">
<span class="grade__value">Not Completed</span>
<p>You have not started this problem</p>
</div>
</div>
\ No newline at end of file
</span>
</span>
</h2>
</header>
</li>
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/grade_mixin.py
from xblock.core import XBlock
from openassessment.assessment.peer_api import get_assessments
from openassessment.assessment import peer_api
class GradeMixin(object):
"""Grade Mixin introduces all handlers for displaying grades
......@@ -21,14 +21,31 @@ class GradeMixin(object):
context = {}
if status == "done":
path = 'openassessmentblock/grade/oa_grade_complete.html'
context = {
"score": workflow["score"],
"assessments": [
assessment
for assessment in get_assessments(self.submission_uuid)
],
}
elif status == "waiting":
assessment_ui_model = self.get_assessment_module('peer-assessment')
student_submission = self.get_user_submission(
workflow["submission_uuid"]
)
student_score = workflow["score"]
assessments = peer_api.get_assessments(student_submission["uuid"])
peer_assessments = []
self_assessment = None
for assessment in assessments:
if assessment["score_type"] == "PE":
peer_assessments.append(assessment)
else:
self_assessment = assessment
median_scores = peer_api.get_assessment_median_scores(
student_submission["uuid"],
assessment_ui_model["must_be_graded_by"]
)
context["student_submission"] = student_submission
context["peer_assessments"] = peer_assessments
context["self_assessment"] = self_assessment
context["rubric_criteria"] = self.rubric_criteria
context["score"] = student_score
for criterion in context["rubric_criteria"]:
criterion["median_score"] = median_scores[criterion["name"]]
elif workflow.get('status') == "waiting":
path = 'openassessmentblock/grade/oa_grade_waiting.html'
elif not status:
path = 'openassessmentblock/grade/oa_grade_not_started.html'
......
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/_developer.scss
......@@ -18,6 +18,9 @@
border: none;
}
.workbench .debug, .workbench header.banner {
display: none;
}
// --------------------
// Views: Static HTML Page Display
......@@ -26,64 +29,3 @@
background: $bg-view;
margin: ($baseline-v*2) $baseline-h;
}
.wrapper--xblock {
// typography tests
.h1 {
@extend %hd-1;
}
.h2 {
@extend %hd-2;
}
.h3 {
@extend %hd-3;
}
.h4 {
@extend %hd-4;
}
.h5 {
@extend %hd-5;
}
.h6 {
@extend %hd-6;
}
.h7 {
@extend %hd-7;
}
.h8 {
@extend %hd-8;
}
.copy-1 {
@extend %copy-1;
}
.copy-2 {
@extend %copy-2;
}
.copy-3 {
@extend %copy-3;
}
.copy-4 {
@extend %copy-4;
}
.copy-5 {
@extend %copy-5;
}
.copy-6 {
@extend %copy-6;
}
}
// temp
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
......@@ -59,22 +59,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 +87,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 +507,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 +730,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__description {
.grade__value__title {
@extend %hd-6;
}
.grade__value__description {
@extend %copy-4;
}
}
// STATE: is not started
&.is--unstarted {
.grade__summary {
@extend %copy-2;
}
.grade__status {
}
// STATE: is incomplete
// CASE: is not started
&.is--unstarted {
display: none;
}
// 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
......@@ -885,17 +933,17 @@
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega(3n);
@include omega(4n);
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega(3n);
@include omega(4n);
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega(3n);
@include omega(4n);
}
}
......@@ -943,7 +991,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