Fixing javascript to mock out workflow

apps/openassessment/xblock/assessment_block.py

+from django.template import Context
+from django.template.loader import get_template
+
+
 class AssessmentBlock(object):
     assessment_type = None
     name = ''
@@ -18,6 +22,10 @@ class AssessmentBlock(object):
             "must_grade": self.must_grade,
             "must_be_graded_by": self.must_be_graded_by,
             "navigation_text": self.navigation_text,
-            "path": self.path,
             "title": self.title
         }
+
+    def render(self, context_dict):
+        template = get_template(self.path)
+        context = Context(context_dict)
+        return template.render(context)
\ No newline at end of file

apps/openassessment/xblock/openassessmentblock.py

 """An XBlock where students can read a question and compose their response"""
 
 import datetime
+import json
 
 from django.template.context import Context
 from django.template.loader import get_template
+import pkg_resources
+from webob import Response
 
 from xblock.core import XBlock
 from xblock.fields import List, Scope, String
 from xblock.fragment import Fragment
 from openassessment.xblock.peer_assessment_block import PeerAssessmentBlock
 from openassessment.xblock.submission_block import SubmissionBlock
-from openassessment.xblock.utils import load
 
 from scenario_parser import ScenarioParser
 
@@ -120,6 +122,10 @@ DEFAULT_ASSESSMENT_MODULES = [
     DEFAULT_PEER_ASSESSMENT,
 ]
 
+def load(path):
+    """Handy helper for getting resources from our kit."""
+    data = pkg_resources.resource_string(__name__, path)
+    return data.decode("utf8")
 
 class OpenAssessmentBlock(XBlock):
     """Displays a question and gives an area where students can compose a response."""
@@ -224,12 +230,30 @@ class OpenAssessmentBlock(XBlock):
         frag.initialize_js('OpenAssessmentBlock')
         return frag
 
+    @XBlock.handler
+    def render_assessment(self, data, suffix=''):
+        """Render an Assessment Module's HTML
+
+        Given the name of an assessment module, find it in the list of
+        configured modules, and ask for its rendered HTML.
+
+        """
+        body = json.loads(data.body)
+        context_dict = {
+            "xblock_trace": self._get_xblock_trace(),
+            "rubric_instructions": self.rubric_instructions,
+            "rubric_criteria": self.rubric_criteria,
+        }
+        assessment = self._get_assessment_module(body['assessment'])
+        if assessment:
+            return Response(assessment.render(context_dict), content_type='application/html', charset="UTF-8")
+
     @XBlock.json_handler
     def assess(self, data, suffix=''):
         # TODO Pass name through the handler.
         assessment = self._get_assessment_module('peer-assessment')
         if assessment:
-            assessment.assess(
+            return assessment.assess(
                 self._get_student_item_dict(),
                 self.rubric_criteria,
                 data

apps/openassessment/xblock/peer_assessment_block.py

-from django.template import Context
-from django.template.loader import get_template
-
-from xblock.fragment import Fragment
-
 from openassessment.peer import api as peer_api
 from openassessment.peer.api import PeerAssessmentWorkflowError
 from openassessment.xblock.assessment_block import AssessmentBlock
-from openassessment.xblock.utils import load
 
 
 class PeerAssessmentBlock(AssessmentBlock):
 
     assessment_type = "peer-assessment"
+    path = "static/html/oa_peer_assessment.html"
     title = "Assess Peers' Responses"
     navigation_text = "Your assessment(s) of peer responses"
-    path = "static/html/oa_peer_assessment.html"
 
     @classmethod
     def assess(cls, student_item_dict, rubric_criteria, data):
@@ -56,12 +50,3 @@ class PeerAssessmentBlock(AssessmentBlock):
             # TODO: Log?
             pass
         return peer_submission
-
-    def render(self, context_dict):
-        template = get_template("static/html/oa_peer_assessment.html")
-        context = Context(context_dict)
-        frag = Fragment(template.render(context))
-        frag.add_css(load("static/css/openassessment.css"))
-        frag.add_javascript(load("static/js/src/oa_assessment.js"))
-        frag.initialize_js('PeerAssessment')
-        return frag
\ No newline at end of file

apps/openassessment/xblock/static/html/oa_response.html

@@ -31,7 +31,7 @@
     </div>
 
     <div class="step__content">
-        <form id="response__submission" class="response__submission" method="post">
+        <form id="response__submission" class="response__submission">
             <ol class="list list--fields">
                 <li class="field field--textarea submission__answer" id="submission__answer">
                     <label for="submission__answer__value">Please provide your response to the above question</label>
@@ -51,7 +51,7 @@
     <div class="step__actions">
         <ul class="list list--actions">
             <li class="list--actions__item">
-                <a aria-role="button" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
+                <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">Submit your response &amp; move forward</a>
             </li>
         </ul>
     </div>

apps/openassessment/xblock/static/html/oa_rubric.html

-<!-- START OpenAssessmentBlock HTML -->
-<div class="openassessment_block" id="openassessment_block_${xblock_trace[0]}">
-    <div id="peer_submission_uuid" hidden="true">${peer_submission["uuid"]}</div>
-    <p>${peer_submission["answer"]}</p>
-    <p class="openassessment_prompt" 
-       id="openassessment_rubric_instructions_${xblock_trace[0]}">${rubric_instructions}</p>
-    % for crit in rubric_criteria:
-    <div>
-      <p class="openassessment_prompt">${crit["instructions"]}</p>
-      % for o in crit['options']:
-        <div>
-          <input name="${crit['name']}" type="radio" value="${o[0]}">${o[1]}: ${o[2]}</input>
-        </div>
-      % endfor
-    </div>
-    % endfor
-    <input type="button"
-           class="openassessment_submit" id="openassessment_submit_${xblock_trace[0]}" value="Submit" />
-</div>
-<div class="openassessment_response_status_block" id="openassessment_response_status_block_${xblock_trace[0]}">
-    This message should be invisible; please upgrade your browser.
-</div> 
-<!-- END OpenAssessmentBlock HTML -->

apps/openassessment/xblock/static/html/oa_submission.html

-<!-- START OpenAssessmentBlock HTML -->
-<div class="openassessment_block" id="openassessment_block_${xblock_trace[0]}">
-    <p class="openassessment_prompt" id="openassessment_question_${xblock_trace[0]}">${question}</p>
-    <textarea class="openassessment_submission" id="openassessment_submission_${xblock_trace[0]}">Compose your response here</textarea>
-    <input type="button" class="openassessment_submit" id="openassessment_submit_${xblock_trace[0]}" value="Submit" />
-</div>
-<div class="openassessment_response_status_block" id=openassessment_response_status_block_${xblock_trace[0]}">
-    This message should be invisible; please upgrade your browser.
-</div> 
-<!-- END OpenAssessmentBlock HTML -->

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

-/* START Javascript for OpenassessmentComposeXBlock. */
+/* START Javascript for OpenassessmentXBlock. */
 function OpenAssessmentBlock(runtime, element) {
 
     var handlerUrl = runtime.handlerUrl(element, 'submit');
-    var success_msg = '<p class="success">Your submission has been received, thank you!</p>';
-    var failure_msg = '<p class="failure">An error occurred with your submission</p>';
-    var click_msg = '<p class="clickhere">(click here to dismiss this message)</p>';
+    var renderUrl = runtime.handlerUrl(element, 'render_assessment');
     /* Sample Debug Console: http://localhost:8000/submissions/Joe_Bloggs/TestCourse/u_3 */
 
-    $('.action action--submit step--response__submit', element).click(function(eventObject) {
+
+
+    /*
+        Peer Assessment Functions
+    */
+    function prepare_assessment_post(element) {
+        var selector = $("input[type=radio]:checked", element);
+        var values = [];
+        for (i=0; i<selector.length; i++) {
+            values[i] = selector[i].value;
+        }
+        return {"submission_uuid":$("div#peer_submission_uuid")[0].innerText, "points_earned":values};
+    }
+
+    $('.openassessment_submit', element).click(function(eventObject) {
+        $.ajax({
+            type: "POST",
+            url: handlerUrl,
+            /* data: JSON.stringify({"submission": $('.openassessment_submission', element).val()}), */
+            data: JSON.stringify(prepare_assessment_post(element)),
+            success: function(data) {
+                $.ajax({
+                    type: "POST",
+                    url: renderUrl,
+                    data: JSON.stringify({"assessment": "peer-assessment"}),
+                    success:  function(data) {
+                        $('#peer-assessment', element).replaceWith(data);
+                    }
+                });
+                $.ajax({
+                    type: "POST",
+                    url: renderUrl,
+                    data: JSON.stringify({"assessment": "self-assessment"}),
+                    success:  function(data) {
+                        $('#self-assessment', element).replaceWith(data);
+                    }
+                });
+            }
+        });
+    });
+
+    $(function ($) {
+        /* Here's where you'd do things on page load. */
+        $.ajax({
+            type: "POST",
+            url: renderUrl,
+            data: JSON.stringify({"assessment": "submission"}),
+            success:  function(data) {
+                $('#submission', element).replaceWith(data);
+
+                /*
+                 Submission Functions
+                 */
+                $('#step--response__submit', element).click(function(eventObject) {
                     $.ajax({
                         type: "POST",
                         url: handlerUrl,
-            data: JSON.stringify({"submission": $('.openassessment_submission', element).val()}),
-            success: displayStatus
+                        data: JSON.stringify({"submission": $('#submission__answer__value', element).val()}),
+                        success: function(data) {
+                            alert("Success?")
+                            $.ajax({
+                                type: "POST",
+                                url: renderUrl,
+                                data: JSON.stringify({"assessment": "submission"}),
+                                success:  function(data) {
+                                    $('#submission', element).replaceWith(data);
+                                }
+                            });
+                            $.ajax({
+                                type: "POST",
+                                url: renderUrl,
+                                data: JSON.stringify({"assessment": "peer-assessment"}),
+                                success:  function(data) {
+                                    $('#peer-assessment', element).replaceWith(data);
+                                }
+                            });
+                        },
+                        fail: function(data) {alert("FAIL!!")}
+                    });
+                });
+            }
         });
     });
 }
-/* END Javascript for OpenassessmentComposeXBlock. */
+/* END Javascript for OpenassessmentXBlock. */

apps/openassessment/xblock/utils.py

-import pkg_resources
-
-
-def load(path):
-    """Handy helper for getting resources from our kit."""
-    data = pkg_resources.resource_string(__name__, path)
-    return data.decode("utf8")
\ No newline at end of file