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}">
+  % if state == 'unsubmitted':
+  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+  % elif state == 'correct': 
+  <span class="correct" id="status_${id}"></span>
+  % elif state == 'incorrect':
+  <span class="incorrect" id="status_${id}"></span>
+  % 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:
@@ -8,14 +18,6 @@
     /> ${choice_description} </label>
     % endfor
     <span id="answer_${id}"></span>
+  </fieldset>
 
-  % if state == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
-  <span class="correct" id="status_${id}"></span>
-  % elif state == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
-  % elif state == 'incomplete':
-  <span class="incorrect" id="status_${id}"></span>
-  % endif
 </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 {