1. New auxiliary view "grade_available_responses_view" which displays the staff grading area

2. New auxiliary view for course ORA blocks listing (based on backgrid.js)
(fixes)

MANIFEST.in

@@ -2,9 +2,11 @@ include LICENSE
 include AUTHORS
 include README.rst
 include openassessment/xblock/static/css/*.css
+include openassessment/xblock/static/css/lib/backgrid/*.css
 include openassessment/xblock/static/js/openassessment*.min.js
+include openassessment/xblock/static/js/lib/backgrid/*.js
 recursive-include openassessment/xblock/static/js/src *.js
-recursive-include openassessment/templates *.html
+recursive-include openassessment/templates *.html *.underscore
 recursive-include openassessment/locale *.po
 recursive-include openassessment/locale *.mo
 global-exclude */test*

karma.conf.js

@@ -31,7 +31,7 @@ module.exports = function(config) {
       'js/lib/jquery-ui-1.10.4.min.js',
       'js/lib/underscore-min.js',
       '../../../node_modules/backbone/backbone.js',
-      'js/lib/backgrid.min.js',
+      '../../../node_modules/backgrid/lib/backgrid.min.js',
       '../../../node_modules/requirejs/require.js',
       '../../../require-config.js',
       {

openassessment/templates/openassessmentblock/instructor_dashboard/oa_listing.html

 {% load i18n %}
 {% spaceless %}
 <section class="open-response-assessment-block"
-         data-item-view-enabled="{{ ora_item_view_enabled }}"
+         data-item-view-enabled="{{ ora_item_view_enabled|yesno:'1,0' }}"
          data-rendered=0>
     <div class="open-response-assessment-msg">{% trans "Please wait" %}</div>
     <div class="open-response-assessment-content">

openassessment/xblock/openassessmentblock.py

@@ -390,14 +390,20 @@ class OpenAssessmentBlock(MessageMixin,
         ora_item_view_enabled = context.get('ora_item_view_enabled', False) if context else False
         context_dict = {
             "ora_items": json.dumps(ora_items),
-            "ora_item_view_enabled": 1 if ora_item_view_enabled else 0
+            "ora_item_view_enabled": ora_item_view_enabled
         }
 
         template = get_template('openassessmentblock/instructor_dashboard/oa_listing.html')
         context = Context(context_dict)
         fragment = Fragment(template.render(context))
 
-        return self._update_and_return_fragment(fragment, 'CourseOpenResponsesListingBlock')
+        min_postfix = '.min' if settings.DEBUG else ''
+
+        css_lst = ["static/css/lib/backgrid/backgrid%s.css" % min_postfix]
+        js_lst = ["static/js/lib/backgrid/backgrid%s.js" % min_postfix]
+
+        return self._update_and_return_fragment(fragment, 'CourseOpenResponsesListingBlock',
+                                                additional_css=css_lst, additional_js=js_lst)
 
     def grade_available_responses_view(self, context=None):
         """Grade Available Responses view.
@@ -430,29 +436,40 @@ class OpenAssessmentBlock(MessageMixin,
 
         return self._update_and_return_fragment(fragment, 'StaffAssessmentBlock')
 
-    def _update_and_return_fragment(self, fragment, initialize_js_func):
+    def _update_and_return_fragment(self, fragment, initialize_js_func, additional_css=None, additional_js=None):
         """
         Auxiliary function to return updated fragment
 
         """
+        if additional_css is None:
+            additional_css = []
+        if additional_js is None:
+            additional_js = []
+
         i18n_service = self.runtime.service(self, 'i18n')
         if hasattr(i18n_service, 'get_language_bidi') and i18n_service.get_language_bidi():
             css_url = "static/css/openassessment-rtl.css"
         else:
             css_url = "static/css/openassessment-ltr.css"
 
-        # backgrid.js v0.3.7
-        fragment.add_css_url(self.runtime.local_resource_url(self, "static/css/lib/backgrid.min.css"))
-        self.add_javascript_files(fragment, "static/js/lib/backgrid.min.js")
-
         if settings.DEBUG:
+            for css in additional_css:
+                fragment.add_css_url(self.runtime.local_resource_url(self, css))
             fragment.add_css_url(self.runtime.local_resource_url(self, css_url))
+
+            for js in additional_js:
+                self.add_javascript_files(fragment, js)
             self.add_javascript_files(fragment, "static/js/src/oa_shared.js")
             self.add_javascript_files(fragment, "static/js/src/oa_server.js")
             self.add_javascript_files(fragment, "static/js/src/lms")
         else:
             # TODO: load CSS and JavaScript as URLs once they can be served by the CDN
+            for css in additional_css:
+                fragment.add_css(load(css))
             fragment.add_css(load(css_url))
+
+            for js in additional_js:
+                fragment.add_javascript(load(js))
             fragment.add_javascript(load("static/js/openassessment-lms.min.js"))
         js_context_dict = {
             "ALLOWED_IMAGE_MIME_TYPES": self.ALLOWED_IMAGE_MIME_TYPES,

openassessment/xblock/static/css/lib/backgrid.min.css

-.backgrid-container{position:relative;display:block;width:100%;height:465px;padding:0;overflow:auto;border:0}.backgrid{width:100%;max-width:100%;background-color:transparent;border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.backgrid thead th,.backgrid.backgrid-striped tbody tr:nth-child(even){background-color:#f9f9f9}.backgrid td,.backgrid th{display:none;height:20px;max-width:250px;padding:4px 5px;overflow:hidden;line-height:20px;text-align:left;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;border-bottom:1px solid #DDD}.backgrid td.renderable,.backgrid th.renderable{display:table-cell}.backgrid th{font-weight:700;text-align:center}.backgrid th.sortable a{text-decoration:none;white-space:nowrap;cursor:pointer}.backgrid thead th{vertical-align:bottom}.backgrid thead th a{display:block}.backgrid tbody tr.empty{font-style:italic;color:gray}.backgrid tbody tr.empty td{display:table-cell;text-align:center}.backgrid td.editor{padding:0}.backgrid tbody tr:nth-child(odd) td.editor,.backgrid td.editor{background-color:rgba(82,168,236,.1);outline:rgba(82,168,236,.8) solid 1px;outline-offset:-1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:width,outline,background-color;-moz-transition-property:width,outline,background-color;-o-transition-property:width,outline,background-color;transition-property:width,outline,background-color;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.backgrid td.editor input[type=text]{display:block;width:100%;height:100%;padding:0 5px;margin:0;background-color:transparent;border:0;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none}.backgrid td.editor input[type=text]::-ms-clear{display:none}.backgrid tbody tr:nth-child(odd) td.error,.backgrid td.error{background-color:rgba(255,210,77,.1);outline:#ffd24d solid 1px}.backgrid td.editor :focus,.backgrid th.editor :focus{outline:0}.backgrid .sort-caret{display:inline-block;width:0;height:0;margin-left:.3em;border:0;content:""}.backgrid .ascending .sort-caret,.backgrid .descending .sort-caret{border-right:4px solid transparent;border-left:4px solid transparent}.backgrid .ascending .sort-caret{vertical-align:baseline;border-top:none;border-bottom:4px solid #000}.backgrid .descending .sort-caret{vertical-align:super;border-top:4px solid #000;border-bottom:none}.backgrid .email-cell,.backgrid .email-cell.editor input[type=text],.backgrid .string-cell,.backgrid .string-cell.editor input[type=text],.backgrid .uri-cell,.backgrid .uri-cell.editor input[type=text]{text-align:left}.backgrid .date-cell,.backgrid .date-cell.editor input[type=text],.backgrid .datetime-cell,.backgrid .datetime-cell.editor input[type=text],.backgrid .integer-cell,.backgrid .integer-cell.editor input[type=text],.backgrid .number-cell,.backgrid .number-cell.editor input[type=text],.backgrid .percent-cell,.backgrid .percent-cell.editor input[type=text],.backgrid .time-cell,.backgrid .time-cell.editor input[type=text]{text-align:right}.backgrid .boolean-cell,.backgrid .boolean-cell.editor input[type=checkbox],.backgrid .select-cell{text-align:center}.backgrid .select-cell.editor{padding:0}.backgrid .select-cell.editor select{display:block;width:100%;height:28px;padding:4px 5px;margin:0;line-height:28px;vertical-align:middle;background-color:#fff;border:0;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.backgrid .select-cell.editor select[multiple]{height:auto}.backgrid .select-cell.editor :focus{border:0;outline:0}.backgrid .select-cell.editor optgroup::-moz-focus-inner,.backgrid .select-cell.editor optgroup::-o-focus-inner,.backgrid .select-cell.editor option::-moz-focus-inner,.backgrid .select-cell.editor option::-o-focus-inner,.backgrid .select-cell.editor select::-moz-focus-inner,.backgrid .select-cell.editor select::-o-focus-inner{border:0}

openassessment/xblock/static/css/lib/backgrid/backgrid.css

+/*
+  backgrid
+  http://github.com/cloudflare/backgrid
+
+  Copyright (c) 2013-present Cloudflare, Inc. and contributors
+  Licensed under the MIT license.
+*/
+
+.backgrid-container {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 465px;
+  padding: 0;
+  overflow: auto;
+  border: 0;
+}
+
+.backgrid {
+  width: 100%;
+  max-width: 100%;
+  background-color: transparent;
+  border-collapse: collapse;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.backgrid th,
+.backgrid td {
+  display: none;
+  height: 20px;
+  max-width: 250px;
+  padding: 4px 5px;
+  overflow: hidden;
+  line-height: 20px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  border-bottom: 1px solid #DDD;
+}
+
+.backgrid th.renderable,
+.backgrid td.renderable {
+  display: table-cell;
+}
+
+.backgrid th {
+  font-weight: bold;
+  text-align: center;
+}
+
+.backgrid th.sortable a {
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.backgrid thead th {
+  vertical-align: bottom;
+  background-color: #f9f9f9;
+}
+
+.backgrid thead th button {
+  display: block;
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+.backgrid.backgrid-striped tbody tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.backgrid tbody tr.empty {
+  font-style: italic;
+  color: gray;
+}
+
+.backgrid tbody tr.empty td {
+  display: table-cell;
+  text-align: center;
+}
+
+.backgrid td.editor {
+  padding: 0;
+}
+
+.backgrid td.editor,
+.backgrid tbody tr:nth-child(odd) td.editor {
+  background-color: rgba(82, 168, 236, 0.1);
+  outline: 1px solid rgba(82, 168, 236, 0.8);
+  outline-offset: -1px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition-duration: 200ms;
+     -moz-transition-duration: 200ms;
+       -o-transition-duration: 200ms;
+          transition-duration: 200ms;
+  -webkit-transition-property: width, outline, background-color;
+     -moz-transition-property: width, outline, background-color;
+       -o-transition-property: width, outline, background-color;
+          transition-property: width, outline, background-color;
+  -webkit-transition-timing-function: ease-in-out;
+     -moz-transition-timing-function: ease-in-out;
+       -o-transition-timing-function: ease-in-out;
+          transition-timing-function: ease-in-out;
+}
+
+.backgrid td.editor input[type=text] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0 5px;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
+
+.backgrid td.editor input[type=text]::-ms-clear {
+  display: none;
+}
+
+.backgrid td.error,
+.backgrid tbody tr:nth-child(odd) td.error {
+  background-color: rgba(255, 210, 77, 0.1);
+  outline: 1px solid #ffd24d;
+}
+
+.backgrid td.editor :focus,
+.backgrid th.editor :focus {
+  outline: 0;
+}
+
+.backgrid .sort-caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 0.3em;
+  border: 0;
+  content: "";
+}
+
+.backgrid .ascending .sort-caret {
+  vertical-align: baseline;
+  border-top: none;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #000000;
+  border-left: 4px solid transparent;
+}
+
+.backgrid .descending .sort-caret {
+  vertical-align: super;
+  border-top: 4px solid #000000;
+  border-right: 4px solid transparent;
+  border-bottom: none;
+  border-left: 4px solid transparent;
+}
+
+.backgrid .string-cell,
+.backgrid .uri-cell,
+.backgrid .email-cell,
+.backgrid .string-cell.editor input[type=text],
+.backgrid .uri-cell.editor input[type=text],
+.backgrid .email-cell.editor input[type=text] {
+  text-align: left;
+}
+
+.backgrid .date-cell,
+.backgrid .time-cell,
+.backgrid .datetime-cell,
+.backgrid .number-cell,
+.backgrid .integer-cell,
+.backgrid .percent-cell,
+.backgrid .date-cell.editor input[type=text],
+.backgrid .time-cell.editor input[type=text],
+.backgrid .datetime-cell.editor input[type=text],
+.backgrid .number-cell.editor input[type=text],
+.backgrid .integer-cell.editor input[type=text],
+.backgrid .percent-cell.editor input[type=text] {
+  text-align: right;
+}
+
+.backgrid .boolean-cell,
+.backgrid .boolean-cell.editor input[type=checkbox] {
+  text-align: center;
+}
+
+.backgrid .select-cell {
+  text-align: center;
+}
+
+.backgrid .select-cell.editor {
+  padding: 0;
+}
+
+.backgrid .select-cell.editor select {
+  display: block;
+  width: 100%;
+  height: 28px;
+  padding: 4px 5px;
+  margin: 0;
+  line-height: 28px;
+  vertical-align: middle;
+  background-color: white;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.backgrid .select-cell.editor select[multiple] {
+  height: auto;
+}
+
+.backgrid .select-cell.editor :focus {
+  border: 0;
+  outline: 0;
+}
+
+.backgrid .select-cell.editor select::-moz-focus-inner,
+.backgrid .select-cell.editor optgroup::-moz-focus-inner,
+.backgrid .select-cell.editor option::-moz-focus-inner,
+.backgrid .select-cell.editor select::-o-focus-inner,
+.backgrid .select-cell.editor optgroup::-o-focus-inner,
+.backgrid .select-cell.editor option::-o-focus-inner {
+  border: 0;
+}
\ No newline at end of file

openassessment/xblock/static/css/lib/backgrid/backgrid.min.css

+.backgrid-container{position:relative;display:block;width:100%;height:465px;padding:0;overflow:auto;border:0}.backgrid{width:100%;max-width:100%;background-color:transparent;border-collapse:collapse;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.backgrid th,.backgrid td{display:none;height:20px;max-width:250px;padding:4px 5px;overflow:hidden;line-height:20px;text-align:left;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;border-bottom:1px solid #DDD}.backgrid th.renderable,.backgrid td.renderable{display:table-cell}.backgrid th{font-weight:bold;text-align:center}.backgrid th.sortable a{text-decoration:none;white-space:nowrap;cursor:pointer}.backgrid thead th{vertical-align:bottom;background-color:#f9f9f9}.backgrid thead th button{display:block;padding:0;background:0;border:0}.backgrid.backgrid-striped tbody tr:nth-child(even){background-color:#f9f9f9}.backgrid tbody tr.empty{font-style:italic;color:gray}.backgrid tbody tr.empty td{display:table-cell;text-align:center}.backgrid td.editor{padding:0}.backgrid td.editor,.backgrid tbody tr:nth-child(odd) td.editor{background-color:rgba(82,168,236,0.1);outline:1px solid rgba(82,168,236,0.8);outline-offset:-1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition-duration:200ms;-moz-transition-duration:200ms;-o-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:width,outline,background-color;-moz-transition-property:width,outline,background-color;-o-transition-property:width,outline,background-color;transition-property:width,outline,background-color;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.backgrid td.editor input[type=text]{display:block;width:100%;height:100%;padding:0 5px;margin:0;background-color:transparent;border:0;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none}.backgrid td.editor input[type=text]::-ms-clear{display:none}.backgrid td.error,.backgrid tbody tr:nth-child(odd) td.error{background-color:rgba(255,210,77,0.1);outline:1px solid #ffd24d}.backgrid td.editor :focus,.backgrid th.editor:focus{outline:0}.backgrid .sort-caret{display:inline-block;width:0;height:0;margin-left:.3em;border:0;content:""}.backgrid .ascending .sort-caret{vertical-align:baseline;border-top:0;border-right:4px solid transparent;border-bottom:4px solid #000;border-left:4px solid transparent}.backgrid .descending .sort-caret{vertical-align:super;border-top:4px solid #000;border-right:4px solid transparent;border-bottom:0;border-left:4px solid transparent}.backgrid .string-cell,.backgrid .uri-cell,.backgrid .email-cell,.backgrid .string-cell.editor input[type=text],.backgrid .uri-cell.editor input[type=text],.backgrid .email-cell.editor input[type=text]{text-align:left}.backgrid .date-cell,.backgrid .time-cell,.backgrid .datetime-cell,.backgrid .number-cell,.backgrid .integer-cell,.backgrid .percent-cell,.backgrid .date-cell.editor input[type=text],.backgrid .time-cell.editor input[type=text],.backgrid .datetime-cell.editor input[type=text],.backgrid .number-cell.editor input[type=text],.backgrid .integer-cell.editor input[type=text],.backgrid .percent-cell.editor input[type=text]{text-align:right}.backgrid .boolean-cell,.backgrid .boolean-cell.editor input[type=checkbox]{text-align:center}.backgrid .select-cell{text-align:center}.backgrid .select-cell.editor{padding:0}.backgrid .select-cell.editor select{display:block;width:100%;height:28px;padding:4px 5px;margin:0;line-height:28px;vertical-align:middle;background-color:white;border:0;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.backgrid .select-cell.editor select[multiple]{height:auto}.backgrid .select-cell.editor :focus{border:0;outline:0}.backgrid .select-cell.editor select::-moz-focus-inner,.backgrid .select-cell.editor optgroup::-moz-focus-inner,.backgrid .select-cell.editor option::-moz-focus-inner,.backgrid .select-cell.editor select::-o-focus-inner,.backgrid .select-cell.editor optgroup::-o-focus-inner,.backgrid .select-cell.editor option::-o-focus-inner{border:0}
\ No newline at end of file

openassessment/xblock/static/js/spec/lms/oa_listing.js

@@ -37,68 +37,82 @@ describe("OpenAssessment.CourseItemsListingView", function() {
         );
     };
 
-    var testData = [{
-        "parent_name": "Vertical 1",
-        "name": "Test ORA 1",
-        "url_grade_available_responses": "/grade_available_responses_view",
-        "staff_assessment": false,
-        "parent_id": "block-v1:SomeOrg+ORA101+2017+type@vertical+block@5570454d5dc4469ca75f36dd792ee316",
-        "url_base": "/student_view",
-        "id": "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@9d1af6220a4d4ecbafb22a3506effcce"
-    }, {
-        "parent_name": "Vertical 2",
-        "name": "Test ORA 2",
-        "url_grade_available_responses": "/grade_available_responses_view",
-        "staff_assessment": true,
-        "parent_id": "block-v1:SomeOrg+ORA101+2017+type@vertical+block@90b4edff50bc47d9ba037a3180c44e97",
-        "url_base": "/student_view",
-        "id": "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@3ec2343a95734a87af494455f52b1141"
-    }, {
-        "parent_name": "Vertical 3",
-        "name": "Test ORA 3",
-        "url_grade_available_responses": "/grade_available_responses_view",
-        "staff_assessment": false,
-        "parent_id": "block-v1:SomeOrg+ORA101+2017+type@vertical+block@59243a76bb5e4bda9243d5ded8163e18",
-        "url_base": "/student_view",
-        "id": "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@40b4edfe60bc47d9ba037a3180c44e97"
-    }];
-
-    var ora2responses = {
+    var oraCourseItems = {
         "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@9d1af6220a4d4ecbafb22a3506effcce": {
-            "training": 0,
-            "self": 0,
-            "peer": 1,
-            "waiting": 0,
-            "ai": 0,
-            "done": 0,
-            "cancelled": 0,
-            "total": 1,
-            "staff": 0
+            "name": "Test ORA 1",
+            "staff_assessment": false,
+            "parent": {
+                "id": "block-v1:SomeOrg+ORA101+2017+type@vertical+block@5570454d5dc4469ca75f36dd792ee316",
+                "name": "Vertical 1"
+            },
+            "responses": {
+                "training": 0,
+                "self": 0,
+                "peer": 1,
+                "waiting": 0,
+                "ai": 0,
+                "done": 0,
+                "cancelled": 0,
+                "total": 1,
+                "staff": 0
+            }
         },
         "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@3ec2343a95734a87af494455f52b1141": {
-            "training": 3,
-            "self": 0,
-            "peer": 0,
-            "waiting": 0,
-            "ai": 0,
-            "done": 0,
-            "cancelled": 0,
-            "total": 8,
-            "staff": 5
+            "name": "Test ORA 2",
+            "staff_assessment": true,
+            "parent": {
+                "id": "block-v1:SomeOrg+ORA101+2017+type@vertical+block@90b4edff50bc47d9ba037a3180c44e97",
+                "name": "Vertical 2"
+            },
+            "responses": {
+                "training": 3,
+                "self": 0,
+                "peer": 0,
+                "waiting": 0,
+                "ai": 0,
+                "done": 0,
+                "cancelled": 0,
+                "total": 8,
+                "staff": 5
+            }
         },
         "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@40b4edfe60bc47d9ba037a3180c44e97": {
-            "training": 0,
-            "self": 0,
-            "peer": 1,
-            "waiting": 0,
-            "ai": 0,
-            "done": 2,
-            "cancelled": 0,
-            "total": 3,
-            "staff": 0
+            "name": "Test ORA 3",
+            "staff_assessment": false,
+            "parent": {
+                "id": "block-v1:SomeOrg+ORA101+2017+type@openassessment+block@40b4edfe60bc47d9ba037a3180c44e97",
+                "name": "Vertical 3"
+            },
+            "responses": {
+                "training": 0,
+                "self": 0,
+                "peer": 1,
+                "waiting": 0,
+                "ai": 0,
+                "done": 2,
+                "cancelled": 0,
+                "total": 3,
+                "staff": 0
+            }
         }
     };
 
+    var testData = [];
+    var ora2responses = {};
+
+    $.each(oraCourseItems, function(locationId, oraItem) {
+        testData.push({
+            "parent_name": oraItem['parent']['name'],
+            "name": oraItem['name'],
+            "url_grade_available_responses": "/grade_available_responses_view",
+            "staff_assessment": oraItem['staff_assessment'],
+            "parent_id": oraItem['parent']['id'],
+            "url_base": "/student_view",
+            "id": locationId
+        });
+        ora2responses[locationId] = oraItem['responses'];
+    });
+
     beforeEach(function() {
         // Create a new stub server
         view = createCourseItemsListingView('oa_listing_view.html');
@@ -131,11 +145,11 @@ describe("OpenAssessment.CourseItemsListingView", function() {
         expect(section.find('.open-response-assessment-content').is(':visible')).toBe(true);
 
         var expectedArr = [3, 3, 12, 3, 2, 0, 5, 2];
-        var arr = [];
+        var summaryRowValuesArr = [];
         section.find('.open-response-assessment-summary td div.ora-summary-value').each(function(i, val) {
-            arr.push(parseInt($(val).text()));
+            summaryRowValuesArr.push(parseInt($(val).text()));
         });
-        expect(_.isEqual(arr, expectedArr)).toBe(true);
+        expect(_.isEqual(summaryRowValuesArr, expectedArr)).toBe(true);
 
         var rows = $('.open-response-assessment-main-table tbody tr');
         expect(rows.length).toBe(3);

openassessment/xblock/static/sass/oa/views/_oa-course-items-listing.scss

@@ -29,11 +29,19 @@
 
   .open-response-assessment-main-table {
     th {
-      background-color: $white;
+      background-color: #ffffff;
       text-align: left;
 
+      button {
+        background: none;
+        border: none;
+        box-shadow: none;
+        outline: none;
+        font-size: 14px;
+      }
+
       a {
-        color: $black !important;
+        color: #000000 !important;
       }
     }
 

package.json

@@ -4,6 +4,7 @@
   "repository": "https://github.com/edx/edx-ora2.git",
   "dependencies": {
     "backbone": "~1.2.3",
+    "backgrid ": "~0.3.8",
     "edx-ui-toolkit": "1.5.1",
     "moment": "^2.15.1",
     "moment-timezone": "~0.5.5",