Skip to content

E
edx-ora2
Commit b82a48bf by Brian Talbot
Options

Merge pull request #67 from edx/talbs/styling-peerassessment 

Peer Assessment Template/Styling Work
parents 3e07e49f 671a0f33
Showing with 649 additions and 318 deletions
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -11,18 +11,18 @@
<!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
<span class="system__element" id="peer_submission_uuid">
{{ peer_submission.uuid }}
</span>
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
</span>
</h2>
......@@ -36,85 +36,100 @@
</span>
</span>
</span>
{% endblock %}
</header>
{% endblock %}
{% block body %}
<div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p>
</div>
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</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">
<header class="peer-assessment__header">
<h3 class="peer-assessment__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
<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>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-assessment__response">
{{ peer_submission.answer }}
</div>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-assessment__display__response">
{{ peer_submission.answer }}
</div>
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
{{ criterion.prompt }}
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<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 }}"
class="answer__value"
value="{{ option.name }}" />
({{option.points}})
<label for="assessment__rubric__question--001__option--01"
class="answer__label"
>{{ option.name }}</label>
</div>
<span class="answer__tip">{{ option.explanation }}</span>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
<i class="ico fa fa-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<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="label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
<!-- 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>
</ol>
</fieldset>
<!-- individual rubric question (text) -->
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--004">
<label class="question__title" 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>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">{{ submit_button_text }}</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
<div class="peer-assessment__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-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>
</ul>
</div>
</form>
</article>
</li>
</ul>
</div>
</div>
{% endblock %}
{% endblock %}
</li>
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -5,16 +5,16 @@
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -5,16 +5,16 @@
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
......@@ -5,13 +5,13 @@
{% endblock %}
{% block title %}
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span>
</span>
</span>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -40,37 +40,39 @@
</header>
{% block body %}
<div class="step__instruction">
<p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="step__content">
<form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea>
</li>
</ol>
<div class="step__content">
<form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea>
</li>
</ol>
<ul class="list list--actions response__submission__actions">
<li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
</li>
</ul>
</form>
</div>
<ul class="list list--actions response__submission__actions">
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li>
</ul>
</div>
</div>
{% endblock %}
</li>
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="step__instruction">
<p>You did not complete this portion of the problem before its due date.</p>
</div>
<div class="ui-toggle-visibility__content">
<div class="step__instruction">
<p>You did not complete this portion of the problem before its due date.</p>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
......@@ -30,55 +31,54 @@
<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 %}
<!-- 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="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>
<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>
<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>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
{% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
</ol>
</article>
......@@ -100,4 +100,5 @@
</ul>
</form>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -5,16 +5,17 @@
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
......@@ -25,4 +26,5 @@
</div>
</article>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -9,92 +9,91 @@
-->
<!-- CASE: default/not started -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
<header class="step__header">
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--expanded">
{% endblock %}
<header class="step__header">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__label">Evaluate Your Response</span>
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
</span>
</h2>
{% block title %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">{{ step_status }}</span>
</span>
{% endblock %}
</header>
{% endblock %}
</header>
{% block body %}
<div class="step--content">
<article class="self-assessment" id="self-assessment">
<header class="self-assessment__header">
<h3 class="self-assessment__title">Your Submitted Response</h3>
</header>
<div class="ui-toggle-visibility__content">
<div class="step__content">
<article class="self-assessment" id="self-assessment">
<header class="self-assessment__header">
<h3 class="self-assessment__title">Your Submitted Response</h3>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__response">
{{ self_submission.answer }}
</div>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__response">
{{ self_submission.answer }}
</div>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
{{ criterion.prompt }}
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
{{ criterion.prompt }}
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<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 }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--001__option--01"
class="answer__label">{{ option.name }}</label>
</div>
<span class="answer__tip">{{ option.explanation }}</span>
</li>
{% endfor %}
</ol>
<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 }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--001__option--01"
class="answer__label">{{ option.name }}</label>
</div>
<span class="answer__tip">{{ option.explanation }}</span>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
<!-- 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>
{% endfor %}
</ol>
</fieldset>
<!-- 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>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
</li>
</ol>
</fieldset>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
</li>
</ul>
</form>
</article>
</ul>
</form>
</article>
</div>
</div>
{% endblock %}
</li>
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -2,17 +2,17 @@
<!-- CASE: not started and problem closed -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
\ No newline at end of file
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -6,13 +6,13 @@
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}{% 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/js/design.js → apps/openassessment/xblock/static/js/src/design.js
......@@ -5,16 +5,21 @@
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) {
window.open($(e.target).attr('href'));
e.preventDefault();
window.open($(e.target).attr('href'));
}
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
// --------------------
jQuery(document).ready(function($) {
// removing no-js, accessibility/modernizr marker
$('html').removeClass('no-js');
// collapse/expand UI
$('.ui-toggle-visibility ui-toggle-visibility__control').bind('click', toggleExpansion);
// general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow);
......
apps/openassessment/xblock/static/js/design.min.js → apps/openassessment/xblock/static/js/src/design.min.js
......@@ -2,4 +2,4 @@
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){window.open($(e.target).attr("href"));e.preventDefault()}jQuery(document).ready(function(e){e("html").removeClass("no-js");e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
function $linkNewWindow(e){e.preventDefault();window.open($(e.target).attr("href"))}function $toggleExpansion(e){e.preventDefault();$(e.target).closest(".ui-toggle-visibility").toggleClass("is--collapsed")}jQuery(document).ready(function(e){e(".ui-toggle-visibility ui-toggle-visibility__control").bind("click",toggleExpansion);e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss 0 → 100644
// openassessment: utilities - extends
// ====================
// NOTES:
// * these are Sass-placeholders (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) that are meant for use with just openassessment UI
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%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;
}
// --------------------
// UI: rubric
// --------------------
// rubric question
%ui-rubric-question {
@include clearfix();
margin-bottom: $spacing-bravo;
@extend %wipe-last-child;
.question__title {
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
.ico {
display: inline-block;
vertical-align: middle;
margin-right: $spacing-delta;
}
}
.question__title__copy {
@extend %hd-delta;
@extend %t-weight3;
color: $heading-primary-color;
}
}
// rubric answers
%ui-rubric-answers {
.answer {
@include row();
@extend %trans-opacity;
@extend %wipe-last-child;
margin-bottom: $spacing-charlie;
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie;
opacity: 0.75;
&:hover {
opacity: 1.0;
}
}
.wrapper--input {
margin-bottom: $spacing-delta;
@include media($bp-ds) {
@include span-columns(6 of 6);
}
@include media($bp-dm) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
.answer__value, .answer__label {
display: inline-block;
vertical-align: middle;
}
.answer__label {
@extend %copy-delta;
@extend %t-weight3;
margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused;
}
.answer__value {
margin-right: $spacing-charlie;
// STATE: checked
&:checked {
+ .answer__label {
color: $selected-color;
}
}
}
}
.wrapper--metadata {
display: block;
@include media($bp-dm) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
}
.answer__tip, .answer__points {
display: block;
}
.answer__tip {
margin-bottom: $spacing-charlie;
@extend %copy-epsilon;
margin-right: $spacing-bravo;
color: $copy-supplemental-color;
@include media($bp-dm) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
&:after {
content: "";
}
}
.answer__points {
@extend %copy-epsilon;
color: $copy-color;
@extend %copy-epsilon;
margin-right: $spacing-bravo;
color: $copy-supplemental-color;
@include media($bp-dm) {
float: right;
text-align: right;
}
@include media($bp-dl) {
float: right;
text-align: right;
}
@include media($bp-dx) {
float: right;
text-align: right;
}
.label {
@extend %copy-epsilon; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style
margin-left: $spacing-delta;
color: $copy-supplemental-color;
}
}
}
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -534,6 +534,128 @@
// --------------------
.step--peer-assessment {
.list--peer-assessments {
@extend %no-list;
}
// peer submission
.peer-assessment__display {
@extend %ui-section;
}
.peer-assessment__display__header {
@extend %ui-section-title;
@include clearfix();
span {
@extend %t-weight3; // FIX: needed due to DOM structure
}
.peer-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3;
margin-bottom: $spacing-delta;
@include media($bp-ds) {
float: left;
margin-bottom: 0;
}
@include media($bp-dm) {
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
float: left;
margin-bottom: 0;
}
}
.peer-assessment__expected-time {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3;
@include media($bp-ds) {
float: right;
}
@include media($bp-dm) {
float: right;
}
@include media($bp-dl) {
float: right;
}
@include media($bp-dx) {
float: right;
}
}
}
.peer-assessment__display__response {
@extend %ui-section-content;
}
// assessment form
.peer-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
.peer-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;
}
}
}
......@@ -607,7 +729,7 @@
.submission__peer-evaluations__questions {
@extend %no-list;
@extend %ui-section-content;
margin-bottom: $spacing-charlie; // override city
margin-bottom: $spacing-charlie;
&:last-child {
margin-bottom: 0;
......
apps/openassessment/xblock/static/sass/openassessment.scss
......@@ -73,6 +73,7 @@
// specific UI for this application
// --------------------
@import 'oa/utilities/variables'; // specific variables and overrides
@import 'oa/utilities/extends'; // open assessment extends
@import 'oa/elements/header'; // view/app headers
@import 'oa/elements/footer'; // view/app footers
@import 'oa/elements/navigation'; // navigation sets
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
......@@ -43,6 +43,7 @@ hr.divider,
.list--actions,
.list--docs,
.list--steps,
.list--fields,
.list--controls,
.list--fields,
.list--help,
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -85,6 +85,10 @@
display: inline-block;
vertical-align: middle;
}
.copy {
margin-right: $spacing-charlie;
}
}
%btn-pill {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -17,6 +17,7 @@
padding: $spacing-charlie;
font-family: $f-copy;
outline: 0;
color: $selected-color;
@include placeholder {
color: $copy-supplemental-color-alt;
......
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
......@@ -171,42 +171,3 @@
%deco-circle {
border-radius: 99999em;
}
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-quaternary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-focus {
border-color: $color-decorative-tertiary;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-quaternary;
color: $heading-tertiary-color;
}
%ui-section-title-focus {
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -147,6 +147,7 @@ $color-decorative-quaternary: tint($gray-l6, 10%);
// application - colors: states
$color-disabled: $gray-l4;
$color-unfocused: $gray-l2;
$color-focused: $blue-u2;
// application - colors: actions
......
karma.conf.js
......@@ -29,7 +29,7 @@ module.exports = function(config) {
// list of files to exclude
exclude: [
'src/design*.js'
],
......
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