Refactored the status icon and span to a unified template and updated tests

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

@@ -23,9 +23,6 @@
 // ====================
 $annotation-yellow: rgba(255,255,10,0.3);
 $color-copy-tip: rgb(100,100,100);
-$correct: $green-d2;
-$partially-correct: $green-d2;
-$incorrect: $red;
 
 // FontAwesome Icon code
 // ====================
@@ -50,11 +47,13 @@ $asterisk-icon: '\f069'; // .fa-asterisk
 // ====================
 @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
 
-  &:after {
-    @extend %use-font-awesome;
-    color: $color;
-    font-size: 1.2em;
-    content: $fontAwesomeIcon;
+  .status-icon {
+    &:after {
+      @extend %use-font-awesome;
+      color: $color;
+      font-size: 1.2em;
+      content: $fontAwesomeIcon;
+    }
   }
 }
 
@@ -318,6 +317,12 @@ div.problem {
         @include status-icon($incorrect, $cross-icon);
       }
 
+      &.unsubmitted,
+      &.unanswered {
+        .status-icon {
+          content: '';
+        }
+      }
     }
   }
 }
@@ -818,12 +823,14 @@ div.problem {
       }
 
       .status {
-        &:after {
-          content: ''; // clear out correct or incorrect icon
+        .status-icon {
+          &:after {
+            content: '';
+          }
         }
       }
-
     }
+
   }
 
   .trailing_text {

common/lib/xmodule/xmodule/js/src/capa/display.js

@@ -962,7 +962,6 @@
                     $status = $('#status_' + id);
                     if ($status[0]) {
                         $status.removeClass().addClass('unanswered');
-                        $status.empty().css('display', 'inline-block');
                     } else {
                         $('<span>', {
                             class: 'unanswered',
@@ -979,8 +978,8 @@
                 id = ($select.attr('id').match(/^input_(.*)$/))[1];
                 return $select.on('change', function() {
                     return $('#status_' + id).removeClass().addClass('unanswered')
-                        .find('span')
-                        .text(gettext('Status: unsubmitted'));
+                        .find('.sr')
+                        .text(gettext('unsubmitted'));
                 });
             },
             textline: function(element) {