Use something more visually easy to use for self-assessment.

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

@@ -270,12 +270,6 @@ div.result-container, section.open-ended-child {
               background: #666;
               color: white;
             }
-            input[type=radio]:checked + label {
-              background: #666;
-              color: white; }
-            input[class='score-selection'] {
-              display: none;
-            }
         }
 }
 
@@ -645,6 +639,22 @@ section.open-ended-child {
           {
               margin-bottom: 1em;
           }
+          label {
+              margin: 10px;
+              padding: 5px;
+              display: inline-block;
+              min-width: 50px;
+              background-color: #CCC;
+              text-size: 1.5em;
+          }
+
+          input[type=radio]:checked + label {
+              background: #666;
+              color: white; 
+          }
+          input[class='grade-selection'] {
+              display: none;
+          }
 
       }
   }

common/lib/xmodule/xmodule/js/src/combinedopenended/display.coffee

@@ -153,7 +153,7 @@ class @CombinedOpenEnded
 
 
   find_assessment_elements: ->
-    @assessment = @$('select.assessment')
+    @assessment = @$('input[name="grade-selection"]')
 
   find_hint_elements: ->
     @hint_area = @$('textarea.post_assessment')
@@ -177,7 +177,8 @@ class @CombinedOpenEnded
   save_assessment: (event) =>
     event.preventDefault()
     if @child_state == 'assessing'
-      data = {'assessment' : @assessment.find(':selected').text()}
+      checked_assessment = @$('input[name="grade-selection"]:checked')
+      data = {'assessment' : checked_assessment.val()}
       $.postWithPrefix "#{@ajax_url}/save_assessment", data, (response) =>
         if response.success
           @child_state = response.state

lms/static/coffee/src/staff_grading/staff_grading.coffee

@@ -421,7 +421,7 @@ class StaffGrading
     else if @state == state_grading
       @ml_error_info_container.html(@ml_error_info)
       meta_list = $("<ul>")
-      meta_list.append("<li><span class='meta-info'>Pending - </span> #{@num_pending}</li>")
+      meta_list.append("<li><span class='meta-info'>Available - </span> #{@num_pending}</li>")
       meta_list.append("<li><span class='meta-info'>Graded - </span> #{@num_graded}</li>")
       meta_list.append("<li><span class='meta-info'>Needed for ML - </span> #{Math.max(@min_for_ml - @num_graded, 0)}</li>")
       @problem_meta_info.html(meta_list)

lms/templates/self_assessment_rubric.html

@@ -7,11 +7,14 @@
     <div class="scoring-container">
     <h3>Scoring</h3>
     <p>Please select a score below:</p>
-    <select name="assessment" class="assessment">
-        %for i in xrange(0,max_score+1):
-            <option value="${i}">${i}</option>
-        %endfor
-    </select>
+
+    <div class="grade-selection">
+    %for i in xrange(0,max_score+1):
+    <% id = "score-{0}".format(i) %>
+        <input type="radio" class="grade-selection" name="grade-selection" value="${i}" id="${id}">
+        <label for="${id}">${i}</label>
+    %endfor
+    </div>
     </div>
     % endif