Skip to content

E
edx-ora2
Commit 16c6fcf7 by Brian Talbot
Options

Merge pull request #49 from edx/talbs/styling-problem 

Basic + Problem View Template/Styling Work
parents ac8e41f0 6d631658
Showing with 1126 additions and 482 deletions
apps/openassessment/peer/api.py
...@@ -196,7 +196,7 @@ def _score_if_finished(student_item, ...@@ -196,7 +196,7 @@ def _score_if_finished(student_item,
return return
finished_evaluating = has_finished_required_evaluating( finished_evaluating = has_finished_required_evaluating(
student_item.student_id, StudentItemSerializer(student_item).data,
required_assessments_for_student required_assessments_for_student
) )
assessments = Assessment.objects.filter(submission=submission) assessments = Assessment.objects.filter(submission=submission)
...@@ -255,23 +255,26 @@ def get_assessment_median_scores(submission_id, must_be_graded_by): ...@@ -255,23 +255,26 @@ def get_assessment_median_scores(submission_id, must_be_graded_by):
raise PeerAssessmentInternalError(error_message) raise PeerAssessmentInternalError(error_message)
def has_finished_required_evaluating(student_id, required_assessments): def has_finished_required_evaluating(student_item_dict, required_assessments):
"""Check if a student still needs to evaluate more submissions """Check if a student still needs to evaluate more submissions
Per the contract of the peer assessment workflow, a student must evaluate a Per the contract of the peer assessment workflow, a student must evaluate a
number of peers before receiving feedback on their submission. number of peers before receiving feedback on their submission.
Args: Args:
student_id (str): The student in the peer grading workflow to check for student_item (dict): The student id is required to determine if the
peer workflow criteria. This argument is required. student has completed enough assessments, relative to the item id
and course id available in the student item. This argument is
required.
required_assessments (int): The number of assessments a student has to required_assessments (int): The number of assessments a student has to
submit before receiving the feedback on their submission. This is a submit before receiving the feedback on their submission. This is a
required argument. required argument.
Returns: Returns:
bool: True if the student has evaluated enough peer submissions to move tuple: True if the student has evaluated enough peer submissions to move
through the peer assessment workflow. False if the student needs to through the peer assessment workflow. False if the student needs to
evaluate more peer submissions. evaluate more peer submissions. The second value is the count of
assessments completed.
Raises: Raises:
PeerAssessmentRequestError: Raised when the student_id is invalid, or PeerAssessmentRequestError: Raised when the student_id is invalid, or
...@@ -280,16 +283,31 @@ def has_finished_required_evaluating(student_id, required_assessments): ...@@ -280,16 +283,31 @@ def has_finished_required_evaluating(student_id, required_assessments):
while evaluating this workflow rule. while evaluating this workflow rule.
Examples: Examples:
>>> has_finished_required_evaluating("Tim", 3) >>> student_item_dict = dict(
True >>> item_id="item_1",
>>> course_id="course_1",
>>> item_type="type_one",
>>> student_id="Bob",
>>> )
>>> has_finished_required_evaluating(student_item_dict, 3)
True, 3
""" """
if required_assessments < 0: if required_assessments < 0:
raise PeerAssessmentRequestError( raise PeerAssessmentRequestError(
"Required Assessment count must be a positive integer.") "Required Assessment count must be a positive integer.")
return Assessment.objects.filter( student_items = StudentItem.objects.filter(
scorer_id=student_id item_id=student_item_dict["item_id"],
).count() >= required_assessments course_id=student_item_dict["course_id"]
)
submissions = Submission.objects.filter(
student_item__in=student_items
)
count = Assessment.objects.filter(
submission__in=submissions,
scorer_id=student_item_dict["student_id"]
).count()
return count >= required_assessments, count
def get_assessments(submission_id): def get_assessments(submission_id):
......
apps/openassessment/peer/test/test_api.py
...@@ -166,27 +166,27 @@ class TestApi(TestCase): ...@@ -166,27 +166,27 @@ class TestApi(TestCase):
scores = sub_api.get_score(STUDENT_ITEM) scores = sub_api.get_score(STUDENT_ITEM)
self.assertFalse(scores) self.assertFalse(scores)
self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED)) self.assertEquals((False, 0), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
peer_api.create_assessment( peer_api.create_assessment(
bob["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT bob["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
) )
peer_api.create_assessment( peer_api.create_assessment(
sally["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT sally["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
) )
self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED)) self.assertEquals((False, 2), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
peer_api.create_assessment( peer_api.create_assessment(
jim["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT jim["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
) )
self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED)) self.assertEquals((False, 3), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
peer_api.create_assessment( peer_api.create_assessment(
buffy["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT buffy["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
) )
self.assertFalse(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED)) self.assertEquals((False, 4), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
peer_api.create_assessment( peer_api.create_assessment(
xander["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT xander["uuid"], "Tim", REQUIRED_GRADED, REQUIRED_GRADED_BY, ASSESSMENT_DICT, RUBRIC_DICT
) )
self.assertTrue(peer_api.has_finished_required_evaluating("Tim", REQUIRED_GRADED)) self.assertEquals((True, 5), peer_api.has_finished_required_evaluating(STUDENT_ITEM, REQUIRED_GRADED))
# Tim should not have a score, because his submission does not have # Tim should not have a score, because his submission does not have
# enough assessments. # enough assessments.
...@@ -212,7 +212,7 @@ class TestApi(TestCase): ...@@ -212,7 +212,7 @@ class TestApi(TestCase):
@raises(peer_api.PeerAssessmentRequestError) @raises(peer_api.PeerAssessmentRequestError)
def test_bad_configuration(self): def test_bad_configuration(self):
peer_api.has_finished_required_evaluating("Tim", -1) peer_api.has_finished_required_evaluating(STUDENT_ITEM, -1)
def test_get_submission_to_evaluate(self): def test_get_submission_to_evaluate(self):
self._create_student_and_submission("Tim", "Tim's answer", MONDAY) self._create_student_and_submission("Tim", "Tim's answer", MONDAY)
......
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -10,71 +10,66 @@ ...@@ -10,71 +10,66 @@
--> -->
<div class="wrapper wrapper--openassessment theme--basic"> <div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<div class="wrapper--grid">
<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 assessment in rubric_assessments %}
+
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.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">
{% for assessment in rubric_assessments %}
<li class="list--nav__item">
<a class="action" href="#openassessment__{{ assessment.type }}">{{ assessment.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>
<h1 class="openassessment__title"> <!-- STATUS: system messages -->
<span class="openassessment__title--super"> <!-- SEE t-messages.html for all cases -->
{{ title }}
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for assessment in rubric_assessments %}
+
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.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">
{% for assessment in rubric_assessments %}
<li class="list--nav__item">
<a class="action" href="#openassessment__{{ assessment.type }}">{{ assessment.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> <!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<div class="openassessment__prompt__copy ui-toggle-visibility__content"> <h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<p>{{ question }}</p>
</div>
<ul class="list list--controls"> <div class="openassessment__prompt__copy ui-toggle-visibility__content">
<li class="list--controls__item"> <p>{{ question }}</p>
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a> </div>
</li> </article>
</ul> </div>
</article>
</div>
<!-- steps --> <!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps"> <ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response --> <!-- STEP: response -->
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li> <li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %} {% endfor %}
</ol> </ol>
<!-- STATUS: problem grade --> <!-- STATUS: problem grade -->
{% include "openassessmentblock/oa_grade.html" %} {% include "openassessmentblock/oa_grade.html" %}
</div>
</div> </div>
</div> </div>
apps/openassessment/templates/openassessmentblock/oa_grade.html
...@@ -18,6 +18,6 @@ ...@@ -18,6 +18,6 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">{{ grade_state.value }}</span> <span class="grade__value">{{ grade_state.value }}</span>
<p>{{ grade_state.message }}</p> <p class="grade__description">{{ grade_state.message }}</p>
</div> </div>
</div> </div>
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html 0 → 100644
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: started, but incomplete and problem closed -->
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html 0 → 100644
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: completed -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html 0 → 100644
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
<!-- CASE: no peer responses to assess -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<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="copy">Awaiting Peer Responses</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/oa_response.html → apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -16,21 +16,28 @@ ...@@ -16,21 +16,28 @@
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block header %}
<!--header class="step__header ui-toggle-visibility__control"--> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
{% if formatted_due_datetime %} <span class="wrapper--copy">
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span> <span class="step__label">Your Response</span>
{% endif %} {% if formatted_due_datetime %}
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
{% endif %}
</span>
</h2> </h2>
<span class="step__status"> {% block title %}
<span class="step__status__label">This step's status:</span> <span class="step__status">
<span class="step__status__value">{{ step_status }}</span> <span class="step__status__label">This step's status:</span>
</span> <span class="step__status__value">
<!--/header--> <i class="ico fa fa-check"></i>
{% endblock %} <span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
</header>
{% block body %} {% block body %}
<div class="step__instruction"> <div class="step__instruction">
...@@ -39,14 +46,14 @@ ...@@ -39,14 +46,14 @@
<div class="step__content"> <div class="step__content">
<form id="response__submission" class="response__submission"> <form id="response__submission" class="response__submission">
<ol class="list list--fields"> <ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label> <label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea> <textarea id="submission__answer__value" placeholder=""></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions"> <ul class="list list--actions response__submission__actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button> <button type="submit" id="submission__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> <span class="tip">you may continue to work on your response until you submit</span>
...@@ -58,7 +65,10 @@ ...@@ -58,7 +65,10 @@
<div class="step__actions"> <div class="step__actions">
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a> <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li> </li>
</ul> </ul>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html 0 → 100644
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="step__instruction">
<p>You did not complete this portion of the problem before its due date.</p>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/oa_response_closed.html → apps/openassessment/templates/openassessmentblock/response/oa_response_collapsed.html
{% extends "openassessmentblock/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="step__instruction"> {% endblock %}
<p>You did not complete this portion of the problem before its due date.</p>
</div>
{% endblock %}
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/oa_response_graded.html → apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="step__content"> <div class="step__content">
<!-- user's response --> <!-- user's response -->
<article class="submission__answer__display"> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content"> <div class="submission__answer__display__content">
{{ student_submission.answer }} {{ student_submission.answer }}
</div> </div>
</article> </article>
<!-- peer evaluations --> <!-- peer evaluations -->
<article class="submission__peer-evaluations"> <article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3> <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions"> <ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %} {% for criterion in rubric_criteria %}
<!-- individual question from rubric --> {% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility"> <!-- individual question from rubric -->
<h4 class="question__title ui-toggle-visibility__control"> <li class="question question--{{ criterion_num }} ui-toggle-visibility">
<span class="title__copy">{{ criterion.name }}</span> <h4 class="question__title ui-toggle-visibility__control">
<span class="question__score"> <span class="question__title__copy">{{ criterion.name }}</span>
<span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span> <span class="question__score">
<span class="label label--divider sr">out of</span> <span class="label sr">Overall Question Score</span>
<span class="question__score__potential">{{ criterion.total_value }}</span> <span class="question__score__value">{{ criterion.median_score }}</span>
</span> <span class="label label--divider sr">out of</span>
</h4> <span class="question__score__potential">
{% for assessment in peer_assessments %} {{ criterion.total_value }}
{% with peer_num=forloop.counter %} <span class="unit">Points</span>
{% for part in assessment.parts %} </span>
{% if part.option.criterion.name == criterion.name %}
<ul class="question__answers ui-toggle-visibility__content">
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span> </span>
</h5> </h4>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<span class="answer__content"> <span class="answer__content">
{{ part.option.explanation }} {{ part.option.explanation }}
</span> </span>
</li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li> </li>
</ul> {% endwith %}
{% endif %} {% endfor %}
{% endfor %} </ol>
{% endwith %} </article>
{% endfor %}
</li>
{% endwith %}
{% endfor %}
</ol>
</article>
<!-- peer assessment feedback --> <!-- peer assessment feedback -->
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post"> <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> <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"> <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks"> <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> <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea> <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions"> <ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button> <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/oa_response_submitted.html → apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
{% extends "openassessmentblock/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="step__content"> <div class="step__content">
<!-- user's response --> <!-- user's response -->
...@@ -13,4 +25,4 @@ ...@@ -13,4 +25,4 @@
</div> </div>
</article> </article>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/oa_self_assessment.html → apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -11,73 +11,87 @@ ...@@ -11,73 +11,87 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
{# <header class="step__header">#} {% endblock %}
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__counter"></span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Evaluate Your Response</span>
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
</span>
</h2> </h2>
<span class="step__status"> {% block title %}
<span class="step__status__label">This step's status:</span> <span class="step__status">
<span class="step_status_value">Incomplete</span> <span class="step__status__label">This step's status:</span>
</span> <span class="step__status__value">
{# </header>#} <span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
</header>
<div class="step--content"> {% block body %}
<div class="step__content">
<article class="self-assessment" id="self-assessment"> <article class="self-assessment" id="self-assessment">
<header class="self-assessment__header"> <header class="self-assessment__header">
<h3 class="self-assessment__title">Your Submitted Response</h3> <h3 class="self-assessment__title">Your Submitted Response</h3>
</header> </header>
<!-- ?: markup validating/copy cleaning upon submission --> <!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__response"> <div class="self-assessment__response">
{{ self_submission.answer }} {{ self_submission.answer }}
</div> </div>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post"> <form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
<fieldset class="assessment__fields"> <fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend> <legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<ol class="list list--fields assessment__rubric"> <ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) --> <!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}"> <li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title"> <h4 class="question__title">
{{ criterion.instructions }} {{ criterion.prompt }}
<span class="label--required">* <span class="sr">(Required)</span></span> <span class="label--required">* <span class="sr">(Required)</span></span>
</h4> </h4>
<ol class="question__answers"> <ol class="question__answers">
{% for value, text in criterion.options %} {% for option in criterion.options %}
<li class="answer"> <li class="answer">
<div class="wrapper--input"> <div class="wrapper--input">
<input type="radio" name="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}--01" class="answer__value" value="answer--001__option--01 - Very Well" /> <input type="radio"
<label for="assessment__rubric__question--001__option--01" class="answer__label">({{ value }}) {{ text }}</label> name="{{ criterion.name }}"
</div> id="assessment__rubric__question--{{ criterion.name }}"
<span class="answer__tip">TODO: Criterion Instructions</span> class="answer__value"
</li> value="{{ option.name }}" />
{% endfor %} <label for="assessment__rubric__question--001__option--01"
</ol> class="answer__label">{{ option.name }}</label>
</li> </div>
{% endfor %} <span class="answer__tip">{{ option.explanation }}</span>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
<!-- individual rubric question (text) --> <!-- individual rubric question (text) -->
<li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004"> <li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
<label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label> <label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea> <textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button> <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
</li> </li>
</ul> </ul>
</form> </form>
</article> </article>
</li>
</ul>
</div> </div>
{% endblock %}
</li> </li>
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment_collapsed.html 0 → 100644
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
{% endblock %}
{% block body %}
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html 0 → 100644
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
<!-- CASE: not started and problem closed -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html 0 → 100644
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
<!-- CASE: complete -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span>
</span>
</span>
{% endblock %}
{% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/t-base.html
...@@ -10,90 +10,92 @@ ...@@ -10,90 +10,92 @@
--> -->
<div class="wrapper wrapper--openassessment theme--basic"> <div class="wrapper wrapper--openassessment wrapper--xblock theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<h1 class="openassessment__title"> <div class="wrapper--grid">
<span class="openassessment__title--super"> <h1 class="openassessment__title">
Assignment Number 1 - Censorship in Libraries <span class="openassessment__title--super">
</span> Assignment Number 1 - Censorship in Libraries
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span> <span class="openassessment__title--sub">
+ <span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
<span class="problem-type problem-type--peer-assessment">Peer</span> +
+ <span class="problem-type problem-type--peer-assessment">Peer</span>
<span class="problem-type problem-type--self-assessment">Self Assessment</span> +
</span> <span class="problem-type problem-type--self-assessment">Self Assessment</span>
</h1> </span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents"> <!--?: may have trouble with aync -->
<h2 class="title">Skip to a part of this problem:</h2> <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"> <ol class="list list--nav">
<a class="action" href="#openassessment__response">Your response to this problem</a> <li class="list--nav__item">
</li> <a class="action" href="#openassessment__response">Your response to this problem</a>
<li class="list--nav__item"> </li>
<a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a> <li class="list--nav__item">
</li> <a class="action" href="#openassessment__peer-assessment">Your assessment(s) of peer responses</a>
<li class="list--nav__item"> </li>
<a class="action" href="#openassessment__self-assessment">Your assessment of your response</a> <li class="list--nav__item">
</li> <a class="action" href="#openassessment__self-assessment">Your assessment of your response</a>
<li class="list--nav__item"> </li>
<a class="action" href="#openassessment__grade">Your grade for this problem</a> <li class="list--nav__item">
</li> <a class="action" href="#openassessment__grade">Your grade for this problem</a>
</ol> </li>
</nav> </ol>
</nav>
<!-- STATUS: system messages --> <!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases --> <!-- SEE t-messages.html for all cases -->
<!-- question --> <!-- question -->
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2> <h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content"> <div class="openassessment__prompt__copy ui-toggle-visibility__content">
<blockquote> <blockquote>
<p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p> <p>All of us can think of a book that we hope none of our children or any other children have taken off the shelf. But if I have the right to remove that book from the shelf -- that work I abhor -- then you also have exactly the same right and so does everyone else. And then we have no books left on the shelf for any of us.</p>
<footer> <footer>
&mdash; <cite><a href="">Katherine Paterson, Author</a></cite> &mdash; <cite><a href="">Katherine Paterson, Author</a></cite>
</footer> </footer>
</blockquote> </blockquote>
<p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p> <p>Write a persuasive essay to a newspaper reflecting your vies on censorship in libraries. Do you believe that certain materials, such as books, music, movies, magazines, etc., should be removed from the shelves if they are found offensive? Support your position with convincing arguments from your own experience, observations, and/or reading.</p>
</div> </div>
<ul class="list list--controls"> <ul class="list list--controls">
<li class="list--controls__item"> <li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a> <a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li> </li>
</ul> </ul>
</article> </article>
</div> </div>
<!-- steps --> <!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps"> <ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response --> <!-- STEP: response -->
<!-- SEE t-response.html for all cases --> <!-- SEE t-response.html for all cases -->
<!-- ==== --> <!-- ==== -->
<!-- STEP: peer assessment --> <!-- STEP: peer assessment -->
<!-- SEE t-peer-assessment.html for all cases --> <!-- SEE t-peer-assessment.html for all cases -->
<!-- ==== --> <!-- ==== -->
<!-- STEP: self assessment --> <!-- STEP: self assessment -->
<!-- SEE t-self-assessment.html for all cases --> <!-- SEE t-self-assessment.html for all cases -->
</ol> </ol>
<!-- STATUS: problem grade --> <!-- STATUS: problem grade -->
<!-- SEE t-grade.html for all cases --> <!-- SEE t-grade.html for all cases -->
</div>
</div> </div>
</div> </div>
apps/openassessment/templates/openassessmentblock/t-grade.html
...@@ -85,12 +85,4 @@ ...@@ -85,12 +85,4 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span> <span class="grade__value">4.00</span> out of <span class="grade__potential">5.00</span>
</div> </div>
<div class="grade__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a class="action action--view">View in Courseware</a>
</li>
</ul>
</div>
</div> </div>
apps/openassessment/templates/openassessmentblock/t-peer-assessment.html
...@@ -11,11 +11,14 @@ ...@@ -11,11 +11,14 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Assess Peers' Responses</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -236,11 +239,14 @@ ...@@ -236,11 +239,14 @@
<!-- CASE: started, but incomplete --> <!-- CASE: started, but incomplete -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Assess Peers' Responses</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -461,11 +467,14 @@ ...@@ -461,11 +467,14 @@
<!-- CASE: started, but incomplete and problem closed --> <!-- CASE: started, but incomplete and problem closed -->
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Assess Peers' Responses</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -481,11 +490,14 @@ ...@@ -481,11 +490,14 @@
<!-- CASE: no peer responses to assess --> <!-- CASE: no peer responses to assess -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Assess Peers' Responses</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -500,11 +512,14 @@ ...@@ -500,11 +512,14 @@
<!-- CASE: completed --> <!-- CASE: completed -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed">
<header class="step__header"> <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Assess Peers' Responses</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__label">Assess Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-response.html
...@@ -13,11 +13,14 @@ ...@@ -13,11 +13,14 @@
<!-- CASE: default/unanswered --> <!-- CASE: default/unanswered -->
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -62,8 +65,11 @@ ...@@ -62,8 +65,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--unavailable ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -82,8 +88,11 @@ ...@@ -82,8 +88,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--saved ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status is--updated"> <span class="step__status is--updated">
...@@ -128,8 +137,11 @@ ...@@ -128,8 +137,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--saved is--unavailable ui-toggle-visibility"> <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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -164,8 +176,11 @@ ...@@ -164,8 +176,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -196,8 +211,11 @@ ...@@ -196,8 +211,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted is--unavailable ui-toggle-visibility"> <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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -228,8 +246,11 @@ ...@@ -228,8 +246,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted awaiting--peer-responses ui-toggle-visibility"> <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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
<span class="step__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -260,8 +281,11 @@ ...@@ -260,8 +281,11 @@
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded is--collapsed ui-toggle-visibility"> <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"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Your Response</span> <span class="step__counter"></span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Your Response</span>
<span class="step__title__deadline">due <span class="date">January 24, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/templates/openassessmentblock/t-self-assessment.html
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Assess Your Response</span> <span class="step__counter"></span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -212,11 +215,14 @@ ...@@ -212,11 +215,14 @@
</li> </li>
<!-- CASE: not started and problem closed --> <!-- CASE: not started and problem closed -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--unavailable ui-toggle-visibility is--collapsed">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Assess Your Response</span> <span class="step__counter"></span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
...@@ -230,11 +236,14 @@ ...@@ -230,11 +236,14 @@
</li> </li>
<!-- CASE: complete --> <!-- CASE: complete -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed">
<header class="step__header ui-toggle-visibility__control"> <header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Assess Your Response</span> <span class="step__counter"></span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span> <span class="wrapper--copy">
<span class="step__title__label">Assess Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/xblock/peer_assessment_mixin.py
...@@ -67,14 +67,44 @@ class PeerAssessmentMixin(object): ...@@ -67,14 +67,44 @@ class PeerAssessmentMixin(object):
more information on rendering XBlock sections. more information on rendering XBlock sections.
""" """
context_dict = {
"rubric_criteria": self.rubric_criteria,
"estimated_time": "20 minutes" # TODO: Need to configure this.
}
path = 'openassessmentblock/peer/oa_peer_waiting.html'
assessment = self.get_assessment_module('peer-assessment') assessment = self.get_assessment_module('peer-assessment')
if assessment: if assessment:
peer_sub = self.get_peer_submission(self.get_student_item_dict(), assessment)
context_dict = { context_dict["must_grade"] = assessment["must_grade"]
"peer_submission": peer_sub,
"rubric_criteria": self.rubric_criteria student_item = self.get_student_item_dict()
}
return self.render_assessment('openassessmentblock/oa_peer_assessment.html', context_dict)
finished, count = peer_api.has_finished_required_evaluating(
student_item,
assessment["must_grade"]
)
context_dict["graded"] = count
if finished:
path = "openassessmentblock/peer/oa_peer_complete.html"
else:
peer_sub = self.get_peer_submission(student_item, assessment)
if peer_sub:
path = 'openassessmentblock/peer/oa_peer_assessment.html'
context_dict["peer_submission"] = peer_sub
if assessment["must_grade"] - count == 1:
context_dict["submit_button_text"] = "Submit your assessment & move onto next step."
else:
context_dict["submit_button_text"] = "Submit your assessment & move to response #{}".format(count + 1)
problem_open, date = self.is_open()
if not problem_open and date == "due" and not finished:
path = 'openassessmentblock/peer/oa_peer_closed.html'
return self.render_assessment(path, context_dict)
def get_peer_submission(self, student_item_dict, assessment): def get_peer_submission(self, student_item_dict, assessment):
peer_submission = False peer_submission = False
......
apps/openassessment/xblock/self_assessment_mixin.py
...@@ -16,5 +16,5 @@ class SelfAssessmentMixin(object): ...@@ -16,5 +16,5 @@ class SelfAssessmentMixin(object):
@XBlock.handler @XBlock.handler
def render_self_assessment(self, data, suffix=''): def render_self_assessment(self, data, suffix=''):
return self.render_assessment('openassessmentblock/oa_self_assessment.html') return self.render_assessment('openassessmentblock/self/oa_self_assessment.html')
apps/openassessment/xblock/static/fonts/libs/font-awesome/fontawesome-webfont.svg 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/js/design.js 0 → 100644
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) {
window.open($(e.target).attr('href'));
e.preventDefault();
}
// --------------------
jQuery(document).ready(function($) {
// removing no-js, accessibility/modernizr marker
$('html').removeClass('no-js');
// general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow);
});
apps/openassessment/xblock/static/js/design.min.js 0 → 100644
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){window.open($(e.target).attr("href"));e.preventDefault()}jQuery(document).ready(function(e){e("html").removeClass("no-js");e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
apps/openassessment/xblock/static/js/src/oa_base.js
...@@ -8,6 +8,18 @@ function OpenAssessmentBlock(runtime, element) { ...@@ -8,6 +8,18 @@ function OpenAssessmentBlock(runtime, element) {
/* Sample Debug Console: http://localhost:8000/submissions/Joe_Bloggs/TestCourse/u_3 */ /* Sample Debug Console: http://localhost:8000/submissions/Joe_Bloggs/TestCourse/u_3 */
/* /*
* Utility functions
*/
function collapse(element) {
element.addClass("is--collapsed");
}
function expand(element) {
element.addClass("is--collapsed");
}
/*
* Submission Functions * Submission Functions
*/ */
function render_submissions(data) { function render_submissions(data) {
...@@ -29,9 +41,9 @@ function OpenAssessmentBlock(runtime, element) { ...@@ -29,9 +41,9 @@ function OpenAssessmentBlock(runtime, element) {
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: renderSubmissionUrl, url: renderSubmissionUrl,
dataType: "html",
success: function(data) { success: function(data) {
render_submissions(data); render_submissions(data);
collapse($('#openassessment__response', element));
} }
}); });
} }
...@@ -54,7 +66,7 @@ function OpenAssessmentBlock(runtime, element) { ...@@ -54,7 +66,7 @@ function OpenAssessmentBlock(runtime, element) {
criteriaChoices[selector[i].name] = selector[i].value criteriaChoices[selector[i].name] = selector[i].value
} }
return { return {
"submission_uuid":$("div#peer_submission_uuid")[0].innerText, "submission_uuid":$("span#peer_submission_uuid")[0].innerText,
"points_earned":values, "points_earned":values,
"options_selected":criteriaChoices "options_selected":criteriaChoices
}; };
...@@ -99,6 +111,26 @@ function OpenAssessmentBlock(runtime, element) { ...@@ -99,6 +111,26 @@ function OpenAssessmentBlock(runtime, element) {
render_submissions(data); render_submissions(data);
} }
}); });
$.ajax({
type: "POST",
url: renderPeerUrl,
success: function(data) {
$('#openassessment__peer-assessment', element).replaceWith(data);
collapse($('#openassessment__peer-assessment', element));
}
});
$.ajax({
type: "POST",
url: renderSelfUrl,
success: function(data) {
$('#openassessment__self-assessment', element).replaceWith(data);
collapse($('#openassessment__self-assessment', element));
}
});
}); });
} }
/* END Javascript for OpenAssessmentXBlock. */ /* END Javascript for OpenAssessmentXBlock. */
apps/openassessment/xblock/static/sass/oa/contexts/_ie.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// ==================== // ====================
// NOTES: // NOTES:
// * any openassessment-specific suport-based styling needed for internet explorer should be placed here // * any openassessment-specific support-based styling needed for internet explorer should be placed here
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -11,3 +11,79 @@ ...@@ -11,3 +11,79 @@
// background: transparent; // background: transparent;
// } // }
// --------------------
// Views: Counterbalancing XBlock workbench styling
// --------------------
.workbench .vertical {
border: none;
}
// --------------------
// Views: Static HTML Page Display
// --------------------
.view--placeholder {
background: $bg-view;
margin: ($baseline-v*2) $baseline-h;
}
.wrapper--xblock {
// typography tests
.h1 {
@extend %hd-alpha;
}
.h2 {
@extend %hd-bravo;
}
.h3 {
@extend %hd-charlie;
}
.h4 {
@extend %hd-delta;
}
.h5 {
@extend %hd-epsilon;
}
.h6 {
@extend %hd-foxtrot;
}
.h7 {
@extend %hd-golf;
}
.h8 {
@extend %hd-hotel;
}
.copy-1 {
@extend %copy-alpha;
}
.copy-2 {
@extend %copy-bravo;
}
.copy-3 {
@extend %copy-charlie;
}
.copy-4 {
@extend %copy-delta;
}
.copy-5 {
@extend %copy-epsilon;
}
.copy-6 {
@extend %copy-foxtrot;
}
}
// temp
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
...@@ -3,3 +3,29 @@ ...@@ -3,3 +3,29 @@
// NOTES: // NOTES:
// * these are openassessment-specific variable files // * these are openassessment-specific variable files
// --------------------
// layout (neat-based) - forced breakpoints/sizing
// --------------------
$grid-size-s: 530px; // small
$grid-size-m: 760px; // medium
$grid-size-l: 925px; // large
$grid-size-x: 1300px; // extra large
$grid-size-f: 1600px; // full size
// --------------------
// layout (neat-based) - mediaqueries
// --------------------
$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns
$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6); // small displays - make grid 6 columns
$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns
$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns
// --------------------
// // application - colors: states
// --------------------
$color-incomplete: yellow;
$color-complete: rgb(96, 188, 97);
$color-error: red;
apps/openassessment/xblock/static/sass/openassessment.scss
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
@import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions @import 'xb/elements/typography'; // font sizes/scale and applied/canned definitions
@import 'xb/elements/controls'; // buttons, link styles, sliders, etc. @import 'xb/elements/controls'; // buttons, link styles, sliders, etc.
@import 'xb/elements/forms'; // form elements @import 'xb/elements/forms'; // form elements
@import 'xb/elements/layout'; // applied layouts and deliberate class-based breakpoints
// xblock: contextual // xblock: contextual
@import 'xb/contexts/ie'; // Internet Explorer-specific styling @import 'xb/contexts/ie'; // Internet Explorer-specific styling
......
apps/openassessment/xblock/static/sass/themes/edx/_assets.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
// -------------------- // --------------------
// font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans // font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans
// -------------------- // --------------------
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
...@@ -52,50 +52,109 @@ $edx-pink-t1: rgba($edx-pink,0.25); ...@@ -52,50 +52,109 @@ $edx-pink-t1: rgba($edx-pink,0.25);
$edx-pink-t2: rgba($edx-pink,0.50); $edx-pink-t2: rgba($edx-pink,0.50);
$edx-pink-t3: rgba($edx-pink,0.75); $edx-pink-t3: rgba($edx-pink,0.75);
$edx-gray: rgb(164, 165, 168);
$edx-gray-l1: tint($edx-gray,20%);
$edx-gray-l2: tint($edx-gray,40%);
$edx-gray-l3: tint($edx-gray,60%);
$edx-gray-l4: tint($edx-gray,80%);
$edx-gray-l5: tint($edx-gray,90%);
$edx-gray-d1: shade($edx-gray,20%);
$edx-gray-d2: shade($edx-gray,40%);
$edx-gray-d3: shade($edx-gray,60%);
$edx-gray-d4: shade($edx-gray,80%);
$edx-gray-d5: shade($edx-gray,90%);
$edx-gray-s1: saturate($edx-gray,15%);
$edx-gray-s2: saturate($edx-gray,30%);
$edx-gray-s3: saturate($edx-gray,45%);
$edx-gray-u1: desaturate($edx-gray,15%);
$edx-gray-u2: desaturate($edx-gray,30%);
$edx-gray-u3: desaturate($edx-gray,45%);
$edx-gray-t0: rgba($edx-gray,0.125);
$edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);
$edx-lms-header: rgb(100, 100, 100);
$edx-lms-copy: rgb(60, 60, 60);
$edx-lms-action-primary: rgb(29, 157, 217);
$edx-lms-action-secondary: rgb(135, 135, 135);
// -------------------- // --------------------
// variables: overrides // variables: overrides
// -------------------- // --------------------
// application - fonts // fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
// layout - grid
@import "neat/neat-helpers";
$max-width: 100%;
$grid-columns: 12;
$gutter: $baseline-v;
// application - fonts
$f-title: $f-sans-serif;
$f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
// application - colors // application - colors
$color-primary: $edx-blue-d1; $color-primary: $edx-lms-action-primary;
$color-secondary: $edx-blue-l1; $color-secondary: $edx-lms-action-secondary;
$color-tertiary: $gray-l1; $color-tertiary: $gray-l1;
$color-quarternary: $gray-l2; $color-quarternary: $gray-l2;
// application - colors: decorative // application - colors: decorative
$decorative__color-primary: $edx-blue-u1; $color-decorative-primary: $gray-d3;
$decorative__color-secondary: $edx-pink-l2; $color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $edx-lms-header;
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d3; $heading-color: $edx-lms-header;
$heading-primary-color: $black; $heading-primary-color: shade($edx-lms-header, 33%);
$heading-secondary-color: $gray; $heading-secondary-color: tint($edx-lms-header, 33%);
$heading-tertiary-color: $gray-l4; $heading-tertiary-color: tint($edx-lms-header, 66%);
$copy-color: $gray-l2; $copy-color: $edx-lms-copy;
$copy-color-alt: $gray-d1; $copy-color-alt: tint($edx-lms-copy, 33%);
$copy-color-focus: $gray-d4; $copy-color-focus: shade($edx-lms-copy, 33%);
$copy-lead__color: $gray; $copy-lead-color: $edx-lms-copy;
$copy-lead__color: $gray-d1; $copy-lead-color-focus: shade($edx-lms-copy, 33%);
$copy-lead__color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2; $copy-supplemental-color: tint($edx-lms-copy, 33%);
$copy-supplemental-color-alt: $gray-l2; $copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
$copy-supplemental-color-focus: $gray-d1; $copy-supplemental-color-focus: $edx-lms-copy;
// application - colors:states // application - colors:states
$selected-bg: $edx-blue-t1; $selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1; $selected-color: $edx-blue-s1;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
$action-primary-color-focus: saturate($color-primary,25%);
$action-primary-color-active: $color-primary;
$action-primary-color-visited: shade($color-primary,20%);
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: shade($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: shade($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: $gray-l6; $bg-view: transparent;
$bg-header-main: $white; $bg-header-main: $white-t;
$color-header-main: $black; $color-header-main: $black;
$bg-content: $gray-l6; $bg-content: $gray-l6;
...@@ -104,11 +163,6 @@ $color-content: $gray-d1; ...@@ -104,11 +163,6 @@ $color-content: $gray-d1;
$bg-content-main: $gray-l5; $bg-content-main: $gray-l5;
$color-content-main: $gray-d1; $color-content-main: $gray-d1;
// application - colors: view-based elements
$bg-view: $gray-l6;
$bg-content: $white;
// -------------------- // --------------------
// mixins: // mixins:
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
...@@ -8,27 +8,32 @@ ...@@ -8,27 +8,32 @@
// fonts // fonts
// -------------------- // --------------------
.wrapper--xblock { .wrapper--xblock {
@extend %t-copy-base;
overflow-y: scroll;
font-size: 62.5%;
background: $bg-view; background: $bg-view;
} }
// -------------------- // --------------------
// layout // layout
// -------------------- // --------------------
[class^="wrapper-"] { // [class^="wrapper--"] {
@extend %wrapper; // @extend %wrapper;
padding: 0; // padding: 0;
} // }
// --------------------
// semantic elements, but visually hidden
// --------------------
.sr,
hr.divider,
.nav--contents {
@extend %text-sr;
}
// -------------------- // --------------------
// semantic dividers // system-needed elements, but visually hidden
// -------------------- // --------------------
.sr, hr.divider { .system__element {
@extend %ui-text-sr; @extend %text-sr;
} }
...@@ -44,6 +49,6 @@ ...@@ -44,6 +49,6 @@
.nav--wizard, .nav--wizard,
.list--tips, .list--tips,
.field--group { .field--group {
@extend %ui-no-list; @extend %no-list;
@extend %wipe-last-child; @extend %wipe-last-child;
} }
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -79,11 +79,17 @@ ...@@ -79,11 +79,17 @@
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
// CASE: icons in buttons
.copy, .ico {
display: inline-block;
vertical-align: middle;
}
} }
%btn-pill { %btn-pill {
@extend %btn; @extend %btn;
border-radius: $baseline-v/5; border-radius: ($baseline-v/5);
} }
%btn-rounded { %btn-rounded {
...@@ -97,27 +103,29 @@ ...@@ -97,27 +103,29 @@
} }
// buttons - primary // buttons - primary (assuming dark bg/light copy)
%btn--primary { %btn--primary {
@extend %btn-edged; @extend %btn-pill;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color; background: $action-primary-color;
border-color: saturate($action-primary-color, 15%); border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%); color: tint($action-primary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-primary-color-focus; background: $action-primary-color-focus;
border-color: $action-primary-color-focus; border-color: $action-primary-color-focus;
color: tint($action-primary-color, 95%); color: tint($action-primary-color, 99%);
} }
&.current, &.active { &.current, &.active {
background: $action-primary-color-active; background: $action-primary-color-active;
border-color: $action-primary-color-active; border-color: $action-primary-color-active;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
} }
...@@ -129,20 +137,23 @@ ...@@ -129,20 +137,23 @@
} }
// buttons - secondary // buttons - secondary (assuming dark bg/light copy)
%btn--secondary { %btn--secondary {
@extend %btn-edged; @extend %btn-pill;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color; background: $action-secondary-color;
border-color: saturate($action-secondary-color, 15%); border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%); color: tint($action-secondary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-secondary-color-focus; background: $action-secondary-color-focus;
border-color: $action-secondary-color-focus; border-color: $action-secondary-color-focus;
color: tint($action-secondary-color, 95%); color: tint($action-secondary-color, 99%);
} }
&.current, &.active { &.current, &.active {
...@@ -160,20 +171,23 @@ ...@@ -160,20 +171,23 @@
} }
// buttons - tertiary // buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary { %btn--tertiary {
@extend %btn-edged; @extend %btn-edged;
@extend %t-weight3; @extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h); padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color; background: $action-tertiary-color;
border-color: saturate($action-tertiary-color, 15%); border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%); color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background: $action-tertiary-color-focus; background: $action-tertiary-color-focus;
border-color: $action-tertiary-color-focus; border-color: $action-tertiary-color-focus;
color: tint($action-tertiary-color, 95%); color: tint($action-tertiary-color, 99%);
} }
&.current, &.active { &.current, &.active {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -4,3 +4,43 @@ ...@@ -4,3 +4,43 @@
// NOTES: // NOTES:
// * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks // * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks
// contains all form elements inside of the main xblock wrapper
.wrapper--xblock {
// forms - general
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
@extend %t-weight2;
border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie;
font-family: $f-copy;
outline: 0;
@include placeholder {
color: $copy-supplemental-color-alt;
}
&: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: $selected-color;
outline: 0;
}
}
.field {
label, .label {
@extend %copy-delta;
display: block;
margin-bottom: $spacing-charlie;
color: $copy-color;
}
textarea {
width: 100%;
}
}
}
apps/openassessment/xblock/static/sass/xb/elements/_layout.scss 0 → 100644
// xblock: elements - layouts
// ====================
// NOTES:
// * Grid and common page layout rules
.wrapper--grid {
@include outer-container();
}
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
...@@ -29,6 +29,14 @@ ...@@ -29,6 +29,14 @@
font-weight: 700; font-weight: 700;
} }
// --------------------
// titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
}
// -------------------- // --------------------
// canned icon sizes // canned icon sizes
...@@ -54,136 +62,148 @@ ...@@ -54,136 +62,148 @@
// canned headings // canned headings
// -------------------- // --------------------
%hd-alpha { %hd-alpha {
@include font-size(48); @extend %t-weight1;
@include lh(48); @extend %t-titlecase;
@extend %t-weight4; @include font-size(24);
text-transform: uppercase; @include lh(24);
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.50rem;
color: $heading-primary-color;
} }
%hd-bravo { %hd-bravo {
@extend %t-weight2; @extend %t-weight3;
@include font-size(24); @include font-size(21);
@include lh(24); @include lh(21);
margin: 0 0 ($baseline-v/4) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-primary-color;
} }
%hd-charlie { %hd-charlie {
@extend %t-weight1; @extend %t-weight1;
@extend %t-titlecase;
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
margin: 0 0 ($baseline-v/2) 0;
font-family: $f-title;
color: $heading-primary-color;
}
%hd-charlie-alt {
@extend %t-weight2;
@include font-size(18);
@include lh(18);
margin: 0 0 ($baseline-v/4) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-color;
} }
%hd-delta { %hd-delta {
@extend %t-weight1; @extend %t-weight3;
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
margin: 0 0 ($baseline-v/2) 0;
text-transform: uppercase;
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.125rem;
color: $heading-tertiary-color;
} }
%hd-epsilon { %hd-epsilon {
@extend %t-weight1; @extend %t-weight1;
@include font-size(14); @extend %t-titlecase;
@include lh(14); @include font-size(16);
@include lh(16);
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color;
} }
%hd-foxtrot { %hd-foxtrot {
@extend %t-weight1; @extend %t-weight3;
@include font-size(16); @include font-size(16);
@include lh(16); @include lh(16);
margin: 0 0 ($baseline-v/10) 0;
font-family: $f-title; font-family: $f-title;
color: $heading-secondary-color;
} }
%hd-golf { %hd-golf {
@extend %t-weight1; @extend %t-weight1;
@include font-size(14); @extend %t-titlecase;
@include lh(14); @include font-size(13);
margin: 0 0 ($baseline-v/10) 0; @include lh(13);
text-transform: uppercase;
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.25rem;
color: $heading-tertiary-color;
} }
%hd-hotel { %hd-hotel {
@include font-size(24); @extend %t-weight1;
@include lh(24); @include font-size(13);
@extend %t-weight4; @include lh(13);
text-transform: uppercase; font-family: $f-title;
}
%hd-india {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(11);
@include lh(11);
font-family: $f-title; font-family: $f-title;
letter-spacing: 0.25rem;
color: $heading-tertiary-color;
} }
// -------------------- // --------------------
// canned copy // canned copy
// -------------------- // --------------------
%copy-base { %copy-alpha {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
color: $copy-color;
}
%copy-lead {
@extend %t-weight0; @extend %t-weight0;
@include font-size(24); @include font-size(24);
@include lh(24); @include lh(24);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color;
} }
%copy-showcase { %copy-bravo {
@include font-size(18); @include font-size(18);
@include lh(18); @include lh(18);
color: $copy-color;
font-family: $f-copy; font-family: $f-copy;
} }
%copy-detail { %copy-charlie {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
font-family: $f-copy;
}
%copy-delta {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
font-family: $f-copy; font-family: $f-copy;
color: $copy-color;
} }
%copy-metadata { %copy-epsilon {
@include font-size(13);
@include lh(12);
font-family: $f-copy;
}
%copy-foxtrot {
@include font-size(12); @include font-size(12);
@include lh(12); @include lh(12);
font-family: $f-copy; font-family: $f-copy;
color: $copy-supplemental-color;
} }
// -------------------- // --------------------
// canned actions // canned actions
// -------------------- // --------------------
%action-alpha {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-bravo {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-charlie {
@include font-size(16);
@include lh(16);
font-family: $f-action;
}
%action-delta {
@include font-size(14);
@include lh(14);
font-family: $f-action;
}
%action-epsilon {
@include font-size(12);
@include lh(12);
font-family: $f-action;
}
// -------------------- // --------------------
...@@ -193,7 +213,6 @@ ...@@ -193,7 +213,6 @@
font-style: normal; font-style: normal;
} }
%emphasis-alpha { %emphasis-alpha {
@extend %emphasis; @extend %emphasis;
@extend %t-weight3; @extend %t-weight3;
......
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
...@@ -136,6 +136,10 @@ ...@@ -136,6 +136,10 @@
@include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out); @include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out);
} }
%trans-opacity {
@include transition(opacity $tmg-f1 ease-in-out);
}
%trans-color { %trans-color {
@include transition(color $tmg-f1 ease-in-out); @include transition(color $tmg-f1 ease-in-out);
} }
...@@ -160,9 +164,49 @@ ...@@ -160,9 +164,49 @@
box-shadow: 0 1px 2px 0 $shadow-l1; box-shadow: 0 1px 2px 0 $shadow-l1;
} }
// -------------------- // --------------------
// Decorative: round/circular elements // Decorative: round/circular elements
// -------------------- // --------------------
%deco-circle { %deco-circle {
border-radius: 99999em; border-radius: 99999em;
} }
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-quaternary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-focus {
border-color: $color-decorative-tertiary;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-quaternary;
color: $heading-tertiary-color;
}
%ui-section-title-focus {
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
// -------------------- // --------------------
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem; // font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
...@@ -31,6 +31,6 @@ ...@@ -31,6 +31,6 @@
// -------------------- // --------------------
@mixin lh($fontSize: auto){ @mixin lh($fontSize: auto){
line-height: ($fontSize*1.50) + px; line-height: ($fontSize*1.50) + px;
line-height: (($fontSize/10)*1.50) + rem; // line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
} }
apps/openassessment/xblock/static/sass/xb/utilities/_reset.scss
...@@ -421,6 +421,10 @@ ...@@ -421,6 +421,10 @@
// -------------------- // --------------------
// custom reset // custom reset
// -------------------- // --------------------
* {
@include box-sizing(border-box);
}
div, span, applet, object, iframe, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -10,6 +10,24 @@ ...@@ -10,6 +10,24 @@
$baseline-v: 20px; // vertical baseline $baseline-v: 20px; // vertical baseline
$baseline-h: 40px; // horizontal baseline $baseline-h: 40px; // horizontal baseline
// units: spacing presets
$spacing-alpha: ($baseline-v*2);
$spacing-bravo: $baseline-v;
$spacing-charlie: ($baseline-v/2);
$spacing-delta: ($baseline-v/4);
// --------------------
// layout - grid (neat-based - http://neat.bourbon.io/)
// --------------------
// grid
@import "neat/neat-helpers";
$max-width: 100%; // http://gridcalculator.dk/#/1040/12/20/20
$grid-columns: 12; // make grid 12 columns
$column: $baseline-v;
$gutter: $baseline-v; // gutter b/t columns
// $visual-grid: true;
// $visual-grid-index: front;
// -------------------- // --------------------
// colors - basic // colors - basic
...@@ -116,13 +134,20 @@ $f-action: $f-sans-serif; ...@@ -116,13 +134,20 @@ $f-action: $f-sans-serif;
// -------------------- // --------------------
// application - colors // application - colors
// -------------------- // --------------------
$color-primary: $blue-s2; // application - colors: basic
$color-secondary: $blue; $color-primary: $blue;
$color-secondary: $blue-u1;
$color-teritary: $blue-u2; $color-teritary: $blue-u2;
// application - colors: decorative // application - colors: decorative
$color-decorative-primary: $blue-u2; $color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-t0; $color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: tint($gray-l6, 10%);
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $blue-u2;
// application - colors: actions // application - colors: actions
$action-primary-color: tint($color-primary,10%); $action-primary-color: tint($color-primary,10%);
...@@ -143,10 +168,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%); ...@@ -143,10 +168,10 @@ $action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings // application - colors: copy and headings
$heading-color: $gray-d5; $heading-color: $gray-d5;
$heading-primary-color: $black; $heading-primary-color: $black;
$heading-secondary-color: $gray-l3; $heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l4; $heading-tertiary-color: $gray-l3;
$copy-color: $gray-l2; $copy-color: $gray-l1;
$copy-color-alt: $gray-d1; $copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4; $copy-color-focus: $gray-d4;
...@@ -163,5 +188,6 @@ $selected-bg: $blue-t1; ...@@ -163,5 +188,6 @@ $selected-bg: $blue-t1;
$selected-color: $blue-s1; $selected-color: $blue-s1;
// application - colors: view-based elements // application - colors: view-based elements
$bg-view: $gray-l6; $bg-view: $gray-l7;
$bg-content: $white; $bg-content: $white;
$bg-message: $black;
apps/openassessment/xblock/submission_mixin.py
import datetime
from xblock.core import XBlock from xblock.core import XBlock
from submissions import api from submissions import api
from openassessment.peer import api as peer_api from openassessment.peer import api as peer_api
...@@ -148,7 +147,7 @@ class SubmissionMixin(object): ...@@ -148,7 +147,7 @@ class SubmissionMixin(object):
"step_status": step_status, "step_status": step_status,
} }
path = "openassessmentblock/oa_response.html" path = "openassessmentblock/response/oa_response.html"
if student_score: if student_score:
assessments = peer_api.get_assessments(student_submission["uuid"]) assessments = peer_api.get_assessments(student_submission["uuid"])
median_scores = peer_api.get_assessment_median_scores( median_scores = peer_api.get_assessment_median_scores(
...@@ -160,10 +159,10 @@ class SubmissionMixin(object): ...@@ -160,10 +159,10 @@ class SubmissionMixin(object):
for criterion in context["rubric_criteria"]: for criterion in context["rubric_criteria"]:
criterion["median_score"] = median_scores[criterion["name"]] criterion["median_score"] = median_scores[criterion["name"]]
path = 'openassessmentblock/oa_response_graded.html' path = 'openassessmentblock/response/oa_response_graded.html'
elif student_submission: elif student_submission:
path = 'openassessmentblock/oa_response_submitted.html' path = 'openassessmentblock/response/oa_response_submitted.html'
elif not problem_open and date == "due" and not student_submission: elif not problem_open and date == "due" and not student_submission:
path = 'openassessmentblock/oa_response_closed.html' path = 'openassessmentblock/response/oa_response_closed.html'
return self.render_assessment(path, context_dict=context) return self.render_assessment(path, context_dict=context)
apps/openassessment/xblock/test/test_openassessment.py
...@@ -141,10 +141,21 @@ class TestOpenAssessment(TestCase): ...@@ -141,10 +141,21 @@ class TestOpenAssessment(TestCase):
xblock_fragment = self.runtime.render(self.assessment, "student_view") xblock_fragment = self.runtime.render(self.assessment, "student_view")
self.assertTrue(xblock_fragment.body_html().find("Openassessmentblock")) self.assertTrue(xblock_fragment.body_html().find("Openassessmentblock"))
# Validate Submission Rendering.
submission_response = self.assessment.render_submission({}) submission_response = self.assessment.render_submission({})
self.assertIsNotNone(submission_response) self.assertIsNotNone(submission_response)
self.assertTrue(submission_response.body.find("openassessment__response")) self.assertTrue(submission_response.body.find("openassessment__response"))
# Validate Peer Rendering.
peer_response = self.assessment.render_peer_assessment({})
self.assertIsNotNone(peer_response)
self.assertTrue(peer_response.body.find("openassessment__peer-assessment"))
# Validate Self Rendering.
self_response = self.assessment.render_self_assessment({})
self.assertIsNotNone(self_response)
self.assertTrue(self_response.body.find("openassessment__peer-assessment"))
def test_start_end_date_checks(self): def test_start_end_date_checks(self):
""" """
Check if the start and end date checks work appropriately. Check if the start and end date checks work appropriately.
......
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