Adding all the grading templates, hooks, and handlers.

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/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/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.