Skip to content

E
edx-ora2
Commit 50583fbc by Brian Talbot
Options

Merge pull request #178 from edx/talbs/ui-cleanup 

UI Sprucing and Addressing Product Feedback
parents 770565f2 abadd180
Showing with 687 additions and 354 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_closed.html 0 → 100644
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade: </span>
<span class="grade__value">
<span class="grade__value__title">Incomplete</span>
<p class="grade__value__description">You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</span>
</span>
</h2>
</header>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete"> <li id="openassessment__grade" class="openassessment__steps__step step--grade">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__label">Your Grade: </span> <span class="step__label">Your Grade: </span>
<span class="grade__value"> <span class="grade__value">
<span class="grade__value__title">Not Completed</span> <span class="grade__value__title">Not Completed</span>
<p class="grade__value__description">You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</span> </span>
</span> </span>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</div>
</div>
</div>
</div>
</li> </li>
{% endspaceless %} {% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
...@@ -5,11 +5,20 @@ ...@@ -5,11 +5,20 @@
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__label">Your Grade:</span> <span class="step__label">Your Grade:</span>
<span class="grade__value"> <span class="grade__value">
<p>You have not started this problem</p> <span class="grade__value__title">Not Started</span>
</span> </span>
</span> </span>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>You have not started this problem yet.</p>
</div>
</div>
</div>
</div>
</li> </li>
{% endspaceless %} {% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
{% spaceless %} {% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete awaiting--peer-evaluations"> <li id="openassessment__grade" class="openassessment__steps__step step--grade is--waiting">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__label">Your Grade:</span> <span class="step__label">Your Grade:</span>
<span class="grade__value"> <span class="grade__value">
<span class="grade__value__title">Waiting for Peers to Assess Your Response</span> <span class="grade__value__title">Waiting for Peers to Assess Your Response</span>
<p class="grade__value__description">Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p>
</span> </span>
</span> </span>
</h2> </h2>
</header> </header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p>
</div>
</div>
</div>
</div>
</li> </li>
{% endspaceless %} {% endspaceless %}
apps/openassessment/templates/openassessmentblock/oa_base.html
{% spaceless %} {% spaceless %}
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic"> <div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment problem" id="openassessment">
<div class="wrapper--grid"> <div class="wrapper--grid">
<h2 class="openassessment__title "> <h2 class="openassessment__title problem__header">{{ title }}</h2>
<span class="problem-header">{{ title }}</span>
</h2>
<nav class="nav--contents"> <nav class="nav--contents">
<h2 class="title">Skip to a specific step:</h2> <h2 class="title">Skip to a specific step:</h2>
...@@ -21,13 +19,22 @@ ...@@ -21,13 +19,22 @@
</ol> </ol>
</nav> </nav>
{% block message %}
<!-- if the problem is unstarted or response hasn't been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<div class="message__content">
<p>This problem requires that you work through 3 parts. You can begin by reading the question below and <a data-behavior="ui-scroll" href="#openassessment__response">providing your response</a>.</p>
</div>
</div>
{% endblock %}
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Response Assessment Problem</h2> <h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content"> <div class="openassessment__prompt__copy ui-toggle-visibility__content">
<p>{{ question|linebreaks }}</p> <p>{{ question }}</p>
</div> </div>
</article> </article>
</div> </div>
...@@ -46,10 +53,9 @@ ...@@ -46,10 +53,9 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Loading</span> <span class="copy">Loading</span>
<i class="ico icon-cog icon-spin"></i> <i class="ico icon-refresh icon-spin"></i>
</span>
</span> </span>
</span> </span>
</header> </header>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -20,8 +20,9 @@ ...@@ -20,8 +20,9 @@
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of In Progress
<span class="step__status__value--required">{{ must_grade }}</span> completed (<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span> </span>
</span> </span>
</span> </span>
...@@ -31,11 +32,8 @@ ...@@ -31,11 +32,8 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction"> <div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p> <p>Read and assess the following response from one of your peers.</p>
</div> </div>
<div class="step__content"> <div class="step__content">
...@@ -48,11 +46,6 @@ ...@@ -48,11 +46,6 @@
<span class="peer-assessment__number--current">{{ review_num }}</span> of <span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span> <span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3> </h3>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header> </header>
<div class="peer-assessment__display__response"> <div class="peer-assessment__display__response">
...@@ -79,16 +72,16 @@ ...@@ -79,16 +72,16 @@
<div class="wrapper--input"> <div class="wrapper--input">
<input type="radio" <input type="radio"
name="{{ criterion.name }}" name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value" class="answer__value"
value="{{ option.name }}" /> value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}" <label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label" class="answer__label"
>{{ option.name }}</label> >{{ option.name }}</label>
</div> </div>
<div class="wrapper--metadata"> <div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span> <span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span> <span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div> </div>
</li> </li>
{% endfor %} {% endfor %}
...@@ -101,7 +94,8 @@ ...@@ -101,7 +94,8 @@
<label class="question__title" for="assessment__rubric__question--feedback__value"> <label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">(Optional) What aspects of this response stood out to you? What did it do well? How could it improve?</span> <span class="question__title__copy">(Optional) What aspects of this response stood out to you? What did it do well? How could it improve?</span>
</label> </label>
<div>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I noticed that this response..."></textarea> <textarea id="assessment__rubric__question--feedback__value" placeholder="I noticed that this response..."></textarea>
</div> </div>
</li> </li>
...@@ -114,9 +108,8 @@ ...@@ -114,9 +108,8 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--error message--error-server"> <div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--collapsed"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -9,8 +9,9 @@ ...@@ -9,8 +9,9 @@
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of Incomplete
<span class="step__status__value--required">{{ must_grade }}</span> completed (<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span> </span>
<i class="ico icon-warning-sign"></i> <i class="ico icon-warning-sign"></i>
</span> </span>
...@@ -18,4 +19,15 @@ ...@@ -18,4 +19,15 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The deadline for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer assess your peers' responses or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed is--complete"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--empty is--complete is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> completed Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
</span> </span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
</span> </span>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Turbo Mode</span> <span class="copy">
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block message %} {% block body %}
<div class="step__message message message--confirmation message--confirmation-turbo-mode"> <div class="ui-toggle-visibility__content">
<h3 class="message__title">Congratulations!</h3> <div class="wrapper--step__content">
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
<div class="step__message message message--complete">
<h3 class="message__title">Congratulations!</h3>
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
</div>
<div class="step__instruction">
<p>Read and assess the following response from one of your peers.</p>
</div>
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
</header>
<div class="peer-assessment__display__response">
{{ peer_submission.answer.text|linebreaks }}
</div>
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">Provide additional feedback for this response</span>
</label>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
</article>
</li>
</ul>
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed is--unavailable"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Unavailable</span> <span class="copy">Not Available</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--waiting is--empty is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span> <span class="copy">
In Progress
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">Waiting for more peer responses</h3>
<div class="message__content">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Not Completed</span> <span class="copy">In Progress</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
...@@ -27,49 +27,44 @@ ...@@ -27,49 +27,44 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction"> <div class="step__instruction">
<p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">After you submit your response, you cannot edit it</strong>.</p> <p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis">After you submit your response, you cannot edit it</strong>.</p>
</div> </div>
<div class="step__content"> <div class="step__content">
<form id="response__submission" class="response__submission"> <form id="response__submission" class="response__submission">
<div id="response__save_status" class="response__submission__status">
<h3 class="response__submission__status__title">
<span class="sr">Your Working Submission Status:</span>
{{ save_status }}
</h3>
</div>
<ol class="list list--fields response__submission__content"> <ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the question.</label> <label class="sr" for="submission__answer__value">Provide your response to the question.</label>
<textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea> <textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
<span class="tip">You may continue to work on your response until you submit it.</span> <span class="tip">You may continue to work on your response until you submit it.</span>
</li> </li>
</ol> </ol>
<div class="response__submission__actions"> <div class="response__submission__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
</div>
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button> <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
<div id="response__save_status" class="response__submission__status">
<h3 class="response__submission__status__title">
<span class="sr">Your Working Submission Status:</span>
{{ save_status }}
</h3>
</div>
</li> </li>
</ul> </ul>
<div class="message message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
<div class="message__content"></div>
</div>
</div> </div>
</form> </form>
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--error message--error-server"> <div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your response</h3> <h3 class="message__title">We could not submit your response</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Closed</span> <span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i> <i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
...@@ -15,10 +15,15 @@ ...@@ -15,10 +15,15 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p> <div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Graded</span> <span class="copy">Complete</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
</span> </span>
</span> </span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility is--collapsed"> <li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Submitted</span> <span class="copy">Complete</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
</span> </span>
</span> </span>
...@@ -17,6 +17,12 @@ ...@@ -17,6 +17,12 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__message message message--complete">
<h3 class="message__title">Your response has been successfully submitted</h3>
<div class="message__content">Your peers in this class will now grade this response and you will receive feedback shortly</div>
</div>
<div class="step__content"> <div class="step__content">
<article class="submission__answer__display"> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Not Completed</span> <span class="copy">In Progress</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
...@@ -29,9 +29,6 @@ ...@@ -29,9 +29,6 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__content"> <div class="step__content">
<article class="self-assessment__display" id="self-assessment"> <article class="self-assessment__display" id="self-assessment">
<header class="self-assessment__display__header"> <header class="self-assessment__display__header">
...@@ -61,15 +58,15 @@ ...@@ -61,15 +58,15 @@
<div class="wrapper--input"> <div class="wrapper--input">
<input type="radio" <input type="radio"
name="{{ criterion.name }}" name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value" class="answer__value"
value="{{ option.name }}" /> value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}" <label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label">{{ option.name }}</label> class="answer__label">{{ option.name }}</label>
</div> </div>
<div class="wrapper--metadata"> <div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span> <span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span> <span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div> </div>
</li> </li>
{% endfor %} {% endfor %}
...@@ -83,10 +80,10 @@ ...@@ -83,10 +80,10 @@
</div> </div>
<div class="step__actions"> <div class="step__actions">
<div class="message message--error message--error-server"> <div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled"> <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Not Completed</span> <span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i> <i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer assess your response to this problem or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--complete"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--unavailable"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Unavailable</span> <span class="copy">Not Available</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/xblock/openassessmentblock.py
...@@ -127,7 +127,7 @@ UI_MODELS = { ...@@ -127,7 +127,7 @@ UI_MODELS = {
"name": "grade", "name": "grade",
"class_id": "openassessment__grade", "class_id": "openassessment__grade",
"navigation_text": "Your grade for this problem", "navigation_text": "Your grade for this problem",
"title": "Your grade for this problem" "title": "Your Grade:"
} }
} }
......
apps/openassessment/xblock/peer_assessment_mixin.py
...@@ -139,11 +139,11 @@ class PeerAssessmentMixin(object): ...@@ -139,11 +139,11 @@ class PeerAssessmentMixin(object):
if continue_grading: if continue_grading:
context_dict["submit_button_text"] = ( context_dict["submit_button_text"] = (
"Submit your assessment & review another response." "Submit your assessment & review another response"
) )
elif assessment["must_grade"] - count == 1: elif assessment["must_grade"] - count == 1:
context_dict["submit_button_text"] = ( context_dict["submit_button_text"] = (
"Submit your assessment & move onto next step." "Submit your assessment & move onto next step"
) )
else: else:
context_dict["submit_button_text"] = ( context_dict["submit_button_text"] = (
...@@ -165,11 +165,9 @@ class PeerAssessmentMixin(object): ...@@ -165,11 +165,9 @@ class PeerAssessmentMixin(object):
path = 'openassessmentblock/peer/oa_peer_turbo_mode.html' path = 'openassessmentblock/peer/oa_peer_turbo_mode.html'
context_dict["peer_submission"] = peer_sub context_dict["peer_submission"] = peer_sub
else: else:
path = 'openassessmentblock/peer/oa_peer_complete.html' path = 'openassessmentblock/peer/oa_peer_waiting.html'
elif workflow.get("status") == "done": elif workflow.get("status") == "done" or finished:
path = "openassessmentblock/peer/oa_peer_complete.html" path = "openassessmentblock/peer/oa_peer_complete.html"
elif finished:
path = 'openassessmentblock/peer/oa_peer_waiting.html'
return self.render_assessment(path, context_dict) return self.render_assessment(path, context_dict)
......
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/html/t-messages.html 0 → 100644
<!-- if the problem is closed and incomplete -->
<div id="openassessment__message" class="openassessment__message message message--incomplete">
<h3 class="message__title">This problem’s due date has past and submissions are now closed</h3>
<div class="message__content">
<p>You did not complete the necessary requirements and received <a data-behavior="ui-scroll" href="#openassessment__grade">an incomplete grade</a>.</p>
</div>
</div>
<!-- if response has been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Submitted for Peer Assessment</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if response has been graded -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Graded</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if the problem's due date is approaching and tasks remain -->
<div id="openassessment__message" class="openassessment__message message message--warning">
<h3 class="message__title">You still need to complete 2 Tasks</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if no peer assessments remain for student to grade -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Awaiting More Peer Responses</h3>
<div class="message__content">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
<!-- if student has completed the entire problem and received a grade -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Review <a data-behavior="ui-scroll" href="#openassessment__grade">your grade and assessment details</a>.</p>
</div>
</div>
<!-- if student has completed the entire problem and not yet received a grade (from peers) -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Your grade should be available shortly once your peers complete their assessments of your response.</p>
</div>
</div>
apps/openassessment/xblock/static/html/v-problem-initial.html
...@@ -108,14 +108,14 @@ ...@@ -108,14 +108,14 @@
</header> </header>
<div class="step__instruction"> <div class="step__instruction">
<p>Please provide your response below. 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> <p>Provide your your response below. 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>
<div class="step__content"> <div class="step__content">
<form id="response__submission" class="response__submission" method="post"> <form id="response__submission" class="response__submission" method="post">
<ol class="list list--fields"> <ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label> <label for="submission__answer__value">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> <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> </li>
</ol> </ol>
......
apps/openassessment/xblock/static/js/src/oa_base.js
...@@ -98,7 +98,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -98,7 +98,7 @@ OpenAssessment.BaseUI.prototype = {
ui.save(); ui.save();
} }
); );
} }
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showLoadError('response'); ui.showLoadError('response');
...@@ -253,7 +253,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -253,7 +253,7 @@ OpenAssessment.BaseUI.prototype = {
function(html) { function(html) {
// Load the HTML // Load the HTML
$('#openassessment__grade', ui.element).replaceWith(html); $('#openassessment__grade', ui.element).replaceWith(html);
// Install a click handler for collapse/expand // Install a click handler for collapse/expand
var sel = $('#openassessment__grade', ui.element); var sel = $('#openassessment__grade', ui.element);
ui.setUpCollapseExpand(sel); ui.setUpCollapseExpand(sel);
...@@ -267,7 +267,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -267,7 +267,7 @@ OpenAssessment.BaseUI.prototype = {
).fail(function(errMsg) { ).fail(function(errMsg) {
ui.showLoadError('grade', errMsg); ui.showLoadError('grade', errMsg);
}); });
}, },
/** /**
...@@ -453,7 +453,7 @@ OpenAssessment.BaseUI.prototype = { ...@@ -453,7 +453,7 @@ OpenAssessment.BaseUI.prototype = {
showLoadError: function(step) { showLoadError: function(step) {
var container = '#openassessment__' + step; var container = '#openassessment__' + step;
$(container).toggleClass('has--error', true); $(container).toggleClass('has--error', true);
$(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign'); $(container + ' .step__status__value i').removeClass().addClass('ico icon-warning-sign');
$(container + ' .step__status__value .copy').html('Unable to Load'); $(container + ' .step__status__value .copy').html('Unable to Load');
} }
}; };
......
apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
// control to toggle // control to toggle
.ui-toggle-visibility__control { .ui-toggle-visibility__control {
@include transition(color $tmg-f2 ease-in);
@extend %fake-link; @extend %fake-link;
color: $action-primary-color;
text-decoration: none; text-decoration: none;
// optional icon // optional icon
...@@ -24,7 +24,10 @@ ...@@ -24,7 +24,10 @@
> .ico { > .ico {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(90deg)); @include transform(rotate(90deg));
margin-right: ($baseline-h/8); }
.ui-toggle-visibility__control__copy {
margin-left: ($baseline-h/4);
} }
&:hover, &:focus { &:hover, &:focus {
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -6,11 +6,28 @@ ...@@ -6,11 +6,28 @@
// -------------------- // --------------------
// UI: content // typography: subheading
// -------------------- // --------------------
%ui-content-longanswer { %t-superheading {
max-height: ($baseline-v*15); @extend %hd-2;
overflow-y: scroll; @extend %t-strong;
}
%t-heading {
@extend %hd-4;
@extend %t-strong;
@extend %t-titlecase;
}
%t-subheading {
@extend %hd-4;
@extend %t-strong;
}
%t-score {
@extend %copy-4;
@extend %t-strong;
@extend %t-titlecase;
} }
...@@ -18,21 +35,96 @@ ...@@ -18,21 +35,96 @@
// UI: section // UI: section
// -------------------- // --------------------
%ui-section { %ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary; @include transition(all $tmg-f1 ease-in-out);
@include transform(scale(1.0));
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
box-shadow: 0 1px 1px $shadow-l1;
margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary;
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
padding: ($baseline-v/2) ($baseline-h/2);
background: $bg-content;
&:last-child {
margin-bottom: 0;
}
// STATE: hover and focus
&:hover, &:focus {
@include transform(scale(1.0));
border-color: $color-decorative-tertiary;
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is collapsed
&.is--collapsed {
@include transform(scale(0.99));
box-shadow: 0 1px 1px $shadow-l2;
&:hover, &:focus {
@include transform(scale(1.0));
}
}
// STATE: is loading
&.is--loading {
@include transform(scale(0.99));
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is empty
&.is--empty {
&:hover, &:focus {
@include transform(scale(0.99));
}
}
// STATE: is unavailable
&.is--unavailable {
border-top-color: $color-unavailable;
&:hover, &:focus {
@include transform(scale(0.99));
}
}
// STATE: is complete
&.is--complete {
border-top-color: $color-complete;
}
// STATE: is incomplete
&.is--incomplete {
border-top-color: $color-incomplete;
}
// STATE: has errors
&.has--error {
border-top-color: $color-error;
}
// STATE: is incomplete
&.is--closed, &.is--incomplete {
border-top-color: $color-incomplete;
}
}
// --------------------
// UI: subsection
// --------------------
%ui-subsection {
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
} }
%ui-section-title { %ui-subsection-title {
@extend %hd-7; margin-bottom: ($baseline-v/2);
@extend %t-weight3; border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding: ($baseline-v/2) $baseline-v; padding-bottom: ($baseline-v/2);
background: $color-decorative-tertiary;
color: $heading-secondary-color;
} }
%ui-section-content { %ui-subsection-content {
padding: $baseline-v;
p { p {
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
...@@ -43,6 +135,23 @@ ...@@ -43,6 +135,23 @@
} }
} }
// --------------------
// UI: well
// --------------------
%ui-well {
box-shadow: inset 0 1px 2px 1px $shadow-l1;
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quinternary;
}
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// -------------------- // --------------------
// UI: rubric // UI: rubric
...@@ -54,19 +163,18 @@ ...@@ -54,19 +163,18 @@
@extend %wipe-last-child; @extend %wipe-last-child;
.question__title { .question__title {
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/4);
.ico { .ico {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline-v/4);
} }
} }
.question__title__copy { .question__title__copy {
@extend %hd-4; @extend %t-heading;
@extend %t-weight3; color: $heading-color;
} }
} }
...@@ -77,16 +185,10 @@ ...@@ -77,16 +185,10 @@
.answer { .answer {
@include row(); @include row();
@extend %trans-opacity;
@extend %wipe-last-child; @extend %wipe-last-child;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary; border-bottom: ($baseline-v/20) solid $color-decorative-quaternary;
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/2);
opacity: 0.75;
&:hover {
opacity: 1.0;
}
} }
.wrapper--input { .wrapper--input {
...@@ -117,10 +219,10 @@ ...@@ -117,10 +219,10 @@
} }
.answer__label { .answer__label {
@extend %copy-4; @extend %copy-3;
@extend %t-weight3; @extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused; color: $copy-secondary-color;
} }
.answer__value { .answer__value {
...@@ -162,9 +264,9 @@ ...@@ -162,9 +264,9 @@
.answer__tip { .answer__tip {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
@extend %copy-5; @extend %copy-3;
margin-right: $baseline-v; margin-right: $baseline-v;
color: $copy-supplemental-color; color: $copy-secondary-color;
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(6 of 8); @include span-columns(6 of 8);
...@@ -190,12 +292,8 @@ ...@@ -190,12 +292,8 @@
} }
.answer__points { .answer__points {
@extend %copy-5; @extend %t-score;
color: $copy-color; color: $copy-secondary-color;
@extend %copy-5;
margin-right: $baseline-v;
color: $copy-supplemental-color;
@include media($bp-dm) { @include media($bp-dm) {
float: right; float: right;
...@@ -211,13 +309,11 @@ ...@@ -211,13 +309,11 @@
float: right; float: right;
text-align: right; text-align: right;
} }
}
.label { .answer__points__label {
@extend %copy-5; // FIX: need to reset base label style display: inline-block; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style margin-left: ($baseline-v/4);
margin-left: ($baseline-v/4); color: $copy-secondary-color;
color: $copy-supplemental-color;
}
} }
} }
apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -28,27 +28,16 @@ ...@@ -28,27 +28,16 @@
letter-spacing: normal; letter-spacing: normal;
} }
// title
.openassessment__title--sub span {
color: $heading-tertiary-color !important;
}
h1.openassessment__title {
margin-bottom: $baseline-v !important;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary !important;
padding-bottom: ($baseline-v/2) !important;
}
// step header // step header
.openassessment__steps .openassessment__steps__step .step__header { .openassessment__steps .openassessment__steps__step .step__header {
.step__deadline { .step__deadline {
color: $color-focused; color: $heading-secondary-color;
} }
// step title/name // step title/name
.step__title { h2.step__title {
@include span-columns(3 of 4);
margin-top: 0 !important; margin-top: 0 !important;
text-align: left !important; text-align: left !important;
...@@ -83,25 +72,26 @@ ...@@ -83,25 +72,26 @@
// increment: show numbers using parent list counter // increment: show numbers using parent list counter
&:before { &:before {
@extend %hd-6; @extend %hd-2;
@extend %t-weight4; @extend %t-strong;
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
margin-right: ($baseline-v/4); color: $color-decorative-tertiary;
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
} }
} }
} }
}
.step__status {
.step__status__value {
line-height: 0;
}
} }
.step__status__value {
line-height: 0;
}
.list--actions { .list--actions {
list-style: none !important; list-style: none !important;
padding-left: 0 !important; padding-left: 0 !important;
...@@ -135,14 +125,17 @@ ...@@ -135,14 +125,17 @@
} }
} }
// self assessment // peer assessment
.self-assessment__display__header, .peer-assessment__display__header { .step--peer-assessment .list--peer-assessments {
padding-bottom: ($baseline-v/2) !important; list-style: none outside none !important;
padding-left: 0 !important;;
} }
// self assessment
.self-assessment__display__title, .peer-assessment__display__title { .self-assessment__display__title, .peer-assessment__display__title {
margin-bottom: ($baseline-v/2) !important;
color: $heading-secondary-color !important; color: $heading-secondary-color !important;
font-weight: 600 !important;
} }
// shown submission/results // shown submission/results
...@@ -150,6 +143,7 @@ ...@@ -150,6 +143,7 @@
padding-left: 0 !important; padding-left: 0 !important;
} }
.step--grade .step__title { .step--grade .step__title {
width: 100% !important; width: 100% !important;
...@@ -160,7 +154,7 @@ ...@@ -160,7 +154,7 @@
// actions // actions
.action--submit, .action--save { .action--submit, .action--save {
box-shadow: none; box-shadow: none !important;;
} }
// -------------------- // --------------------
...@@ -176,4 +170,8 @@ ...@@ -176,4 +170,8 @@
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
} }
.openassessment__steps__step .step__header .step__title {
margin-bottom: 0;
}
} }
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
...@@ -26,6 +26,9 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12); ...@@ -26,6 +26,9 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12);
// -------------------- // --------------------
// // application - colors: states // // application - colors: states
// -------------------- // --------------------
$color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(98, 194, 74);
$color-error: rgb(188, 85, 71); $color-error: rgb(188, 85, 71);
$color-warning: rgb(229, 166, 53);
$color-complete: rgb(98, 194, 74);
$color-incomplete: $color-warning;
$color-confirm: $heading-primary-color;
$color-unavailable: tint($copy-color, 85%);
apps/openassessment/xblock/static/sass/themes/edx/_base.scss
...@@ -3,3 +3,15 @@ ...@@ -3,3 +3,15 @@
// NOTES: // NOTES:
// * This is where any edX-theme related base styling is defined // * This is where any edX-theme related base styling is defined
.wrapper--xblock {
.problem {
}
.problem__header {
@extend %hd-problem;
}
}
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
...@@ -83,6 +83,10 @@ $edx-lms-action-secondary: rgb(135, 135, 135); ...@@ -83,6 +83,10 @@ $edx-lms-action-secondary: rgb(135, 135, 135);
// -------------------- // --------------------
// variables: overrides // variables: overrides
// -------------------- // --------------------
// colors
$white-t: rgb(255,255,255);
$black-t: rgb(0,0,0);
// fonts // fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
...@@ -96,6 +100,7 @@ $gutter: $baseline-v; ...@@ -96,6 +100,7 @@ $gutter: $baseline-v;
$f-title: $f-sans-serif; $f-title: $f-sans-serif;
$f-copy: $f-sans-serif; $f-copy: $f-sans-serif;
$f-action: $f-sans-serif; $f-action: $f-sans-serif;
$f-base-color: $edx-gray;
// application - colors // application - colors
$color-primary: $edx-lms-action-primary; $color-primary: $edx-lms-action-primary;
...@@ -105,9 +110,6 @@ $color-quarternary: $gray-l2; ...@@ -105,9 +110,6 @@ $color-quarternary: $gray-l2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $gray-d3; $color-decorative-primary: $gray-d3;
$color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states // application - colors: states
$color-disabled: $edx-gray-l4; $color-disabled: $edx-gray-l4;
...@@ -115,24 +117,11 @@ $color-focused: $edx-gray; ...@@ -115,24 +117,11 @@ $color-focused: $edx-gray;
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $edx-lms-header; $heading-color: $edx-lms-header;
$heading-primary-color: shade($edx-lms-header, 33%);
$heading-secondary-color: tint($edx-lms-header, 33%);
$heading-tertiary-color: tint($edx-lms-header, 66%);
$copy-color: $edx-lms-copy; $copy-color: $edx-lms-copy;
$copy-color-alt: tint($edx-lms-copy, 33%);
$copy-color-focus: shade($edx-lms-copy, 33%);
$copy-lead-color: $edx-lms-copy;
$copy-lead-color-focus: shade($edx-lms-copy, 33%);
$copy-supplemental-color: tint($edx-lms-copy, 33%);
$copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
$copy-supplemental-color-focus: $edx-lms-copy;
// application - colors:states // application - colors:states
$selected-bg: $edx-blue-t1; $selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1; $selected-color: $edx-blue;
// application - colors: actions // application - colors: actions
$action-primary-color: tint($color-primary,10%); $action-primary-color: tint($color-primary,10%);
...@@ -156,12 +145,15 @@ $bg-view: transparent; ...@@ -156,12 +145,15 @@ $bg-view: transparent;
$bg-header-main: $white-t; $bg-header-main: $white-t;
$color-header-main: $black; $color-header-main: $black;
$bg-content: $gray-l6; $bg-content: $white-t;
$color-content: $gray-d1; $color-content: $gray-d1;
$bg-content-main: $gray-l5; $bg-content-main: $gray-l5;
$color-content-main: $gray-d1; $color-content-main: $gray-d1;
// application - colors: states
$selected-color: $black-t;
// -------------------- // --------------------
// mixins: // mixins:
// -------------------- // --------------------
...@@ -170,3 +162,9 @@ $color-content-main: $gray-d1; ...@@ -170,3 +162,9 @@ $color-content-main: $gray-d1;
// -------------------- // --------------------
// extends: // extends:
// -------------------- // --------------------
%hd-problem {
@extend %hd-3;
@extend %t-titlecase;
margin-bottom: $baseline-v;
color: $heading-secondary-color;
}
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -110,14 +110,14 @@ ...@@ -110,14 +110,14 @@
// buttons - primary (assuming dark bg/light copy) // buttons - primary (assuming dark bg/light copy)
%btn--primary { %btn--primary {
@extend %btn-pill; @extend %btn-pill;
@extend %t-weight3; @extend %t-strong;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color; background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%); border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%); color: tint($action-primary-color, 90%);
.copy { .copy {
@extend %t-weight3; @extend %t-strong;
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
...@@ -144,14 +144,14 @@ ...@@ -144,14 +144,14 @@
// buttons - secondary (assuming dark bg/light copy) // buttons - secondary (assuming dark bg/light copy)
%btn--secondary { %btn--secondary {
@extend %btn-pill; @extend %btn-pill;
@extend %t-weight3; @extend %t-strong;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color; background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%); border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%); color: tint($action-secondary-color, 90%);
.copy { .copy {
@extend %t-weight3; @extend %t-strong;
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
...@@ -178,14 +178,14 @@ ...@@ -178,14 +178,14 @@
// buttons - tertiary (assuming dark bg/light copy) // buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary { %btn--tertiary {
@extend %btn-edged; @extend %btn-edged;
@extend %t-weight3; @extend %t-strong;
padding: ($baseline-v/2) ($baseline-h/2); padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color; background: $action-tertiary-color;
border: 1px solid shade($action-tertiary-color, 10%); border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%); color: tint($action-tertiary-color, 90%);
.copy { .copy {
@extend %t-weight3; @extend %t-strong;
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -12,13 +12,15 @@ ...@@ -12,13 +12,15 @@
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
textarea { textarea {
@extend %t-strong;
border: 1px solid $color-decorative-secondary; border: 1px solid $color-decorative-secondary;
padding: ($baseline-v/2); padding: ($baseline-v/2);
outline: 0; outline: 0;
color: $selected-color; color: $copy-color;
@include placeholder { @include placeholder {
color: $copy-supplemental-color-alt; @extend %t-regular;
color: $copy-secondary-color;
} }
&:focus { &:focus {
...@@ -32,8 +34,8 @@ ...@@ -32,8 +34,8 @@
font-family: $f-copy; font-family: $f-copy;
label, .label { label, .label {
@extend %copy-4; @extend %copy-3;
@extend %t-weight3; @extend %t-strong;
display: block; display: block;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $copy-color; color: $copy-color;
...@@ -45,8 +47,8 @@ ...@@ -45,8 +47,8 @@
.tip { .tip {
display: block; display: block;
@extend %copy-5; @extend %copy-4;
color: $copy-supplemental-color; color: $copy-secondary-color;
} }
} }
} }
......
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
...@@ -3,58 +3,61 @@ ...@@ -3,58 +3,61 @@
// NOTES: // NOTES:
// * all typographical settings should be placed here for general xblocks use // * all typographical settings should be placed here for general xblocks use
// * typographical scale reference: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 // * typographical scale reference: 0, 14, 18, 24, 32, 43
// -------------------- // --------------------
// weight // type weights
// -------------------- // --------------------
%t-weight0 { %t-ultrastrong {
font-weight: 300; font-weight: 800;
} }
%t-strong {
%t-weight1 { font-weight: 600;
font-weight: 400;
} }
%t-regular {
%t-weight2 { font-weight: 400;
font-weight: 500;
} }
%t-light {
%t-weight3 { font-weight: 300;
font-weight: 600;
} }
%t-ultralight {
%t-weight4 { font-weight: 200;
font-weight: 700;
} }
// -------------------- // --------------------
// titlecase // type size variants
// -------------------- // --------------------
%t-titlecase { %t-xsmall {
text-transform: uppercase; @include typeSet(xsmall);
letter-spacing: 0.05rem;
} }
%t-small {
@include typeSet(small);
}
// -------------------- %t-base {
// canned icon sizes @include typeSet(base);
// --------------------
%t-icon-s {
@include font-size(12);
} }
%t-icon-m { %t-medium {
@include font-size(16); @include typeSet(medium);
} }
%t-icon-l { %t-large {
@include font-size(24); @include typeSet(large);
} }
%t-icon-xl { %t-xlarge {
@include font-size(36); @include typeSet(xlarge);
}
// --------------------
// style: titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
} }
...@@ -62,62 +65,27 @@ ...@@ -62,62 +65,27 @@
// canned headings // canned headings
// -------------------- // --------------------
%hd-1 { %hd-1 {
@extend %t-weight1; @extend %t-xlarge;
@extend %t-titlecase;
@include font-size(24);
@include lh(24);
font-family: $f-title; font-family: $f-title;
} }
%hd-2 { %hd-2 {
@extend %t-weight3; @extend %t-large;
@include font-size(21);
@include lh(21);
font-family: $f-title; font-family: $f-title;
} }
%hd-3 { %hd-3 {
@extend %t-weight1; @extend %t-medium;
@extend %t-titlecase;
@include font-size(18);
@include lh(18);
font-family: $f-title; font-family: $f-title;
} }
%hd-4 { %hd-4 {
@extend %t-weight3; @extend %t-base;
@include font-size(16);
@include lh(16);
font-family: $f-title; font-family: $f-title;
} }
%hd-5 { %hd-5 {
@extend %t-weight1; @extend %t-small;
@extend %t-titlecase;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-6 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-7 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(13);
@include lh(13);
font-family: $f-title;
}
%hd-8 {
@extend %t-weight1;
@include font-size(13);
@include lh(13);
font-family: $f-title; font-family: $f-title;
} }
...@@ -126,40 +94,27 @@ ...@@ -126,40 +94,27 @@
// canned copy // canned copy
// -------------------- // --------------------
%copy-1 { %copy-1 {
@extend %t-weight0; @extend %t-large;
@include font-size(24);
@include lh(24);
font-family: $f-copy; font-family: $f-copy;
} }
%copy-2 { %copy-2 {
@include font-size(18); @extend %t-medium;
@include lh(18);
font-family: $f-copy; font-family: $f-copy;
} }
%copy-3 { %copy-3 {
@extend %t-weight1; @extend %t-base;
@include font-size(16);
@include lh(16);
font-family: $f-copy; font-family: $f-copy;
} }
%copy-4 { %copy-4 {
@include font-size(14); @extend %t-small;
@include lh(14);
font-family: $f-copy; font-family: $f-copy;
} }
%copy-5 { %copy-5 {
@include font-size(13); @extend %t-xsmall;
@include lh(13);
font-family: $f-copy;
}
%copy-6 {
@include font-size(12);
@include lh(12);
font-family: $f-copy; font-family: $f-copy;
} }
...@@ -168,49 +123,48 @@ ...@@ -168,49 +123,48 @@
// canned actions // canned actions
// -------------------- // --------------------
%action-1 { %action-1 {
@include font-size(18); @extend %t-medium;
@include lh(18);
font-family: $f-action; font-family: $f-action;
} }
%action-2 { %action-2 {
@include font-size(18); @extend %t-base;
@include lh(18);
font-family: $f-action; font-family: $f-action;
} }
%action-3 { %action-3 {
@include font-size(16); @extend %t-small;
@include lh(16);
font-family: $f-action; font-family: $f-action;
} }
%action-4 { %action-4 {
@include font-size(14); @extend %t-xsmall;
@include lh(14);
font-family: $f-action; font-family: $f-action;
} }
%action-5 { // --------------------
@include font-size(12); // canned icons
@include lh(12); // --------------------
font-family: $f-action; %icon-1 {
@extend %t-medium;
} }
%icon-2 {
@extend %t-base;
}
// -------------------- %icon-3 {
// visual emphasis @extend %t-small;
// --------------------
%emphasis {
font-style: normal;
} }
%emphasis-1 { %icon-4 {
@extend %emphasis; @extend %t-xsmall;
@extend %t-weight3;
} }
%emphasis-2 {
@extend %emphasis; // --------------------
@extend %t-weight2; // visual emphasis
// --------------------
%emphasis {
@extend %t-strong;
} }
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
// -------------------- // --------------------
// shorthand - absolute position // shorthand - absolute position
// -------------------- // --------------------
@mixin pos-abs ($top: auto, $right: auto, $bottom: auto, $left: auto) { @mixin posAbs ($top: auto, $right: auto, $bottom: auto, $left: auto) {
position: absolute; position: absolute;
top: $top; top: $top;
right: $right; right: $right;
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
// -------------------- // --------------------
// font-size (rems) // fontSize (rems)
// -------------------- // --------------------
@mixin font-size($sizeValue: 16){ @mixin fontSize($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
// font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently // font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
...@@ -34,3 +34,38 @@ ...@@ -34,3 +34,38 @@
// line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently // line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
// --------------------
// type setting
// --------------------
@mixin typeSet($size) {
@if $size == "xsmall" {
@include fontSize($f-size-xsmall);
@include lh($f-size-xsmall);
}
@if $size == "small" {
@include fontSize($f-size-small);
@include lh($f-size-small);
}
@if $size == "base" {
@include fontSize($f-size-base);
@include lh($f-size-base);
}
@if $size == "medium" {
@include fontSize($f-size-medium);
@include lh($f-size-medium);
}
@if $size == "large" {
@include fontSize($f-size-large);
@include lh($f-size-large);
}
@if $size == "xlarge" {
@include fontSize($f-size-xlarge);
@include lh($f-size-xlarge);
}
}
apps/openassessment/xblock/static/sass/xb/utilities/_reset.scss
...@@ -437,12 +437,12 @@ ...@@ -437,12 +437,12 @@
article, aside, canvas, details, figcaption, figure, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { time, mark, audio, video {
@extend %t-weight1;
margin: 0; margin: 0;
vertical-align: baseline; vertical-align: baseline;
border: 0; border: 0;
padding: 0; padding: 0;
outline: 0; outline: 0;
font-weight: 400;
} }
abbr[title] { abbr[title] {
...@@ -451,8 +451,8 @@ ...@@ -451,8 +451,8 @@
cursor: help; cursor: help;
} }
strong { strong, .emphasis {
@extend %t-weight3; @extend %t-strong;
} }
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -121,6 +121,15 @@ $anim-distance-offviewport: ($baseline-h*100); // for large ...@@ -121,6 +121,15 @@ $anim-distance-offviewport: ($baseline-h*100); // for large
$f-title: $f-sans-serif; $f-title: $f-sans-serif;
$f-copy: $f-serif; $f-copy: $f-serif;
$f-action: $f-sans-serif; $f-action: $f-sans-serif;
$f-base-color: $gray-l2;
// type sizes
$f-size-xsmall: 10;
$f-size-small: 12;
$f-size-base: 14;
$f-size-medium: 16;
$f-size-large: 18;
$f-size-xlarge: 22;
// -------------------- // --------------------
...@@ -133,9 +142,10 @@ $color-teritary: $blue-u2; ...@@ -133,9 +142,10 @@ $color-teritary: $blue-u2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4; $color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary: $gray-l6; $color-decorative-tertiary: tint($color-decorative-primary, 60%);
$color-decorative-quaternary: tint($gray-l6, 10%); $color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%);
// application - colors: states // application - colors: states
$color-disabled: $gray-l4; $color-disabled: $gray-l4;
...@@ -159,22 +169,11 @@ $action-tertiary-color-active: $color-teritary; ...@@ -159,22 +169,11 @@ $action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%); $action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d5; $heading-color: shade($f-base-color, 50%);
$heading-primary-color: $black; $heading-primary-color: shade($f-base-color, 66%);
$heading-secondary-color: $gray-l1; $heading-secondary-color: tint($f-base-color, 33%);
$heading-tertiary-color: $gray-l3; $copy-color: $f-base-color;
$copy-secondary-color: tint($copy-color, 25%);
$copy-color: $gray-l1;
$copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4;
$copy-lead-color: $gray;
$copy-lead-color: $gray-d1;
$copy-lead-color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2;
$copy-supplemental-color-alt: $gray-l2;
$copy-supplemental-color-focus: $gray-d1;
// application - colors: states // application - colors: states
$selected-bg: $blue-t1; $selected-bg: $blue-t1;
......
apps/openassessment/xblock/test/test_self.py
...@@ -112,7 +112,7 @@ class TestSelfAssessment(XBlockHandlerTestCase): ...@@ -112,7 +112,7 @@ class TestSelfAssessment(XBlockHandlerTestCase):
@scenario('data/self_assessment_scenario.xml') @scenario('data/self_assessment_scenario.xml')
def test_render_self_assessment_preview(self, xblock): def test_render_self_assessment_preview(self, xblock):
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict())) resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Unavailable", resp) self.assertIn("Not Available", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob') @scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_complete(self, xblock): def test_render_self_assessment_complete(self, xblock):
...@@ -141,14 +141,14 @@ class TestSelfAssessment(XBlockHandlerTestCase): ...@@ -141,14 +141,14 @@ class TestSelfAssessment(XBlockHandlerTestCase):
mock_complete.return_value = True mock_complete.return_value = True
# Expect that the self-assessment step is open # Expect that the self-assessment step is open
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict())) resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Not Completed", resp) self.assertIn("In Progress", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob') @scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_no_submission(self, xblock): def test_render_self_assessment_no_submission(self, xblock):
# Without creating a submission, render the self-assessment step # Without creating a submission, render the self-assessment step
# Expect that the step is closed # Expect that the step is closed
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict())) resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Unavailable", resp) self.assertIn("Not Available", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob') @scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessessment_api_error(self, xblock): def test_render_self_assessessment_api_error(self, xblock):
......
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