Skip to content

E
edx-ora2
Commit 883ab7f8 by Brian Talbot
Options

WIP - styling rubric/complete response state

parent 423a5ee0
Showing with 225 additions and 87 deletions
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -27,72 +27,77 @@ ...@@ -27,72 +27,77 @@
<!-- 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 %}
{% with criterion_num=forloop.counter %}
<!-- individual question from rubric -->
<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>
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %}
<!-- individual question from rubric -->
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="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">{{ criterion.total_value }}</span> <span class="question__score__potential">
{{ criterion.total_value }}
<span class="unit">Points</span>
</span>
</span> </span>
</h4> </h4>
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<ul class="question__answers ui-toggle-visibility__content">
<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"> <ul class="question__answers ui-toggle-visibility__content">
{{ part.option.explanation }} {% for assessment in peer_assessments %}
</span> {% with peer_num=forloop.counter %}
</li> {% for part in assessment.parts %}
</ul> {% if part.option.criterion.name == criterion.name %}
{% endif %} <li class="answer peer-assessment--{{ peer_num}}"
{% endfor %} 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 %} {% endwith %}
{% endfor %} {% endfor %}
</li> </ol>
{% endwith %}
{% endfor %}
</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">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3> <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"> <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. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</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">
<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/t-grade.html
...@@ -85,12 +85,4 @@ ...@@ -85,12 +85,4 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span> <span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
</div> </div>
<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> </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/_developer.scss
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
// background: transparent; // background: transparent;
// } // }
// --------------------
// Views: Counterbalancing XBlock workbench styling
// --------------------
.workbench .vertical {
border: none;
}
// -------------------- // --------------------
// Views: Static HTML Page Display // Views: Static HTML Page Display
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -7,11 +7,29 @@ ...@@ -7,11 +7,29 @@
// -------------------- // --------------------
// in-view extends // in-view extends
// -------------------- // --------------------
%ui--content--longanswer { %ui-content-longanswer {
max-height: ($baseline-v*15); max-height: ($baseline-v*15);
overflow-y: scroll; 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;
} }
...@@ -350,8 +368,8 @@ ...@@ -350,8 +368,8 @@
} }
// STATE: step is complete/submitted // STATE: step is complete/submitted/graded
&.is--complete, &.is--submitted { &.is--complete, &.is--submitted, &.is--graded {
.step__counter:before { .step__counter:before {
border-color: rgba($color-complete, 0.5); border-color: rgba($color-complete, 0.5);
...@@ -460,7 +478,7 @@ ...@@ -460,7 +478,7 @@
} }
textarea { textarea {
@extend %ui--content--longanswer; @extend %ui-content-longanswer;
width: 100%; width: 100%;
min-height: ($baseline-v*10); min-height: ($baseline-v*10);
} }
...@@ -485,40 +503,161 @@ ...@@ -485,40 +503,161 @@
// STATE: displayed response // STATE: displayed response
.submission__answer__display { .submission__answer__display {
border: ($baseline-v/10) solid $color-decorative-tertiary; @extend %ui-section;
border-radius: ($baseline-v/10);
} }
.submission__answer__display__title { .submission__answer__display__title {
@extend %hd-golf; @extend %ui-section-title;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
} }
.submission__answer__display__content { .submission__answer__display__content {
@extend %copy-charlie; @extend %copy-charlie;
@extend %ui--content--longanswer; @extend %ui-content-longanswer;
padding: $spacing-bravo; @extend %ui-section-content;
} }
// STATE: complete/graded // --------------------
&.is--graded { // STATE: graded/complete
// --------------------
.submission__answer__display { // peer review summary
margin-bottom: $spacing-bravo; .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;
} }
.submission__peer-evaluations { .question__title {
@include clearfix();
margin-bottom: $spacing-bravo; margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
} }
.submission__peer-evaluations__title { .question__title__copy {
@extend %hd-golf; @extend %hd-delta;
@extend %t-weight3; @extend %t-weight3;
float: left;
color: $heading-secondary-color; 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 {
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-m) {
}
@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-content;
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
padding-top: $spacing-bravo;
}
.submission__feeedback__title {
}
.submission__feeedback__content {
} }
} }
...@@ -594,9 +733,4 @@ ...@@ -594,9 +733,4 @@
// STATE: waiting // STATE: waiting
// -------------------- // --------------------
// --------------------
// STATE: graded/complete
// --------------------
} }
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