Skip to content

E
edx-ora2
Commit 8ae27aee by Brian Talbot
Options

adding step-based messages archetypes and specific cases to templates

parent f38df65c
Showing with 230 additions and 35 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_peer_noresponses.html 0 → 100644
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--waiting">
<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 Peer Responses to Assess</span>
</span>
</span>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -32,9 +32,6 @@ ...@@ -32,9 +32,6 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction"> <div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p> <p>Please read and assess the following response from one of your peers.</p>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete is--collapsed"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -19,4 +19,13 @@ ...@@ -19,4 +19,13 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The deadline for this part of the problem has passed</h3>
<div class="message__content">You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--empty is--complete is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -17,10 +17,105 @@ ...@@ -17,10 +17,105 @@
</span> </span>
{% endblock %} {% endblock %}
{% block message %} {% block body %}
<div class="step__message message message--confirmation message--confirmation-turbo-mode"> <div class="ui-toggle-visibility__content">
<h3 class="message__title">Congratulations!</h3> <div class="wrapper--step__content">
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
<div class="step__message message message--complete">
<h3 class="message__title">Congratulations!</h3>
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
</div>
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p>
</div>
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
</header>
<div class="peer-assessment__display__response">
{{ peer_submission.answer.text|linebreaks }}
</div>
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">Please provide additional feedback for this response</span>
</label>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
</article>
</li>
</ul>
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--empty is--waiting is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--waiting is--empty is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction"> <div class="step__instruction">
<p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis">After you submit your response, you cannot edit it</strong>.</p> <p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis">After you submit your response, you cannot edit it</strong>.</p>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--incomplete is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -15,10 +15,12 @@ ...@@ -15,10 +15,12 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p> <div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</div>
</div>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--complete is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--complete is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -17,6 +17,12 @@ ...@@ -17,6 +17,12 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete">
<h3 class="message__title">Your response has been successfully submitted</h3>
<div class="message__content">Your peers in this class will now grade this response and you will receive feedback shortly</div>
</div>
<div class="step__content"> <div class="step__content">
<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>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -29,9 +29,6 @@ ...@@ -29,9 +29,6 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__content"> <div class="step__content">
<article class="self-assessment__display" id="self-assessment"> <article class="self-assessment__display" id="self-assessment">
<header class="self-assessment__display__header"> <header class="self-assessment__display__header">
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete is--empty is--collapsed"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -15,4 +15,13 @@ ...@@ -15,4 +15,13 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -89,12 +89,23 @@ ...@@ -89,12 +89,23 @@
} }
} }
// STATE: is unavailable // STATE: is complete
&.is--complete { &.is--complete {
border-top-color: $color-complete; border-top-color: $color-complete;
} }
// STATE: is incomplete // STATE: is incomplete
&.is--incomplete {
border-top-color: $color-incomplete;
}
// STATE: has errors
&.has--error {
border-top-color: $color-error;
}
// STATE: is incomplete
&.is--closed, &.is--incomplete { &.is--closed, &.is--incomplete {
border-top-color: $color-incomplete; border-top-color: $color-incomplete;
} }
......
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
...@@ -26,8 +26,9 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12); ...@@ -26,8 +26,9 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12);
// -------------------- // --------------------
// // application - colors: states // // application - colors: states
// -------------------- // --------------------
$color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(98, 194, 74);
$color-error: rgb(188, 85, 71); $color-error: rgb(188, 85, 71);
$color-warning: rgb(229, 166, 53);
$color-complete: rgb(98, 194, 74);
$color-incomplete: $color-warning;
$color-confirm: $heading-primary-color; $color-confirm: $heading-primary-color;
$color-unavailable: tint($copy-color, 85%); $color-unavailable: tint($copy-color, 85%);
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -321,6 +321,22 @@ ...@@ -321,6 +321,22 @@
// STATE: step is incomplete // STATE: step is incomplete
&.is--incomplete { &.is--incomplete {
.step__counter:before {
border-color: rgba($color-incomplete, 0.5);
color: $color-incomplete;
}
.step__status__value {
background: $color-incomplete;
.copy {
color: $white-t;
}
}
.step__label {
color: $color-incomplete;
}
} }
// STATE: step is unavailable // STATE: step is unavailable
...@@ -443,39 +459,70 @@ ...@@ -443,39 +459,70 @@
// -------------------- // --------------------
.message { .message {
margin-bottom: ($baseline-v*1.5); margin-bottom: ($baseline-v*1.5);
border-radius: ($baseline-v/10);
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quaternary;
.message__title { .message__title {
@extend %hd-3; @extend %t-heading;
@extend %t-strong; margin-bottom: ($baseline-v/4);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
} }
.message__content { .message__content {
@extend %copy-3; @extend %copy-3;
color: $copy-secondary-color;
} }
} }
// TYPE: error // TYPE: error
.message--error { .message--error {
background: tint($color-confirm, 95%);
.message__title { .message__title {
color: $color-error; color: $color-error;
} border-bottom-color: $color-error;
.message__content {
color: tint($color-error, 33%);
} }
} }
// TYPE: warning // TYPE: warning
.message--warning { .message--warning {
background: tint($color-warning, 95%);
.message__title {
color: $color-warning;
border-bottom-color: $color-warning;
}
} }
// TYPE: confirmation // TYPE: confirmation
.message--confirmation { .message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete
.message--complete {
background: tint($color-complete, 95%);
.message__title { .message__title {
color: $color-complete; color: $color-complete;
border-bottom-color: $color-complete;
}
}
// TYPE: incomplete
.message--incomplete {
background: tint($color-incomplete, 95%);
.message__title {
color: $color-incomplete;
border-bottom-color: $color-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