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 1118 additions and 756 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_complete.html
......@@ -14,6 +14,7 @@
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......@@ -54,20 +55,23 @@
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
<span class="answer__source__label sr">Assessor: </span>
<span class="answer__source__value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span>
<span class="answer__value__label sr">Peer's Assessment: </span>
<span class="answer__value__value">
{{ part.option.name }}
<span class="ui-tooltip" title="{{ part.option.explanation }}">
<i class="ico icon-info-sign" title="More Information on {{ part.option.name }}"></i>
</span>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</h5>
<span class="answer__score">
<span class="label sr">Score Earned: </span>
<span class="value">{{ part.option.points }} points</span>
<span class="answer__score__label sr">Score Earned: </span>
<span class="answer__score__value">{{ part.option.points }} points</span>
</span>
</li>
{% endif %}
......@@ -81,16 +85,19 @@
id="question--{{ criterion_num }}__answer--self">
<h5 class="answer__title">
<span class="answer__source">
<span class="value">Your Self Assessment</span>
<span class="answer__source__value">Your Self Assessment</span>
</span>
<span class="answer__value">
<span class="label sr">Your Assessment: </span>
<span class="value">{{ part.option.name }}</span>
<span class="answer__value__label sr">Your Assessment: </span>
<span class="answer__value__value">
{{ part.option.name }}
<span class="ui-tooltip" title="{{ part.option.explanation }}">
<i class="ico icon-info-sign" title="More Information on {{ part.option.name }}"></i>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
</span>
</span>
</h5>
</li>
{% endif %}
{% endfor %}
......@@ -140,6 +147,7 @@
<p>Course staff will be able to see any feedback that you provide here when they review course records.</p>
</div>
<div class="submission__feedback__elements">
<ol class="list list--fields submission__feeedback__fields">
<li class="field field--select feedback__overall" id="feedback__overall">
<label for="feedback__overall__value">Overall how do you consider your peers’ assessments of your response?</label>
......@@ -151,11 +159,10 @@
</select>
</li>
<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.</label>
<label for="feedback__remarks__value">Provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was...">{{ feedback_text }}</textarea>
</li>
</ol>
</div>
<div class="submission__feeedback__actions">
<ul class="list list--actions submission__feeedback__actions">
......@@ -164,8 +171,11 @@
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
{% 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">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade: </span>
<span class="grade__value">
<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>
</h2>
</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>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
......@@ -5,11 +5,20 @@
<span class="wrapper--copy">
<span class="step__label">Your Grade:</span>
<span class="grade__value">
<p>You have not started this problem</p>
<span class="grade__value__title">Not Started</span>
</span>
</span>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>You have not started this problem yet.</p>
</div>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
{% 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">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade:</span>
<span class="grade__value">
<span class="grade__value__title">Waiting for 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>
</h2>
</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>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/oa_base.html
{% spaceless %}
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment">
<div class="openassessment problem" id="openassessment">
<div class="wrapper--grid">
<h2 class="openassessment__title ">
<span class="problem-header">{{ title }}</span>
</h2>
<h2 class="openassessment__title problem__header">{{ title }}</h2>
<nav class="nav--contents">
<h2 class="title">Skip to a specific step:</h2>
......@@ -21,13 +19,22 @@
</ol>
</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">
<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">
<p>{{ question|linebreaks }}</p>
<p>{{ question }}</p>
</div>
</article>
</div>
......@@ -48,8 +55,7 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Loading</span>
<i class="ico icon-cog icon-spin"></i>
</span>
<i class="ico icon-refresh icon-spin"></i>
</span>
</span>
</header>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -20,8 +20,9 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
In Progress
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
</span>
</span>
......@@ -31,11 +32,8 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<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 class="step__content">
......@@ -48,11 +46,6 @@
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<div class="peer-assessment__display__response">
......@@ -79,16 +72,16 @@
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
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>
</div>
<div class="wrapper--metadata">
<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>
</li>
{% endfor %}
......@@ -101,7 +94,8 @@
<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>
</label>
<div>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I noticed that this response..."></textarea>
</div>
</li>
......@@ -114,9 +108,8 @@
</div>
<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>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
......@@ -9,8 +9,9 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
Incomplete
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
<i class="ico icon-warning-sign"></i>
</span>
......@@ -18,4 +19,15 @@
{% endblock %}
{% 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 %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
......@@ -9,7 +9,8 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> completed
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
</span>
<i class="ico icon-ok"></i>
</span>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<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>
</span>
</span>
{% endblock %}
{% block message %}
<div class="step__message message message--confirmation message--confirmation-turbo-mode">
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<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>
{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="copy">Not Available</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<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>
{% endblock %}
{% 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 %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -18,7 +18,7 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">In Progress</span>
</span>
</span>
{% endblock %}
......@@ -27,49 +27,44 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<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 class="step__content">
<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">
<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>
<span class="tip">You may continue to work on your response until you submit it.</span>
</li>
</ol>
<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">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
</li>
</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 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>
</ul>
</div>
</form>
</div>
<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>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--collapsed">
<li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Closed</span>
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
......@@ -16,8 +16,13 @@
{% block body %}
<div class="ui-toggle-visibility__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>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility is--collapsed">
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Graded</span>
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span>
</span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Submitted</span>
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span>
</span>
......@@ -17,6 +17,12 @@
{% block body %}
<div class="ui-toggle-visibility__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">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -20,7 +20,7 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">In Progress</span>
</span>
</span>
{% endblock %}
......@@ -29,9 +29,6 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__content">
<article class="self-assessment__display" id="self-assessment">
<header class="self-assessment__display__header">
......@@ -61,15 +58,15 @@
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
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>
</div>
<div class="wrapper--metadata">
<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>
</li>
{% endfor %}
......@@ -83,10 +80,10 @@
</div>
<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>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<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" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
{% 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 %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% 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 %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% 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 %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="copy">Not Available</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/xblock/openassessmentblock.py
......@@ -127,7 +127,7 @@ UI_MODELS = {
"name": "grade",
"class_id": "openassessment__grade",
"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):
if continue_grading:
context_dict["submit_button_text"] = (
"Submit your assessment & review another response."
"Submit your assessment & review another response"
)
elif assessment["must_grade"] - count == 1:
context_dict["submit_button_text"] = (
"Submit your assessment & move onto next step."
"Submit your assessment & move onto next step"
)
else:
context_dict["submit_button_text"] = (
......@@ -165,11 +165,9 @@ class PeerAssessmentMixin(object):
path = 'openassessmentblock/peer/oa_peer_turbo_mode.html'
context_dict["peer_submission"] = peer_sub
else:
path = 'openassessmentblock/peer/oa_peer_complete.html'
elif workflow.get("status") == "done":
path = "openassessmentblock/peer/oa_peer_complete.html"
elif finished:
path = 'openassessmentblock/peer/oa_peer_waiting.html'
elif workflow.get("status") == "done" or finished:
path = "openassessmentblock/peer/oa_peer_complete.html"
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 @@
</header>
<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 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>
<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>
</li>
</ol>
......
apps/openassessment/xblock/static/js/openassessment.min.js
if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.BaseUI=function(runtime,element,server){this.runtime=runtime;this.element=element;this.server=server};OpenAssessment.BaseUI.prototype={setUpCollapseExpand:function(parentSel,onExpand){parentSel.find(".ui-toggle-visibility__control").click(function(eventData){var sel=$(eventData.target).closest(".ui-toggle-visibility");if(sel.hasClass("is--collapsed")&&onExpand!==undefined){onExpand()}sel.toggleClass("is--collapsed")})},load:function(){this.renderSubmissionStep();this.renderPeerAssessmentStep();this.renderSelfAssessmentStep();this.renderGradeStep()},renderSubmissionStep:function(){var ui=this;this.server.render("submission").done(function(html){$("#openassessment__response",ui.element).replaceWith(html);var sel=$("#openassessment__response",ui.element);ui.setUpCollapseExpand(sel);ui.responseChanged();sel.find("#submission__answer__value").keyup(function(eventData){ui.responseChanged()});sel.find("#step--response__submit").click(function(eventObject){eventObject.preventDefault();ui.submit()});sel.find("#submission__save").click(function(eventObject){eventObject.preventDefault();ui.save()})}).fail(function(errMsg){ui.showLoadError("response")})},responseChanged:function(){var blankSubmission=$("#submission__answer__value",this.element).val()==="";$("#step--response__submit",this.element).toggleClass("is--disabled",blankSubmission);$("#submission__save",this.element).toggleClass("is--disabled",blankSubmission)},renderPeerAssessmentStep:function(){var ui=this;this.server.render("peer_assessment").done(function(html){$("#openassessment__peer-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",ui.element);ui.setUpCollapseExpand(sel,$.proxy(ui.renderContinuedPeerAssessmentStep,ui));sel.find("#peer-assessment--001__assessment").change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#peer-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.peerAssess()})}).fail(function(errMsg){ui.showLoadError("peer-assessment")})},renderContinuedPeerAssessmentStep:function(){var ui=this;this.server.renderContinuedPeer().done(function(html){$("#openassessment__peer-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",ui.element);ui.setUpCollapseExpand(sel);sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.continuedPeerAssess()});sel.find("#peer-assessment--001__assessment").change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#peer-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)})}).fail(function(errMsg){ui.showLoadError("peer-assessment")})},renderSelfAssessmentStep:function(){var ui=this;this.server.render("self_assessment").done(function(html){$("#openassessment__self-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__self-assessment",ui.element);ui.setUpCollapseExpand(sel);$("#self-assessment--001__assessment",ui.element).change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#self-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#self-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.selfAssess()})}).fail(function(errMsg){ui.showLoadError("self-assessment")})},renderGradeStep:function(){var ui=this;this.server.render("grade").done(function(html){$("#openassessment__grade",ui.element).replaceWith(html);var sel=$("#openassessment__grade",ui.element);ui.setUpCollapseExpand(sel);sel.find("#feedback__submit").click(function(eventObject){eventObject.preventDefault();ui.feedback_assess()})}).fail(function(errMsg){ui.showLoadError("grade",errMsg)})},save:function(){var submission=$("#submission__answer__value",this.element).val();var ui=this;this.setSaveStatus("Saving...");this.toggleActionError("save",null);this.server.save(submission).done(function(){ui.setSaveStatus("Saved but not submitted")}).fail(function(errMsg){ui.setSaveStatus("Error");ui.toggleActionError("save",errMsg)})},setSaveStatus:function(msg){$("#response__save_status h3",this.element).html(msg)},submit:function(){var submission=$("#submission__answer__value",this.element).val();var ui=this;this.toggleActionError("response",null);this.server.submit(submission).done(function(studentId,attemptNum){ui.renderSubmissionStep();ui.renderPeerAssessmentStep()}).fail(function(errCode,errMsg){ui.toggleActionError("submit",errMsg)})},feedback_assess:function(){var feedback=$("#feedback__remarks__value",this.element).val();var ui=this;this.server.feedback_submit(feedback).done(console.log("Feedback to the assessments submitted, thanks!")).fail(function(errMsg){ui.toggleActionError("feedback_assess",errMsg)})},peerAssess:function(){var ui=this;ui.peerAssessRequest(function(){ui.renderPeerAssessmentStep();ui.renderSelfAssessmentStep();ui.renderGradeStep()})},continuedPeerAssess:function(){var ui=this;ui.peerAssessRequest(function(){ui.renderContinuedPeerAssessmentStep();ui.renderGradeStep()})},peerAssessRequest:function(successFunction){var submissionId=$("span#peer_submission_uuid",this.element)[0].innerHTML.trim();var optionsSelected={};$("#peer-assessment--001__assessment input[type=radio]:checked",this.element).each(function(index,sel){optionsSelected[sel.name]=sel.value});var feedback=$("#assessment__rubric__question--feedback__value",this.element).val();var ui=this;this.toggleActionError("peer",null);this.server.peerAssess(submissionId,optionsSelected,feedback).done(successFunction).fail(function(errMsg){ui.toggleActionError("peer",errMsg)})},selfAssess:function(){var submissionId=$("span#self_submission_uuid",this.element)[0].innerHTML.trim();var optionsSelected={};$("#self-assessment--001__assessment input[type=radio]:checked",this.element).each(function(index,sel){optionsSelected[sel.name]=sel.value});var ui=this;this.toggleActionError("self",null);this.server.selfAssess(submissionId,optionsSelected).done(function(){ui.renderPeerAssessmentStep();ui.renderSelfAssessmentStep();ui.renderGradeStep()}).fail(function(errMsg){ui.toggleActionError("self",errMsg)})},toggleActionError:function(type,msg){var container=null;if(type=="save"){container=".response__submission__actions"}else if(type=="submit"){container=".step__actions"}else if(type=="peer"){container=".peer-assessment__actions"}else if(type=="self"){container=".self-assessment__actions"}if(container===null){if(msg!==null){console.log(msg)}}else{var msgHtml=msg===null?"":msg;$(container+" .message__content").html("<p>"+msg+"</p>");$(container).toggleClass("has--error",msg!==null)}},showLoadError:function(step){var container="#openassessment__"+step;$(container).toggleClass("has--error",true);$(container+" .step__status__value i").removeClass().addClass("icon-warning-sign");$(container+" .step__status__value .copy").html("Unable to Load")}};function OpenAssessmentBlock(runtime,element){$(function($){var server=new OpenAssessment.Server(runtime,element);var ui=new OpenAssessment.BaseUI(runtime,element,server);ui.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.StudioUI=function(runtime,element,server){this.runtime=runtime;this.server=server;this.codeBox=CodeMirror.fromTextArea($(element).find(".openassessment-editor").first().get(0),{mode:"xml",lineNumbers:true,lineWrapping:true});var ui=this;$(element).find(".openassessment-save-button").click(function(eventData){ui.save()});$(element).find(".openassessment-cancel-button").click(function(eventData){ui.cancel()})};OpenAssessment.StudioUI.prototype={load:function(){var ui=this;this.server.loadXml().done(function(xml){ui.codeBox.setValue(xml)}).fail(function(msg){ui.showError(msg)})},save:function(){var ui=this;this.server.checkReleased().done(function(isReleased){if(isReleased){ui.confirmPostReleaseUpdate($.proxy(ui.updateXml,ui))}else{ui.updateXml()}}).fail(function(errMsg){console.log(errMsg)})},confirmPostReleaseUpdate:function(onConfirm){var msg="This problem has already been released. Any changes will apply only to future assessments.";if(confirm(msg)){onConfirm()}},updateXml:function(){this.runtime.notify("save",{state:"start"});var xml=this.codeBox.getValue();var ui=this;this.server.updateXml(xml).done(function(){ui.runtime.notify("save",{state:"end"});ui.load()}).fail(function(msg){ui.showError(msg)})},cancel:function(){this.runtime.notify("cancel",{})},showError:function(errorMsg){this.runtime.notify("error",{msg:errorMsg})}};function OpenAssessmentEditor(runtime,element){$(function($){var server=new OpenAssessment.Server(runtime,element);var ui=new OpenAssessment.StudioUI(runtime,element,server);ui.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.Server=function(runtime,element){this.runtime=runtime;this.element=element};OpenAssessment.Server.prototype={url:function(handler){return this.runtime.handlerUrl(this.element,handler)},render:function(component){var url=this.url("render_"+component);return $.Deferred(function(defer){$.ajax({url:url,type:"POST",dataType:"html"}).done(function(data){defer.resolveWith(this,[data])}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},renderContinuedPeer:function(){var url=this.url("render_peer_assessment");return $.Deferred(function(defer){$.ajax({url:url,type:"POST",dataType:"html",data:{continue_grading:true}}).done(function(data){defer.resolveWith(this,[data])}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},submit:function(submission){var url=this.url("submit");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:JSON.stringify({submission:submission})}).done(function(data){var success=data[0];if(success){var studentId=data[1];var attemptNum=data[2];defer.resolveWith(this,[studentId,attemptNum])}else{var errorNum=data[1];var errorMsg=data[2];defer.rejectWith(this,[errorNum,errorMsg])}}).fail(function(data){defer.rejectWith(this,["AJAX","Could not contact server."])})}).promise()},save:function(submission){var url=this.url("save_submission");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:JSON.stringify({submission:submission})}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},feedback_submit:function(feedback){var url=this.url("feedback_submit");var payload=JSON.stringify({feedback:feedback});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},peerAssess:function(submissionId,optionsSelected,feedback){var url=this.url("peer_assess");var payload=JSON.stringify({submission_uuid:submissionId,options_selected:optionsSelected,feedback:feedback});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},selfAssess:function(submissionId,optionsSelected){var url=this.url("self_assess");var payload=JSON.stringify({submission_uuid:submissionId,options_selected:optionsSelected});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})})},loadXml:function(){var url=this.url("xml");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:'""'}).done(function(data){if(data.success){defer.resolveWith(this,[data.xml])}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},updateXml:function(xml){var url=this.url("update_xml");var payload=JSON.stringify({xml:xml});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},checkReleased:function(){var url=this.url("check_released");var payload='""';return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolveWith(this,[data.is_released])}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()}};
\ No newline at end of file
if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.BaseUI=function(runtime,element,server){this.runtime=runtime;this.element=element;this.server=server};OpenAssessment.BaseUI.prototype={setUpCollapseExpand:function(parentSel,onExpand){parentSel.find(".ui-toggle-visibility__control").click(function(eventData){var sel=$(eventData.target).closest(".ui-toggle-visibility");if(sel.hasClass("is--collapsed")&&onExpand!==undefined){onExpand()}sel.toggleClass("is--collapsed")})},load:function(){this.renderSubmissionStep();this.renderPeerAssessmentStep();this.renderSelfAssessmentStep();this.renderGradeStep()},renderSubmissionStep:function(){var ui=this;this.server.render("submission").done(function(html){$("#openassessment__response",ui.element).replaceWith(html);var sel=$("#openassessment__response",ui.element);ui.setUpCollapseExpand(sel);ui.responseChanged();sel.find("#submission__answer__value").keyup(function(eventData){ui.responseChanged()});sel.find("#step--response__submit").click(function(eventObject){eventObject.preventDefault();ui.submit()});sel.find("#submission__save").click(function(eventObject){eventObject.preventDefault();ui.save()})}).fail(function(errMsg){ui.showLoadError("response")})},responseChanged:function(){var blankSubmission=$("#submission__answer__value",this.element).val()==="";$("#step--response__submit",this.element).toggleClass("is--disabled",blankSubmission);$("#submission__save",this.element).toggleClass("is--disabled",blankSubmission)},renderPeerAssessmentStep:function(){var ui=this;this.server.render("peer_assessment").done(function(html){$("#openassessment__peer-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",ui.element);ui.setUpCollapseExpand(sel,$.proxy(ui.renderContinuedPeerAssessmentStep,ui));sel.find("#peer-assessment--001__assessment").change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#peer-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.peerAssess()})}).fail(function(errMsg){ui.showLoadError("peer-assessment")})},renderContinuedPeerAssessmentStep:function(){var ui=this;this.server.renderContinuedPeer().done(function(html){$("#openassessment__peer-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",ui.element);ui.setUpCollapseExpand(sel);sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.continuedPeerAssess()});sel.find("#peer-assessment--001__assessment").change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#peer-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)})}).fail(function(errMsg){ui.showLoadError("peer-assessment")})},renderSelfAssessmentStep:function(){var ui=this;this.server.render("self_assessment").done(function(html){$("#openassessment__self-assessment",ui.element).replaceWith(html);var sel=$("#openassessment__self-assessment",ui.element);ui.setUpCollapseExpand(sel);$("#self-assessment--001__assessment",ui.element).change(function(){var numChecked=$("input[type=radio]:checked",this).length;var numAvailable=$(".field--radio.assessment__rubric__question",this).length;$("#self-assessment--001__assessment__submit",ui.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#self-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();ui.selfAssess()})}).fail(function(errMsg){ui.showLoadError("self-assessment")})},renderGradeStep:function(){var ui=this;this.server.render("grade").done(function(html){$("#openassessment__grade",ui.element).replaceWith(html);var sel=$("#openassessment__grade",ui.element);ui.setUpCollapseExpand(sel);sel.find("#feedback__submit").click(function(eventObject){eventObject.preventDefault();ui.feedback_assess()})}).fail(function(errMsg){ui.showLoadError("grade",errMsg)})},save:function(){var submission=$("#submission__answer__value",this.element).val();var ui=this;this.setSaveStatus("Saving...");this.toggleActionError("save",null);this.server.save(submission).done(function(){ui.setSaveStatus("Saved but not submitted")}).fail(function(errMsg){ui.setSaveStatus("Error");ui.toggleActionError("save",errMsg)})},setSaveStatus:function(msg){$("#response__save_status h3",this.element).html(msg)},submit:function(){var submission=$("#submission__answer__value",this.element).val();var ui=this;this.toggleActionError("response",null);this.server.submit(submission).done(function(studentId,attemptNum){ui.renderSubmissionStep();ui.renderPeerAssessmentStep()}).fail(function(errCode,errMsg){ui.toggleActionError("submit",errMsg)})},feedback_assess:function(){var feedback=$("#feedback__remarks__value",this.element).val();var ui=this;this.server.feedback_submit(feedback).done(console.log("Feedback to the assessments submitted, thanks!")).fail(function(errMsg){ui.toggleActionError("feedback_assess",errMsg)})},peerAssess:function(){var ui=this;ui.peerAssessRequest(function(){ui.renderPeerAssessmentStep();ui.renderSelfAssessmentStep();ui.renderGradeStep()})},continuedPeerAssess:function(){var ui=this;ui.peerAssessRequest(function(){ui.renderContinuedPeerAssessmentStep();ui.renderGradeStep()})},peerAssessRequest:function(successFunction){var submissionId=$("span#peer_submission_uuid",this.element)[0].innerHTML.trim();var optionsSelected={};$("#peer-assessment--001__assessment input[type=radio]:checked",this.element).each(function(index,sel){optionsSelected[sel.name]=sel.value});var feedback=$("#assessment__rubric__question--feedback__value",this.element).val();var ui=this;this.toggleActionError("peer",null);this.server.peerAssess(submissionId,optionsSelected,feedback).done(successFunction).fail(function(errMsg){ui.toggleActionError("peer",errMsg)})},selfAssess:function(){var submissionId=$("span#self_submission_uuid",this.element)[0].innerHTML.trim();var optionsSelected={};$("#self-assessment--001__assessment input[type=radio]:checked",this.element).each(function(index,sel){optionsSelected[sel.name]=sel.value});var ui=this;this.toggleActionError("self",null);this.server.selfAssess(submissionId,optionsSelected).done(function(){ui.renderPeerAssessmentStep();ui.renderSelfAssessmentStep();ui.renderGradeStep()}).fail(function(errMsg){ui.toggleActionError("self",errMsg)})},toggleActionError:function(type,msg){var container=null;if(type=="save"){container=".response__submission__actions"}else if(type=="submit"){container=".step__actions"}else if(type=="peer"){container=".peer-assessment__actions"}else if(type=="self"){container=".self-assessment__actions"}if(container===null){if(msg!==null){console.log(msg)}}else{var msgHtml=msg===null?"":msg;$(container+" .message__content").html("<p>"+msg+"</p>");$(container).toggleClass("has--error",msg!==null)}},showLoadError:function(step){var container="#openassessment__"+step;$(container).toggleClass("has--error",true);$(container+" .step__status__value i").removeClass().addClass("ico icon-warning-sign");$(container+" .step__status__value .copy").html("Unable to Load")}};function OpenAssessmentBlock(runtime,element){$(function($){var server=new OpenAssessment.Server(runtime,element);var ui=new OpenAssessment.BaseUI(runtime,element,server);ui.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.StudioUI=function(runtime,element,server){this.runtime=runtime;this.server=server;this.codeBox=CodeMirror.fromTextArea($(element).find(".openassessment-editor").first().get(0),{mode:"xml",lineNumbers:true,lineWrapping:true});var ui=this;$(element).find(".openassessment-save-button").click(function(eventData){ui.save()});$(element).find(".openassessment-cancel-button").click(function(eventData){ui.cancel()})};OpenAssessment.StudioUI.prototype={load:function(){var ui=this;this.server.loadXml().done(function(xml){ui.codeBox.setValue(xml)}).fail(function(msg){ui.showError(msg)})},save:function(){var ui=this;this.server.checkReleased().done(function(isReleased){if(isReleased){ui.confirmPostReleaseUpdate($.proxy(ui.updateXml,ui))}else{ui.updateXml()}}).fail(function(errMsg){console.log(errMsg)})},confirmPostReleaseUpdate:function(onConfirm){var msg="This problem has already been released. Any changes will apply only to future assessments.";if(confirm(msg)){onConfirm()}},updateXml:function(){this.runtime.notify("save",{state:"start"});var xml=this.codeBox.getValue();var ui=this;this.server.updateXml(xml).done(function(){ui.runtime.notify("save",{state:"end"});ui.load()}).fail(function(msg){ui.showError(msg)})},cancel:function(){this.runtime.notify("cancel",{})},showError:function(errorMsg){this.runtime.notify("error",{msg:errorMsg})}};function OpenAssessmentEditor(runtime,element){$(function($){var server=new OpenAssessment.Server(runtime,element);var ui=new OpenAssessment.StudioUI(runtime,element,server);ui.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.Server=function(runtime,element){this.runtime=runtime;this.element=element};OpenAssessment.Server.prototype={url:function(handler){return this.runtime.handlerUrl(this.element,handler)},render:function(component){var url=this.url("render_"+component);return $.Deferred(function(defer){$.ajax({url:url,type:"POST",dataType:"html"}).done(function(data){defer.resolveWith(this,[data])}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},renderContinuedPeer:function(){var url=this.url("render_peer_assessment");return $.Deferred(function(defer){$.ajax({url:url,type:"POST",dataType:"html",data:{continue_grading:true}}).done(function(data){defer.resolveWith(this,[data])}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},submit:function(submission){var url=this.url("submit");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:JSON.stringify({submission:submission})}).done(function(data){var success=data[0];if(success){var studentId=data[1];var attemptNum=data[2];defer.resolveWith(this,[studentId,attemptNum])}else{var errorNum=data[1];var errorMsg=data[2];defer.rejectWith(this,[errorNum,errorMsg])}}).fail(function(data){defer.rejectWith(this,["AJAX","Could not contact server."])})}).promise()},save:function(submission){var url=this.url("save_submission");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:JSON.stringify({submission:submission})}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},feedback_submit:function(feedback){var url=this.url("feedback_submit");var payload=JSON.stringify({feedback:feedback});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},peerAssess:function(submissionId,optionsSelected,feedback){var url=this.url("peer_assess");var payload=JSON.stringify({submission_uuid:submissionId,options_selected:optionsSelected,feedback:feedback});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},selfAssess:function(submissionId,optionsSelected){var url=this.url("self_assess");var payload=JSON.stringify({submission_uuid:submissionId,options_selected:optionsSelected});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})})},loadXml:function(){var url=this.url("xml");return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:'""'}).done(function(data){if(data.success){defer.resolveWith(this,[data.xml])}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},updateXml:function(xml){var url=this.url("update_xml");var payload=JSON.stringify({xml:xml});return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolve()}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()},checkReleased:function(){var url=this.url("check_released");var payload='""';return $.Deferred(function(defer){$.ajax({type:"POST",url:url,data:payload}).done(function(data){if(data.success){defer.resolveWith(this,[data.is_released])}else{defer.rejectWith(this,[data.msg])}}).fail(function(data){defer.rejectWith(this,["Could not contact server."])})}).promise()}};
\ No newline at end of file
apps/openassessment/xblock/static/js/src/oa_base.js
......@@ -453,7 +453,7 @@ OpenAssessment.BaseUI.prototype = {
showLoadError: function(step) {
var container = '#openassessment__' + step;
$(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');
}
};
......
apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss
......@@ -11,8 +11,8 @@
// control to toggle
.ui-toggle-visibility__control {
@include transition(color $tmg-f2 ease-in);
@extend %fake-link;
color: $action-primary-color;
text-decoration: none;
// optional icon
......@@ -24,7 +24,10 @@
> .ico {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(90deg));
margin-right: ($baseline-h/8);
}
.ui-toggle-visibility__control__copy {
margin-left: ($baseline-h/4);
}
&:hover, &:focus {
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -6,11 +6,28 @@
// --------------------
// UI: content
// typography: subheading
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
%t-superheading {
@extend %hd-2;
@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 @@
// 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);
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;
}
%ui-section-title {
@extend %hd-7;
@extend %t-weight3;
padding: ($baseline-v/2) $baseline-v;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
%ui-subsection-title {
margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/2);
}
%ui-section-content {
padding: $baseline-v;
%ui-subsection-content {
p {
margin-bottom: $baseline-v;
......@@ -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
......@@ -54,19 +163,18 @@
@extend %wipe-last-child;
.question__title {
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/4);
.ico {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline-v/4);
}
}
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
@extend %t-heading;
color: $heading-color;
}
}
......@@ -77,16 +185,10 @@
.answer {
@include row();
@extend %trans-opacity;
@extend %wipe-last-child;
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);
opacity: 0.75;
&:hover {
opacity: 1.0;
}
}
.wrapper--input {
......@@ -117,10 +219,10 @@
}
.answer__label {
@extend %copy-4;
@extend %t-weight3;
@extend %copy-3;
@extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused;
color: $copy-secondary-color;
}
.answer__value {
......@@ -162,9 +264,9 @@
.answer__tip {
margin-bottom: ($baseline-v/2);
@extend %copy-5;
@extend %copy-3;
margin-right: $baseline-v;
color: $copy-supplemental-color;
color: $copy-secondary-color;
@include media($bp-dm) {
@include span-columns(6 of 8);
......@@ -190,12 +292,8 @@
}
.answer__points {
@extend %copy-5;
color: $copy-color;
@extend %copy-5;
margin-right: $baseline-v;
color: $copy-supplemental-color;
@extend %t-score;
color: $copy-secondary-color;
@include media($bp-dm) {
float: right;
......@@ -211,13 +309,11 @@
float: right;
text-align: right;
}
}
.label {
@extend %copy-5; // FIX: need to reset base label style
.answer__points__label {
display: inline-block; // FIX: need to reset base label style
margin-left: ($baseline-v/4);
color: $copy-supplemental-color;
}
color: $copy-secondary-color;
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -28,27 +28,16 @@
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
.openassessment__steps .openassessment__steps__step .step__header {
.step__deadline {
color: $color-focused;
color: $heading-secondary-color;
}
// step title/name
.step__title {
h2.step__title {
@include span-columns(3 of 4);
margin-top: 0 !important;
text-align: left !important;
......@@ -83,24 +72,25 @@
// increment: show numbers using parent list counter
&:before {
@extend %hd-6;
@extend %t-weight4;
@extend %hd-2;
@extend %t-strong;
content: counter(item, decimal);
counter-increment: item;
margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
color: $color-decorative-tertiary;
}
}
}
}
.step__status {
}
.step__status__value {
line-height: 0;
}
}
.list--actions {
list-style: none !important;
......@@ -135,14 +125,17 @@
}
}
// self assessment
.self-assessment__display__header, .peer-assessment__display__header {
padding-bottom: ($baseline-v/2) !important;
// peer assessment
.step--peer-assessment .list--peer-assessments {
list-style: none outside none !important;
padding-left: 0 !important;;
}
// self assessment
.self-assessment__display__title, .peer-assessment__display__title {
margin-bottom: ($baseline-v/2) !important;
color: $heading-secondary-color !important;
font-weight: 600 !important;
}
// shown submission/results
......@@ -150,6 +143,7 @@
padding-left: 0 !important;
}
.step--grade .step__title {
width: 100% !important;
......@@ -160,7 +154,7 @@
// actions
.action--submit, .action--save {
box-shadow: none;
box-shadow: none !important;;
}
// --------------------
......@@ -176,4 +170,8 @@
letter-spacing: normal;
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);
// --------------------
// // application - colors: states
// --------------------
$color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(98, 194, 74);
$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/oa/views/_oa-base.scss
......@@ -11,135 +11,275 @@
.openassessment {
// --------------------
// general
// general: messages
// --------------------
.message {
margin-bottom: $baseline-v;
border-radius: ($baseline-v/10);
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quaternary;
.message__title {
@extend %t-heading;
margin-bottom: ($baseline-v/4);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
}
.message__content {
@extend %copy-3;
color: $copy-secondary-color;
a {
@extend %link-copy;
}
}
}
// TYPE: error
.message--error {
background: tint($color-error, 95%);
.message__title {
color: $color-error;
border-bottom-color: $color-error;
}
}
// TYPE: warning
.message--warning {
background: tint($color-warning, 95%);
.message__title {
color: $color-warning;
border-bottom-color: $color-warning;
}
}
// TYPE: confirmation
.message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete
.message--complete {
background: tint($color-complete, 95%);
.message__title {
color: $color-complete;
border-bottom-color: $color-complete;
}
}
// TYPE: incomplete
.message--incomplete {
background: tint($color-incomplete, 95%);
.message__title {
color: $color-incomplete;
border-bottom-color: $color-incomplete;
}
}
// CASE: showing errors is shown
.message--error {
@extend %trans-opacity;
display: none;
opacity: 0.0;
}
.has--error {
.message--error {
display: block;
opacity: 1.0;
}
}
// chrome: title
// TYPE: inline message
.message--inline {
padding: ($baseline-v/2) ($baseline-h/2);
background: tint($color-confirm, 15%);
.message__title {
margin-bottom: 0;
border: none;
padding-bottom: 0;
color: $white-t;
text-align: center;
}
&.message--error {
background: tint($color-error, 15%);
}
&.message--warning {
background: tint($color-warning, 15%);
}
&.message--confirm {
background: tint($color-warning, 15%);
}
}
// --------------------
// general: chrome
// --------------------
.openassessment__title {
@include row();
.problem-header {
text-transform: uppercase;
@extend %t-regular;
}
// --------------------
// overall message
// --------------------
.openassessment__message {
@include row();
background: none;
padding: 0;
}
// --------------------
// steps
// --------------------
.openassessment__steps {
@extend %no-list;
counter-reset: item; // setting counter here
}
.openassessment__steps__step {
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $baseline-v;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
@extend %ui-section;
// step header
.step__header {
@extend %trans-opacity;
@include row();
opacity: 1.0;
}
.step__deadline {
color: $color-focused;
// step title
.step__title {
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include span-columns(4 of 6);
margin-bottom: 0;
}
.step__label, .step__deadline {
display: block;
@include media($bp-dm) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__label {
@extend %hd-4;
@extend %t-weight3;
@extend %trans-color;
@include media($bp-dl) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__deadline {
@extend %hd-8;
@extend %trans-color;
color: $heading-secondary-color;
@include media($bp-dx) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__counter, .wrapper--copy {
display: inline-block;
vertical-align: middle;
}
// step status
.step__status {
.wrapper--copy {
margin-left: ($baseline-h/2);
border-left: 1px solid $color-decorative-tertiary;
padding-left: ($baseline-h/2);
}
.step__counter {
.step__status__value {
display: block;
border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-focused;
color: $white-t;
// increment: show numbers using parent list counter
&:before {
@extend %hd-2;
@extend %t-strong;
content: counter(item, decimal);
counter-increment: item;
color: $color-decorative-tertiary;
@include media($bp-m) {
margin-top: ($baseline-v/2);
}
}
@include media($bp-ds) {
display: inline-block;
vertical-align: bottom;
.step__label, .step__deadline {
display: block;
}
@include media($bp-dm) {
display: inline-block;
vertical-align: bottom;
.step__label {
@extend %t-superheading;
color: $heading-primary-color;
}
@include media($bp-dl) {
display: inline-block;
vertical-align: bottom;
.step__deadline {
@extend %hd-4;
color: $heading-secondary-color;
}
}
// step status
.step__status {
.step__status__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary;
}
.ico {
@extend %t-icon-m;
@extend %icon-2;
display: inline-block;
vertical-align: bottom;
margin-left: ($baseline-v/4);
}
.copy {
@extend %copy-6;
@extend %t-titlecase;
color: $white-t;
@extend %t-score;
color: $heading-color;
}
@include media($bp-m) {
position: relative;
top: 2px;
}
@include media($bp-ds) {
@include span-columns(2 of 6);
@include omega();
margin-top: ($baseline-v/4);
position: relative;
top: -8px;
text-align: right;
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega();
margin-top: ($baseline-v/4);
position: relative;
top:-8px;
text-align: right;
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega();
margin-top: ($baseline-v/4);
position: relative;
top: -8px;
text-align: right;
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega();
margin-top: ($baseline-v/4);
position: relative;
top: -8px;
text-align: right;
}
}
......@@ -150,26 +290,22 @@
// step content wrapper
.wrapper--step__content {
margin-top: $baseline-v;
margin-top: ($baseline-v/2);
padding-top: $baseline-v;
border-top: 1px solid $color-decorative-tertiary;
}
// step message
.step__message {
@include row();
margin-bottom: $baseline-v;
border-radius: ($baseline-v/5);
padding: $baseline-v ($baseline-h/2);
&.message--confirmation {
background: tint($color-complete, 90%);
}
}
// step instructions
.step__instruction {
@extend %copy-4;
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-color;
color: $copy-secondary-color;
}
// step content
......@@ -179,10 +315,7 @@
// step actions
.step__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
margin-bottom: ($baseline-v/2);
text-align: center;
@include media($bp-ds) {
......@@ -203,109 +336,50 @@
.action--submit {
@extend %btn--primary;
@extend %action-4;
@extend %action-2;
.copy, .ico {
display: inline;
}
.ico {
@extend %t-icon-l;
@extend %icon-1;
}
}
// STATE: has error
// STATE: actions has an error
&.has--error {
@include row();
background: tint($color-error, 90%);
.message {
display: block;
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include span-columns(3 of 6);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dm) {
@include span-columns(6 of 12);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dl) {
@include span-columns(6 of 12);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dx) {
@include span-columns(6 of 12);
margin-bottom: 0;
margin-bottom: $baseline-v;
text-align: left;
}
}
.list--actions {
display: block;
@include media($bp-ds) {
@include span-columns(3 of 6);
}
@include media($bp-dm) {
@include span-columns(6 of 12);
}
// STATE: step is loading
&.is--loading {
@include media($bp-dl) {
@include span-columns(6 of 12);
.step__header {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(6 of 12);
}
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
}
}
}
// STATE: step is loading
&.is--loading {
opacity: 0.3;
.step__status__value {
background: $color-primary;
background: $color-unavailable;
.ico {
display: inline-block;
color: $copy-color;
}
.copy {
color: $white-t;
}
}
.step__header {
@include media($bp-ds) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dm) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dl) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dx) {
border-bottom: none;
padding-bottom: 0;
color: $copy-color;
}
}
}
......@@ -314,68 +388,87 @@
&.is--collapsed {
.step__header {
opacity: 0.4;
margin-bottom: 0;
@include media($bp-ds) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dm) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dl) {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
@include media($bp-dx) {
border-bottom: none;
padding-bottom: 0;
// STATE: step is incomplete
&.is--incomplete {
.step__counter:before {
border-color: rgba($color-incomplete, 0.5);
color: $color-incomplete;
}
.step__deadline {
color: $color-focused;
.step__status__value {
background: $color-incomplete;
.copy, .ico {
color: $white-t;
}
}
// STATE: hover
&:hover, &:focus {
opacity: 1.0;
.step__label {
color: $color-incomplete;
}
}
// STATE: step is unavailable
&.is--unavailable {
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
}
.step__status__value {
background: $color-secondary;
background: $color-unavailable;
.ico {
display: inline-block;
color: $copy-secondary-color;
}
// step counter
.step__counter:before {
border: 1px solid rgba($heading-color, 0.5);
.copy {
color: $copy-secondary-color;
}
}
}
// STATE: step is incomplete
&.is--incomplete {
// STATE: step is unavailable
&.is--waiting {
.step__counter:before, .step__label, .step__deadline {
color: $color-unavailable;
}
// STATE: step is unavailable
&.is--unavailable {
.step__status__value {
background: $color-unavailable;
.ico {
display: inline-block;
color: $copy-secondary-color;
}
.step__header:hover, .step__header:focus {
opacity: 0.4;
.copy {
color: $copy-secondary-color;
}
}
.step__title .grade__value__title {
color: $color-unavailable;
}
.step__instruction, .grade__value__description {
color: $copy-secondary-color;
}
}
// STATE: step is complete/submitted/graded
&.is--complete, &.is--submitted, &.is--graded {
&.is--complete {
.step__counter:before {
border-color: rgba($color-complete, 0.5);
color: $color-complete;
}
......@@ -386,7 +479,7 @@
display: inline-block;
}
.copy {
.copy, .ico {
color: $white-t;
}
}
......@@ -403,7 +496,7 @@
.step__status__value {
background: $color-error;
.copy {
.copy, .ico {
color: $white-t;
}
}
......@@ -420,61 +513,19 @@
// --------------------
// messages
// collapse and expand styling for step labels
// --------------------
.message {
.message__title {
@extend %hd-6;
}
.message__content {
@extend %copy-4;
}
}
// TYPE: error
.message--error {
.message__title {
color: $color-error;
}
.message__content {
color: tint($color-error, 33%);
}
}
// TYPE: warning
.message--warning {
}
// TYPE: confirmation
.message--confirmation {
.message__title {
color: $color-complete;
}
}
// TODO: clean this scope up
.ui-toggle-visibility .ui-toggle-visibility__control .step__label {
@include transition(color $tmg-f2 ease-in);
color: $action-primary-color;
// --------------------
// errors
// --------------------
// CASE: default error display (hidden)
.message--error {
@extend %trans-opacity;
display: none;
opacity: 0.0;
&:hover, &:focus {
color: $action-primary-color-focus;
}
// CASE: error is shown
.has--error {
.message--error {
display: block;
opacity: 1.0;
&:active, &.is--current {
color: $action-primary-color-active;
}
}
......@@ -487,6 +538,7 @@
}
.openassessment__prompt {
@extend %ui-well;
margin-bottom: $baseline-v;
}
......@@ -496,7 +548,7 @@
.openassessment__prompt__copy {
@extend %copy-2;
color: $copy-lead-color;
color: $copy-color;
> * {
margin-bottom: $baseline-v;
......@@ -520,15 +572,13 @@
// response form
.response__submission {
margin-top: ($baseline-v*2.5);
position: relative;
padding: ($baseline-v*0.75);
background: $color-decorative-tertiary;
padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
background: $color-decorative-quaternary;
border-radius: ($baseline-v/10);
}
.response__submission__content {
margin-bottom: ($baseline-v/2);
margin-bottom: $baseline-v;
label {
@extend %text-sr;
......@@ -537,30 +587,32 @@
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*10);
margin-bottom: ($baseline-v/2);
}
.tip {
@extend %t-score;
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-secondary;
color: $white-t;
}
}
.response__submission__status {
position: absolute;
top: -($baseline-v*1.5);
right: 0;
background: $color-decorative-tertiary;
padding: ($baseline-v/2) ($baseline-h/2);
margin-bottom: ($baseline-v/2);
display: inline-block;
vertical-align: middle;
margin-left: ($baseline-h/4);
}
.response__submission__status__title {
@extend %hd-7;
@extend %t-weight3;
color: $copy-supplemental-color;
@extend %t-score;
color: $action-secondary-color;
}
.response__submission__actions {
.action--save {
@extend %btn--secondary;
@extend %action-4;
@extend %action-2;
display: block;
text-align: center;
margin-bottom: ($baseline-v/2);
......@@ -604,69 +656,29 @@
// peer submission
.peer-assessment__display {
@extend %ui-section;
@extend %ui-subsection;
}
.peer-assessment__display__header {
@extend %ui-section-title;
@include clearfix();
span {
@extend %t-weight3; // FIX: needed due to DOM structure
@extend %t-strong; // FIX: needed due to DOM structure
}
.peer-assessment__display__title {
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
margin-bottom: ($baseline-v/4);
@include media($bp-ds) {
float: left;
margin-bottom: 0;
}
@include media($bp-dm) {
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
float: left;
margin-bottom: 0;
}
}
.peer-assessment__expected-time {
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
@include media($bp-ds) {
float: right;
}
@include media($bp-dm) {
float: right;
}
@include media($bp-dl) {
float: right;
}
@include media($bp-dx) {
float: right;
}
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
}
.peer-assessment__display__response {
@extend %ui-section-content;
@extend %ui-subsection-content;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-well;
color: $copy-color;
}
// assessment form
......@@ -690,6 +702,10 @@
// genereal feedback question
.assessment__rubric__question--feedback {
.wrapper--input {
margin-top: $baseline-v;
}
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*5);
......@@ -706,28 +722,25 @@
// submission
.self-assessment__display {
@extend %ui-section;
@extend %ui-subsection;
}
.self-assessment__display__header {
@extend %ui-section-title;
@include clearfix();
span {
@extend %t-weight3; // FIX: needed due to DOM structure
}
.self-assessment__display__title {
@extend %hd-7; // FIX: needed due to DOM structure
@extend %t-weight3;
float: left;
}
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
.self-assessment__display__response {
@extend %ui-subsection-content;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
@extend %ui-well;
color: $copy-color;
}
// assessment form
......@@ -763,11 +776,21 @@
// --------------------
// grade status
// --------------------
.step--grade {
// TODO: clean this up - need to make sure counter doens't show when loading or in other states
#openassessment__grade {
.step__header {
opacity: 1.0 !important;
.step__counter, .step__counter:before {
display: none;
}
.wrapper--copy {
margin-left: 0;
border-left: none;
padding-left: 0;
}
}
.step--grade {
.step__title {
@include media($bp-m) {
......@@ -790,35 +813,33 @@
@include span-columns(12 of 12);
}
.wrapper--copy {
display: block;
}
.step__label, .grade__value {
display: block;
display: inline-block;
vertical-align: middle;
}
.step__label {
margin-bottom: ($baseline-v/4);
color: $color-decorative-secondary;
margin-right: ($baseline-h/4);
}
.grade__value__title {
@extend %t-superheading;
color: $heading-primary-color;
.grade__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/2) ($baseline-h/2);
background: $color-decorative-tertiary;
.grade__value__earned {
@extend %t-strong;
}
.grade__value__title {
@extend %hd-6;
color: $heading-primary-color;
.grade__value__potential {
@extend %t-strong;
}
}
}
.grade__value__description {
@extend %copy-4;
color: $copy-lead-color;
}
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-color;
}
.grade__summary {
......@@ -831,48 +852,17 @@
// CASE: is not started
&.is--unstarted {
display: none;
}
// CASE: is incomplete
&.is--incomplete {
.step__header {
border-bottom: none;
padding: 0;
}
}
// CASE: is complete
&.is--complete, &.has--grade {
.step__title {
margin-bottom: $baseline-v;
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
}
.step__label {
margin-right: ($baseline-h/8);
margin-bottom: 0;
color: $heading-primary-color;
}
.grade__value {
background: $color-complete;
color: $white;
}
.grade__value__title {
color: $white;
}
// CASE: is closed
&.is--closed {
.grade__value__earned, .grade__value__potential {
@extend %t-weight3;
}
}
}
}
......@@ -880,17 +870,20 @@
// UI: submitted repsonse
// --------------------
.submission__answer__display {
@extend %ui-section;
@extend %ui-subsection;
}
.submission__answer__display__title {
@extend %ui-section-title;
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
.submission__answer__display__content {
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-section-content;
@extend %ui-subsection-content;
@extend %ui-well;
}
......@@ -900,17 +893,19 @@
// peer review summary
.submission__peer-evaluations {
@extend %ui-section;
@extend %ui-subsection;
}
.submission__peer-evaluations__title {
@extend %ui-section-title;
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
// rubric questions
.submission__peer-evaluations__questions {
@extend %no-list;
@extend %ui-section-content;
@extend %ui-subsection-content;
margin-bottom: ($baseline-v/2);
&:last-child {
......@@ -921,36 +916,31 @@
// individual question
.question {
margin-bottom: ($baseline-v/2);
margin-bottom: $baseline-v;
@extend %wipe-last-child;
}
.question__title {
@include clearfix();
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/4);
}
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
@extend %t-heading;
margin-left: ($baseline-h/4);
color: $heading-color;
}
.question__score {
@extend %hd-7;
@extend %t-titlecase;
@extend %t-weight4;
@extend %t-score;
float: right;
position: relative;
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;
}
.question__score__value {
@extend %t-strong;
color: $heading-primary-color;
&:after {
......@@ -961,9 +951,11 @@
}
.question__score__potential {
@extend %t-strong;
color: $heading-secondary-color;
.unit {
@extend %t-strong;
margin-left: ($baseline-v/4);
}
}
......@@ -997,58 +989,85 @@
@include span-columns(3 of 12);
@include omega(4n);
}
// CASE: self assessment
&.self-assessment {
border-radius: ($baseline-v/10);
background: $color-decorative-quaternary;
padding: ($baseline-v/2) ($baseline-h/2);
}
}
.answer__source {
@extend %hd-7;
@extend %hd-5;
@extend %t-strong;
@extend %t-titlecase;
display: block;
color: $heading-tertiary-color;
color: $heading-secondary-color;
}
.answer__value {
@extend %copy-3;
display: block;
margin-bottom: ($baseline-v/2);
color: $heading-primary-color;
}
.answer__score {
@extend %hd-7;
@extend %t-titlecase;
@extend %t-weight4;
.answer__value__value {
@extend %hd-3;
@extend %t-strong;
color: $heading-color;
}
.answer__score, .answer__score__value {
@extend %t-score;
display: block;
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary;
color: $heading-primary-color;
}
.answer__content {
@extend %copy-4;
display: block;
color: $copy-supplemental-color;
// open feedback question
.question--feedback {
// individual answers
.answer {
@include fill-parent();
}
.answer__value {
@extend %copy-3;
}
}
}
// feedback form
.submission__feeedback {
@extend %ui-section;
@extend %ui-subsection;
}
.submission__feeedback__title {
@extend %ui-section-title;
@extend %ui-subsection-title;
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
.submission__feeedback__content {
@extend %ui-section-content;
@extend %ui-subsection-content;
}
.submission__feeedback__instructions {
@extend %copy-4;
color: $copy-color;
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-secondary-color;
}
.submission__feedback__elements {
padding: $baseline-v ($baseline-h/2) $baseline-v ($baseline-h/2);
background: $color-decorative-quaternary;
border-radius: ($baseline-v/10);
}
.submission__feeedback__fields {
margin-bottom: $baseline-v;
.field {
margin-bottom: ($baseline-v*1.5);
......@@ -1069,7 +1088,7 @@
}
.submission__feeedback__actions {
@extend %ui-section-content;
@extend %ui-subsection-content;
padding-top: 0;
.list--actions {
......@@ -1078,7 +1097,7 @@
.action--submit {
@extend %btn--secondary;
@extend %action-4;
@extend %action-2;
margin-right: ($baseline-v/2);
}
}
......
apps/openassessment/xblock/static/sass/themes/edx/_base.scss
......@@ -3,3 +3,15 @@
// NOTES:
// * 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);
// --------------------
// variables: overrides
// --------------------
// colors
$white-t: rgb(255,255,255);
$black-t: rgb(0,0,0);
// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
......@@ -96,6 +100,7 @@ $gutter: $baseline-v;
$f-title: $f-sans-serif;
$f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
$f-base-color: $edx-gray;
// application - colors
$color-primary: $edx-lms-action-primary;
......@@ -105,9 +110,6 @@ $color-quarternary: $gray-l2;
// application - colors: decorative
$color-decorative-primary: $gray-d3;
$color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $edx-gray-l4;
......@@ -115,24 +117,11 @@ $color-focused: $edx-gray;
// application - colors: copy and headings
$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-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
$selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1;
$selected-color: $edx-blue;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
......@@ -156,12 +145,15 @@ $bg-view: transparent;
$bg-header-main: $white-t;
$color-header-main: $black;
$bg-content: $gray-l6;
$bg-content: $white-t;
$color-content: $gray-d1;
$bg-content-main: $gray-l5;
$color-content-main: $gray-d1;
// application - colors: states
$selected-color: $black-t;
// --------------------
// mixins:
// --------------------
......@@ -170,3 +162,9 @@ $color-content-main: $gray-d1;
// --------------------
// 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 @@
// buttons - primary (assuming dark bg/light copy)
%btn--primary {
@extend %btn-pill;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......@@ -144,14 +144,14 @@
// buttons - secondary (assuming dark bg/light copy)
%btn--secondary {
@extend %btn-pill;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......@@ -178,14 +178,14 @@
// buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary {
@extend %btn-edged;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color;
border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -12,13 +12,15 @@
input[type="email"],
input[type="password"],
textarea {
@extend %t-strong;
border: 1px solid $color-decorative-secondary;
padding: ($baseline-v/2);
outline: 0;
color: $selected-color;
color: $copy-color;
@include placeholder {
color: $copy-supplemental-color-alt;
@extend %t-regular;
color: $copy-secondary-color;
}
&:focus {
......@@ -32,8 +34,8 @@
font-family: $f-copy;
label, .label {
@extend %copy-4;
@extend %t-weight3;
@extend %copy-3;
@extend %t-strong;
display: block;
margin-bottom: ($baseline-v/2);
color: $copy-color;
......@@ -45,8 +47,8 @@
.tip {
display: block;
@extend %copy-5;
color: $copy-supplemental-color;
@extend %copy-4;
color: $copy-secondary-color;
}
}
}
......
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
......@@ -3,58 +3,61 @@
// NOTES:
// * 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 {
font-weight: 300;
%t-ultrastrong {
font-weight: 800;
}
%t-weight1 {
font-weight: 400;
%t-strong {
font-weight: 600;
}
%t-weight2 {
font-weight: 500;
%t-regular {
font-weight: 400;
}
%t-weight3 {
font-weight: 600;
%t-light {
font-weight: 300;
}
%t-weight4 {
font-weight: 700;
%t-ultralight {
font-weight: 200;
}
// --------------------
// titlecase
// type size variants
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
%t-xsmall {
@include typeSet(xsmall);
}
%t-small {
@include typeSet(small);
}
// --------------------
// canned icon sizes
// --------------------
%t-icon-s {
@include font-size(12);
%t-base {
@include typeSet(base);
}
%t-medium {
@include typeSet(medium);
}
%t-icon-m {
@include font-size(16);
%t-large {
@include typeSet(large);
}
%t-icon-l {
@include font-size(24);
%t-xlarge {
@include typeSet(xlarge);
}
%t-icon-xl {
@include font-size(36);
// --------------------
// style: titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
}
......@@ -62,62 +65,27 @@
// canned headings
// --------------------
%hd-1 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(24);
@include lh(24);
@extend %t-xlarge;
font-family: $f-title;
}
%hd-2 {
@extend %t-weight3;
@include font-size(21);
@include lh(21);
@extend %t-large;
font-family: $f-title;
}
%hd-3 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-title;
}
%hd-4 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
@extend %t-base;
font-family: $f-title;
}
%hd-5 {
@extend %t-weight1;
@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);
@extend %t-small;
font-family: $f-title;
}
......@@ -126,40 +94,27 @@
// canned copy
// --------------------
%copy-1 {
@extend %t-weight0;
@include font-size(24);
@include lh(24);
@extend %t-large;
font-family: $f-copy;
}
%copy-2 {
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-copy;
}
%copy-3 {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
@extend %t-base;
font-family: $f-copy;
}
%copy-4 {
@include font-size(14);
@include lh(14);
@extend %t-small;
font-family: $f-copy;
}
%copy-5 {
@include font-size(13);
@include lh(13);
font-family: $f-copy;
}
%copy-6 {
@include font-size(12);
@include lh(12);
@extend %t-xsmall;
font-family: $f-copy;
}
......@@ -168,49 +123,48 @@
// canned actions
// --------------------
%action-1 {
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-action;
}
%action-2 {
@include font-size(18);
@include lh(18);
@extend %t-base;
font-family: $f-action;
}
%action-3 {
@include font-size(16);
@include lh(16);
@extend %t-small;
font-family: $f-action;
}
%action-4 {
@include font-size(14);
@include lh(14);
@extend %t-xsmall;
font-family: $f-action;
}
%action-5 {
@include font-size(12);
@include lh(12);
font-family: $f-action;
// --------------------
// canned icons
// --------------------
%icon-1 {
@extend %t-medium;
}
%icon-2 {
@extend %t-base;
}
// --------------------
// visual emphasis
// --------------------
%emphasis {
font-style: normal;
%icon-3 {
@extend %t-small;
}
%emphasis-1 {
@extend %emphasis;
@extend %t-weight3;
%icon-4 {
@extend %t-xsmall;
}
%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 @@
// --------------------
// 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;
top: $top;
right: $right;
......@@ -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/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 @@
// 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 @@
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
@extend %t-weight1;
margin: 0;
vertical-align: baseline;
border: 0;
padding: 0;
outline: 0;
font-weight: 400;
}
abbr[title] {
......@@ -451,8 +451,8 @@
cursor: help;
}
strong {
@extend %t-weight3;
strong, .emphasis {
@extend %t-strong;
}
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -121,6 +121,15 @@ $anim-distance-offviewport: ($baseline-h*100); // for large
$f-title: $f-sans-serif;
$f-copy: $f-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;
// application - colors: decorative
$color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: tint($gray-l6, 10%);
$color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary: tint($color-decorative-primary, 60%);
$color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%);
// application - colors: states
$color-disabled: $gray-l4;
......@@ -159,22 +169,11 @@ $action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings
$heading-color: $gray-d5;
$heading-primary-color: $black;
$heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l3;
$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;
$heading-color: shade($f-base-color, 50%);
$heading-primary-color: shade($f-base-color, 66%);
$heading-secondary-color: tint($f-base-color, 33%);
$copy-color: $f-base-color;
$copy-secondary-color: tint($copy-color, 25%);
// application - colors: states
$selected-bg: $blue-t1;
......
apps/openassessment/xblock/test/test_self.py
......@@ -112,7 +112,7 @@ class TestSelfAssessment(XBlockHandlerTestCase):
@scenario('data/self_assessment_scenario.xml')
def test_render_self_assessment_preview(self, xblock):
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')
def test_render_self_assessment_complete(self, xblock):
......@@ -141,14 +141,14 @@ class TestSelfAssessment(XBlockHandlerTestCase):
mock_complete.return_value = True
# Expect that the self-assessment step is open
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')
def test_render_self_assessment_no_submission(self, xblock):
# Without creating a submission, render the self-assessment step
# Expect that the step is closed
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')
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