Updated CSS and template for choicegroup response

so that: a) checks/x marks appear after each option
for radio buttons, b) checks/x marks appear for the
entire problem (not individual options) for checkbox
buttons.

Also fixed issue with checks appearing on the next line
by changing <text> to display:inline instead of display:block

common/lib/capa/capa/templates/choicegroup.html

 <form class="choicegroup capa_inputtype" id="inputtype_${id}">
-
-  <fieldset>
-    % for choice_id, choice_description in choices:
-    <label for="input_${id}_${choice_id}">          
-
-        % if choice_id in value:
-        <span class="indicator_container">
-            % if status == 'unsubmitted':
-            <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-            % elif status == 'correct': 
-            <span class="correct" id="status_${id}"></span>
-            % elif status == 'incorrect':
-            <span class="incorrect" id="status_${id}"></span>
-            % elif status == 'incomplete':
-            <span class="incorrect" id="status_${id}"></span>
-            % endif
-        </span>
-        % else:
-        <span class="indicator_container">&#160;</span>
+    <div class="indicator_container">
+    % if input_type == 'checkbox':
+        % if status == 'unsubmitted':
+        <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+        % elif status == 'correct': 
+        <span class="correct" id="status_${id}"></span>
+        % elif status == 'incorrect':
+        <span class="incorrect" id="status_${id}"></span>
+        % elif status == 'incomplete':
+        <span class="incorrect" id="status_${id}"></span>
         % endif
-        
-        <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" value="${choice_id}"
-    % if choice_id in value:
-    checked="true"
     % endif
-    />
-    
-    ${choice_description}
+    </div>
 
-    </label>
+    <fieldset>
+
+        % for choice_id, choice_description in choices:
+        <label for="input_${id}_${choice_id}"
+            % if input_type == 'radio' and choice_id in value:
+            <% 
+                if status == 'correct':
+                    correctness = 'correct'
+                if status == 'incorrect':
+                    correctness = 'incorrect'
+            %>
+            class="choicegroup_${correctness}"
+            % endif
+            >  
+            <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" value="${choice_id}"
+            % if choice_id in value:
+            checked="true" 
+            % endif
 
-    % endfor
-    <span id="answer_${id}"></span>
-  </fieldset>
+            /> ${choice_description} </label>
+        % endfor
+        <span id="answer_${id}"></span>
+    </fieldset>
 
 </form>

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

@@ -42,6 +42,14 @@ section.problem {
     label.choicegroup_correct{
       &:after{
         content: url('../images/correct-icon.png');
+        margin-left:15px
+      }
+    }
+
+    label.choicegroup_incorrect{
+      &:after{
+        content: url('../images/incorrect-icon.png');
+        margin-left:15px;
       }
     }
 
@@ -52,6 +60,7 @@ section.problem {
     .indicator_container {
       float: left;
       width: 25px;
+      height: 1px;
       margin-right: 15px;
     }
 
@@ -69,7 +78,7 @@ section.problem {
     }
 
     text {
-      display: block;
+      display: inline;
       margin-left: 25px;
     }
   }