Make rubric render more nicely

common/lib/xmodule/xmodule/combined_open_ended_rubric.py

@@ -100,7 +100,11 @@ class CombinedOpenEndedRubric:
                 else:
                     raise Exception("[extract_category]: missing points attribute. Cannot continue to auto-create points values after a points value is explicitly dfined.")
                 optiontext = option.text
-                options.append({'text': option.text, 'points': points})
+                selected = False
+                if has_score:
+                    if points == score:
+                        selected = True
+                options.append({'text': option.text, 'points': points, 'selected' : selected})
 
         # sort and check for duplicates
         options = sorted(options, key=lambda option: option['points'])

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

@@ -219,6 +219,53 @@ div.result-container {
       }
 }
 
+div.result-container, section.open-ended-child {
+    .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: 200px;
+                height:100%;
+                display: inline-block;
+                min-height: 50px;
+                min-width: 50px;
+                background-color: #CCC;
+                font-size: 1em;
+            }
+            .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.open-ended-child {
   @media print {
     display: block;
@@ -576,49 +623,4 @@ section.open-ended-child {
     font-size: 0.9em;
   }
 
-  .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: 200px;
-            height:100%;
-            display: inline-block;
-            min-height: 50px;
-            min-width: 50px;
-            background-color: #CCC;
-            font-size: 1em;
-        }
-        .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;
-        }
-    }
-
 }

lms/templates/open_ended_rubric.html

@@ -4,14 +4,24 @@
     <tr>
         <th>${category['description']}</th>
         % if category['has_score'] == True:
+        <div class="view-only">
             <td>Your Score: ${category['score']}  </td>
+        </div>
         % endif
         % for j in range(len(category['options'])):
         <% option = category['options'][j] %>
         <td>
             <div class="view-only">
                 ${option['text']}
-                <div class="grade">[${option['points']} points]</div>
+                % if option.has_key('selected'):
+                    % if option['selected'] == True:
+                        <div class="selected-grade">[${option['points']} points]</div>
+                    %else:
+                        <div class="grade">[${option['points']} points]</div>
+                    % endif
+                % else:
+                    <div class="grade">[${option['points']} points]</div>
+                %endif
             </div>
         </td>
         % endfor