Skip to content

E
edx-ora2
Commit 25a63c91 by Brian Talbot
Options

Merge pull request #69 from edx/talbs/styling-selfassessment 

Self Assessment Template/Styling Work
parents b82a48bf 2349b9ec
Showing with 136 additions and 45 deletions
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -26,9 +26,9 @@ ...@@ -26,9 +26,9 @@
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span> <span class="step__status__value">
<span class="step__status__label">This step's status:</span> <span class="copy">{{ step_status }}</span>
<span class="step_status_value">{{ step_status }}</span> </span>
</span> </span>
{% endblock %} {% endblock %}
</header> </header>
...@@ -36,63 +36,75 @@ ...@@ -36,63 +36,75 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="step__content"> <div class="step__content">
<article class="self-assessment" id="self-assessment"> <article class="self-assessment__display" id="self-assessment">
<header class="self-assessment__header"> <header class="self-assessment__display__header">
<h3 class="self-assessment__title">Your Submitted Response</h3> <h3 class="self-assessment__display__title">Your Submitted Response</h3>
</header> </header>
<!-- ?: markup validating/copy cleaning upon submission --> <!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__response"> <div class="self-assessment__display__response">
{{ self_submission.answer }} {{ self_submission.answer }}
</div> </div>
</article>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post"> <form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
<fieldset class="assessment__fields"> <fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend> <legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<ol class="list list--fields assessment__rubric"> <ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) --> <!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}"> <li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title"> <h4 class="question__title">
{{ criterion.prompt }} <i class="ico fa fa-caret-right"></i>
<span class="label--required">* <span class="sr">(Required)</span></span> <span class="question__title__copy">{{ criterion.prompt }}</span>
</h4> <span class="label--required sr">* (Required)</span>
</h4>
<ol class="question__answers"> <ol class="question__answers">
{% for option in criterion.options %} {% for option in criterion.options %}
<li class="answer"> <li class="answer">
<div class="wrapper--input"> <div class="wrapper--input">
<input type="radio" <input type="radio"
name="{{ criterion.name }}" name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value" class="answer__value"
value="{{ option.name }}" /> value="{{ option.name }}" />
<label for="assessment__rubric__question--001__option--01" <label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label">{{ option.name }}</label> class="answer__label">{{ option.name }}</label>
</div> </div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span> <span class="answer__tip">{{ option.explanation }}</span>
</li> <span class="answer__points">{{option.points}} <span class="label">points</span></span>
{% endfor %} </div>
</ol> </li>
</li> {% endfor %}
{% endfor %} </ol>
<!-- individual rubric question (text) -->
<li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
<label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li> </li>
</ol> {% endfor %}
</fieldset>
<!-- individual rubric question (text) -->
<li class="wrapper--input field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
<label for="assessment__rubric__question--004__value">
<i class="ico fa fa-caret-right"></i>
<span class="question__title__copy">Please provide any other feedback you have around this response</span>
</label>
<textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
<div class="self-assessment__actions">
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button> <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico fa fa-arrow-right"></i>
</button>
</li> </li>
</ul> </ul>
</form> </div>
</article> </form>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
......
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/views/_oa-base.scss
...@@ -664,6 +664,85 @@ ...@@ -664,6 +664,85 @@
// -------------------- // --------------------
.step--self-assessment { .step--self-assessment {
// submission
.self-assessment__display {
@extend %ui-section;
}
.self-assessment__display__header {
@extend %ui-section-title;
@include clearfix();
span {
@extend %t-weight3; // FIX: needed due to DOM structure
}
.self-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3;
float: left;
}
}
.self-assessment__display__response {
@extend %copy-charlie;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
// assessment form
.self-assessment__assessment {
// fields
.assessment__fields {
margin-bottom: $spacing-bravo;
}
// rubric question
.assessment__rubric__question {
@extend %ui-rubric-question;
}
// rubric options
.question__answers {
@extend %ui-rubric-answers;
}
// genereal feedback question
.assessment__rubric__question--feedback {
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*5);
}
}
}
// step actions
.self-assessment__actions {
text-align: center;
@include media($bp-ds) {
text-align: right;
}
@include media($bp-dm) {
text-align: right;
}
@include media($bp-dl) {
text-align: right;
}
@include media($bp-dx) {
text-align: right;
}
.action--submit {
@extend %btn--primary;
@extend %action-delta;
}
}
} }
......
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