Merge pull request #690 from MITx/feature/kfiedler/multiple-choice

styles for a slightly better multiple choice and solution span

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

 <form class="choicegroup capa_inputtype" id="inputtype_${id}">
-  
-  % for choice_id, choice_description in choices:
-  <label for="input_${id}_${choice_id}">  <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} </label>
-  % endfor
-  <span id="answer_${id}"></span>
-
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
   % elif state == 'correct': 
@@ -18,4 +8,16 @@
   % elif state == 'incomplete':
   <span class="incorrect" id="status_${id}"></span>
   % endif
+
+  <fieldset>
+    % for choice_id, choice_description in choices:
+    <label for="input_${id}_${choice_id}">  <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} </label>
+    % endfor
+    <span id="answer_${id}"></span>
+  </fieldset>
+
 </form>

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

@@ -36,9 +36,24 @@ section.problem {
   }
 
   .choicegroup {
+    @include clearfix;
+
     label.choicegroup_correct:after {
       content: url('../images/correct-icon.png');
     }
+
+    > span {
+      padding-right: 20px;
+      float: left;
+      background-position: 0 0  !important;
+    }
+
+    fieldset {
+      @include box-sizing(border-box);
+      float: left;
+      border-left: 1px solid #ddd;
+      padding-left: 20px;
+    }
   }
 
   ol.enumerate {
@@ -52,6 +67,23 @@ section.problem {
     }
   }
 
+  .solution-span {
+    span {
+    margin: 20px 0;
+    display: block;
+    border: 1px solid #ddd;
+    padding: 9px 15px 20px;
+    background: #FFF;
+    position: relative;
+    @include box-shadow(inset 0 0 0 1px #eee);
+    @include border-radius(3px);
+
+    &:empty {
+      display: none;
+    }
+    }
+  }
+
   div {
     p {
       &.answer {