Merge pull request #63 from edx/sanchez/TIM-191-Grade-UI

Sanchez/tim 191 grade ui

apps/openassessment/templates/openassessmentblock/grade/oa_grade_closed.html

+<!-- CASE: is incomplete and problem closed -->
+<div id="openassessment__grade" class="openassessment__grade is--incomplete has--grade">
+    <h2 class="openassessment__grade__title">Your Grade:</h2>
+
+    <div class="openassessment__grade__content">
+        <span class="grade__value">Incomplete</span>
+        <p>You did not complete the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
+    </div>
+</div>
\ No newline at end of file

apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html

+<!-- CASE: is complete -->
+<div id="openassessment__grade" class="openassessment__grade is--complete has--grade">
+    <h2 class="openassessment__grade__title">Your Grade:</h2>
+
+    <div class="openassessment__grade__content">
+        <span class="grade__value">{{ score.points_earned }}</span> out of <span class="grade__potential">{{ score.points_possible }}</span>
+    </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>
\ No newline at end of file

apps/openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html

+<!-- CASE: is in-progress and incomplete (peer responses to assess) -->
+<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-responses">
+    <h2 class="openassessment__grade__title">Your Grade:</h2>
+
+    <div class="openassessment__grade__content">
+        <span class="grade__value">Incomplete</span>
+        <p>You have not completed the <span class="step">Peer Assessment</span>, and <span class="step">Self Assessment</span> portions of this problem.</p>
+    </div>
+</div>
\ No newline at end of file

apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html

+<!-- CASE: is in-progress and incomplete (peer evaluations of user's response) -->
+<div id="openassessment__grade" class="openassessment__grade is--incomplete awaiting--peer-evaluations">
+    <h2 class="openassessment__grade__title">Your Grade:</h2>
+
+    <div class="openassessment__grade__content">
+        <span class="grade__value">Waiting for Peers to Assess Your Response</span>
+        <p>Your response is still being evaluated by your peers. Once complete, you will receive a final grade and detailed feedback from their evaluations.</p>
+    </div>
+</div>
\ No newline at end of file

apps/openassessment/templates/openassessmentblock/oa_base.html

@@ -67,9 +67,6 @@
                 {% endfor %}
 
             </ol>
-
-            <!-- STATUS: problem grade -->
-            {% include "openassessmentblock/oa_grade.html" %}
         </div>
     </div>
 </div>

apps/openassessment/templates/openassessmentblock/oa_grade.html

-<!-- TEMPLATE: grade status -->
-
-
-<!-- NOTES:
-
-* class of is--incomplete is added when the problem is in an incomplete state
-* class of is--complete is added when problem is successfully completed by user
-* class of has--grade is added when a grade (failing or passing) is calculated for user
-* classes of needs--* are added when user action is needed
-* classes of awaiting--* are added when a user's flow is dependent upon system readiness
-
--->
-
-
-<!-- CASE: default/unstarted -->
-<div id="openassessment__grade" class="openassessment__grade {{ grade_state.style_class }}">
-    <h2 class="openassessment__grade__title">{{ grade_state.title }}</h2>
-
-    <div class="openassessment__grade__content">
-        <span class="grade__value">{{ grade_state.value }}</span>
-        <p class="grade__description">{{ grade_state.message }}</p>
-    </div>
-</div>

apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html

@@ -11,7 +11,7 @@
 
 <!-- CASE: default/not started -->
 {% block list_item %}
-<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
+<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
 {% endblock %}
     <span class="system__element" id="peer_submission_uuid">
         {{ peer_submission.uuid }}

apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
+    <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}

apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html

 {%  extends "openassessmentblock/response/oa_response.html" %}
 
 {% block list_item %}
-<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
+    <li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
 {% endblock %}
 
 {% block title %}
@@ -15,28 +15,28 @@
 {% endblock %}
 
 {% block body %}
-<div class="step__content">
-    <!-- user's response -->
-    <article class="submission__answer__display">
-        <h3 class="submission__answer__display__title">Your Submitted Response</h3>
+    <div class="step__content">
+        <!-- user's response -->
+        <article class="submission__answer__display">
+            <h3 class="submission__answer__display__title">Your Submitted Response</h3>
 
-        <div class="submission__answer__display__content">
-            {{ student_submission.answer }}
-        </div>
-    </article>
+            <div class="submission__answer__display__content">
+                {{ student_submission.answer }}
+            </div>
+        </article>
 
-    <!-- peer evaluations -->
-    <article class="submission__peer-evaluations">
-        <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
+        <!-- peer evaluations -->
+        <article class="submission__peer-evaluations">
+            <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
 
-        <ol class="list submission__peer-evaluations__questions">
+            <ol class="list submission__peer-evaluations__questions">
 
-        {% for criterion in rubric_criteria %}
-        {% with criterion_num=forloop.counter %}
-        <!-- individual question from rubric -->
-        <li class="question question--{{ criterion_num }} ui-toggle-visibility">
-            <h4 class="question__title ui-toggle-visibility__control">
-                <span class="question__title__copy">{{ criterion.name }}</span>
+                {% for criterion in rubric_criteria %}
+                    {% with criterion_num=forloop.counter %}
+                        <!-- individual question from rubric -->
+                        <li class="question question--{{ criterion_num }} ui-toggle-visibility">
+                            <h4 class="question__title ui-toggle-visibility__control">
+                                <span class="question__title__copy">{{ criterion.name }}</span>
 
                 <span class="question__score">
                   <span class="label sr">Overall Question Score</span>
@@ -47,16 +47,16 @@
                     <span class="unit">Points</span>
                   </span>
                 </span>
-            </h4>
+                            </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">
+                            <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>
@@ -65,39 +65,39 @@
                           <span class="label sr">Peer's Assessment: </span>
                           <span class="value">{{ part.option.name }}</span>
                         </span>
-                    </h5>
+                                                    </h5>
 
                       <span class="answer__content">
                         {{ part.option.explanation }}
                       </span>
-                </li>
-                {% endif %}
-                {% endfor %}
-                {% endwith %}
+                                                </li>
+                                            {% endif %}
+                                        {% endfor %}
+                                    {% endwith %}
+                                {% endfor %}
+                            </ul>
+                        </li>
+                    {% endwith %}
                 {% endfor %}
-            </ul>
-        </li>
-        {% endwith %}
-        {% endfor %}
-        </ol>
-    </article>
+            </ol>
+        </article>
 
-    <!-- peer assessment feedback -->
-    <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
-        <h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
+        <!-- peer assessment feedback -->
+        <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
+            <h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
 
-        <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
-            <li class="field field--textarea feedback__remarks" id="feedback__remarks">
-                <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
-                <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
-            </li>
-        </ol>
+            <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
+                <li class="field field--textarea feedback__remarks" id="feedback__remarks">
+                    <label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
+                    <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
+                </li>
+            </ol>
 
-        <ul class="list list--actions submission__feeedback__actions">
-            <li class="list--actions__item">
-                <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
-            </li>
-        </ul>
-    </form>
-</div>
+            <ul class="list list--actions submission__feeedback__actions">
+                <li class="list--actions__item">
+                    <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
+                </li>
+            </ul>
+        </form>
+    </div>
 {% endblock %}

apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html

@@ -12,7 +12,7 @@
 
 <!-- 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 is--expanded">
 {% endblock %}
     <header class="step__header ui-toggle-visibility__control">
         <h2 class="step__title">

apps/openassessment/xblock/grade_mixin.py

+from xblock.core import XBlock
+from submissions.api import get_score
+
+
+class GradeMixin(object):
+    """Grade Mixin introduces all handlers for displaying grades
+
+    Abstracts all functionality and handlers associated with Grades.
+
+    GradeMixin is a Mixin for the OpenAssessmentBlock. Functions in the
+    GradeMixin call into the OpenAssessmentBlock functions and will not work
+    outside of OpenAssessmentBlock.
+
+    """
+
+    @XBlock.handler
+    def render_grade(self, data, suffix=''):
+        problem_open, date = self.is_open()
+        workflowstate = "complete"  # TODO hook in workflow.
+        context = {}
+        if workflowstate == "complete":
+            path = 'openassessmentblock/grade/oa_grade_complete.html'
+            student_item = self.get_student_item_dict()
+            scores = get_score(student_item)
+            if scores:
+                context = {"score": scores[0]}
+            else:
+                path = 'openassessmentblock/grade/oa_grade_waiting.html'
+        elif not problem_open and date == "due":
+            path = 'openassessmentblock/grade/oa_grade_closed.html'
+        else:
+            path = 'openassessmentblock/grade/oa_grade_incomplete.html'
+            # TODO: How do we determine which modules are incomplete?
+
+        return self.render_assessment(path, context)
+

apps/openassessment/xblock/openassessmentblock.py

@@ -12,6 +12,7 @@ from webob import Response
 from xblock.core import XBlock
 from xblock.fields import List, Scope, String
 from xblock.fragment import Fragment
+from openassessment.xblock.grade_mixin import GradeMixin
 
 from openassessment.xblock.peer_assessment_mixin import PeerAssessmentMixin
 from openassessment.xblock.self_assessment_mixin import SelfAssessmentMixin
@@ -139,7 +140,7 @@ def load(path):
     return data.decode("utf8")
 
 
-class OpenAssessmentBlock(XBlock, SubmissionMixin, PeerAssessmentMixin, SelfAssessmentMixin, StudioMixin):
+class OpenAssessmentBlock(XBlock, SubmissionMixin, PeerAssessmentMixin, SelfAssessmentMixin, StudioMixin, GradeMixin):
     """Displays a question and gives an area where students can compose a response."""
 
     start_datetime = String(

apps/openassessment/xblock/static/js/src/oa_base.js

@@ -5,6 +5,13 @@ function OpenAssessmentBlock(runtime, element) {
     var renderSubmissionUrl = runtime.handlerUrl(element, 'render_submission');
     var renderPeerUrl = runtime.handlerUrl(element, 'render_peer_assessment');
     var renderSelfUrl = runtime.handlerUrl(element, 'render_self_assessment');
+    var renderGradeUrl = runtime.handlerUrl(element, 'render_grade');
+
+    var submissionListItem = '#openassessment__response';
+    var peerListItem = '#openassessment__peer-assessment';
+    var selfListItem = '#openassessment__self-assessment';
+    var gradeListItem = '#openassessment__grade';
+
     /* Sample Debug Console: http://localhost:8000/submissions/Joe_Bloggs/TestCourse/u_3 */
 
     /*
@@ -23,7 +30,7 @@ function OpenAssessmentBlock(runtime, element) {
      *  Submission Functions
      */
     function render_submissions(data) {
-        $('#openassessment__response', element).replaceWith(data);
+        $(submissionListItem, element).replaceWith(data);
         $('#step--response__submit', element).click(function(eventObject) {
             $.ajax({
                 type: "POST",
@@ -38,12 +45,13 @@ function OpenAssessmentBlock(runtime, element) {
                             render_peer_assessment(data);
                         }
                     });
+                    collapse($(submissionListItem, element));
                     $.ajax({
                         type: "POST",
                         url: renderSubmissionUrl,
                         success:  function(data) {
                             render_submissions(data);
-                            collapse($('#openassessment__response', element));
+                            collapse($(submissionListItem, element));
                         }
                     });
                 }
@@ -55,7 +63,7 @@ function OpenAssessmentBlock(runtime, element) {
      *  Peer Assessment Functions
      */
     function render_peer_assessment(data) {
-        $('#openassessment__peer-assessment', element).replaceWith(data);
+        $(peerListItem, element).replaceWith(data);
 
         function prepare_assessment_post(element) {
             var selector = $("input[type=radio]:checked", element);
@@ -85,7 +93,7 @@ function OpenAssessmentBlock(runtime, element) {
                         url: renderSelfUrl,
                         dataType: "html",
                         success:  function(data) {
-                            $('#openassessment__self-assessment', element).replaceWith(data);
+                            $(selfListItem, element).replaceWith(data);
                         }
                     });
                     $.ajax({
@@ -116,8 +124,8 @@ function OpenAssessmentBlock(runtime, element) {
             type: "POST",
             url: renderPeerUrl,
             success:  function(data) {
-                $('#openassessment__peer-assessment', element).replaceWith(data);
-                collapse($('#openassessment__peer-assessment', element));
+                $(peerListItem, element).replaceWith(data);
+                collapse($(peerListItem, element));
             }
         });
 
@@ -125,8 +133,17 @@ function OpenAssessmentBlock(runtime, element) {
             type: "POST",
             url: renderSelfUrl,
             success:  function(data) {
-                $('#openassessment__self-assessment', element).replaceWith(data);
-                collapse($('#openassessment__self-assessment', element));
+                $(selfListItem, element).replaceWith(data);
+                collapse($(selfListItem, element));
+            }
+        });
+
+        $.ajax({
+            type: "POST",
+            url: renderGradeUrl,
+            success:  function(data) {
+                $(gradeListItem, element).replaceWith(data);
+                collapse($(gradeListItem, element));
             }
         });
     });

apps/openassessment/xblock/test/test_openassessment.py

@@ -156,6 +156,11 @@ class TestOpenAssessment(TestCase):
         self.assertIsNotNone(self_response)
         self.assertTrue(self_response.body.find("openassessment__peer-assessment"))
 
+        # Validate Grading.
+        grade_response = self.assessment.render_grade({})
+        self.assertIsNotNone(grade_response)
+        self.assertTrue(grade_response.body.find("openassessment__grade"))
+
     def test_start_end_date_checks(self):
         """
         Check if the start and end date checks work appropriately.