Add in CSS updates and fixes to the template so that it will work.

common/lib/capa/capa/inputtypes.py

@@ -803,17 +803,19 @@ class RubricInput(InputTypeBase):
         Convert options to a convenient format.
         """
         return [
-                ]
+            Attribute('height', None),
+            Attribute('width', None)]
 
     def _extra_context(self):
         """
-        Add in the various bits and pieces of the 
+        Add in the various bits and pieces that we need
         """
-        return {}
+        return {'categories': self.categories,
+                'view_only': False}
 
     def setup(self):
-
-        extract_categories(self.xml)
+        # set the categories
+        self.categories = self.extract_categories(self.xml)
 
     @staticmethod
     def extract_categories(element):
@@ -833,8 +835,8 @@ class RubricInput(InputTypeBase):
             if category.tag != 'category':
                 raise Exception("[capa.inputtypes.extract_categories] Expected a <category> tag: got {0} instead".format(category.tag))
             else:
-                categories.append(extract_category(category))
-        self.categories = categories
+                categories.append(RubricInput.extract_category(category))
+        return categories
 
 
     @staticmethod
@@ -883,7 +885,7 @@ class RubricInput(InputTypeBase):
 
         # sort and check for duplicates
         options = sorted(options, key=lambda option: option['points'])
-        validate_options(options)
+        RubricInput.validate_options(options)
 
         return {'description': description, 'options': options}
         

common/lib/capa/capa/templates/rubricinput.html

@@ -1,5 +1,25 @@
-<section id="rubric_${id}" class="rubric-section">
+<form class="rubric-template" id="inputtype_${id}">
     <table class="rubric">
-
+        % for i in range(len(categories)):
+            <% category = categories[i] %>
+        <tr>
+            <th>${category['description']}</th>
+            % for j in range(len(category['options'])):
+                <% option = category['options'][j] %>
+            <td>
+                <!--TODO: figure out the state variables/selected info -->
+                % if view_only:
+                <div class="view-only">
+                    ${option['text']}
+                    <div class="grade">[${option['points']} points]</div>
+                </div>
+                % else:
+                    <input type="radio" class="score-selection" name="score-selection-${i}" id="score-${i}-${j}" value="${option['points']}"/>
+                    <label for="score-${i}-${j}">${option['text']}</label>
+                % endif
+            </td>
+            % endfor
+        </tr>
+        % endfor
     </table>
-</section>
+</form>

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -20,6 +20,51 @@ h2 {
   color: darken($error-red, 10%);
 }
 
+.rubric {
+    tr {
+        margin:10px 0px;
+        height: 100%;
+    }
+    td {
+        padding: 20px 0px;
+        margin: 10px 0px;
+        height: 100%;
+    }
+    th {
+        padding: 5px;
+        margin: 5px;
+    }
+    label,
+    .view-only {
+        margin:10px;
+        position: relative;
+        padding: 15px;
+        width: 175px;
+        height:100%;
+        display: inline-block;
+        min-height: 50px;
+        min-width: 50px;
+        background-color: #CCC;
+        text-size: 1.5em;
+    }
+    .grade {
+      position: absolute;
+      bottom:0px;
+      right:0px;
+      margin:10px;
+    }
+    .selected-grade {
+      background: #666;
+      color: white; 
+    }
+    input[type=radio]:checked + label {
+      background: #666;
+      color: white; }
+    input[class='score-selection'] {
+      display: none; 
+    }
+}
+
 section.problem {
   @media print {
     display: block;