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