Skip to content

E
edx-ora2
Commit 6a7d036f by Brian Talbot Committed by Will Daly
Options

adding transition, error and complete states for assessment feedback form: 

* provides static states for submission cases
* adds in abstracted system-feedback sass partial
* adds in starter animation sass partial
* syncs up loading style for steps with standards
* moves message UI archetypes/variables to the xblock level of Sass architecture

Move JS grade step into a separate file
Feedback on submission UI wiring
parent 9896d39f
Showing with 792 additions and 233 deletions
.gitignore
......@@ -40,7 +40,7 @@ htmlcov
.pydevproject
# Sass/Codekit
apps/openassessment/xblock/static/sass/.sass-cache/
.sass-cache/
config.codekit
# some mac thing
......
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
......@@ -138,15 +138,32 @@
</ol>
</article>
<form id="submission__feeedback" class="submission__feeedback" method="post">
<h3 class="submission__feeedback__title">Give Feedback On Peer Evaluations</h3>
<form id="submission__feedback" class="submission__feedback" method="post">
<h3 class="submission__feedback__title">Give Feedback On Peer Evaluations</h3>
<div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Submitting Feedback</span>
</span>
</span>
<div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}"
{{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}>
<h3 class="message__title">Your Feedback Has Been Submitted</h3>
<div class="message__content">
<p>Your feedback will be sent to this course's staff for use when they review course records.</p>
</div>
</div>
<div class="submission__feeedback__content">
<div class="submission__feeedback__instructions">
<div class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<p>Course staff will be able to see any feedback that you provide here when they review course records.</p>
</div>
<ol class="list list--fields submission__feedback__fields">
<ol class="list list--fields submission__feedback__fields {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<li class="field field-group field--radio feedback__overall" id="feedback__overall">
<h4 class="field-group__label">Please select the statements below that reflect what you think of this peer grading experience:</h4>
<ol class="list--options">
......@@ -189,19 +206,19 @@
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was...">{{ feedback_text }}</textarea>
</li>
</ol>
</div>
<div class="submission__feedback__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your feedback</h3>
<div class="message__content"></div>
<div class="submission__feedback__actions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your feedback</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions submission__feedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</div>
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</div>
</form>
</div>
......
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -54,8 +54,10 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Loading</span>
<i class="ico icon-refresh icon-spin"></i>
<span class="wrapper--anim">
<span class="copy">Loading</span>
<i class="ico icon-refresh icon-spin"></i>
</span>
</span>
</span>
</header>
......
apps/openassessment/xblock/grade_mixin.py
"""
Grade step in the OpenAssessment XBlock.
"""
import copy
from django.utils.translation import ugettext as _
......@@ -5,7 +8,7 @@ from xblock.core import XBlock
from openassessment.assessment import peer_api
from openassessment.assessment import self_api
from submissions import api as submission_api
from submissions import api as sub_api
class GradeMixin(object):
......@@ -21,54 +24,99 @@ class GradeMixin(object):
@XBlock.handler
def render_grade(self, data, suffix=''):
"""
Render the grade step.
Args:
data: Not used.
Kwargs:
suffix: Not used.
Returns:
unicode: HTML content of the grade step.
"""
# Retrieve the status of the workflow. If no workflows have been
# started this will be an empty dict, so status will be None.
workflow = self.get_workflow_info()
status = workflow.get('status')
# Default context is empty
context = {}
if status == "done":
try:
feedback = peer_api.get_assessment_feedback(self.submission_uuid)
feedback_text = feedback.get('feedback', '') if feedback else ''
max_scores = peer_api.get_rubric_max_scores(self.submission_uuid)
path = 'openassessmentblock/grade/oa_grade_complete.html'
student_submission = submission_api.get_submission(workflow["submission_uuid"])
student_score = workflow["score"]
peer_assessments = peer_api.get_assessments(student_submission["uuid"])
self_assessment = self_api.get_assessment(student_submission["uuid"])
median_scores = peer_api.get_assessment_median_scores(
student_submission["uuid"]
)
except (
submission_api.SubmissionError,
peer_api.PeerAssessmentError,
self_api.SelfAssessmentRequestError
):
return self.render_error(_(u"An unexpected error occurred."))
context["feedback_text"] = feedback_text
context["student_submission"] = student_submission
context["peer_assessments"] = peer_assessments
context["self_assessment"] = self_assessment
context["rubric_criteria"] = copy.deepcopy(self.rubric_criteria)
context["score"] = student_score
if median_scores is not None and max_scores is not None:
for criterion in context["rubric_criteria"]:
criterion["median_score"] = median_scores[criterion["name"]]
criterion["total_value"] = max_scores[criterion["name"]]
elif workflow.get('status') == "waiting":
path = 'openassessmentblock/grade/oa_grade_waiting.html'
elif not status:
path = 'openassessmentblock/grade/oa_grade_not_started.html'
# Render the grading section based on the status of the workflow
try:
if status == "done":
path, context = self.render_grade_complete(workflow)
elif status == "waiting":
path = 'openassessmentblock/grade/oa_grade_waiting.html'
elif status is None:
path = 'openassessmentblock/grade/oa_grade_not_started.html'
else: # status is 'self' or 'peer', which implies that the workflow is incomplete
path, context = self.render_grade_incomplete(workflow)
except (sub_api.SubmissionError, peer_api.PeerAssessmentError, self_api.SelfAssessmentRequestError):
return self.render_error(_(u"An unexpected error occurred."))
else:
incomplete_steps = []
if not workflow["status_details"]["peer"]["complete"]:
incomplete_steps.append("Peer Assessment")
if not workflow["status_details"]["self"]["complete"]:
incomplete_steps.append("Self Assessment")
context = {"incomplete_steps": incomplete_steps}
path = 'openassessmentblock/grade/oa_grade_incomplete.html'
return self.render_assessment(path, context)
return self.render_assessment(path, context)
def render_grade_complete(self, workflow):
"""
Render the grade complete state.
Args:
workflow (dict): The serialized Workflow model.
Returns:
tuple of context (dict), template_path (string)
"""
feedback = peer_api.get_assessment_feedback(self.submission_uuid)
feedback_text = feedback.get('feedback', '') if feedback else ''
student_submission = sub_api.get_submission(workflow['submission_uuid'])
peer_assessments = peer_api.get_assessments(student_submission['uuid'])
self_assessment = self_api.get_assessment(student_submission['uuid'])
has_submitted_feedback = peer_api.get_assessment_feedback(workflow['submission_uuid']) is not None
context = {
'score': workflow['score'],
'feedback_text': feedback_text,
'student_submission': student_submission,
'peer_assessments': peer_assessments,
'self_assessment': self_assessment,
'rubric_criteria': copy.deepcopy(self.rubric_criteria),
'has_submitted_feedback': has_submitted_feedback,
}
# Update the scores we will display to the user
# Note that we are updating a *copy* of the rubric criteria stored in the XBlock field
max_scores = peer_api.get_rubric_max_scores(self.submission_uuid)
median_scores = peer_api.get_assessment_median_scores(student_submission["uuid"])
if median_scores is not None and max_scores is not None:
for criterion in context["rubric_criteria"]:
criterion["median_score"] = median_scores[criterion["name"]]
criterion["total_value"] = max_scores[criterion["name"]]
return ('openassessmentblock/grade/oa_grade_complete.html', context)
def render_grade_incomplete(self, workflow):
"""
Render the grade incomplete state.
Args:
workflow (dict): The serialized Workflow model.
Returns:
tuple of context (dict), template_path (string)
"""
incomplete_steps = []
if not workflow["status_details"]["peer"]["complete"]:
incomplete_steps.append("Peer Assessment")
if not workflow["status_details"]["self"]["complete"]:
incomplete_steps.append("Self Assessment")
return (
'openassessmentblock/grade/oa_grade_incomplete.html',
{'incomplete_steps': incomplete_steps}
)
@XBlock.json_handler
def submit_feedback(self, data, suffix=''):
......
apps/openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/js/fixtures/grade_complete.html → apps/openassessment/xblock/static/js/fixtures/oa_grade_complete.html
<div id='openassessment-base'>
<form id="submission__feeedback" class="submission__feeedback" method="post">
<h3 class="submission__feeedback__title">Give Feedback On Peer Evaluations</h3>
<form id="submission__feedback" class="submission__feedback" method="post">
<h3 class="submission__feedback__title">Give Feedback On Peer Evaluations</h3>
<div class="submission__feeedback__content">
<div class="submission__feeedback__instructions">
<div class="submission__feedback__content">
<span class="transition__status">
<span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Submitting Feedback</span>
</span>
</span>
<div class="message message--complete">
<h3 class="message__title">Your Feedback Has Been Submitted</h3>
<div class="message__content">
<p>Your feedback will be sent to this course's staff for use when they review course records.</p>
</div>
</div>
<div class="submission__feedback__instructions">
<p>Course staff will be able to see any feedback that you provide here when they review course records.</p>
</div>
......@@ -50,6 +62,17 @@
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was...">{{ feedback_text }}</textarea>
</li>
</ol>
<div class="submission__feedback__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your feedback</h3>
</div>
<ul class="list list--actions submission__feedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</div>
</div>
</form>
</div>
apps/openassessment/xblock/static/js/openassessment.min.js
if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.BaseView=function(runtime,element,server){this.runtime=runtime;this.element=element;this.server=server};OpenAssessment.BaseView.prototype={scrollToTop:function(){if($.scrollTo instanceof Function){$(window).scrollTo($("#openassessment__steps"),800,{offset:-50})}},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.responseView=new OpenAssessment.ResponseView(this.element,this.server,this);this.responseView.load();this.renderPeerAssessmentStep();this.renderSelfAssessmentStep();this.renderGradeStep()},renderPeerAssessmentStep:function(){var view=this;this.server.render("peer_assessment").done(function(html){$("#openassessment__peer-assessment",view.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",view.element);view.setUpCollapseExpand(sel,$.proxy(view.renderContinuedPeerAssessmentStep,view));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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.peerAssess()})}).fail(function(errMsg){view.showLoadError("peer-assessment")})},renderContinuedPeerAssessmentStep:function(){var view=this;this.server.renderContinuedPeer().done(function(html){$("#openassessment__peer-assessment",view.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",view.element);view.setUpCollapseExpand(sel);sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)})}).fail(function(errMsg){view.showLoadError("peer-assessment")})},renderSelfAssessmentStep:function(){var view=this;this.server.render("self_assessment").done(function(html){$("#openassessment__self-assessment",view.element).replaceWith(html);var sel=$("#openassessment__self-assessment",view.element);view.setUpCollapseExpand(sel);$("#self-assessment--001__assessment",view.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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#self-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.selfAssess()})}).fail(function(errMsg){view.showLoadError("self-assessment")})},renderGradeStep:function(){var view=this;this.server.render("grade").done(function(html){$("#openassessment__grade",view.element).replaceWith(html);var sel=$("#openassessment__grade",view.element);view.setUpCollapseExpand(sel);sel.find("#feedback__submit").click(function(eventObject){eventObject.preventDefault();view.submitFeedbackOnAssessment()})}).fail(function(errMsg){view.showLoadError("grade",errMsg)})},submitFeedbackOnAssessment:function(){var view=this;var text=$("#feedback__remarks__value",view.element).val();var options=$.map($(".feedback__overall__value:checked",view.element),function(element,index){return $(element).val()});view.server.submitFeedbackOnAssessment(text,options).done(function(){}).fail(function(errMsg){view.toggleActionError("feedback_assess",errMsg)})},peerAssess:function(){var view=this;this.peerAssessRequest(function(){view.renderPeerAssessmentStep();view.renderSelfAssessmentStep();view.renderGradeStep();view.scrollToTop()})},continuedPeerAssess:function(){var view=this;view.peerAssessRequest(function(){view.renderContinuedPeerAssessmentStep();view.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 view=this;this.toggleActionError("peer",null);this.server.peerAssess(submissionId,optionsSelected,feedback).done(successFunction).fail(function(errMsg){view.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 view=this;this.toggleActionError("self",null);this.server.selfAssess(submissionId,optionsSelected).done(function(){view.renderPeerAssessmentStep();view.renderSelfAssessmentStep();view.renderGradeStep();view.scrollToTop()}).fail(function(errMsg){view.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=".step__actions"}else if(type=="self"){container=".self-assessment__actions"}else if(type=="feedback_assess"){container=".submission__feedback__actions"}if(container===null){if(msg!==null){console.log(msg)}}else{var msgHtml=msg===null?"":msg;$(container+" .message__content").html("<p>"+msgHtml+"</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 view=new OpenAssessment.BaseView(runtime,element,server);view.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.StudioView=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 view=this;$(element).find(".openassessment-save-button").click(function(eventData){view.save()});$(element).find(".openassessment-cancel-button").click(function(eventData){view.cancel()})};OpenAssessment.StudioView.prototype={load:function(){var view=this;this.server.loadXml().done(function(xml){view.codeBox.setValue(xml)}).fail(function(msg){view.showError(msg)})},save:function(){var view=this;this.server.checkReleased().done(function(isReleased){if(isReleased){view.confirmPostReleaseUpdate($.proxy(view.updateXml,view))}else{view.updateXml()}}).fail(function(errMsg){view.showError(msg)})},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 view=this;this.server.updateXml(xml).done(function(){view.runtime.notify("save",{state:"end"});view.load()}).fail(function(msg){view.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 view=new OpenAssessment.StudioView(runtime,element,server);view.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.ResponseView=function(element,server,baseView){this.element=element;this.server=server;this.baseView=baseView;this.savedResponse=""};OpenAssessment.ResponseView.prototype={load:function(){var view=this;this.server.render("submission").done(function(html){$("#openassessment__response",view.element).replaceWith(html);view.installHandlers()}).fail(function(errMsg){view.baseView.showLoadError("response")})},installHandlers:function(){var sel=$("#openassessment__response",this.element);var view=this;this.baseView.setUpCollapseExpand(sel);this.savedResponse=this.response();var handleChange=function(eventData){view.responseChanged()};sel.find("#submission__answer__value").on("change keyup drop paste",handleChange);sel.find("#step--response__submit").click(function(eventObject){eventObject.preventDefault();view.submit()});sel.find("#submission__save").click(function(eventObject){eventObject.preventDefault();view.save()})},submitEnabled:function(enabled){var sel=$("#step--response__submit",this.element);if(typeof enabled==="undefined"){return!sel.hasClass("is--disabled")}else{sel.toggleClass("is--disabled",!enabled)}},saveEnabled:function(enabled){var sel=$("#submission__save",this.element);if(typeof enabled==="undefined"){return!sel.hasClass("is--disabled")}else{sel.toggleClass("is--disabled",!enabled)}},saveStatus:function(msg){var sel=$("#response__save_status h3",this.element);if(typeof msg==="undefined"){return sel.text()}else{sel.html('<span class="sr">Your Working Submission Status:</span>\n'+msg)}},response:function(text){var sel=$("#submission__answer__value",this.element);if(typeof text==="undefined"){return sel.val()}else{sel.val(text)}},responseChanged:function(){var currentResponse=this.response();var isBlank=currentResponse!=="";this.submitEnabled(isBlank);if(this.savedResponse!==currentResponse){this.saveEnabled(isBlank);this.saveStatus("Unsaved draft")}},save:function(){this.saveStatus("Saving...");this.baseView.toggleActionError("save",null);var view=this;var savedResponse=this.response();this.server.save(savedResponse).done(function(){view.savedResponse=savedResponse;var currentResponse=view.response();view.submitEnabled(currentResponse!=="");if(currentResponse==savedResponse){view.saveEnabled(false);view.saveStatus("Saved but not submitted")}}).fail(function(errMsg){view.saveStatus("Error");view.baseView.toggleActionError("save",errMsg)})},submit:function(){var submission=$("#submission__answer__value",this.element).val();this.baseView.toggleActionError("response",null);var view=this;var baseView=this.baseView;this.server.submit(submission).done(function(studentId,attemptNum){view.load();baseView.renderPeerAssessmentStep()}).fail(function(errCode,errMsg){baseView.toggleActionError("submit",errMsg)})}};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)},maxInputSize:1024*64,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");if(submission.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["submit","Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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");if(submission.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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()},submitFeedbackOnAssessment:function(text,options){var url=this.url("submit_feedback");if(text.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}var payload=JSON.stringify({feedback_text:text,feedback_options:options});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");if(feedback.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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.BaseView=function(runtime,element,server){this.runtime=runtime;this.element=element;this.server=server;this.responseView=new OpenAssessment.ResponseView(this.element,this.server,this);this.gradeView=new OpenAssessment.GradeView(this.element,this.server,this)};OpenAssessment.BaseView.prototype={scrollToTop:function(){if($.scrollTo instanceof Function){$(window).scrollTo($("#openassessment__steps"),800,{offset:-50})}},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.responseView.load();this.renderPeerAssessmentStep();this.renderSelfAssessmentStep();this.gradeView.load()},renderPeerAssessmentStep:function(){var view=this;this.server.render("peer_assessment").done(function(html){$("#openassessment__peer-assessment",view.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",view.element);view.setUpCollapseExpand(sel,$.proxy(view.renderContinuedPeerAssessmentStep,view));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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.peerAssess()})}).fail(function(errMsg){view.showLoadError("peer-assessment")})},renderContinuedPeerAssessmentStep:function(){var view=this;this.server.renderContinuedPeer().done(function(html){$("#openassessment__peer-assessment",view.element).replaceWith(html);var sel=$("#openassessment__peer-assessment",view.element);view.setUpCollapseExpand(sel);sel.find("#peer-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)})}).fail(function(errMsg){view.showLoadError("peer-assessment")})},renderSelfAssessmentStep:function(){var view=this;this.server.render("self_assessment").done(function(html){$("#openassessment__self-assessment",view.element).replaceWith(html);var sel=$("#openassessment__self-assessment",view.element);view.setUpCollapseExpand(sel);$("#self-assessment--001__assessment",view.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",view.element).toggleClass("is--disabled",numChecked!=numAvailable)});sel.find("#self-assessment--001__assessment__submit").click(function(eventObject){eventObject.preventDefault();view.selfAssess()})}).fail(function(errMsg){view.showLoadError("self-assessment")})},peerAssess:function(){var view=this;this.peerAssessRequest(function(){view.renderPeerAssessmentStep();view.renderSelfAssessmentStep();view.gradeView.load();view.scrollToTop()})},continuedPeerAssess:function(){var view=this;view.peerAssessRequest(function(){view.renderContinuedPeerAssessmentStep();view.gradeView.load()})},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 view=this;this.toggleActionError("peer",null);this.server.peerAssess(submissionId,optionsSelected,feedback).done(successFunction).fail(function(errMsg){view.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 view=this;this.toggleActionError("self",null);this.server.selfAssess(submissionId,optionsSelected).done(function(){view.renderPeerAssessmentStep();view.renderSelfAssessmentStep();view.gradeView.load();view.scrollToTop()}).fail(function(errMsg){view.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=".step__actions"}else if(type=="self"){container=".self-assessment__actions"}else if(type=="feedback_assess"){container=".submission__feedback__actions"}if(container===null){if(msg!==null){console.log(msg)}}else{var msgHtml=msg===null?"":msg;$(container+" .message__content").html("<p>"+msgHtml+"</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 view=new OpenAssessment.BaseView(runtime,element,server);view.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.StudioView=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 view=this;$(element).find(".openassessment-save-button").click(function(eventData){view.save()});$(element).find(".openassessment-cancel-button").click(function(eventData){view.cancel()})};OpenAssessment.StudioView.prototype={load:function(){var view=this;this.server.loadXml().done(function(xml){view.codeBox.setValue(xml)}).fail(function(msg){view.showError(msg)})},save:function(){var view=this;this.server.checkReleased().done(function(isReleased){if(isReleased){view.confirmPostReleaseUpdate($.proxy(view.updateXml,view))}else{view.updateXml()}}).fail(function(errMsg){view.showError(msg)})},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 view=this;this.server.updateXml(xml).done(function(){view.runtime.notify("save",{state:"end"});view.load()}).fail(function(msg){view.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 view=new OpenAssessment.StudioView(runtime,element,server);view.load()})}if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.GradeView=function(element,server,baseView){this.element=element;this.server=server;this.baseView=baseView};OpenAssessment.GradeView.prototype={load:function(){var view=this;var baseView=this.baseView;this.server.render("grade").done(function(html){$("#openassessment__grade",view.element).replaceWith(html);view.installHandlers()}).fail(function(errMsg){baseView.showLoadError("grade",errMsg)})},installHandlers:function(){var sel=$("#openassessment__grade",this.element);this.baseView.setUpCollapseExpand(sel);var view=this;sel.find("#feedback__submit").click(function(eventObject){eventObject.preventDefault();view.submitFeedbackOnAssessment()})},feedbackText:function(text){if(typeof text==="undefined"){return $("#feedback__remarks__value",this.element).val()}else{$("#feedback__remarks__value",this.element).val(text)}},feedbackOptions:function(options){var view=this;if(typeof options==="undefined"){return $.map($(".feedback__overall__value:checked",view.element),function(element,index){return $(element).val()})}else{$(".feedback__overall__value",this.element).prop("checked",false);$.each(options,function(index,opt){$("#feedback__overall__value--"+opt,view.element).prop("checked",true)})}},setHidden:function(sel,hidden){sel.toggleClass("is--hidden",hidden);sel.attr("aria-hidden",hidden?"true":"false")},isHidden:function(sel){return sel.hasClass("is--hidden")&&sel.attr("aria-hidden")=="true"},feedbackState:function(newState){var containerSel=$(".submission__feedback__content",this.element);var instructionsSel=containerSel.find(".submission__feedback__instructions");var fieldsSel=containerSel.find(".submission__feedback__fields");var actionsSel=containerSel.find(".submission__feedback__actions");var transitionSel=containerSel.find(".transition__status");var messageSel=containerSel.find(".message--complete");if(typeof newState==="undefined"){var isSubmitting=containerSel.hasClass("is--transitioning")&&containerSel.hasClass("is--submitting")&&!this.isHidden(transitionSel)&&this.isHidden(messageSel)&&this.isHidden(instructionsSel)&&this.isHidden(fieldsSel)&&this.isHidden(actionsSel);var hasSubmitted=containerSel.hasClass("is--submitted")&&this.isHidden(transitionSel)&&!this.isHidden(messageSel)&&this.isHidden(instructionsSel)&&this.isHidden(fieldsSel)&&this.isHidden(actionsSel);var isOpen=!containerSel.hasClass("is--submitted")&&!containerSel.hasClass("is--transitioning")&&!containerSel.hasClass("is--submitting")&&this.isHidden(transitionSel)&&this.isHidden(messageSel)&&!this.isHidden(instructionsSel)&&!this.isHidden(fieldsSel)&&!this.isHidden(actionsSel);if(isOpen){return"open"}else if(isSubmitting){return"submitting"}else if(hasSubmitted){return"submitted"}else{throw"Invalid feedback state"}}else{if(newState=="open"){containerSel.toggleClass("is--transitioning",false);containerSel.toggleClass("is--submitting",false);containerSel.toggleClass("is--submitted",false);this.setHidden(instructionsSel,false);this.setHidden(fieldsSel,false);this.setHidden(actionsSel,false);this.setHidden(transitionSel,true);this.setHidden(messageSel,true)}else if(newState=="submitting"){containerSel.toggleClass("is--transitioning",true);containerSel.toggleClass("is--submitting",true);containerSel.toggleClass("is--submitted",false);this.setHidden(instructionsSel,true);this.setHidden(fieldsSel,true);this.setHidden(actionsSel,true);this.setHidden(transitionSel,false);this.setHidden(messageSel,true)}else if(newState=="submitted"){containerSel.toggleClass("is--transitioning",false);containerSel.toggleClass("is--submitting",false);containerSel.toggleClass("is--submitted",true);this.setHidden(instructionsSel,true);this.setHidden(fieldsSel,true);this.setHidden(actionsSel,true);this.setHidden(transitionSel,true);this.setHidden(messageSel,false)}}},submitFeedbackOnAssessment:function(){var view=this;var baseView=this.baseView;$("#feedback__submit",this.element).toggleClass("is--disabled",true);view.feedbackState("submitting");this.server.submitFeedbackOnAssessment(this.feedbackText(),this.feedbackOptions()).done(function(){view.feedbackState("submitted")}).fail(function(errMsg){baseView.toggleActionError("feedback_assess",errMsg)})}};if(typeof OpenAssessment=="undefined"||!OpenAssessment){OpenAssessment={}}OpenAssessment.ResponseView=function(element,server,baseView){this.element=element;this.server=server;this.baseView=baseView;this.savedResponse=""};OpenAssessment.ResponseView.prototype={load:function(){var view=this;this.server.render("submission").done(function(html){$("#openassessment__response",view.element).replaceWith(html);view.installHandlers()}).fail(function(errMsg){view.baseView.showLoadError("response")})},installHandlers:function(){var sel=$("#openassessment__response",this.element);var view=this;this.baseView.setUpCollapseExpand(sel);this.savedResponse=this.response();var handleChange=function(eventData){view.responseChanged()};sel.find("#submission__answer__value").on("change keyup drop paste",handleChange);sel.find("#step--response__submit").click(function(eventObject){eventObject.preventDefault();view.submit()});sel.find("#submission__save").click(function(eventObject){eventObject.preventDefault();view.save()})},submitEnabled:function(enabled){var sel=$("#step--response__submit",this.element);if(typeof enabled==="undefined"){return!sel.hasClass("is--disabled")}else{sel.toggleClass("is--disabled",!enabled)}},saveEnabled:function(enabled){var sel=$("#submission__save",this.element);if(typeof enabled==="undefined"){return!sel.hasClass("is--disabled")}else{sel.toggleClass("is--disabled",!enabled)}},saveStatus:function(msg){var sel=$("#response__save_status h3",this.element);if(typeof msg==="undefined"){return sel.text()}else{sel.html('<span class="sr">Your Working Submission Status:</span>\n'+msg)}},response:function(text){var sel=$("#submission__answer__value",this.element);if(typeof text==="undefined"){return sel.val()}else{sel.val(text)}},responseChanged:function(){var currentResponse=this.response();var isBlank=currentResponse!=="";this.submitEnabled(isBlank);if(this.savedResponse!==currentResponse){this.saveEnabled(isBlank);this.saveStatus("Unsaved draft")}},save:function(){this.saveStatus("Saving...");this.baseView.toggleActionError("save",null);var view=this;var savedResponse=this.response();this.server.save(savedResponse).done(function(){view.savedResponse=savedResponse;var currentResponse=view.response();view.submitEnabled(currentResponse!=="");if(currentResponse==savedResponse){view.saveEnabled(false);view.saveStatus("Saved but not submitted")}}).fail(function(errMsg){view.saveStatus("Error");view.baseView.toggleActionError("save",errMsg)})},submit:function(){var submission=$("#submission__answer__value",this.element).val();this.baseView.toggleActionError("response",null);var view=this;var baseView=this.baseView;this.server.submit(submission).done(function(studentId,attemptNum){view.load();baseView.renderPeerAssessmentStep()}).fail(function(errCode,errMsg){baseView.toggleActionError("submit",errMsg)})}};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)},maxInputSize:1024*64,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");if(submission.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["submit","Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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");if(submission.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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()},submitFeedbackOnAssessment:function(text,options){var url=this.url("submit_feedback");if(text.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}var payload=JSON.stringify({feedback_text:text,feedback_options:options});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");if(feedback.length>this.maxInputSize){return $.Deferred(function(defer){defer.rejectWith(this,["Response text is too large. Please reduce the size of your response and try to submit again."])}).promise()}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/spec/oa_base.js
......@@ -29,15 +29,6 @@ describe("OpenAssessment.BaseView", function() {
defer.resolveWith(this, [server.fragments[component]]);
}).promise();
};
this.submitFeedbackOnAssessment = function(text, options) {
// Store the args we receive so we can check them later
this.feedbackText = text;
this.feedbackOptions = options;
// Return a promise that always resolves successfully
return $.Deferred(function(defer) { defer.resolve(); }).promise();
};
};
// Stub runtime
......@@ -98,30 +89,4 @@ describe("OpenAssessment.BaseView", function() {
});
});
it("Sends feedback on a submission to the server", function() {
jasmine.getFixtures().fixturesPath = 'base/fixtures';
loadFixtures('grade_complete.html');
// Simulate user feedback
$('#feedback__remarks__value').val('I disliked the feedback I received.');
$('#feedback__overall__value--notuseful').attr('checked','checked');
$('#feedback__overall__value--disagree').attr('checked','checked');
// Create a new stub server
server = new StubServer();
// Create the object under test
var el = $("#openassessment-base").get(0);
view = new OpenAssessment.BaseView(runtime, el, server);
// Submit feedback on an assessment
view.submitFeedbackOnAssessment();
// Expect that the feedback was retrieved from the DOM and sent to the server
expect(server.feedbackText).toEqual('I disliked the feedback I received.');
expect(server.feedbackOptions).toEqual([
'These assessments were not useful.',
'I disagree with the ways that my peers assessed me.'
]);
});
});
apps/openassessment/xblock/static/js/spec/oa_grade.js 0 → 100644
/**
Tests for OpenAssessment grade view.
**/
describe("OpenAssessment.GradeView", function() {
// Stub server
var StubServer = function() {
var successPromise = $.Deferred(
function(defer) {
defer.resolve();
}
).promise();
this.submitFeedbackOnAssessment = function(text, options) {
// Store the args we receive so we can check them later
this.feedbackText = text;
this.feedbackOptions = options;
// Return a promise that always resolves successfully
return successPromise;
};
this.render = function(step) {
return successPromise;
};
};
// Stub base view
var StubBaseView = function() {
this.showLoadError = function(msg) {};
this.toggleActionError = function(msg, step) {};
this.setUpCollapseExpand = function(sel) {};
};
// Stubs
var baseView = null;
var server = null;
// View under test
var view = null;
beforeEach(function() {
// Load the DOM fixture
jasmine.getFixtures().fixturesPath = 'base/fixtures';
loadFixtures('oa_grade_complete.html');
// Create the stub server
server = new StubServer();
// Create the stub base view
baseView = new StubBaseView();
// Create and install the view
var el = $('#openassessment-base').get(0);
view = new OpenAssessment.GradeView(el, server, baseView);
view.installHandlers();
});
it("sends feedback on a submission to the server", function() {
// Simulate user feedback
view.feedbackText('I disliked the feedback I received');
view.feedbackOptions(['notuseful', 'disagree']);
// Submit feedback on an assessment
view.submitFeedbackOnAssessment();
// Expect that the feedback was retrieved from the DOM and sent to the server
expect(server.feedbackText).toEqual('I disliked the feedback I received');
expect(server.feedbackOptions).toEqual([
'These assessments were not useful.',
'I disagree with the ways that my peers assessed me.'
]);
});
it("updates the feedback state when the user submits feedback", function() {
// Set the initial feedback state to open
view.feedbackState('open');
expect(view.feedbackState()).toEqual('open');
// Submit feedback on an assessment
view.feedbackText('I liked the feedback I received');
view.feedbackOptions(['useful']);
view.submitFeedbackOnAssessment();
// Expect that the feedback state to be submitted
expect(view.feedbackState()).toEqual('submitted');
});
});
apps/openassessment/xblock/static/js/spec/oa_response.js
/**
Tests for OpenAssessment response (submission) step.
Tests for OpenAssessment response (submission) view.
**/
describe("OpenAssessment.ResponseView", function() {
......
apps/openassessment/xblock/static/js/src/oa_base.js
......@@ -21,6 +21,9 @@ OpenAssessment.BaseView = function(runtime, element, server) {
this.runtime = runtime;
this.element = element;
this.server = server;
this.responseView = new OpenAssessment.ResponseView(this.element, this.server, this);
this.gradeView = new OpenAssessment.GradeView(this.element, this.server, this);
};
......@@ -65,12 +68,10 @@ OpenAssessment.BaseView.prototype = {
* Asynchronously load each sub-view into the DOM.
*/
load: function() {
this.responseView = new OpenAssessment.ResponseView(this.element, this.server, this);
this.responseView.load();
this.renderPeerAssessmentStep();
this.renderSelfAssessmentStep();
this.renderGradeStep();
this.gradeView.load();
},
/**
......@@ -203,53 +204,6 @@ OpenAssessment.BaseView.prototype = {
},
/**
Render the grade step.
**/
renderGradeStep: function() {
var view = this;
this.server.render('grade').done(
function(html) {
// Load the HTML
$('#openassessment__grade', view.element).replaceWith(html);
// Install a click handler for collapse/expand
var sel = $('#openassessment__grade', view.element);
view.setUpCollapseExpand(sel);
// Install a click handler for assessment feedback
sel.find('#feedback__submit').click(function(eventObject) {
eventObject.preventDefault();
view.submitFeedbackOnAssessment();
});
}
).fail(function(errMsg) {
view.showLoadError('grade', errMsg);
});
},
/**
Send assessment feedback to the server and update the view.
**/
submitFeedbackOnAssessment: function() {
// Send the submission to the server
var view = this;
var text = $('#feedback__remarks__value', view.element).val();
var options = $.map(
$('.feedback__overall__value:checked', view.element),
function(element, index) { return $(element).val(); }
);
view.server.submitFeedbackOnAssessment(text, options).done(function() {
// When we have successfully sent the submission, textarea no longer editable
// TODO
// When we have successfully sent the submission, textarea no longer editable
// console.log("Feedback to the assessments submitted, thanks!");
}).fail(function(errMsg) {
view.toggleActionError('feedback_assess', errMsg);
});
},
/**
Send an assessment to the server and update the view.
**/
peerAssess: function() {
......@@ -257,7 +211,7 @@ OpenAssessment.BaseView.prototype = {
this.peerAssessRequest(function() {
view.renderPeerAssessmentStep();
view.renderSelfAssessmentStep();
view.renderGradeStep();
view.gradeView.load();
view.scrollToTop();
});
},
......@@ -270,7 +224,7 @@ OpenAssessment.BaseView.prototype = {
var view = this;
view.peerAssessRequest(function() {
view.renderContinuedPeerAssessmentStep();
view.renderGradeStep();
view.gradeView.load();
});
},
......@@ -324,7 +278,7 @@ OpenAssessment.BaseView.prototype = {
function() {
view.renderPeerAssessmentStep();
view.renderSelfAssessmentStep();
view.renderGradeStep();
view.gradeView.load();
view.scrollToTop();
}
).fail(function(errMsg) {
......
apps/openassessment/xblock/static/js/src/oa_grade.js 0 → 100644
/* JavaScript for grade view */
/* Namespace for open assessment */
if (typeof OpenAssessment == "undefined" || !OpenAssessment) {
OpenAssessment = {};
}
/**
Interface for grade view.
Args:
element (DOM element): The DOM element representing the XBlock.
server (OpenAssessment.Server): The interface to the XBlock server.
baseView (OpenAssessment.BaseView): Container view.
Returns:
OpenAssessment.ResponseView
**/
OpenAssessment.GradeView = function(element, server, baseView) {
this.element = element;
this.server = server;
this.baseView = baseView;
};
OpenAssessment.GradeView.prototype = {
/**
Load the grade view.
**/
load: function() {
var view = this;
var baseView = this.baseView;
this.server.render('grade').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__grade', view.element).replaceWith(html);
view.installHandlers();
}
).fail(function(errMsg) {
baseView.showLoadError('grade', errMsg);
});
},
/**
Install event handlers for the view.
**/
installHandlers: function() {
// Install a click handler for collapse/expand
var sel = $('#openassessment__grade', this.element);
this.baseView.setUpCollapseExpand(sel);
// Install a click handler for assessment feedback
var view = this;
sel.find('#feedback__submit').click(function(eventObject) {
eventObject.preventDefault();
view.submitFeedbackOnAssessment();
});
},
/**
Get or set the text for feedback on assessments.
Args:
text (string or undefined): The text of the assessment to set (optional).
Returns:
string or undefined: The text of the feedback.
Example usage:
>>> view.feedbackText('I liked my assessment'); // Set the feedback text
>>> view.feedbackText(); // Retrieve the feedback text
'I liked my assessment'
**/
feedbackText: function(text) {
if (typeof text === 'undefined') {
return $('#feedback__remarks__value', this.element).val();
} else {
$('#feedback__remarks__value', this.element).val(text);
}
},
/**
Get or set the options for feedback on assessments.
Args:
options (array of strings or undefined): List of options to check (optional).
Returns:
list of strings or undefined: The values of the options the user selected.
Example usage:
// Set the feedback options; all others will be unchecked
>>> view.feedbackOptions('notuseful', 'disagree');
// Retrieve the feedback options that are checked
>>> view.feedbackOptions();
[
'These assessments were not useful.',
'I disagree with the ways that my peers assessed me'
]
**/
feedbackOptions: function(options) {
var view = this;
if (typeof options === 'undefined') {
return $.map(
$('.feedback__overall__value:checked', view.element),
function(element, index) { return $(element).val(); }
);
} else {
// Uncheck all the options
$('.feedback__overall__value', this.element).prop('checked', false);
// Check the selected options
$.each(options, function(index, opt) {
$('#feedback__overall__value--' + opt, view.element).prop('checked', true);
});
}
},
/**
Hide elements, including setting the aria-hidden attribute for screen readers.
Args:
sel (JQuery selector): The selector matching elements to hide.
hidden (boolean): Whether to hide or show the elements.
Returns:
undefined
**/
setHidden: function(sel, hidden) {
sel.toggleClass('is--hidden', hidden);
sel.attr('aria-hidden', hidden ? 'true' : 'false');
},
/**
Check whether elements are hidden.
Args:
sel (JQuery selector): The selector matching elements to hide.
Returns:
boolean
**/
isHidden: function(sel) {
return sel.hasClass('is--hidden') && sel.attr('aria-hidden') == 'true';
},
/**
Get or set the state of the feedback on assessment.
Each state corresponds to a particular configuration of attributes
in the DOM, which control what the user sees in the UI.
Valid states are:
'open': The user has not yet submitted feedback on assessments.
'submitting': The user has submitted feedback, but the server has not yet responded.
'submitted': The feedback was successfully submitted
Args:
newState (string or undefined): One of above states.
Returns:
string or undefined: The current state.
Throws:
'Invalid feedback state' if the DOM is not in one of the valid states.
Example usage:
>>> view.feedbackState();
'open'
>>> view.feedbackState('submitted');
>>> view.feedbackState();
'submitted'
**/
feedbackState: function(newState) {
var containerSel = $('.submission__feedback__content', this.element);
var instructionsSel = containerSel.find('.submission__feedback__instructions');
var fieldsSel = containerSel.find('.submission__feedback__fields');
var actionsSel = containerSel.find('.submission__feedback__actions');
var transitionSel = containerSel.find('.transition__status');
var messageSel = containerSel.find('.message--complete');
if (typeof newState === 'undefined') {
var isSubmitting = (
containerSel.hasClass('is--transitioning') && containerSel.hasClass('is--submitting') &&
!this.isHidden(transitionSel) && this.isHidden(messageSel) &&
this.isHidden(instructionsSel) && this.isHidden(fieldsSel) && this.isHidden(actionsSel)
);
var hasSubmitted = (
containerSel.hasClass('is--submitted') &&
this.isHidden(transitionSel) && !this.isHidden(messageSel) &&
this.isHidden(instructionsSel) && this.isHidden(fieldsSel) && this.isHidden(actionsSel)
);
var isOpen = (
!containerSel.hasClass('is--submitted') &&
!containerSel.hasClass('is--transitioning') && !containerSel.hasClass('is--submitting') &&
this.isHidden(transitionSel) && this.isHidden(messageSel) &&
!this.isHidden(instructionsSel) && !this.isHidden(fieldsSel) && !this.isHidden(actionsSel)
);
if (isOpen) { return 'open'; }
else if (isSubmitting) { return 'submitting'; }
else if (hasSubmitted) { return 'submitted'; }
else { throw 'Invalid feedback state'; }
}
else {
if (newState == 'open') {
containerSel.toggleClass('is--transitioning', false);
containerSel.toggleClass('is--submitting', false);
containerSel.toggleClass('is--submitted', false);
this.setHidden(instructionsSel, false);
this.setHidden(fieldsSel, false);
this.setHidden(actionsSel, false);
this.setHidden(transitionSel, true);
this.setHidden(messageSel, true);
}
else if (newState == 'submitting') {
containerSel.toggleClass('is--transitioning', true);
containerSel.toggleClass('is--submitting', true);
containerSel.toggleClass('is--submitted', false);
this.setHidden(instructionsSel, true);
this.setHidden(fieldsSel, true);
this.setHidden(actionsSel, true);
this.setHidden(transitionSel, false);
this.setHidden(messageSel, true);
}
else if (newState == 'submitted') {
containerSel.toggleClass('is--transitioning', false);
containerSel.toggleClass('is--submitting', false);
containerSel.toggleClass('is--submitted', true);
this.setHidden(instructionsSel, true);
this.setHidden(fieldsSel, true);
this.setHidden(actionsSel, true);
this.setHidden(transitionSel, true);
this.setHidden(messageSel, false);
}
}
},
/**
Send assessment feedback to the server and update the view.
**/
submitFeedbackOnAssessment: function() {
// Send the submission to the server
var view = this;
var baseView = this.baseView;
// Disable the submission button to prevent duplicate submissions
$("#feedback__submit", this.element).toggleClass('is--disabled', true);
// Indicate to the user that we're starting to submit
view.feedbackState('submitting');
// Submit the feedback to the server
// When the server reports success, update the UI to indicate that we'v submitted.
this.server.submitFeedbackOnAssessment(
this.feedbackText(), this.feedbackOptions()
).done(
function() { view.feedbackState('submitted'); }
).fail(function(errMsg) {
baseView.toggleActionError('feedback_assess', errMsg);
});
}
};
apps/openassessment/xblock/static/sass/oa/contexts/_responsive.scss
// openassessment: contexts - responsive sizing
// ====================
// NOTES:
// * this creates different sized layouts/grid based to use in lieu of native media queries (since XBlocks don't control the chrome they are rendered in)
.xblock {
// --------------------
// CASE: extra small digital screen
// --------------------
&.ui-size-xs .wrapper--grid {
}
// --------------------
// CASE: small digital screen
// --------------------
&.ui-size-s .wrapper--grid {
}
// --------------------
// CASE: medium digital screen
// --------------------
&.ui-size-m .wrapper--grid {
}
// --------------------
// CASE: large digital screen
// --------------------
&.ui-size-l .wrapper--grid {
}
// --------------------
// CASE: extra large large digital screen
// --------------------
&.ui-size-xl .wrapper--grid {
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
......@@ -21,14 +21,3 @@ $bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6);
$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
// --------------------
// // application - colors: states
// --------------------
$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
......@@ -255,7 +255,7 @@
}
.ico {
@extend %icon-2;
@extend %icon-3;
display: inline-block;
vertical-align: bottom;
margin-left: ($baseline-v/4);
......@@ -362,7 +362,7 @@
}
.ico {
@extend %icon-1;
@extend %icon-2;
}
}
......@@ -392,13 +392,17 @@
.step__status__value {
background: $color-unavailable;
.wrapper--anim {
@include animation(pulse $tmg-s3 ease-in-out infinite);
}
.ico {
display: inline-block;
color: $copy-color;
color: $copy-secondary-color;
}
.copy {
color: $copy-color;
color: $copy-secondary-color;
}
}
}
......@@ -1073,22 +1077,23 @@
}
// feedback form
.submission__feeedback {
.submission__feedback {
@extend %ui-subsection;
}
.submission__feeedback__title {
.submission__feedback__title {
@extend %ui-subsection-title;
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
.submission__feeedback__content {
.submission__feedback__content {
@extend %ui-subsection-content;
margin-bottom: $baseline-v;
}
.submission__feeedback__instructions {
.submission__feedback__instructions {
@extend %copy-2;
margin-bottom: $baseline-v;
color: $copy-secondary-color;
......@@ -1121,7 +1126,7 @@
}
}
.submission__feeedback__actions {
.submission__feedback__actions {
@extend %ui-subsection-content;
padding-top: 0;
......
apps/openassessment/xblock/static/sass/openassessment.css 0 → 100644
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wrapper--xblock{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock main,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary{display:block}.wrapper--xblock audio,.wrapper--xblock canvas,.wrapper--xblock progress,.wrapper--xblock video{display:inline-block;vertical-align:baseline}.wrapper--xblock audio:not([controls]){display:none;height:0}.wrapper--xblock [hidden],.wrapper--xblock template{display:none}.wrapper--xblock a{background:transparent}.wrapper--xblock a:active,.wrapper--xblock a:hover{outline:0}.wrapper--xblock abbr[title]{border-bottom:1px dotted}.wrapper--xblock b,.wrapper--xblock strong{font-weight:bold}.wrapper--xblock dfn{font-style:italic}.wrapper--xblock h1{font-size:2em;margin:0.67em 0}.wrapper--xblock mark{background:#ff0;color:#000}.wrapper--xblock small{font-size:80%}.wrapper--xblock sub,.wrapper--xblock sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.wrapper--xblock sup{top:-0.5em}.wrapper--xblock sub{bottom:-0.25em}.wrapper--xblock img{border:0}.wrapper--xblock svg:not(:root){overflow:hidden}.wrapper--xblock figure{margin:1em 40px}.wrapper--xblock hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}.wrapper--xblock pre{overflow:auto}.wrapper--xblock code,.wrapper--xblock kbd,.wrapper--xblock pre,.wrapper--xblock samp{font-family:monospace, monospace;font-size:1em}.wrapper--xblock button,.wrapper--xblock input,.wrapper--xblock optgroup,.wrapper--xblock select,.wrapper--xblock textarea{color:inherit;font:inherit;margin:0}.wrapper--xblock button{overflow:visible}.wrapper--xblock button,.wrapper--xblock select{text-transform:none}.wrapper--xblock button,.wrapper--xblock html input[type="button"],.wrapper--xblock input[type="reset"],.wrapper--xblock input[type="submit"]{-webkit-appearance:button;cursor:pointer}.wrapper--xblock button[disabled],.wrapper--xblock html input[disabled]{cursor:default}.wrapper--xblock button::-moz-focus-inner,.wrapper--xblock input::-moz-focus-inner{border:0;padding:0}.wrapper--xblock input{line-height:normal}.wrapper--xblock input[type="checkbox"],.wrapper--xblock input[type="radio"]{box-sizing:border-box;padding:0}.wrapper--xblock input[type="number"]::-webkit-inner-spin-button,.wrapper--xblock input[type="number"]::-webkit-outer-spin-button{height:auto}.wrapper--xblock input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.wrapper--xblock input[type="search"]::-webkit-search-cancel-button,.wrapper--xblock input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}.wrapper--xblock fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}.wrapper--xblock legend{border:0;padding:0}.wrapper--xblock textarea{overflow:auto}.wrapper--xblock optgroup{font-weight:bold}.wrapper--xblock table{border-collapse:collapse;border-spacing:0}.wrapper--xblock td,.wrapper--xblock th{padding:0}.wrapper--xblock *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.wrapper--xblock div,.wrapper--xblock span,.wrapper--xblock applet,.wrapper--xblock object,.wrapper--xblock iframe,.wrapper--xblock h1,.wrapper--xblock h2,.wrapper--xblock h3,.wrapper--xblock h4,.wrapper--xblock h5,.wrapper--xblock h6,.wrapper--xblock p,.wrapper--xblock blockquote,.wrapper--xblock pre,.wrapper--xblock a,.wrapper--xblock abbr,.wrapper--xblock acronym,.wrapper--xblock address,.wrapper--xblock big,.wrapper--xblock cite,.wrapper--xblock code,.wrapper--xblock del,.wrapper--xblock dfn,.wrapper--xblock em,.wrapper--xblock img,.wrapper--xblock ins,.wrapper--xblock kbd,.wrapper--xblock q,.wrapper--xblock s,.wrapper--xblock samp,.wrapper--xblock small,.wrapper--xblock strike,.wrapper--xblock strong,.wrapper--xblock sub,.wrapper--xblock sup,.wrapper--xblock tt,.wrapper--xblock var,.wrapper--xblock b,.wrapper--xblock u,.wrapper--xblock i,.wrapper--xblock center,.wrapper--xblock dl,.wrapper--xblock dt,.wrapper--xblock dd,.wrapper--xblock ol,.wrapper--xblock ul,.wrapper--xblock li,.wrapper--xblock fieldset,.wrapper--xblock form,.wrapper--xblock label,.wrapper--xblock legend,.wrapper--xblock table,.wrapper--xblock caption,.wrapper--xblock tbody,.wrapper--xblock tfoot,.wrapper--xblock thead,.wrapper--xblock tr,.wrapper--xblock th,.wrapper--xblock td,.wrapper--xblock article,.wrapper--xblock aside,.wrapper--xblock canvas,.wrapper--xblock details,.wrapper--xblock figcaption,.wrapper--xblock figure,.wrapper--xblock footer,.wrapper--xblock header,.wrapper--xblock hgroup,.wrapper--xblock menu,.wrapper--xblock nav,.wrapper--xblock section,.wrapper--xblock summary,.wrapper--xblock time,.wrapper--xblock mark,.wrapper--xblock audio,.wrapper--xblock video{margin:0;vertical-align:baseline;border:0;padding:0;outline:0;font-weight:400}.wrapper--xblock abbr[title]{border-bottom:none;text-decoration:none;cursor:help}.list--actions:last-child,.list--docs:last-child,.list--steps:last-child,.list--fields:last-child,.list--controls:last-child,.list--help:last-child,.list--options:last-child,.nav--wizard:last-child,.list--tips:last-child,.field--group:last-child,.wrapper--xblock .field--radio .option:last-child,.wrapper--xblock .field--checkbox .option:last-child,.wrapper--xblock .message .message__content p:last-child,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question:last-child,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question:last-child,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer:last-child,.openassessment .openassessment__prompt__copy>:last-child,.openassessment .submission__peer-evaluations__questions .question:last-child,.openassessment .submission__peer-evaluations__questions .question__answers:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;margin-right:0;border-right:none;padding-right:0}.list--actions,.list--docs,.list--steps,.list--fields,.list--controls,.list--help,.list--options,.nav--wizard,.list--tips,.field--group,.openassessment .openassessment__steps,.openassessment .step--peer-assessment .list--peer-assessments,.openassessment .submission__peer-evaluations__questions,.openassessment .submission__peer-evaluations__questions .question__answers{list-style:none;margin:0;padding:0;text-indent:0}.sr,hr.divider,.nav--contents,.system__element,.openassessment .openassessment__steps__step .step__status__label,.openassessment .openassessment__prompt__title,.openassessment .step--response .response__submission__content label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-toggle-visibility .ui-toggle-visibility__control,.ui-hint{cursor:pointer}.is--hidden,.wrapper--xblock .is--transitioning{pointer-events:none;outline:none}.is--hidden{display:none;visibility:hidden}.wrapper--xblock .message--error,.ui-toggle-visibility .ui-toggle-visibility__content,.ui-toggle-visibility.is--collapsed .ui-toggle-visibility__content{-webkit-transition:opacity 0.5s ease-in-out;-moz-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}.openassessment .submission__peer-evaluations__questions .answer__value__value .ui-hint{-webkit-transition:color 0.5s ease-in-out;-moz-transition:color 0.5s ease-in-out;transition:color 0.5s ease-in-out}.openassessment .ui-hint:after{box-shadow:0 1px 2px 0 rgba(2,2,3,0.4)}@-webkit-keyframes pulse{0%{opacity:0.50}50%{opacity:1.0}100%{opacity:0.50}}@-moz-keyframes pulse{0%{opacity:0.50}50%{opacity:1.0}100%{opacity:0.50}}@-o-keyframes pulse{0%{opacity:0.50}50%{opacity:1.0}100%{opacity:0.50}}@keyframes pulse{0%{opacity:0.50}50%{opacity:1.0}100%{opacity:0.50}}.wrapper--xblock .problem__header{margin-bottom:20px;color:#aeafb3}.wrapper--xblock{background:transparent}.wrapper--xblock strong,.wrapper--xblock .emphasis,.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit,.openassessment .step--response .response__submission__actions .action--save .copy,.openassessment .submission__feedback__actions .action--submit .copy,.wrapper--xblock input[type="text"],.wrapper--xblock input[type="email"],.wrapper--xblock input[type="password"],.wrapper--xblock textarea,.wrapper--xblock .field--textarea .label,.wrapper--xblock .field--textarea label,.wrapper--xblock .field-group__label,.wrapper--xblock .field--radio .option__label,.wrapper--xblock .field--checkbox .option__label,.wrapper--xblock .is--transitioning .transition__status .copy,.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .step--grade .step__title .grade__value__title,.wrapper--xblock .message .message__title,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title,.openassessment .step--self-assessment .self-assessment__display__title,.openassessment .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__peer-evaluations__questions .question__title__copy,.openassessment .submission__feedback__title,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points,.openassessment .openassessment__steps__step .step__status .copy,.openassessment .step--response .response__submission__content .tip,.openassessment .step--response .response__submission__status__title,.openassessment .submission__peer-evaluations__questions .question__score,.openassessment .submission__peer-evaluations__questions .answer__score,.openassessment .submission__peer-evaluations__questions .answer__score__value,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .openassessment__steps__step .step__title .step__counter:before,.openassessment .step--peer-assessment .peer-assessment__display__header span,.openassessment .step--grade .step__title .grade__value__title .grade__value__earned,.openassessment .step--grade .step__title .grade__value__title .grade__value__potential,.openassessment .submission__peer-evaluations__questions .question__score__value,.openassessment .submission__peer-evaluations__questions .question__score__potential,.openassessment .submission__peer-evaluations__questions .question__score__potential .unit,.openassessment .submission__peer-evaluations__questions .answer__source,.openassessment .submission__peer-evaluations__questions .answer__value__value,.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__counter:before{font-weight:600}.wrapper--xblock input[type="text"]::-webkit-input-placeholder,.wrapper--xblock input[type="email"]::-webkit-input-placeholder,.wrapper--xblock input[type="password"]::-webkit-input-placeholder,.wrapper--xblock textarea::-webkit-input-placeholder,.wrapper--xblock input[type="text"]:-moz-placeholder,.wrapper--xblock input[type="email"]:-moz-placeholder,.wrapper--xblock input[type="password"]:-moz-placeholder,.wrapper--xblock textarea:-moz-placeholder,.wrapper--xblock input[type="text"]::-moz-placeholder,.wrapper--xblock input[type="email"]::-moz-placeholder,.wrapper--xblock input[type="password"]::-moz-placeholder,.wrapper--xblock textarea::-moz-placeholder,.wrapper--xblock input[type="text"]:-ms-input-placeholder,.wrapper--xblock input[type="email"]:-ms-input-placeholder,.wrapper--xblock input[type="password"]:-ms-input-placeholder,.wrapper--xblock textarea:-ms-input-placeholder,.openassessment .openassessment__title{font-weight:400}.openassessment .submission__peer-evaluations__questions .answer__source,.wrapper--xblock .field .tip,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points,.openassessment .openassessment__steps__step .step__status .copy,.openassessment .step--response .response__submission__content .tip,.openassessment .step--response .response__submission__status__title,.openassessment .submission__peer-evaluations__questions .question__score,.openassessment .submission__peer-evaluations__questions .answer__score,.openassessment .submission__peer-evaluations__questions .answer__score__value,.openassessment .ui-hint:after{font-size:12px;line-height:18px}.wrapper--xblock .message .message__title,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title,.openassessment .step--self-assessment .self-assessment__display__title,.openassessment .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__peer-evaluations__questions .question__title__copy,.openassessment .submission__feedback__title,.openassessment .openassessment__steps__step .step__title .step__deadline,.wrapper--xblock .field label,.wrapper--xblock .field .label,.wrapper--xblock .field .field-group__label,.wrapper--xblock .field--radio .option__label,.wrapper--xblock .field--checkbox .option__label,.wrapper--xblock .message .message__content,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip,.openassessment .step--peer-assessment .peer-assessment__display__response,.openassessment .step--self-assessment .self-assessment__display__response,.openassessment .submission__answer__display__content,.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit,.openassessment .openassessment__steps__step .step__status .ico{font-size:14px;line-height:21px}.wrapper--xblock .problem__header,.openassessment .openassessment__steps__step .step__instruction,.openassessment .openassessment__prompt__copy,.openassessment .step--grade .grade__value__description,.openassessment .step--grade .grade__summary,.openassessment .submission__peer-evaluations__questions .question--feedback .answer__value,.openassessment .submission__feedback__instructions,.openassessment .openassessment__steps__step .step__actions .action--submit .ico{font-size:16px;line-height:24px}.wrapper--xblock .is--transitioning .transition__status .copy,.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .step--grade .step__title .grade__value__title,.openassessment .openassessment__steps__step .step__title .step__counter:before,.openassessment .submission__peer-evaluations__questions .answer__value__value,.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__counter:before{font-size:18px;line-height:27px}.wrapper--xblock .is--transitioning .transition__status .ico{font-size:22px;line-height:33px}.wrapper--xblock .problem__header,.wrapper--xblock .is--transitioning .transition__status .copy,.wrapper--xblock .message .message__title,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title,.openassessment .step--self-assessment .self-assessment__display__title,.openassessment .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__peer-evaluations__questions .question__title__copy,.openassessment .submission__feedback__title,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points,.openassessment .openassessment__steps__step .step__status .copy,.openassessment .step--response .response__submission__content .tip,.openassessment .step--response .response__submission__status__title,.openassessment .submission__peer-evaluations__questions .question__score,.openassessment .submission__peer-evaluations__questions .answer__score,.openassessment .submission__peer-evaluations__questions .answer__score__value,.openassessment .submission__peer-evaluations__questions .answer__source{text-transform:uppercase;letter-spacing:0.05rem}.wrapper--xblock .is--transitioning .transition__status .copy,.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .step--grade .step__title .grade__value__title,.openassessment .openassessment__steps__step .step__title .step__counter:before,.openassessment .submission__peer-evaluations__questions .answer__value__value,.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__counter:before{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .problem__header{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .message .message__title,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title,.openassessment .step--self-assessment .self-assessment__display__title,.openassessment .submission__answer__display__title,.openassessment .submission__peer-evaluations__title,.openassessment .submission__peer-evaluations__questions .question__title__copy,.openassessment .submission__feedback__title,.openassessment .openassessment__steps__step .step__title .step__deadline{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .submission__peer-evaluations__questions .answer__source{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__instruction,.openassessment .openassessment__prompt__copy,.openassessment .step--grade .grade__value__description,.openassessment .step--grade .grade__summary,.openassessment .submission__peer-evaluations__questions .question--feedback .answer__value,.openassessment .submission__feedback__instructions{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .field label,.wrapper--xblock .field .label,.wrapper--xblock .field .field-group__label,.wrapper--xblock .field--radio .option__label,.wrapper--xblock .field--checkbox .option__label,.wrapper--xblock .message .message__content,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip,.openassessment .step--peer-assessment .peer-assessment__display__response,.openassessment .step--self-assessment .self-assessment__display__response,.openassessment .submission__answer__display__content{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .field .tip,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points,.openassessment .openassessment__steps__step .step__status .copy,.openassessment .step--response .response__submission__content .tip,.openassessment .step--response .response__submission__status__title,.openassessment .submission__peer-evaluations__questions .question__score,.openassessment .submission__peer-evaluations__questions .answer__score,.openassessment .submission__peer-evaluations__questions .answer__score__value,.openassessment .ui-hint:after{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .message .message__content a,.openassessment .openassessment__prompt__copy a{-webkit-transition:color 0.5s ease-in-out,border 0.5s ease-in-out;-moz-transition:color 0.5s ease-in-out,border 0.5s ease-in-out;transition:color 0.5s ease-in-out,border 0.5s ease-in-out;border-bottom:1px solid transparent;color:#33a6dc;text-decoration:none}.wrapper--xblock .message .message__content a:hover,.openassessment .openassessment__prompt__copy a:hover,.wrapper--xblock .message .message__content a:focus,.openassessment .openassessment__prompt__copy a:focus{color:#00a7f6;border-color:#00a7f6}.wrapper--xblock .message .message__content a:active,.openassessment .openassessment__prompt__copy a:active,.wrapper--xblock .message .message__content a.is--current,.openassessment .openassessment__prompt__copy a.is--current{color:#1d9dd9;border-color:#1d9dd9}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;-moz-transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;transition:color 0.25s ease-in-out,background 0.25s ease-in-out,box-shadow 0.25s ease-in-out;display:inline-block;cursor:pointer;text-decoration:none}.openassessment .openassessment__steps__step .step__actions .action--submit:hover,.openassessment .step--response .response__submission__actions .action--save:hover,.openassessment .submission__feedback__actions .action--submit:hover,.openassessment .openassessment__steps__step .step__actions .action--submit:active,.openassessment .step--response .response__submission__actions .action--save:active,.openassessment .submission__feedback__actions .action--submit:active,.openassessment .openassessment__steps__step .step__actions .action--submit:focus,.openassessment .step--response .response__submission__actions .action--save:focus,.openassessment .submission__feedback__actions .action--submit:focus{text-decoration:none}.openassessment .openassessment__steps__step .step__actions .disabled.action--submit,.openassessment .step--response .response__submission__actions .disabled.action--save,.openassessment .submission__feedback__actions .disabled.action--submit,.openassessment .openassessment__steps__step .step__actions [disabled].action--submit,.openassessment .step--response .response__submission__actions [disabled].action--save,.openassessment .submission__feedback__actions [disabled].action--submit,.openassessment .openassessment__steps__step .step__actions .is--disabled.action--submit,.openassessment .step--response .response__submission__actions .is--disabled.action--save,.openassessment .submission__feedback__actions .is--disabled.action--submit{cursor:default;pointer-events:none}.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .step--response .response__submission__actions .action--save .copy,.openassessment .submission__feedback__actions .action--submit .copy,.openassessment .openassessment__steps__step .step__actions .action--submit .ico,.openassessment .step--response .response__submission__actions .action--save .ico,.openassessment .submission__feedback__actions .action--submit .ico{display:inline-block;vertical-align:middle}.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .step--response .response__submission__actions .action--save .copy,.openassessment .submission__feedback__actions .action--submit .copy{margin-right:10px}.openassessment .openassessment__steps__step .step__actions .action--submit,.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit{border-radius:4px}.openassessment .openassessment__steps__step .step__actions .action--submit{padding:10px 40px;background:#33a6dc;border:1px solid #2b8dbb;color:#eaf6fb}.openassessment .openassessment__steps__step .step__actions .action--submit:hover,.openassessment .openassessment__steps__step .step__actions .action--submit:active,.openassessment .openassessment__steps__step .step__actions .action--submit:focus{background:#00a7f6;border-color:#00a7f6;color:#fcfefe}.openassessment .openassessment__steps__step .step__actions .current.action--submit,.openassessment .openassessment__steps__step .step__actions .active.action--submit{background:#1d9dd9;border-color:#1d9dd9}.openassessment .openassessment__steps__step .step__actions .disabled.action--submit,.openassessment .openassessment__steps__step .step__actions .is--disabled.action--submit,.openassessment .openassessment__steps__step .step__actions [disabled].action--submit{opacity:0.4}.openassessment .step--response .response__submission__actions .action--save,.openassessment .submission__feedback__actions .action--submit{padding:10px 40px;background:#878787;border:1px #797979;color:#f3f3f3}.openassessment .step--response .response__submission__actions .action--save:hover,.openassessment .submission__feedback__actions .action--submit:hover,.openassessment .step--response .response__submission__actions .action--save:active,.openassessment .submission__feedback__actions .action--submit:active,.openassessment .step--response .response__submission__actions .action--save:focus,.openassessment .submission__feedback__actions .action--submit:focus{background:#656565;border-color:#656565;color:#fdfdfd}.openassessment .step--response .response__submission__actions .current.action--save,.openassessment .submission__feedback__actions .current.action--submit,.openassessment .step--response .response__submission__actions .active.action--save,.openassessment .submission__feedback__actions .active.action--submit{background:#878787;border-color:#878787}.openassessment .step--response .response__submission__actions .disabled.action--save,.openassessment .submission__feedback__actions .disabled.action--submit,.openassessment .step--response .response__submission__actions .is--disabled.action--save,.openassessment .submission__feedback__actions .is--disabled.action--submit,.openassessment .step--response .response__submission__actions [disabled].action--save,.openassessment .submission__feedback__actions [disabled].action--submit{opacity:0.4}.wrapper--xblock input[type="text"],.wrapper--xblock input[type="email"],.wrapper--xblock input[type="password"],.wrapper--xblock textarea{border:1px solid #b9c1c8;padding:10px;outline:0;color:#3c3c3c}.wrapper--xblock input[type="text"]::-webkit-input-placeholder,.wrapper--xblock input[type="email"]::-webkit-input-placeholder,.wrapper--xblock input[type="password"]::-webkit-input-placeholder,.wrapper--xblock textarea::-webkit-input-placeholder{color:#a5a6aa}.wrapper--xblock input[type="text"]:-moz-placeholder,.wrapper--xblock input[type="email"]:-moz-placeholder,.wrapper--xblock input[type="password"]:-moz-placeholder,.wrapper--xblock textarea:-moz-placeholder{color:#a5a6aa}.wrapper--xblock input[type="text"]::-moz-placeholder,.wrapper--xblock input[type="email"]::-moz-placeholder,.wrapper--xblock input[type="password"]::-moz-placeholder,.wrapper--xblock textarea::-moz-placeholder{color:#a5a6aa}.wrapper--xblock input[type="text"]:-ms-input-placeholder,.wrapper--xblock input[type="email"]:-ms-input-placeholder,.wrapper--xblock input[type="password"]:-ms-input-placeholder,.wrapper--xblock textarea:-ms-input-placeholder{color:#a5a6aa}.wrapper--xblock input[type="text"]:focus,.wrapper--xblock input[type="email"]:focus,.wrapper--xblock input[type="password"]:focus,.wrapper--xblock textarea:focus{box-shadow:0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15);border-color:#000;outline:0}.wrapper--xblock .field{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.wrapper--xblock .field .field-group__label{display:block;margin-bottom:10px}.wrapper--xblock .field textarea{width:100%}.wrapper--xblock .field .tip{display:block;color:#a5a6aa}.wrapper--xblock .field--textarea .label,.wrapper--xblock .field--textarea label{margin-bottom:10px}.wrapper--xblock .field-group__label{margin-bottom:10px}.wrapper--xblock .field--radio .option,.wrapper--xblock .field--checkbox .option{margin-bottom:5px}.wrapper--xblock .field--radio .option__input,.wrapper--xblock .field--radio .option__label,.wrapper--xblock .field--checkbox .option__input,.wrapper--xblock .field--checkbox .option__label{display:inline-block;vertical-align:middle}.wrapper--xblock .field--radio .option__label,.wrapper--xblock .field--checkbox .option__label{margin-bottom:0;color:#a5a6aa}.wrapper--xblock .field--radio .option__input,.wrapper--xblock .field--checkbox .option__input{margin-right:10px}.wrapper--xblock .field--radio .option__input:checked+.option__label,.wrapper--xblock .field--checkbox .option__input:checked+.option__label{color:#000}.wrapper--xblock .message{margin-bottom:20px;border-radius:2px;padding:20px 20px;background:#f5f6f7}.wrapper--xblock .message .message__title{margin-bottom:5px;border-bottom:2px solid #d7dbdf;padding-bottom:5px}.wrapper--xblock .message .message__content{color:#a5a6aa}.wrapper--xblock .message .message__content p{margin-bottom:10px}.wrapper--xblock .message--error{background:#fbf6f5}.wrapper--xblock .message--error .message__title{color:#bc5547;border-bottom-color:#bc5547}.wrapper--xblock .message--warning{background:#fdfaf4}.wrapper--xblock .message--warning .message__title{color:#e5a635;border-bottom-color:#e5a635}.wrapper--xblock .message--confirmation{background:#f4f4f4}.wrapper--xblock .message--confirmation .message__title{color:#2d2e30;border-bottom-color:#2d2e30}.wrapper--xblock .message--complete{background:#f7fbf5}.wrapper--xblock .message--complete .message__title{color:#62c24a;border-bottom-color:#62c24a}.wrapper--xblock .message--incomplete{background:#fdfaf4}.wrapper--xblock .message--incomplete .message__title{color:#e5a635;border-bottom-color:#e5a635}.wrapper--xblock .message--error{display:none;opacity:0.0}.wrapper--xblock .has--error .message--error{display:block;opacity:1.0}.wrapper--xblock .message--inline{padding:10px 20px;background:#4c4d4f}.wrapper--xblock .message--inline .message__title{margin-bottom:0;border:none;padding-bottom:0;color:#fff;text-align:center}.wrapper--xblock .message--inline.message--error{background:#c66e62}.wrapper--xblock .message--inline.message--warning{background:#e8b353}.wrapper--xblock .message--inline.message--confirm{background:#e8b353}.wrapper--xblock .is--transitioning{padding:40px 40px;background:#f5f6f7}.wrapper--xblock .is--transitioning .transition__status{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);text-align:center}.wrapper--xblock .is--transitioning .transition__status .wrapper--anim{display:block;-webkit-animation:pulse 3s ease-in-out infinite;-moz-animation:pulse 3s ease-in-out infinite;animation:pulse 3s ease-in-out infinite}.wrapper--xblock .is--transitioning .transition__status .ico,.wrapper--xblock .is--transitioning .transition__status .copy{display:block;color:#a5a6aa}.wrapper--xblock .is--transitioning .transition__status .ico{margin-bottom:10px}.wrapper--grid{*zoom:1;max-width:100%;margin-left:auto;margin-right:auto}.wrapper--grid:before,.wrapper--grid:after{content:" ";display:table}.wrapper--grid:after{clear:both}/*! Hint.css - v1.3.1 - 2013-11-23
* http://kushagragour.in/lab/hint/
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */.hint,[data-hint]{position:relative;display:inline-block}.hint:before,.hint:after,[data-hint]:before,[data-hint]:after{position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;transition:0.3s ease}.hint:hover:before,.hint:hover:after,.hint:focus:before,.hint:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after{visibility:visible;opacity:1}.hint:before,[data-hint]:before{content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1000001}.hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:white;text-shadow:0 -1px 0px black;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;box-shadow:4px 4px 8px rgba(0,0,0,0.3)}.hint--top:before{border-top-color:#383838}.hint--bottom:before{border-bottom-color:#383838}.hint--left:before{border-left-color:#383838}.hint--right:before{border-right-color:#383838}.hint--top:before{margin-bottom:-12px}.hint--top:after{margin-left:-18px}.hint--top:before,.hint--top:after{bottom:100%;left:50%}.hint--top:hover:after,.hint--top:hover:before,.hint--top:focus:after,.hint--top:focus:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom:before{margin-top:-12px}.hint--bottom:after{margin-left:-18px}.hint--bottom:before,.hint--bottom:after{top:100%;left:50%}.hint--bottom:hover:after,.hint--bottom:hover:before,.hint--bottom:focus:after,.hint--bottom:focus:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--right:before{margin-left:-12px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:before,.hint--right:after{left:100%;bottom:50%}.hint--right:hover:after,.hint--right:hover:before,.hint--right:focus:after,.hint--right:focus:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{margin-right:-12px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:before,.hint--left:after{right:100%;bottom:50%}.hint--left:hover:after,.hint--left:hover:before,.hint--left:focus:after,.hint--left:focus:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--error:after{background-color:#b34e4d;text-shadow:0 -1px 0px #592726}.hint--error.hint--top:before{border-top-color:#b34e4d}.hint--error.hint--bottom:before{border-bottom-color:#b34e4d}.hint--error.hint--left:before{border-left-color:#b34e4d}.hint--error.hint--right:before{border-right-color:#b34e4d}.hint--warning:after{background-color:#c09854;text-shadow:0 -1px 0px #6c5328}.hint--warning.hint--top:before{border-top-color:#c09854}.hint--warning.hint--bottom:before{border-bottom-color:#c09854}.hint--warning.hint--left:before{border-left-color:#c09854}.hint--warning.hint--right:before{border-right-color:#c09854}.hint--info:after{background-color:#3986ac;text-shadow:0 -1px 0px #193b4d}.hint--info.hint--top:before{border-top-color:#3986ac}.hint--info.hint--bottom:before{border-bottom-color:#3986ac}.hint--info.hint--left:before{border-left-color:#3986ac}.hint--info.hint--right:before{border-right-color:#3986ac}.hint--success:after{background-color:#458746;text-shadow:0 -1px 0px #1a321a}.hint--success.hint--top:before{border-top-color:#458746}.hint--success.hint--bottom:before{border-bottom-color:#458746}.hint--success.hint--left:before{border-left-color:#458746}.hint--success.hint--right:before{border-right-color:#458746}.hint--always:after,.hint--always:before{opacity:1;visibility:visible}.hint--always.hint--top:after,.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:after,.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--rounded:after{border-radius:4px}.hint--bounce:before,.hint--bounce:after{-webkit-transition:opacity 0.3s ease,visibility 0.3s ease,-webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);-moz-transition:opacity 0.3s ease,visibility 0.3s ease,-moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24)}.openassessment .openassessment__steps__step{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);border-radius:2px;box-shadow:0 1px 1px rgba(2,2,3,0.1);margin-bottom:20px;border:1px solid #d7dbdf;border-top:5px solid #d7dbdf;padding:10px 20px;background:#fff}.openassessment .openassessment__steps__step:last-child{margin-bottom:0}.openassessment .openassessment__steps__step:hover,.openassessment .openassessment__steps__step:focus{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);border-color:#d7dbdf;box-shadow:0 1px 1px rgba(2,2,3,0.05)}.openassessment .is--collapsed.openassessment__steps__step{-webkit-transform:scale(0.99);-moz-transform:scale(0.99);-ms-transform:scale(0.99);-o-transform:scale(0.99);transform:scale(0.99);box-shadow:0 1px 1px rgba(2,2,3,0.05)}.openassessment .is--collapsed.openassessment__steps__step:hover,.openassessment .is--collapsed.openassessment__steps__step:focus{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.openassessment .is--loading.openassessment__steps__step{-webkit-transform:scale(0.99);-moz-transform:scale(0.99);-ms-transform:scale(0.99);-o-transform:scale(0.99);transform:scale(0.99);box-shadow:0 1px 1px rgba(2,2,3,0.05)}.openassessment .is--empty.openassessment__steps__step:hover,.openassessment .is--empty.openassessment__steps__step:focus{-webkit-transform:scale(0.99);-moz-transform:scale(0.99);-ms-transform:scale(0.99);-o-transform:scale(0.99);transform:scale(0.99)}.openassessment .is--unavailable.openassessment__steps__step{border-top-color:#ededee}.openassessment .is--unavailable.openassessment__steps__step:hover,.openassessment .is--unavailable.openassessment__steps__step:focus{-webkit-transform:scale(0.99);-moz-transform:scale(0.99);-ms-transform:scale(0.99);-o-transform:scale(0.99);transform:scale(0.99)}.openassessment .is--complete.openassessment__steps__step{border-top-color:#62c24a}.openassessment .is--incomplete.openassessment__steps__step{border-top-color:#e5a635}.openassessment .has--error.openassessment__steps__step{border-top-color:#bc5547}.openassessment .is--closed.openassessment__steps__step,.openassessment .is--incomplete.openassessment__steps__step{border-top-color:#e5a635}.openassessment .step--peer-assessment .peer-assessment__display,.openassessment .step--self-assessment .self-assessment__display,.openassessment .submission__answer__display,.openassessment .submission__peer-evaluations,.openassessment .submission__feedback{margin-bottom:20px}.openassessment .submission__feedback__title{margin-bottom:10px;border-bottom:2px solid #d7dbdf;padding-bottom:10px}.openassessment .step--peer-assessment .peer-assessment__display__response p,.openassessment .step--self-assessment .self-assessment__display__response p,.openassessment .submission__answer__display__content p,.openassessment .submission__peer-evaluations__questions p,.openassessment .submission__feedback__content p,.openassessment .submission__feedback__actions p{margin-bottom:20px}.openassessment .step--peer-assessment .peer-assessment__display__response p:last-child,.openassessment .step--self-assessment .self-assessment__display__response p:last-child,.openassessment .submission__answer__display__content p:last-child,.openassessment .submission__peer-evaluations__questions p:last-child,.openassessment .submission__feedback__content p:last-child,.openassessment .submission__feedback__actions p:last-child{margin-bottom:0}.openassessment .openassessment__prompt,.openassessment .step--peer-assessment .peer-assessment__display__response,.openassessment .step--self-assessment .self-assessment__display__response,.openassessment .submission__answer__display__content{box-shadow:inset 0 1px 2px 1px rgba(2,2,3,0.1);padding:20px 20px;background:#fdfdfd}.openassessment .step--response .response__submission__content textarea,.openassessment .step--peer-assessment .peer-assessment__display__response,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question--feedback textarea,.openassessment .step--self-assessment .self-assessment__display__response,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question--feedback textarea,.openassessment .submission__answer__display__content,.openassessment .submission__feedback__fields textarea{max-height:300px;overflow-y:scroll}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question{*zoom:1;margin-bottom:10px}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question:before,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question:before,.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question:after,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question:after{content:" ";display:table}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question:after,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question:after{clear:both}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title{border-bottom:2px solid #646464;padding-bottom:5px}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title .ico,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title .ico{display:inline-block;vertical-align:middle}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy,.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy{margin-left:10px;color:#646464}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers,.openassessment .step--self-assessment .self-assessment__assessment .question__answers{margin-top:20px;margin-bottom:20px}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer{*zoom:1;display:block;margin-bottom:10px;border-bottom:1px solid #f5f6f7;padding-bottom:10px}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer:before,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer:before,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer:after,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer:after{content:" ";display:table}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer:after,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer:after{clear:both}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input{margin-bottom:5px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input{float:left;display:block;margin-right:4.82916%;width:100%}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input{float:left;display:block;margin-right:2.35765%;width:31.76157%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input{float:left;display:block;margin-right:2.35765%;width:31.76157%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input{float:left;display:block;margin-right:2.35765%;width:31.76157%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input:last-child{margin-right:0}}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__value,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__value,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label{display:inline-block;vertical-align:middle}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label{margin-bottom:0;color:#a5a6aa}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__value,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__value{margin-right:10px}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__value:checked+.answer__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__value:checked+.answer__label{color:#000}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata{display:block}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata{float:left;display:block;margin-right:2.35765%;width:65.88078%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata{float:left;display:block;margin-right:2.35765%;width:65.88078%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata{float:left;display:block;margin-right:2.35765%;width:65.88078%;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--metadata:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--metadata:last-child{margin-right:0}}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip,.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points{display:block}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip{margin-bottom:10px;margin-right:20px;color:#a5a6aa}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip{float:left;display:block;margin-right:3.57866%;width:74.10533%;float:left;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip{float:left;display:block;margin-right:3.57866%;width:74.10533%;float:left;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip{float:left;display:block;margin-right:3.57866%;width:74.10533%;float:left;margin-bottom:0}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip:last-child,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip:last-child{margin-right:0}}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip:after,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip:after{content:""}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points{color:#a5a6aa}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points{float:right;text-align:right}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points{float:right;text-align:right}}@media screen and (min-width: 1300px){.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points{float:right;text-align:right}}.openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__points__label,.openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__points__label{display:inline-block;margin-left:5px;color:#a5a6aa}.ui-toggle-visibility .ui-toggle-visibility__control{-webkit-transition:color 0.25s ease-in;-moz-transition:color 0.25s ease-in;transition:color 0.25s ease-in;text-decoration:none}.ui-toggle-visibility .ui-toggle-visibility__control .ico,.ui-toggle-visibility .ui-toggle-visibility__control .ui-toggle-visibility__control__copy{display:inline-block;vertical-align:middle}.ui-toggle-visibility .ui-toggle-visibility__control>.ico{-webkit-transition:all 0.25s ease-in-out 0s;-moz-transition:all 0.25s ease-in-out 0s;transition:all 0.25s ease-in-out 0s;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.ui-toggle-visibility .ui-toggle-visibility__control .ui-toggle-visibility__control__copy{margin-left:10px}.ui-toggle-visibility .ui-toggle-visibility__control:hover,.ui-toggle-visibility .ui-toggle-visibility__control:focus{color:#00a7f6}.ui-toggle-visibility .ui-toggle-visibility__control:active,.ui-toggle-visibility .ui-toggle-visibility__control.is--current{color:#1d9dd9}.ui-toggle-visibility .ui-toggle-visibility__content{-webkit-transition:opacity 0.5s ease-in 0,max-height 0.25s ease-in 0;-moz-transition:opacity 0.5s ease-in 0,max-height 0.25s ease-in 0;transition:opacity 0.5s ease-in 0,max-height 0.25s ease-in 0;max-height:40000px;overflow:auto;opacity:1.0;padding-left:2px;padding-right:2px}.ui-toggle-visibility.is--collapsed>.ui-toggle-visibility__control>.ico{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}.ui-toggle-visibility.is--collapsed .ui-toggle-visibility__content{-webkit-transition:opacity 0.25s ease-in 0,max-height 0.5s ease-in 0;-moz-transition:opacity 0.25s ease-in 0,max-height 0.5s ease-in 0;transition:opacity 0.25s ease-in 0,max-height 0.5s ease-in 0;max-height:0;overflow:hidden;opacity:0.0}.has--hints{overflow:visible}.ui-hint .ico{margin-left:5px}.ui-hint:hover,.ui-hint:focus{color:#00a7f6}.ui-hint:after{left:0;display:block;white-space:normal;width:200px;background:rgba(2,2,3,0.75)}.ui-hint.hint--top:after{left:0;margin-left:-20px}.wrapper--openassessment{position:relative}.openassessment .openassessment__title{*zoom:1;display:block}.openassessment .openassessment__title:before,.openassessment .openassessment__title:after{content:" ";display:table}.openassessment .openassessment__title:after{clear:both}.openassessment .openassessment__message{*zoom:1;display:block;background:none;padding:0}.openassessment .openassessment__message:before,.openassessment .openassessment__message:after{content:" ";display:table}.openassessment .openassessment__message:after{clear:both}.openassessment .openassessment__steps{counter-reset:item}.openassessment .openassessment__steps__step .step__header{*zoom:1;display:block}.openassessment .openassessment__steps__step .step__header:before,.openassessment .openassessment__steps__step .step__header:after{content:" ";display:table}.openassessment .openassessment__steps__step .step__header:after{clear:both}.openassessment .openassessment__steps__step .step__title{margin-bottom:10px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:4.82916%;width:65.05695%;margin-bottom:0}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;margin-bottom:0}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;margin-bottom:0}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%;margin-bottom:0}.openassessment .openassessment__steps__step .step__title:last-child{margin-right:0}}.openassessment .openassessment__steps__step .step__title .step__counter,.openassessment .openassessment__steps__step .step__title .wrapper--copy{display:inline-block;vertical-align:middle}.openassessment .openassessment__steps__step .step__title .wrapper--copy{margin-left:20px;border-left:1px solid #d7dbdf;padding-left:20px}.openassessment .openassessment__steps__step .step__title .step__counter:before{content:counter(item,decimal);counter-increment:item;color:#d7dbdf}.openassessment .openassessment__steps__step .step__title .step__label,.openassessment .openassessment__steps__step .step__title .step__deadline{display:block}.openassessment .openassessment__steps__step .step__title .step__label{color:#2d2e30}.openassessment .openassessment__steps__step .step__title .step__deadline{color:#aeafb3}.openassessment .openassessment__steps__step .step__status .step__status__value{border-radius:2px;padding:5px 10px;background:#d7dbdf}.openassessment .openassessment__steps__step .step__status .ico{display:inline-block;vertical-align:bottom;margin-left:5px}.openassessment .openassessment__steps__step .step__status .copy{color:#646464}@media screen and (max-width: 529px){.openassessment .openassessment__steps__step .step__status{position:relative}}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:4.82916%;width:30.11389%;margin-right:0;position:relative;top:-8px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;position:relative;top:-8px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;position:relative;top:-8px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__status{float:left;display:block;margin-right:2.35765%;width:23.23176%;margin-right:0;position:relative;top:-8px;text-align:right}.openassessment .openassessment__steps__step .step__status:last-child{margin-right:0}}.openassessment .openassessment__steps__step .wrapper--step__content{margin-top:10px;padding-top:20px;border-top:1px solid #d7dbdf}.openassessment .openassessment__steps__step .step__message{*zoom:1;display:block;margin-bottom:20px}.openassessment .openassessment__steps__step .step__message:before,.openassessment .openassessment__steps__step .step__message:after{content:" ";display:table}.openassessment .openassessment__steps__step .step__message:after{clear:both}.openassessment .openassessment__steps__step .step__instruction{margin-bottom:20px;color:#a5a6aa}.openassessment .openassessment__steps__step .step__content{margin-bottom:20px}.openassessment .openassessment__steps__step .step__actions{margin-bottom:10px;text-align:center}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps__step .step__actions{text-align:right}}.openassessment .openassessment__steps__step .step__actions .action--submit .copy,.openassessment .openassessment__steps__step .step__actions .action--submit .ico{display:inline}.openassessment .openassessment__steps__step .step__actions.has--error .message{margin-bottom:20px;text-align:left}.openassessment .openassessment__steps__step.is--loading .step__header{padding-bottom:0;border-bottom:none;margin-bottom:0}.openassessment .openassessment__steps__step.is--loading .step__counter:before,.openassessment .openassessment__steps__step.is--loading .step__label,.openassessment .openassessment__steps__step.is--loading .step__deadline{color:#ededee}.openassessment .openassessment__steps__step.is--loading .step__status__value{background:#ededee}.openassessment .openassessment__steps__step.is--loading .step__status__value .wrapper--anim{-webkit-animation:pulse 3s ease-in-out infinite;-moz-animation:pulse 3s ease-in-out infinite;animation:pulse 3s ease-in-out infinite}.openassessment .openassessment__steps__step.is--loading .step__status__value .ico{display:inline-block;color:#a5a6aa}.openassessment .openassessment__steps__step.is--loading .step__status__value .copy{color:#a5a6aa}.openassessment .openassessment__steps__step.is--collapsed .step__header{padding-bottom:0;border-bottom:none;margin-bottom:0}.openassessment .openassessment__steps__step.is--incomplete .step__counter:before{border-color:rgba(229,166,53,0.5);color:#e5a635}.openassessment .openassessment__steps__step.is--incomplete .step__status__value{background:#e5a635}.openassessment .openassessment__steps__step.is--incomplete .step__status__value .copy,.openassessment .openassessment__steps__step.is--incomplete .step__status__value .ico{color:#fff}.openassessment .openassessment__steps__step.is--incomplete .step__label{color:#e5a635}.openassessment .openassessment__steps__step.is--unavailable .step__counter:before,.openassessment .openassessment__steps__step.is--unavailable .step__label,.openassessment .openassessment__steps__step.is--unavailable .step__deadline{color:#ededee}.openassessment .openassessment__steps__step.is--unavailable .step__status__value{background:#ededee}.openassessment .openassessment__steps__step.is--unavailable .step__status__value .ico{display:inline-block;color:#a5a6aa}.openassessment .openassessment__steps__step.is--unavailable .step__status__value .copy{color:#a5a6aa}.openassessment .openassessment__steps__step.is--waiting .step__counter:before,.openassessment .openassessment__steps__step.is--waiting .step__label,.openassessment .openassessment__steps__step.is--waiting .step__deadline{color:#ededee}.openassessment .openassessment__steps__step.is--waiting .step__status__value{background:#ededee}.openassessment .openassessment__steps__step.is--waiting .step__status__value .ico{display:inline-block;color:#a5a6aa}.openassessment .openassessment__steps__step.is--waiting .step__status__value .copy{color:#a5a6aa}.openassessment .openassessment__steps__step.is--waiting .step__title .grade__value__title{color:#ededee}.openassessment .openassessment__steps__step.is--waiting .step__instruction,.openassessment .openassessment__steps__step.is--waiting .grade__value__description{color:#a5a6aa}.openassessment .openassessment__steps__step.is--complete .step__counter:before{color:#62c24a}.openassessment .openassessment__steps__step.is--complete .step__status__value{background:#62c24a}.openassessment .openassessment__steps__step.is--complete .step__status__value .ico{display:inline-block}.openassessment .openassessment__steps__step.is--complete .step__status__value .copy,.openassessment .openassessment__steps__step.is--complete .step__status__value .ico{color:#fff}.openassessment .openassessment__steps__step.has--error .step__counter:before{border-color:rgba(188,85,71,0.5);color:#bc5547}.openassessment .openassessment__steps__step.has--error .step__status__value{background:#bc5547}.openassessment .openassessment__steps__step.has--error .step__status__value .copy,.openassessment .openassessment__steps__step.has--error .step__status__value .ico{color:#fff}.openassessment .openassessment__steps__step.has--error .step__label{color:#bc5547}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label{-webkit-transition:color 0.25s ease-in;-moz-transition:color 0.25s ease-in;transition:color 0.25s ease-in;color:#33a6dc}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:hover,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:focus{color:#00a7f6}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:active,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label.is--current{color:#1d9dd9}.openassessment .openassessment__prompt{margin-bottom:20px}.openassessment .openassessment__prompt__copy{color:#3c3c3c}.openassessment .openassessment__prompt__copy>*{margin-bottom:20px}.openassessment .step--response .response__submission{padding:10px 10px 20px 10px;background:#f5f6f7;border-radius:2px}.openassessment .step--response .response__submission__content{margin-bottom:20px}.openassessment .step--response .response__submission__content textarea{min-height:200px}.openassessment .step--response .response__submission__content .tip{padding:5px 10px;background:#b9c1c8;color:#fff}.openassessment .step--response .response__submission__status{display:inline-block;vertical-align:middle;margin-left:10px}.openassessment .step--response .response__submission__status__title{color:#878787}.openassessment .step--response .response__submission__actions .action--save{display:block;text-align:center;margin-bottom:10px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .step--response .response__submission__actions .action--save{display:inline-block;margin-right:10px;margin-bottom:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--response .response__submission__actions .action--save{display:inline-block;margin-right:10px;margin-bottom:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--response .response__submission__actions .action--save{display:inline-block;margin-right:10px;margin-bottom:0}}@media screen and (min-width: 1300px){.openassessment .step--response .response__submission__actions .action--save{display:inline-block;margin-right:10px;margin-bottom:0}}.openassessment .step--peer-assessment .peer-assessment__display__header{*zoom:1}.openassessment .step--peer-assessment .peer-assessment__display__header:before,.openassessment .step--peer-assessment .peer-assessment__display__header:after{content:" ";display:table}.openassessment .step--peer-assessment .peer-assessment__display__header:after{clear:both}.openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title{margin-bottom:10px;color:#aeafb3}.openassessment .step--peer-assessment .peer-assessment__display__response{color:#3c3c3c}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__fields{margin-bottom:20px}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question--feedback .wrapper--input{margin-top:20px}.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question--feedback textarea{min-height:100px}.openassessment .step--self-assessment .self-assessment__display__header{*zoom:1}.openassessment .step--self-assessment .self-assessment__display__header:before,.openassessment .step--self-assessment .self-assessment__display__header:after{content:" ";display:table}.openassessment .step--self-assessment .self-assessment__display__header:after{clear:both}.openassessment .step--self-assessment .self-assessment__display__title{margin-bottom:10px;color:#aeafb3}.openassessment .step--self-assessment .self-assessment__display__response{color:#3c3c3c}.openassessment .step--self-assessment .self-assessment__assessment .assessment__fields{margin-bottom:20px}.openassessment .step--self-assessment .self-assessment__assessment .question__answers{overflow:visible}.openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question--feedback textarea{min-height:100px}.openassessment #openassessment__grade .step__counter,.openassessment #openassessment__grade .step__counter:before{display:none}.openassessment #openassessment__grade .wrapper--copy{margin-left:0;border-left:none;padding-left:0}@media screen and (max-width: 529px){.openassessment .step--grade .step__title{float:left;display:block;margin-right:7.42297%;width:100%}.openassessment .step--grade .step__title:last-child{margin-right:0}}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .step--grade .step__title{float:left;display:block;margin-right:4.82916%;width:100%}.openassessment .step--grade .step__title:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .step--grade .step__title{float:left;display:block;margin-right:2.35765%;width:100%}.openassessment .step--grade .step__title:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .step--grade .step__title{float:left;display:block;margin-right:2.35765%;width:100%}.openassessment .step--grade .step__title:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .step--grade .step__title{float:left;display:block;margin-right:2.35765%;width:100%}.openassessment .step--grade .step__title:last-child{margin-right:0}}.openassessment .step--grade .step__title .step__label,.openassessment .step--grade .step__title .grade__value{display:inline-block;vertical-align:middle}.openassessment .step--grade .step__title .step__label{margin-right:10px}.openassessment .step--grade .step__title .grade__value__title{color:#2d2e30}.openassessment .step--grade .grade__value__description{margin-bottom:20px;color:#3c3c3c}.openassessment .submission__answer__display__title{margin-bottom:10px;color:#aeafb3}.openassessment .submission__peer-evaluations__title{margin-bottom:10px;color:#aeafb3}.openassessment .submission__peer-evaluations__questions{margin-bottom:10px}.openassessment .submission__peer-evaluations__questions:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0}.openassessment .submission__peer-evaluations__questions .question{margin-bottom:20px}.openassessment .submission__peer-evaluations__questions .question__title{*zoom:1;margin-bottom:20px;border-bottom:2px solid #646464;padding-bottom:5px}.openassessment .submission__peer-evaluations__questions .question__title:before,.openassessment .submission__peer-evaluations__questions .question__title:after{content:" ";display:table}.openassessment .submission__peer-evaluations__questions .question__title:after{clear:both}.openassessment .submission__peer-evaluations__questions .question__title__copy{margin-left:10px;color:#646464}.openassessment .submission__peer-evaluations__questions .question__score{float:right;margin-left:20px}.openassessment .submission__peer-evaluations__questions .question__score__value{color:#2d2e30}.openassessment .submission__peer-evaluations__questions .question__score__value:after{content:"/";margin-left:5px;color:#aeafb3}.openassessment .submission__peer-evaluations__questions .question__score__potential{color:#aeafb3}.openassessment .submission__peer-evaluations__questions .question__score__potential .unit{margin-left:5px}.openassessment .submission__peer-evaluations__questions .question__answers{*zoom:1;display:block;overflow:visible}.openassessment .submission__peer-evaluations__questions .question__answers:before,.openassessment .submission__peer-evaluations__questions .question__answers:after{content:" ";display:table}.openassessment .submission__peer-evaluations__questions .question__answers:after{clear:both}.openassessment .submission__peer-evaluations__questions .answer{margin-bottom:20px}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:4.82916%;width:47.58542%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(2n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(2n+1){clear:left}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:31.76157%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:31.76157%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}@media screen and (min-width: 1300px){.openassessment .submission__peer-evaluations__questions .answer{float:left;display:block;margin-right:2.35765%;width:31.76157%}.openassessment .submission__peer-evaluations__questions .answer:last-child{margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n){margin-right:0}.openassessment .submission__peer-evaluations__questions .answer:nth-child(3n+1){clear:left}}.openassessment .submission__peer-evaluations__questions .answer.self-assessment{border-left:5px solid #f5f6f7;padding-left:20px}.openassessment .submission__peer-evaluations__questions .answer.self-assessment .answer__source{color:#d7dbdf}.openassessment .submission__peer-evaluations__questions .answer__source{display:block;color:#aeafb3}.openassessment .submission__peer-evaluations__questions .answer__value{display:block;margin-bottom:10px;color:#2d2e30}.openassessment .submission__peer-evaluations__questions .answer__value__value{color:#646464}.openassessment .submission__peer-evaluations__questions .answer__value__value .ui-hint{color:#d7dbdf}.openassessment .submission__peer-evaluations__questions .answer__value__value .ui-hint:hover,.openassessment .submission__peer-evaluations__questions .answer__value__value .ui-hint:focus{color:#00a7f6}.openassessment .submission__peer-evaluations__questions .answer__score,.openassessment .submission__peer-evaluations__questions .answer__score__value{display:block;color:#2d2e30}.openassessment .submission__peer-evaluations__questions .question--feedback .answer{width:100%}.openassessment .submission__feedback__title{margin-bottom:10px;color:#aeafb3}.openassessment .submission__feedback__content{margin-bottom:20px}.openassessment .submission__feedback__instructions{margin-bottom:20px;color:#a5a6aa}.openassessment .submission__feedback__elements{padding:20px 20px 20px 20px;background:#f5f6f7;border-radius:2px}.openassessment .submission__feedback__fields{margin-bottom:20px}.openassessment .submission__feedback__fields .field{margin-bottom:30px}.openassessment .submission__feedback__fields .field:last-child{margin-bottom:0}.openassessment .submission__feedback__fields select{display:block}.openassessment .submission__feedback__fields textarea{min-height:200px}.openassessment .submission__feedback__actions{padding-top:0}.openassessment .submission__feedback__actions .list--actions{padding:0}.openassessment .submission__feedback__actions .action--submit{margin-right:10px}.view--placeholder{background:transparent;margin:40px 40px}.openassessment .self-assessment__display__header,.openassessment .peer-assessment__display__header,.openassessment .step__header{margin-bottom:0 !important;border-radius:0 !important;padding-bottom:0 !important;font-size:inherit !important;border-bottom:none !important}.openassessment span{line-height:normal}.openassessment h2{text-transform:none;letter-spacing:normal}.openassessment .openassessment__steps .openassessment__steps__step .step__header .step__deadline{color:#aeafb3}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title{float:left;display:block;margin-right:7.42297%;width:73.14426%;margin-top:0 !important;text-align:left !important}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title:last-child{margin-right:0}@media screen and (min-width: 530px) and (max-width: 759px){.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title{float:left;display:block;margin-right:4.82916%;width:65.05695%}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title:last-child{margin-right:0}}@media screen and (min-width: 760px) and (max-width: 924px){.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title:last-child{margin-right:0}}@media screen and (min-width: 925px) and (max-width: 1299px){.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title:last-child{margin-right:0}}@media screen and (min-width: 1300px){.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title{float:left;display:block;margin-right:2.35765%;width:74.41059%}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title:last-child{margin-right:0}}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__label{text-transform:none;letter-spacing:normal}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__counter,.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .wrapper--copy{display:inline-block;vertical-align:middle}.openassessment .openassessment__steps .openassessment__steps__step .step__header h2.step__title .step__counter:before{content:counter(item,decimal);counter-increment:item;color:#d7dbdf}.openassessment .step__status__value{line-height:0}.openassessment .list--actions{list-style:none !important;padding-left:0 !important;text-indent:0 !important}.openassessment .list--actions li{margin-bottom:0 !important}.openassessment .list--actions button span,.openassessment .list--actions .button span,.openassessment .list--actions .action span{color:inherit}.openassessment span{color:inherit}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label{color:#33a6dc}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control:hover,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control:focus,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:hover,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:focus{color:#00a7f6}.openassessment .ui-toggle-visibility .ui-toggle-visibility__control:active,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control.is--current,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:active,.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label.is--current{color:#1d9dd9}.openassessment .step--peer-assessment .list--peer-assessments{list-style:none outside none !important;padding-left:0 !important}.openassessment .self-assessment__display__title,.openassessment .peer-assessment__display__title{margin-bottom:10px !important;color:#aeafb3 !important}.openassessment .question__answers{padding-left:0 !important}.openassessment .step--grade .step__title{width:100% !important}.openassessment .step--grade .step__title .wrapper--copy{display:block !important}.openassessment .action--submit,.openassessment .action--save{text-shadow:none !important;box-shadow:none !important}.openassessment .ico{font-style:normal}.openassessment .step__title .step__deadline{letter-spacing:normal;text-transform:none}.openassessment .openassessment__steps__step .step__header .step__title{margin-bottom:0}.openassessment .is--collapsed .question__answers{overflow:auto}
apps/openassessment/xblock/static/sass/openassessment.scss
......@@ -29,6 +29,7 @@
@import 'xb/utilities/variables'; // default settings and values
@import 'xb/utilities/mixins'; // mixins and functions
@import 'xb/utilities/extends'; // re-usable extends, placeholders, archetypes
@import 'xb/utilities/animations'; // re-usable CSS-based animations
// general xblocks: assets
@import 'xb/assets/fonts'; // imported/used fonts
......@@ -52,6 +53,7 @@
@import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions
@import 'xb/elements/controls'; // buttons, link styles, sliders, etc.
@import 'xb/elements/forms'; // form elements
@import 'xb/elements/system-feedback'; // system messages, feedback, transitions
@import 'xb/elements/layout'; // applied layouts and deliberate class-based breakpoints
// xblock: contextual
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
......@@ -38,6 +38,14 @@ hr.divider,
// --------------------
// toggling visibility
// --------------------
.is--hidden {
@extend %state-hidden;
}
// --------------------
// semantic lists used for UI
// --------------------
.list--actions,
......
apps/openassessment/xblock/static/sass/xb/elements/_system-feedback.scss 0 → 100644
// xblock: elements - system feedback
// ====================
// NOTES:
// * General system feedback UI archetypes - messages, transitions, etc.
.wrapper--xblock {
// --------------------
// 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;
p {
margin-bottom: ($baseline-v/2);
&:last-child {
@extend %wipe-last-child;
}
}
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;
}
}
// 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%);
}
}
// --------------------
// transitions
// --------------------
.is--transitioning {
@extend %state-disabled;
padding: ($baseline-v*2) ($baseline-h);
background: $color-decorative-quaternary;
.transition__status {
@include alignVertically();
text-align: center;
.wrapper--anim {
display: block;
@include animation(pulse $tmg-s3 ease-in-out infinite);
}
.ico, .copy {
display: block;
color: $copy-secondary-color;
}
.ico {
@extend %icon-0;
margin-bottom: ($baseline-v/2);
}
.copy {
@extend %hd-2;
@extend %t-strong;
@extend %t-titlecase;
}
}
}
}
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
......@@ -145,20 +145,24 @@
// --------------------
// canned icons
// --------------------
%icon-0 {
@extend %t-xlarge;
}
%icon-1 {
@extend %t-medium;
@extend %t-large;
}
%icon-2 {
@extend %t-base;
@extend %t-medium;
}
%icon-3 {
@extend %t-small;
@extend %t-base;
}
%icon-4 {
@extend %t-xsmall;
@extend %t-small;
}
......
apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_flex-grid.scss
......@@ -36,4 +36,4 @@
// float: left;
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// }
// }
\ No newline at end of file
// }
apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_transition-property-name.scss
......@@ -19,4 +19,4 @@
@else {
@return $prop;
}
}
\ No newline at end of file
}
apps/openassessment/xblock/static/sass/xb/utilities/_animations.scss 0 → 100644
// xblock: utilities - CSS animations
// ====================
// --------------------
// pulse
// --------------------
@include keyframes(pulse) {
0% {
opacity: 0.50;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.50;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-pulse {
@include animation(pulse $tmg-f1 ease-in-out 1);
}
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
......@@ -117,6 +117,15 @@
outline: invert none medium;
}
// --------------------
// UI: element rendering/visibility
// --------------------
%state-hidden {
@extend %state-disabled;
display: none;
visibility: hidden;
}
// --------------------
// UI: element depth
......
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
......@@ -16,6 +16,15 @@
left: $left;
}
// --------------------
// shorthand - vertically align something
// --------------------
@mixin alignVertically {
position: relative;
top: 50%;
@include transform(translateY(-50%));
}
// --------------------
// fontSize (rems)
......@@ -68,4 +77,3 @@
@include lh($f-size-xlarge);
}
}
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -183,3 +183,13 @@ $selected-color: $blue-s1;
$bg-view: $gray-l7;
$bg-content: $white;
$bg-message: $black;
// --------------------
// // application - colors: states
// --------------------
$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%);
scripts/sass.sh 0 → 100755
#!/usr/bin/env bash
cd `dirname $BASH_SOURCE` && cd ../apps/openassessment/xblock/static
sass --update sass:css --force
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