Skip to content

E
edx-ora2
Commit a9a9184c by Brian Talbot
Options

Merge pull request #72 from edx/talbs/fed-cleanup 

Front End Development Cleanup/Loose Ends
parents cdf74f7a 669f269b
Showing with 240 additions and 1991 deletions
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
<!-- TEMPLATE: peer evaluation -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* each .peer-evaluation item needs a unique id attribute formatted as #peer-evaluation--###
* individual rubric questions' answers need specific id attributes in several places
-->
<!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
......@@ -62,7 +50,6 @@
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-assessment__display__response">
{{ peer_submission.answer }}
</div>
......@@ -104,13 +91,12 @@
</li>
{% endfor %}
<!-- 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">
<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">
<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>
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: started, but incomplete and problem closed -->
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
......@@ -17,4 +17,5 @@
</span>
{% endblock %}
{% block body %}{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: completed -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
......@@ -17,4 +17,5 @@
</span>
{% endblock %}
{% block body %}{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: no peer responses to assess -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
......@@ -14,4 +14,5 @@
</span>
{% endblock %}
{% block body %}{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
<!-- TEMPLATE: student response -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* class of is--saved is added when response is saved by system
* class of is--submitted is added when user has formally submitted response
* class of is--graded is added when user's response has proper amount of completed peer evaluations
* class of is--updated is added to the step__status element when a response is saved
-->
<!-- CASE: default/unanswered -->
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %}
......@@ -56,7 +41,7 @@
<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>
<button type="submit" id="submission__save" class="action action--save submission__save">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
</li>
</ul>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -17,7 +17,6 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......@@ -26,14 +25,12 @@
</div>
</article>
<!-- peer evaluations -->
<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 %}
<!-- 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>
......@@ -82,7 +79,6 @@
</ol>
</article>
<!-- peer assessment feedback -->
<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>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -17,7 +17,6 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
<!-- TEMPLATE: self evaluation -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* each .self-assessment item needs a unique id attribute formatted as #self-assessment--###
* individual rubric questions' answers need specific id attributes in several places
-->
<!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--expanded">
{% endblock %}
......@@ -41,7 +29,6 @@
<h3 class="self-assessment__display__title">Your Submitted Response</h3>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__display__response">
{{ self_submission.answer }}
</div>
......@@ -53,43 +40,41 @@
<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>
<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>
<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="wrapper--input field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
<label for="assessment__rubric__question--004__value">
<li class="wrapper--input field field--textarea assessment__rubric__question" id="assessment__rubric__question--feedback">
<label for="assessment__rubric__question--feedback__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>
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
<!-- CASE: not started and problem closed -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
......@@ -15,4 +14,5 @@
</span>
{% endblock %}
{% block body %}{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
<!-- CASE: complete -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
......@@ -15,4 +14,5 @@
</span>
{% endblock %}
{% block body %}{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/t-base.html deleted 100644 → 0
<!-- TEMPLATE: base -->
<!-- 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--openassessment wrapper--xblock theme--basic">
<div class="openassessment" id="openassessment">
<div class="wrapper--grid">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
Assignment Number 1 - Censorship in Libraries
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
+
<span class="problem-type problem-type--peer-assessment">Peer</span>
+
<span class="problem-type problem-type--self-assessment">Self Assessment</span>
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
<li class="list--nav__item">
<a class="action" href="#openassessment__response">Your response to this problem</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
</li>
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</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">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<blockquote>
<p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
<footer>
&mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
</footer>
</blockquote>
<p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
<!-- SEE t-response.html for all cases -->
<!-- ==== -->
<!-- STEP: peer assessment -->
<!-- SEE t-peer-assessment.html for all cases -->
<!-- ==== -->
<!-- STEP: self assessment -->
<!-- SEE t-self-assessment.html for all cases -->
</ol>
<!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases -->
</div>
</div>
</div>
apps/openassessment/templates/openassessmentblock/t-grade.html deleted 100644 → 0
<!-- TEMPLATE: grade status -->
<!-- NOTES:
* class of is--incomplete is added when the problem is in an incomplete state
* class of is--complete is added when problem is successfully completed by user
* class of has--grade is added when a grade (failing or passing) is calculated for user
* classes of needs--* are added when user action is needed
* classes of awaiting--* are added when a user's flow is dependent upon system readiness
-->
<!-- CASE: default/unstarted -->
<div id="openassessment__grade" class="openassessment__grade is--unstarted">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You have not started this problem</p>
</div>
</div>
<!-- CASE: is in-progress and incomplete (no response submission) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete needs--response">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Response</span>, <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem</p>
</div>
</div>
<!-- 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">Incomplete</span>
<p>You have not completed the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
</div>
</div>
<!-- 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 being evaluated by your peers. Once complete, you will receive a final grade and detailed feedback from their evaluations.</p>
</div>
</div>
<!-- CASE: is in-progress and incomplete (no self assessment) -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete needs--self-assessment">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You have not completed the <span class="step">Self Assessment</span> portion of this problem.</p>
</div>
</div>
<!-- CASE: is incomplete and problem closed -->
<div id="openassessment__grade" class="openassessment__grade is--incomplete has--grade">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">Incomplete</span>
<p>You did not complete the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
</div>
</div>
<!-- CASE: is complete -->
<div id="openassessment__grade" class="openassessment__grade is--complete has--grade">
<h2 class="openassessment__grade__title">Your Grade:</h2>
<div class="openassessment__grade__content">
<span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
</div>
</div>
apps/openassessment/templates/openassessmentblock/t-messages.html deleted 100644 → 0
<!-- 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
-->
<!-- CASE: completion status is incomplete and peer evaluations are needed -->
<div class="message message--warning">
<h2 class="message__title">You still need to submit your response to this question</h2>
<div class="message__copy">
<p>Please note that self assessments are due on: <span class="step__deadline">due <span class="date">Jan 24, 2014</span> at <span class="time">15:00 UTC</span></span></p>
</div>
</div>
<!-- CASE: completion status is incomplete and self assessment is needed -->
<div class="message message--warning">
<h2 class="message__title">You still need to complete your self assessment</h2>
<div class="message__copy">
<p>Please note that self assessments are due on: <span class="step__deadline">due <span class="date">Jan 30, 2014</span> at <span class="time">15:00 UTC</span></span></p>
</div>
</div>
<!-- CASE: problem is closed and completion status is incomplete -->
<div class="message message--warning">
<h2 class="message__title">This problem’s due date has past &amp; submissions are now closed</h2>
<div class="message__copy">
<p>You did not complete the necessary requirements and received an incomplete grade</p>
</div>
</div>
<!-- CASE: problem is closed/open and completion status is complete -->
<div class="message message--confirmation has--actions">
<h2 class="message__title">You have completed this problem</h2>
<ul class="list--actions">
<li class="list--actions__item">
<a class="action" href="#openassessment__grade">View your grade</a>
</li>
</ul>
</div>
apps/openassessment/templates/openassessmentblock/t-peer-assessment.html deleted 100644 → 0
<!-- TEMPLATE: peer assessment -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* each .peer-assessment item needs a unique id attribute formatted as #peer-assessment--###
* individual rubric questions' answers need specific id attributes in several places
-->
<!-- CASE: default/not started -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">0</span> of
<span class="step__status__value--required">5</span> completed
</span>
</span>
</header>
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers in the course.</p>
</div>
<div class="step__content">
<ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item">
<article class="peer-assessment" id="peer-assessment--001">
<header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">assessment #
<span class="peer-evaluation__number--current">1</span> of
<span class="peer-evaluation__number--required">3</span>
</h3>
<span class="peer-evaluation__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">20 Minutes</span>
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="peer-assessment--001__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__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__evaluation__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li>
<!-- CASE: started, but incomplete -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">1</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers in the course.</p>
</div>
<div class="step__content">
<ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item">
<article class="peer-assessment" id="peer-assessment--002">
<header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">assessment #
<span class="peer-evaluation__number--current">2</span> of
<span class="peer-evaluation__number--required">3</span>
</h3>
<span class="peer-evaluation__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">20 Minutes</span>
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="peer-assessment--002__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__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__evaluation__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li>
<!-- CASE: started, but incomplete and problem closed -->
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<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="step__status__value--completed">1</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
</li>
<!-- CASE: no peer responses to assess -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<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">
Awaiting Peer Resposes
</span>
</span>
</header>
</li>
<!-- CASE: completed -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">3</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
</li>
apps/openassessment/templates/openassessmentblock/t-response.html deleted 100644 → 0
<!-- TEMPLATE: student response -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* class of is--saved is added when response is saved by system
* class of is--submitted is added when user has formally submitted response
* class of is--graded is added when user's response has proper amount of completed peer evaluations
* class of is--updated is added to the step__status element when a response is saved
-->
<!-- CASE: default/unanswered -->
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Incomplete</span>
</span>
</header>
<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">January 24, 2014</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" method="post">
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
</li>
</ol>
<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>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
</li>
</ul>
</div>
</li>
<!-- CASE: unaswered and problem closed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Incomplete</span>
</span>
</header>
<div class="step__instruction">
<p>You did not complete this portion of the problem before its due date.</p>
</div>
</li>
<!-- CASE: is saved -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status is--updated">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Saved</span>
</span>
</header>
<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">January 24, 2014</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" method="post">
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
</li>
</ol>
<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>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
</li>
</ul>
</div>
</li>
<!-- CASE: is saved and due date has passed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<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">Incomplete</span>
</span>
</header>
<div class="step__instruction">
<p>While you saved some progress (shown below), you did not complete this portion of the problem before its due date.</p>
</div>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Saved, But Not Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<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">Submitted</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted and due date has passed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<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">Submitted</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted and being graded by/awaiting peers -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Submitted &amp; Being Graded</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is graded -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
<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">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Graded</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
<!-- peer evaluations -->
<article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions">
<!-- individual question from rubric -->
<li class="question question--001 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="title__copy">How well did this response answer the overall question?</span>
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">10</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">10</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-assessment--001" id="question--001__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-assessment--002" id="question--001__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--003" id="question--001__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--004" id="question--001__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--005" id="question--001__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- individual question from rubric -->
<li class="question question--002 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="title__copy">How well did this response answer the overall question?</span>
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">10</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">10</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-assessment--001" id="question--002__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-assessment--002" id="question--002__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--003" id="question--002__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--004" id="question--002__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--005" id="question--002__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- individual question from rubric -->
<li class="question question--003 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="title__copy">How well did this response answer the overall question?</span>
<span class="question__score">
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">10</span>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">10</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-assessment--001" id="question--003__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-assessment--002" id="question--003__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--003" id="question--003__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--004" id="question--003__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-assessment--005" id="question--003__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- general feedback question -->
<li class="question question--004 question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">How well did this response answer the overall question?</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-assessment--001" id="question--004__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 1</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Peer's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
<li class="answer peer-assessment--002" id="question--004__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 2</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Peer's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
<li class="answer peer-assessment--003" id="question--004__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer 3</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Peer's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
</ul>
</li>
</ol>
</article>
<!-- peer assessment feedback -->
<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. 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>
</li>
</ol>
<ul class="list list--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>
</li>
apps/openassessment/templates/openassessmentblock/t-self-assessment.html deleted 100644 → 0
<!-- TEMPLATE: self assessment -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
-->
<!-- CASE: default/not started -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<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">Assess 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>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
</span>
</header>
<div class="step--content">
<article class="self-assessment" id="self-assessment">
<header class="self-evaluation__header">
<h3 class="self-evaluation__title">Your Submitted Response</h3>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="self-evaluation__evaluation" class="self-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__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="self-evaluation__evaluation__submit" class="action action--submit">Submit your self assessment</button>
</li>
</ul>
</form>
</article>
</div>
</li>
<!-- CASE: not started and problem closed -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
<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">Assess 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>
</h2>
<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">Incomplete</span>
</span>
</header>
<!-- TO-DO: static self assessment (if present) -->
</li>
<!-- CASE: complete -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed">
<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">Assess 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>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Complete</span>
</span>
</header>
<!-- ?: should this view be rolled into the general peer assessment output and not separated out? -->
</li>
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/contexts/_lms.scss deleted 100644 → 0
// openassessment: contexts - lms UI
// ====================
// NOTES:
// * any openassessment-specific suport-based styling needed for the xblock rendering in edX's LMS should be placed here
// --------------------
// CASE: less than or equal to IE9
// --------------------
.is--in-edxlms {
}
apps/openassessment/xblock/static/sass/oa/contexts/_responsive.scss 0 → 100644
// openassessment: contexts - responsive sizing
// ====================
// NOTES:
// * this creates different sized layouts/grid based to use in lieu of native media queries (since XBlocks don't control the chrome they are rendered in)
.xblock {
// --------------------
// CASE: extra small digital screen
// --------------------
&.ui-size-xs .wrapper--grid {
}
// --------------------
// CASE: small digital screen
// --------------------
&.ui-size-s .wrapper--grid {
}
// --------------------
// CASE: medium digital screen
// --------------------
&.ui-size-m .wrapper--grid {
}
// --------------------
// CASE: large digital screen
// --------------------
&.ui-size-l .wrapper--grid {
}
// --------------------
// CASE: extra large large digital screen
// --------------------
&.ui-size-xl .wrapper--grid {
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -30,59 +30,59 @@
.wrapper--xblock {
// typography tests
.h1 {
@extend %hd-alpha;
@extend %hd-1;
}
.h2 {
@extend %hd-bravo;
@extend %hd-2;
}
.h3 {
@extend %hd-charlie;
@extend %hd-3;
}
.h4 {
@extend %hd-delta;
@extend %hd-4;
}
.h5 {
@extend %hd-epsilon;
@extend %hd-5;
}
.h6 {
@extend %hd-foxtrot;
@extend %hd-6;
}
.h7 {
@extend %hd-golf;
@extend %hd-7;
}
.h8 {
@extend %hd-hotel;
@extend %hd-8;
}
.copy-1 {
@extend %copy-alpha;
@extend %copy-1;
}
.copy-2 {
@extend %copy-bravo;
@extend %copy-2;
}
.copy-3 {
@extend %copy-charlie;
@extend %copy-3;
}
.copy-4 {
@extend %copy-delta;
@extend %copy-4;
}
.copy-5 {
@extend %copy-epsilon;
@extend %copy-5;
}
.copy-6 {
@extend %copy-foxtrot;
@extend %copy-6;
}
}
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -20,19 +20,19 @@
%ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
}
%ui-section-title {
@extend %hd-golf;
@extend %hd-7;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
padding: ($baseline-v/2) $baseline-v;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
padding: $baseline-v;
}
......@@ -42,23 +42,23 @@
// rubric question
%ui-rubric-question {
@include clearfix();
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
@extend %wipe-last-child;
.question__title {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
padding-bottom: ($baseline-v/4);
.ico {
display: inline-block;
vertical-align: middle;
margin-right: $spacing-delta;
margin-right: ($baseline-v/4);
}
}
.question__title__copy {
@extend %hd-delta;
@extend %hd-4;
@extend %t-weight3;
color: $heading-primary-color;
}
......@@ -71,9 +71,9 @@
@include row();
@extend %trans-opacity;
@extend %wipe-last-child;
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
opacity: 0.75;
&:hover {
......@@ -82,7 +82,7 @@
}
.wrapper--input {
margin-bottom: $spacing-delta;
margin-bottom: ($baseline-v/4);
@include media($bp-ds) {
@include span-columns(6 of 6);
......@@ -109,14 +109,14 @@
}
.answer__label {
@extend %copy-delta;
@extend %copy-4;
@extend %t-weight3;
margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused;
}
.answer__value {
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
// STATE: checked
&:checked {
......@@ -152,10 +152,10 @@
}
.answer__tip {
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
@extend %copy-epsilon;
margin-right: $spacing-bravo;
@extend %copy-5;
margin-right: $baseline-v;
color: $copy-supplemental-color;
@include media($bp-dm) {
......@@ -182,11 +182,11 @@
}
.answer__points {
@extend %copy-epsilon;
@extend %copy-5;
color: $copy-color;
@extend %copy-epsilon;
margin-right: $spacing-bravo;
@extend %copy-5;
margin-right: $baseline-v;
color: $copy-supplemental-color;
@include media($bp-dm) {
......@@ -205,9 +205,9 @@
}
.label {
@extend %copy-epsilon; // FIX: need to reset base label style
@extend %copy-5; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style
margin-left: $spacing-delta;
margin-left: ($baseline-v/4);
color: $copy-supplemental-color;
}
}
......
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
......@@ -7,20 +7,20 @@
// --------------------
// layout (neat-based) - forced breakpoints/sizing
// --------------------
$grid-size-s: 530px; // small
$grid-size-m: 760px; // medium
$grid-size-l: 925px; // large
$grid-size-x: 1300px; // extra large
$grid-size-f: 1600px; // full size
$grid-size-s: 530px; // small
$grid-size-m: 760px; // medium
$grid-size-l: 925px; // large
$grid-size-x: 1300px; // extra large
$grid-size-f: 1600px; // full size
// --------------------
// layout (neat-based) - mediaqueries
// --------------------
$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns
$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns
$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6); // small displays - make grid 6 columns
$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
// --------------------
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -17,19 +17,19 @@
// chrome: title
.openassessment__title {
@include row();
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
}
.openassessment__title--super {
@extend %hd-charlie;
@extend %hd-3;
display: block;
margin-bottom: $spacing-delta;
margin-bottom: ($baseline-v/4);
}
.openassessment__title--sub {
@extend %hd-golf;
@extend %hd-7;
display: block;
color: $heading-tertiary-color;
}
......@@ -41,9 +41,9 @@
}
.openassessment__steps__step {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo;
padding-bottom: $baseline-v;
&:last-child {
border-bottom: none;
......@@ -54,27 +54,27 @@
.step__header {
@extend %trans-opacity;
@include row();
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
opacity: 1.0;
@include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
}
@include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
}
@include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
}
@include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
padding-bottom: ($baseline-v/2);
}
.step__deadline {
......@@ -115,14 +115,14 @@
// increment: show numbers using parent list counter
&:before {
@extend %hd-foxtrot;
@extend %hd-6;
@extend %t-weight4;
content: counter(item, decimal);
counter-increment: item;
margin-right: $spacing-delta;
margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: $spacing-delta $spacing-charlie;
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
}
......@@ -133,13 +133,13 @@
}
.step__label {
@extend %hd-delta;
@extend %hd-4;
@extend %t-weight3;
@extend %trans-color;
}
.step__deadline {
@extend %hd-hotel;
@extend %hd-8;
@extend %trans-color;
color: $heading-secondary-color;
}
......@@ -157,7 +157,7 @@
@include media($bp-m) {
display: block;
margin-top: $spacing-charlie;
margin-top: ($baseline-v/2);
}
}
......@@ -169,11 +169,11 @@
.ico {
@extend %t-icon-m;
display: none; // hiding by default
margin-right: $spacing-delta;
margin-right: ($baseline-v/4);
}
.copy {
@extend %copy-foxtrot;
@extend %copy-6;
@extend %t-titlecase;
color: $white-t;
}
......@@ -186,28 +186,28 @@
@include media($bp-ds) {
@include span-columns(2 of 6);
@include omega();
margin-top: $spacing-delta;
margin-top: ($baseline-v/4);
text-align: right;
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
margin-top: ($baseline-v/4);
text-align: right;
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
margin-top: ($baseline-v/4);
text-align: right;
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega();
margin-top: $spacing-delta;
margin-top: ($baseline-v/4);
text-align: right;
}
}
......@@ -225,14 +225,14 @@
// step instructions
.step__instruction {
@extend %copy-delta;
margin-bottom: $spacing-bravo;
@extend %copy-4;
margin-bottom: $baseline-v;
color: $copy-color;
}
// step content
.step__content {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
}
// step actions
......@@ -257,7 +257,7 @@
.action--submit {
@extend %btn--primary;
@extend %action-delta;
@extend %action-4;
}
}
......@@ -394,7 +394,7 @@
}
.openassessment__prompt {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
}
.openassessment__prompt__title {
......@@ -402,11 +402,11 @@
}
.openassessment__prompt__copy {
@extend %copy-bravo;
@extend %copy-2;
color: $copy-lead-color;
> * {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
&:last-child {
@extend %wipe-last-child;
......@@ -427,12 +427,12 @@
// response form
.response__submission {
padding: $spacing-charlie;
padding: ($baseline-v/2);
background: $color-decorative-tertiary;
border-radius: ($baseline-v/10);
.submission__answer {
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
}
}
......@@ -452,7 +452,7 @@
.action--submit, .tip {
display: block;
width: 100%;
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
display: inline-block;
......@@ -479,35 +479,35 @@
}
}
.action--submit {
.action--save {
@extend %btn--secondary;
@extend %action-delta;
@extend %action-4;
display: block;
text-align: center;
@include media($bp-ds) {
display: inline-block;
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
}
@include media($bp-dm) {
display: inline-block;
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
}
@include media($bp-dl) {
display: inline-block;
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
}
@include media($bp-dx) {
display: inline-block;
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
}
}
.tip {
@extend %copy-epsilon;
@extend %copy-5;
color: $copy-supplemental-color;
}
}
......@@ -522,7 +522,7 @@
}
.submission__answer__display__content {
@extend %copy-charlie;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
......@@ -552,9 +552,9 @@
}
.peer-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
margin-bottom: $spacing-delta;
margin-bottom: ($baseline-v/4);
@include media($bp-ds) {
float: left;
......@@ -578,7 +578,7 @@
}
.peer-assessment__expected-time {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
@include media($bp-ds) {
......@@ -601,6 +601,8 @@
.peer-assessment__display__response {
@extend %ui-section-content;
@extend %copy-3;
@extend %ui-content-longanswer;
}
// assessment form
......@@ -608,7 +610,7 @@
// fields
.assessment__fields {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
}
// rubric question
......@@ -653,7 +655,7 @@
.action--submit {
@extend %btn--primary;
@extend %action-delta;
@extend %action-4;
}
}
}
......@@ -678,14 +680,14 @@
}
.self-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
float: left;
}
}
.self-assessment__display__response {
@extend %copy-charlie;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
}
......@@ -695,7 +697,7 @@
// fields
.assessment__fields {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
}
// rubric question
......@@ -740,7 +742,7 @@
.action--submit {
@extend %btn--primary;
@extend %action-delta;
@extend %action-4;
}
}
}
......@@ -752,7 +754,7 @@
.openassessment__grade {
@include row();
border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding-top: $spacing-bravo;
padding-top: $baseline-v;
.openassessment__grade__title, .openassessment__grade__content {
display: inline-block;
......@@ -760,20 +762,20 @@
}
.openassessment__grade__title {
@extend %hd-delta;
margin-right: $spacing-bravo;
@extend %hd-4;
margin-right: $baseline-v;
color: $heading-tertiary-color;
}
.openassessment__grade__content {
.grade__value {
@extend %hd-delta;
margin-bottom: $spacing-charlie;
@extend %hd-4;
margin-bottom: ($baseline-v/2);
}
.grade__description {
@extend %copy-delta;
@extend %copy-4;
}
}
......@@ -808,7 +810,7 @@
.submission__peer-evaluations__questions {
@extend %no-list;
@extend %ui-section-content;
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
&:last-child {
margin-bottom: 0;
......@@ -818,32 +820,32 @@
// individual question
.question {
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
@extend %wipe-last-child;
}
.question__title {
@include clearfix();
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
padding-bottom: ($baseline-v/4);
}
.question__title__copy {
@extend %hd-delta;
@extend %hd-4;
@extend %t-weight3;
float: left;
color: $heading-secondary-color;
}
.question__score {
@extend %copy-foxtrot;
@extend %copy-6;
@extend %t-titlecase;
float: right;
position: relative;
bottom: -($spacing-delta);
margin-left: $spacing-bravo;
padding: $spacing-delta $spacing-charlie ($spacing-delta/2) $spacing-charlie;
bottom: -(($baseline-v/4));
margin-left: $baseline-v;
padding: ($baseline-v/4) ($baseline-v/2) (($baseline-v/4)/2) ($baseline-v/2);
background: $color-decorative-tertiary;
color: $white;
}
......@@ -853,7 +855,7 @@
&:after {
content: "/";
margin-left: $spacing-delta;
margin-left: ($baseline-v/4);
color: $heading-secondary-color;
}
}
......@@ -862,7 +864,7 @@
color: $heading-secondary-color;
.unit {
margin-left: $spacing-delta;
margin-left: ($baseline-v/4);
}
}
......@@ -874,7 +876,7 @@
// individual answers
.answer {
margin-bottom: $spacing-bravo;
margin-bottom: $baseline-v;
@include media($bp-ds) {
@include span-columns(3 of 6);
......@@ -898,20 +900,20 @@
}
.answer__source {
@extend %hd-golf;
@extend %hd-7;
display: block;
color: $heading-tertiary-color;
}
.answer__value {
@extend %copy-charlie;
@extend %copy-3;
display: block;
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
color: $heading-primary-color;
}
.answer__content {
@extend %copy-delta;
@extend %copy-4;
display: block;
color: $copy-supplemental-color;
}
......@@ -936,8 +938,8 @@
.action--submit {
@extend %btn--secondary;
@extend %action-delta;
margin-right: $spacing-charlie;
@extend %action-4;
margin-right: ($baseline-v/2);
}
}
......
apps/openassessment/xblock/static/sass/openassessment.scss
......@@ -82,7 +82,7 @@
// openassessment: contextual
@import 'oa/contexts/ie'; // open assessment-specific Internet Explorer-specific styling
@import 'oa/contexts/lms'; // open assessment-specific LMS constraints
@import 'oa/contexts/responsive'; // open assessment-specific UI sizes (faking responsive brakpoints)
// openassessment: misc.
@import 'oa/utilities/developer'; // developer-friendly file: add rough/WIP styling that needs UI triage
......
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
......@@ -111,8 +111,8 @@ $color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $edx-lms-header;
$color-disabled: $edx-gray-l4;
$color-focused: $edx-gray;
// application - colors: copy and headings
$heading-color: $edx-lms-header;
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -87,7 +87,7 @@
}
.copy {
margin-right: $spacing-charlie;
margin-right: ($baseline-v/2);
}
}
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -12,10 +12,8 @@
input[type="email"],
input[type="password"],
textarea {
@extend %t-weight2;
border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie;
font-family: $f-copy;
padding: ($baseline-v/2);
outline: 0;
color: $selected-color;
......@@ -31,11 +29,12 @@
}
.field {
font-family: $f-copy;
label, .label {
@extend %copy-delta;
@extend %copy-4;
display: block;
margin-bottom: $spacing-charlie;
margin-bottom: ($baseline-v/2);
color: $copy-color;
}
......
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
......@@ -61,7 +61,7 @@
// --------------------
// canned headings
// --------------------
%hd-alpha {
%hd-1 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(24);
......@@ -69,14 +69,14 @@
font-family: $f-title;
}
%hd-bravo {
%hd-2 {
@extend %t-weight3;
@include font-size(21);
@include lh(21);
font-family: $f-title;
}
%hd-charlie {
%hd-3 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(18);
......@@ -84,14 +84,14 @@
font-family: $f-title;
}
%hd-delta {
%hd-4 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-epsilon {
%hd-5 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(16);
......@@ -99,14 +99,14 @@
font-family: $f-title;
}
%hd-foxtrot {
%hd-6 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-golf {
%hd-7 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(13);
......@@ -114,58 +114,50 @@
font-family: $f-title;
}
%hd-hotel {
%hd-8 {
@extend %t-weight1;
@include font-size(13);
@include lh(13);
font-family: $f-title;
}
%hd-india {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(11);
@include lh(11);
font-family: $f-title;
}
// --------------------
// canned copy
// --------------------
%copy-alpha {
%copy-1 {
@extend %t-weight0;
@include font-size(24);
@include lh(24);
font-family: $f-copy;
}
%copy-bravo {
%copy-2 {
@include font-size(18);
@include lh(18);
font-family: $f-copy;
}
%copy-charlie {
%copy-3 {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
}
%copy-delta {
%copy-4 {
@include font-size(14);
@include lh(14);
font-family: $f-copy;
}
%copy-epsilon {
%copy-5 {
@include font-size(13);
@include lh(12);
font-family: $f-copy;
}
%copy-foxtrot {
%copy-6 {
@include font-size(12);
@include lh(12);
font-family: $f-copy;
......@@ -175,31 +167,31 @@
// --------------------
// canned actions
// --------------------
%action-alpha {
%action-1 {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-bravo {
%action-2 {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-charlie {
%action-3 {
@include font-size(16);
@include lh(16);
font-family: $f-action;
}
%action-delta {
%action-4 {
@include font-size(14);
@include lh(14);
font-family: $f-action;
}
%action-epsilon {
%action-5 {
@include font-size(12);
@include lh(12);
font-family: $f-action;
......@@ -213,12 +205,12 @@
font-style: normal;
}
%emphasis-alpha {
%emphasis-1 {
@extend %emphasis;
@extend %t-weight3;
}
%emphasis-bravo {
%emphasis-2 {
@extend %emphasis;
@extend %t-weight2;
}
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -10,13 +10,6 @@
$baseline-v: 20px; // vertical baseline
$baseline-h: 40px; // horizontal baseline
// units: spacing presets
$spacing-alpha: ($baseline-v*2);
$spacing-bravo: $baseline-v;
$spacing-charlie: ($baseline-v/2);
$spacing-delta: ($baseline-v/4);
// --------------------
// layout - grid (neat-based - http://neat.bourbon.io/)
// --------------------
......
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