Commit ddcf19c2 by Stephen Sanchez

First crack at some templates in django

parent add26aed
"""An XBlock where students can read a question and compose their response""" """An XBlock where students can read a question and compose their response"""
from django.template.context import Context
import pkg_resources import pkg_resources
from mako.template import Template from django.template.loader import get_template
from openassessment.peer.api import PeerEvaluationWorkflowError from openassessment.peer.api import PeerEvaluationWorkflowError
from submissions import api from submissions import api
...@@ -12,18 +12,18 @@ from xblock.core import XBlock ...@@ -12,18 +12,18 @@ from xblock.core import XBlock
from xblock.fields import List, Scope, String from xblock.fields import List, Scope, String
from xblock.fragment import Fragment from xblock.fragment import Fragment
mako_default_filters = ['unicode', 'h', 'trim']
EXAMPLE_POVERTY_RUBRIC = ( EXAMPLE_POVERTY_RUBRIC = (
"OpenAssessmentBlock Poverty Rubric", "OpenAssessmentBlock Poverty Rubric",
""" """
<vertical_demo> <vertical_demo>
<openassessment start="2014-12-19T23:00-7:00" due="2014-12-21T23:00-7:00"> <openassessment start="2014-12-19T23:00-7:00" due="2014-12-21T23:00-7:00">
<title>
Global Poverty
</title>
<prompt> <prompt>
Given the state of the world today, what do you think should be done to Given the state of the world today, what do you think should be done to
combat poverty? Please answer in a short essay of 200-300 words. combat poverty?
</prompt> </prompt>
<rubric> <rubric>
Read for conciseness, clarity of thought, and form. Read for conciseness, clarity of thought, and form.
...@@ -54,11 +54,12 @@ EXAMPLE_POVERTY_RUBRIC = ( ...@@ -54,11 +54,12 @@ EXAMPLE_POVERTY_RUBRIC = (
</criterion> </criterion>
</rubric> </rubric>
<evals> <evals>
<peereval start="2014-12-20T19:00-7:00" <peer-evaluation start="2014-12-20T19:00-7:00"
name="Peer Evaluation"
due="2014-12-21T22:22-7:00" due="2014-12-21T22:22-7:00"
must_grade="5" must_grade="5"
must_be_graded_by="3" /> must_be_graded_by="3" />
<selfeval/> <self-evaluation name="Self Evaluation" />
</evals> </evals>
</openassessment> </openassessment>
...@@ -72,6 +73,9 @@ EXAMPLE_CENSORSHIP_RUBRIC = ( ...@@ -72,6 +73,9 @@ EXAMPLE_CENSORSHIP_RUBRIC = (
<vertical_demo> <vertical_demo>
<openassessment start="2013-12-19T23:00-7:00" due="2014-12-21T23:00-7:00"> <openassessment start="2013-12-19T23:00-7:00" due="2014-12-21T23:00-7:00">
<title>
Censorship in Public Libraries
</title>
<prompt> <prompt>
What do you think about censorship in libraries? I think it's pretty great. What do you think about censorship in libraries? I think it's pretty great.
</prompt> </prompt>
...@@ -97,8 +101,9 @@ EXAMPLE_CENSORSHIP_RUBRIC = ( ...@@ -97,8 +101,9 @@ EXAMPLE_CENSORSHIP_RUBRIC = (
</criterion> </criterion>
</rubric> </rubric>
<evals> <evals>
<selfeval/> <self-evaluation name="Self Evaluation" />
<peereval start="2014-12-20T19:00-7:00" <peer-evaluation name="Peer Evaluation"
start="2014-12-20T19:00-7:00"
due="2014-12-21T22:22-7:00" due="2014-12-21T22:22-7:00"
must_grade="5" must_grade="5"
must_be_graded_by="3" /> must_be_graded_by="3" />
...@@ -109,17 +114,19 @@ EXAMPLE_CENSORSHIP_RUBRIC = ( ...@@ -109,17 +114,19 @@ EXAMPLE_CENSORSHIP_RUBRIC = (
""" """
) )
class OpenAssessmentBlock(XBlock): class OpenAssessmentBlock(XBlock):
"""Displays a question and gives an area where students can compose a response.""" """Displays a question and gives an area where students can compose a response."""
start_datetime = String(default=None, scope=Scope.content, help="ISO-8601 formatted string representing the start date of this assignment.") start_datetime = String(default=None, scope=Scope.content, help="ISO-8601 formatted string representing the start date of this assignment.")
due_datetime = String(default=None, scope=Scope.content, help="ISO-8601 formatted string representing the end date of this assignment.") due_datetime = String(default=None, scope=Scope.content, help="ISO-8601 formatted string representing the end date of this assignment.")
prompt = String( default=None, scope=Scope.content, help="A prompt to display to a student (plain text).") title = String(default="", scope=Scope.content, help="A title to display to a student (plain text).")
rubric = List( default=None, scope=Scope.content, help="Instructions and criteria for students giving feedback.") prompt = String(default="", scope=Scope.content, help="A prompt to display to a student (plain text).")
rubric = List(default=None, scope=Scope.content, help="Instructions and criteria for students giving feedback.")
rubric_instructions = String( default=None, scope=Scope.content, help="Instructions for self and peer assessment.") rubric_instructions = String( default=None, scope=Scope.content, help="Instructions for self and peer assessment.")
rubric_criteria = List(default=None, scope=Scope.content, help="The different parts of grading for students giving feedback.") rubric_criteria = List(default=None, scope=Scope.content, help="The different parts of grading for students giving feedback.")
rubric_evals = List(default=None, scope=Scope.content, help="The requested set of evaluations and the order in which to apply them.") rubric_evals = List(default=None, scope=Scope.content, help="The requested set of evaluations and the order in which to apply them.")
course_id = String( default=u"TestCourse", scope=Scope.content, help="The course_id associated with this prompt (until we can get it from runtime).",) course_id = String(default=u"TestCourse", scope=Scope.content, help="The course_id associated with this prompt (until we can get it from runtime).",)
submit_errors = { # Reported to user sometimes, and useful in tests submit_errors = { # Reported to user sometimes, and useful in tests
'ENOSUB': 'API submission is unrequested', 'ENOSUB': 'API submission is unrequested',
...@@ -164,34 +171,41 @@ class OpenAssessmentBlock(XBlock): ...@@ -164,34 +171,41 @@ class OpenAssessmentBlock(XBlock):
trace = self._get_xblock_trace() trace = self._get_xblock_trace()
student_item_dict = self._get_student_item_dict() student_item_dict = self._get_student_item_dict()
previous_submissions = api.get_submissions(student_item_dict) previous_submissions = api.get_submissions(student_item_dict)
grade_state = self._get_grade_state(student_item_dict)
# All data we intend to pass to the front end.
context_dict = {
"xblock_trace": trace,
"title": self.title,
"question": self.prompt,
"rubric_instructions": self.rubric_instructions,
"rubric_criteria": self.rubric_criteria,
"rubric_evals": self.rubric_evals,
"grade_state": grade_state,
}
try: try:
# HACK: Replace with proper workflow. # HACK: Replace with proper workflow.
peer_eval = self._hack_get_peer_eval() peer_eval = self._hack_get_peer_eval()
peer_submission = peer_api.get_submission_to_evaluate(student_item_dict, peer_eval["must_be_graded_by"]) peer_submission = peer_api.get_submission_to_evaluate(
student_item_dict, peer_eval.must_be_graded_by
)
context_dict["peer_submission"] = peer_submission
except PeerEvaluationWorkflowError: except PeerEvaluationWorkflowError:
peer_submission = False peer_submission = False
if previous_submissions and peer_submission: # XXX: until workflow better, move on w/ prev submit if previous_submissions and peer_submission: # XXX: until workflow better, move on w/ prev submit
html = Template(load("static/html/oa_rubric.html"), template = get_template("static/html/oa_base.html")
default_filters=mako_default_filters, context = Context(context_dict)
input_encoding='utf-8', frag = Fragment(template.render(context))
)
frag = Fragment(html.render_unicode(xblock_trace=trace,
peer_submission=peer_submission,
rubric_instructions=self.rubric_instructions,
rubric_criteria=self.rubric_criteria,
))
frag.add_css(load("static/css/openassessment.css")) frag.add_css(load("static/css/openassessment.css"))
frag.add_javascript(load("static/js/src/oa_assessment.js")) frag.add_javascript(load("static/js/src/oa_assessment.js"))
frag.initialize_js('OpenAssessmentBlock') frag.initialize_js('OpenAssessmentBlock')
elif previous_submissions: elif previous_submissions:
return Fragment(u"<div>There are no submissions to review.</div>") return Fragment(u"<div>There are no submissions to review.</div>")
else: # XXX: until workflow better, submit until submitted else: # XXX: until workflow better, submit until submitted
html = Template(load("static/html/oa_submission.html"), template = get_template("static/html/oa_base.html")
default_filters=mako_default_filters, context = Context(context_dict)
input_encoding='utf-8', frag = Fragment(template.render(context))
)
frag = Fragment(html.render_unicode(xblock_trace=trace, question=self.prompt))
frag.add_css(load("static/css/openassessment.css")) frag.add_css(load("static/css/openassessment.css"))
frag.add_javascript(load("static/js/src/oa_submission.js")) frag.add_javascript(load("static/js/src/oa_submission.js"))
frag.initialize_js('OpenAssessmentBlock') frag.initialize_js('OpenAssessmentBlock')
...@@ -200,7 +214,7 @@ class OpenAssessmentBlock(XBlock): ...@@ -200,7 +214,7 @@ class OpenAssessmentBlock(XBlock):
def _hack_get_peer_eval(self): def _hack_get_peer_eval(self):
# HACK: Forcing Peer Eval, we'll get the Eval config. # HACK: Forcing Peer Eval, we'll get the Eval config.
for next_eval in self.rubric_evals: for next_eval in self.rubric_evals:
if next_eval["type"] == "peereval": if next_eval.eval_type == "peer-evaluation":
return next_eval return next_eval
@XBlock.json_handler @XBlock.json_handler
...@@ -224,8 +238,8 @@ class OpenAssessmentBlock(XBlock): ...@@ -224,8 +238,8 @@ class OpenAssessmentBlock(XBlock):
evaluation = peer_api.create_evaluation( evaluation = peer_api.create_evaluation(
data["submission_uuid"], data["submission_uuid"],
student_item_dict["student_id"], student_item_dict["student_id"],
int(peer_eval["must_grade"]), int(peer_eval.must_grade),
int(peer_eval["must_be_graded_by"]), int(peer_eval.must_be_graded_by),
assessment_dict assessment_dict
) )
...@@ -258,14 +272,16 @@ class OpenAssessmentBlock(XBlock): ...@@ -258,14 +272,16 @@ class OpenAssessmentBlock(XBlock):
status_tag = 'EUNKNOWN' status_tag = 'EUNKNOWN'
# relies on success being orthogonal to errors # relies on success being orthogonal to errors
status_text = status_text if status_text else self.submit_errors[status_tag] status_text = status_text if status_text else self.submit_errors[status_tag]
return (status, status_tag, status_text) return status, status_tag, status_text
@classmethod @classmethod
def parse_xml(cls, node, runtime, keys, id_generator): def parse_xml(cls, node, runtime, keys, id_generator):
"""Instantiate xblock object from runtime XML definition.""" """Instantiate xblock object from runtime XML definition."""
block = runtime.construct_xblock_from_class(cls, keys) block = runtime.construct_xblock_from_class(cls, keys)
for child in node: for child in node:
if child.tag == 'prompt': if child.tag == 'title':
block.title = child.text.strip()
elif child.tag == 'prompt':
block.prompt = child.text.strip() block.prompt = child.text.strip()
elif child.tag == 'rubric': elif child.tag == 'rubric':
block.rubric_instructions = child.text.strip() block.rubric_instructions = child.text.strip()
...@@ -280,13 +296,17 @@ class OpenAssessmentBlock(XBlock): ...@@ -280,13 +296,17 @@ class OpenAssessmentBlock(XBlock):
elif child.tag == 'evals': elif child.tag == 'evals':
block.rubric_evals = [] block.rubric_evals = []
for evaluation in child: for evaluation in child:
e = {'type': evaluation.tag, e = EvaluationModule()
'name': evaluation.attrib.get('name', ''), if "peer-evaluation" == evaluation.tag:
'start_datetime': evaluation.attrib.get('start', None), e = PeerEvaluation()
'due_datetime': evaluation.attrib.get('due', None), elif "self-evaluation" == evaluation.tag:
# These attrs are accepted for self, ai evals, but ignored: e = SelfEvaluation()
'must_grade': evaluation.attrib.get('must_grade', 1),
'must_be_graded_by': evaluation.attrib.get('must_be_graded_by', 0), } e.name = evaluation.attrib.get('name', '')
e.start_datetime = evaluation.attrib.get('start', None)
e.due_datetime = evaluation.attrib.get('start', None)
e.must_grade = evaluation.attrib.get('must_grade', 1)
e.must_be_graded_by = evaluation.attrib.get('must_be_graded_by', 0)
block.rubric_evals.append(e) block.rubric_evals.append(e)
else: else:
# XXX: jrbl thinks this lets you embed other blocks inside this (?) # XXX: jrbl thinks this lets you embed other blocks inside this (?)
...@@ -299,3 +319,42 @@ class OpenAssessmentBlock(XBlock): ...@@ -299,3 +319,42 @@ class OpenAssessmentBlock(XBlock):
"""A canned scenario for display in the workbench.""" """A canned scenario for display in the workbench."""
return [EXAMPLE_POVERTY_RUBRIC, EXAMPLE_CENSORSHIP_RUBRIC,] return [EXAMPLE_POVERTY_RUBRIC, EXAMPLE_CENSORSHIP_RUBRIC,]
def _get_grade_state(self, student_item):
peer_eval = self._hack_get_peer_eval()
submissions = api.get_submissions(student_item, 1)
has_finished_evaluating = peer_api.has_finished_required_evaluating(
student_item["student_id"], peer_eval.must_grade
)
score = api.get_score(student_item)
grade_state = {
"style_class": "",
"value": "",
"title": "",
"message": "",
}
return grade_state
class EvaluationModule():
eval_type = None
name = ''
start_datetime = None
due_datetime = None
must_grade = 1
must_be_graded_by = 0
class PeerEvaluation(EvaluationModule):
eval_type = "peer-evaluation"
navigation_text = "Your evaluation(s) of peer responses"
url = "static/html/oa_peer_evaluation.html"
class SelfEvaluation(EvaluationModule):
eval_type = "self-evaluation"
navigation_text = "Your evaluation of your response"
url = "static/html/oa_self_evaluation.html"
<!-- TEMPLATE: status messages -->
<!-- NOTES:
* class of message--warning is added message is a warning/notification to user
* class of message--confirmation is added message is a confirmation to user
* class of has--actions is added when a message has actions associated with it for user to interact with
-->
<div class="wrapper wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
{{ title }}
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for eval in rubric_evals %}
+
<span class="problem-type problem-type--{{ eval.type }}">{{ eval.name }}</span>
{% endfor %}
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
<li class="list--nav__item">
<a class="action" href="#openassessment__response">Your response to this problem</a>
</li>
{% for eval in rubric_evals %}
<li class="list--nav__item">
<a class="action" href="#openassessment__{{ eval.type }}">{{ eval.navigation_text }}</a>
</li>
{% endfor %}
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<p>{{ question }}</p>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
{% include "static/html/oa_response.html" %}
{% for eval in rubric_evals %}
{% include eval.url %}
{% endfor %}
</ol>
<!-- STATUS: problem grade -->
{% include "static/html/oa_grade.html" %}
</div>
</div>
<!-- TEMPLATE: grade status -->
<!-- NOTES:
* class of is--incomplete is added when the problem is in an incomplete state
* class of is--complete is added when problem is successfully completed by user
* class of has--grade is added when a grade (failing or passing) is calculated for user
* classes of needs--* are added when user action is needed
* classes of awaiting--* are added when a user's flow is dependent upon system readiness
-->
<!-- CASE: default/unstarted -->
<div id="openassessment__grade" class="openassessment__grade {{ grade_state.style_class }}">
<h2 class="openassessment__grade__title">{{ grade_state.title }}</h2>
<div class="openassessment__grade__content">
<span class="grade__value">{{ grade_state.value }}</span>
<p>{{ grade_state.message }}</p>
</div>
</div>
<!-- TEMPLATE: peer evaluation -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* each .peer-evaluation item needs a unique id attribute formatted as #peer-evaluation--###
* individual rubric questions' answers need specific id attributes in several places
-->
<!-- CASE: default/not started -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation">
<header class="step__header">
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">0</span> of
<span class="step__status__value--required">5</span> completed
</span>
</span>
</header>
<div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p>
</div>
<div class="step__content">
<ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item">
<article class="peer-evaluation" id="peer-evaluation--001">
<header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">Evaluation #
<span class="peer-evaluation__number--current">1</span> of
<span class="peer-evaluation__number--required">3</span>
</h3>
<span class="peer-evaluation__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">20 Minutes</span>
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="peer-evaluation--001__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-evaluation--001__evaluation__submit" class="action action--submit">Submit your evaluation &amp; move to response #2</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li>
<!-- CASE: started, but incomplete -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation">
<header class="step__header">
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">1</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
<div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p>
</div>
<div class="step__content">
<ul class="list--peer-evaluations">
<li class="list--peer-evaluations__item">
<article class="peer-evaluation" id="peer-evaluation--002">
<header class="peer-evaluation__header">
<h3 class="peer-evaluation__title">Evaluation #
<span class="peer-evaluation__number--current">2</span> of
<span class="peer-evaluation__number--required">3</span>
</h3>
<span class="peer-evaluation__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">20 Minutes</span>
</span>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="peer-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="peer-evaluation--002__evaluation" class="peer-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-evaluation--001__evaluation__submit" class="action action--submit">Submit your evaluation &amp; move to response #2</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li>
<!-- CASE: started, but incomplete and problem closed -->
<li id="openassessment__peer-evaluation"class="openassessment__steps__step step--peer-evaluation is--unavailable">
<header class="step__header">
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">1</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
</li>
<!-- CASE: no peer responses to evaluate -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation is--unavailable">
<header class="step__header">
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
Awaiting Peer Resposes
</span>
</span>
</header>
</li>
<!-- CASE: completed -->
<li id="openassessment__peer-evaluation" class="openassessment__steps__step step--peer-evaluation">
<header class="step__header">
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="step__status__value--completed">3</span> of
<span class="step__status__value--required">3</span> completed
</span>
</span>
</header>
</li>
<!-- TEMPLATE: student response -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
* class of is--saved is added when response is saved by system
* class of is--submitted is added when user has formally submitted response
* class of is--graded is added when user's response has proper amount of completed peer evaluations
* class of is--updated is added to the step__status element when a response is saved
-->
<!-- CASE: default/unanswered -->
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Incomplete</span>
</span>
</header>
<div class="step__instruction">
<p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">January 24, 2014</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="step__content">
<form id="response__submission" class="response__submission" method="post">
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
</li>
</ol>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
</li>
</ul>
</div>
</li>
<!-- CASE: unaswered and problem closed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Incomplete</span>
</span>
</header>
<div class="step__instruction">
<p>You did not complete this portion of the problem before its due date.</p>
</div>
</li>
<!-- CASE: is saved -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status is--updated">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Saved</span>
</span>
</header>
<div class="step__instruction">
<p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">January 24, 2014</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="step__content">
<form id="response__submission" class="response__submission" method="post">
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
</li>
</ol>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
</li>
</ul>
</form>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
</li>
</ul>
</div>
</li>
<!-- CASE: is saved and due date has passed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Incomplete</span>
</span>
</header>
<div class="step__instruction">
<p>While you saved some progress (shown below), you did not complete this portion of the problem before its due date.</p>
</div>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Saved, But Not Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Submitted</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted and due date has passed -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Submitted</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is submitted and being graded by/awaiting peers -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__label">Your Response</span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">Submitted &amp; Being Graded</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
</div>
</li>
<!-- CASE: is graded -->
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Graded</span>
</span>
</header>
<div class="step__content">
<!-- user's response -->
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content">
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
<!-- peer evaluations -->
<article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions">
<!-- individual question from rubric -->
<li class="question question--001 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">How well did this response answer the overall question?</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-evaluation--001" id="question--001__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-evaluation--002" id="question--001__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--003" id="question--001__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--004" id="question--001__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--005" id="question--001__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- individual question from rubric -->
<li class="question question--002 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">How well did this response answer the overall question?</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-evaluation--001" id="question--002__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-evaluation--002" id="question--002__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--003" id="question--002__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--004" id="question--002__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--005" id="question--002__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- individual question from rubric -->
<li class="question question--003 ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">How well did this response answer the overall question?</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-evaluation--001" id="question--003__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 1</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</p>
</span>
</li>
<li class="answer peer-evaluation--002" id="question--003__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 2</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--003" id="question--003__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 3</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--004" id="question--003__answer-004">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 4</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
<li class="answer peer-evaluation--005" id="question--003__answer-005">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 5</span>
</span>
<span class="answer__value">
<span class="label sr">Evaluator's Assessment: </span>
<span class="value">Very Well</span>
</span>
</h5>
<span class="answer__content">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</span>
</li>
</ul>
</li>
<!-- general feedback question -->
<li class="question question--004 question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">How well did this response answer the overall question?</h4>
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-evaluation--001" id="question--004__answer-001">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 1</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Evaluator's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
<li class="answer peer-evaluation--002" id="question--004__answer-002">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 2</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Evaluator's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
<li class="answer peer-evaluation--003" id="question--004__answer-003">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Evaluator: </span>
<span class="value">Peer 3</span>
</span>
</h5>
<div class="answer__value">
<h6 class="label sr">Evaluator's Assessment: </h6>
<div class="value">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
</li>
</ul>
</li>
</ol>
</article>
<!-- peer evaluation feedback -->
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
</li>
</ol>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</form>
</div>
</li>
<!-- TEMPLATE: self evaluation -->
<!-- NOTES:
* class of is--unavailable is added when step is not available
-->
<!-- CASE: default/not started -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
</span>
</header>
<div class="step--content">
<article class="self-evaluation" id="self-evaluation">
<header class="self-evaluation__header">
<h3 class="self-evaluation__title">Your Submitted Response</h3>
</header>
<!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-evaluation__response">
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<form id="self-evaluation__evaluation" class="self-evaluation__evaluation" method="post">
<fieldset class="evaluation__fields">
<legend class="evaluation__instruction">Please provide your thoughts on the following (note: required questions are indicated by an asterisk *):</legend>
<ol class="list list--fields evaluation__rubric">
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--001">
<h4 class="question__title">
How well did this response answer the overall question?
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--01" class="answer__value" value="answer--001__option--01 - Very Well" />
<label for="evaluation__rubric__question--001__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--02" class="answer__value" value="evaluation__rubric__question--001__option--02 - Well" />
<label for="evaluation__rubric__question--001__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--001" id="evaluation__rubric__question--001__option--03" class="answer__value" value="evaluation__rubric__question--001__option--03 - Average" />
<label for="evaluation__rubric__question--001__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--04" class="answer__value" value="evaluation__rubric__question--001__option--04 - Not Well" />
<label for="evaluation__rubric__question--001_option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--001" id="evaluation__rubric__question--001__option--05" class="answer__value" value="evaluation__rubric__question--001__option--05 - Not at All" />
<label for="evaluation__rubric__question--001__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--002">
<h4 class="question__title">
Please describe the quality of the grammar in this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--01" class="answer__value" value="evaluation__rubric__question--002__option--01 - Very Well" />
<label for="evaluation__rubric__question--002__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--002" id="answer--002__option--02" class="answer__value" value="answer--002__option--02 - Well" />
<label for="evaluation__rubric__question--002__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--03" class="answer__value" value="evaluation__rubric__question--002__option--03 - Average" />
<label for="evaluation__rubric__question--002__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--04" class="answer__value" value="evaluation__rubric__question--002__option--04 - Not Well" />
<label for="evaluation__rubric__question--002__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--002" id="evaluation__rubric__question--002__option--05" class="answer__value" value="evaluation__rubric__question--002__option--05 - Not at All" />
<label for="evaluation__rubric__question--002__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required evaluation__rubric__question" id="evaluation__rubric__question--003">
<h4 class="question__title">
Please rate the organization of this response
<span class="label--required">* <span class="sr">(Required)</span></span>
</h4>
<ul class="question__answers">
<li class="question__answers__answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--01" class="answer__value" value="evaluation__rubric__question--003__option--01 - Very Well" />
<label for="evaluation__rubric__question--003__option--01" class="answer__label">Very Well</label>
</div>
<span class="answer__tip">The response shows understanding of the main topics, provides clear trains of thought with supporting details/examples.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="answer--003" id="evaluation__rubric__question--003__option--02" class="answer__value" value="evaluation__rubric__question--003__option--02 - Well" />
<label for="evaluation__rubric__question--003__option--02" class="answer__label">Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003__answer" id="evaluation__rubric__question--003__option--03" class="answer__value" value="evaluation__rubric__question--003__option--03 - Average" />
<label for="evaluation__rubric__question--003__option--03" class="answer__label">Average</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--04" class="answer__value" value="evaluation__rubric__question--003__option--04 - Not Well" />
<label for="evaluation__rubric__question--003__option--04" class="answer__label">Not Well</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
<li class="answer">
<div class="wrapper--input">
<input type="radio" name="evaluation__rubric__question--003" id="evaluation__rubric__question--003__option--05" class="answer__value" value="evaluation__rubric__question--003__option--05 - Not at All" />
<label for="evaluation__rubric__question--003__option--05" class="answer__label">Not at All</label>
</div>
<span class="answer__tip">Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</span>
</li>
</ul>
</li>
<!-- individual rubric question (text) -->
<li class="field field--textarea evaluation__rubric__question" id="evaluation__rubric__question--004">
<label for="evaluation__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="evaluation__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li>
</ol>
</fieldset>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-evaluation__evaluation__submit" class="action action--submit">Submit your self evaluation</button>
</li>
</ul>
</form>
</article>
</div>
</li>
<!-- CASE: not started and problem closed -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
</span>
</header>
<!-- TO-DO: static self evaluation (if present) -->
</li>
<!-- CASE: complete -->
<li id="openassessment__self-evaluation" class="openassessment__steps__step step--self-evaluation ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status">
<span class="ico"><i class="fa fa-check"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Complete</span>
</span>
</header>
<!-- ?: should this view be rolled into the general peer evaluation output and not separated out? -->
</li>
...@@ -47,11 +47,11 @@ RUBRIC_CONFIG = """ ...@@ -47,11 +47,11 @@ RUBRIC_CONFIG = """
</criterion> </criterion>
</rubric> </rubric>
<evals> <evals>
<peereval start="2014-12-20T19:00-7:00" <peer-evaluation start="2014-12-20T19:00-7:00"
due="2014-12-21T22:22-7:00" due="2014-12-21T22:22-7:00"
must_grade="5" must_grade="5"
must_be_graded_by="3" /> must_be_graded_by="3" />
<selfeval/> <self-evaluation/>
</evals> </evals>
</openassessment> </openassessment>
""" """
......
...@@ -116,6 +116,8 @@ ROOT_URLCONF = 'urls' ...@@ -116,6 +116,8 @@ ROOT_URLCONF = 'urls'
TEMPLATE_DIRS = ( TEMPLATE_DIRS = (
"apps/submissions/templates", "apps/submissions/templates",
"apps/openassessment/peer/templates",
"apps/openassessment/xblock",
) )
INSTALLED_APPS = ( INSTALLED_APPS = (
......
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