From 0170fcc01c3466f3fb8a8cb558d7070a0d6ef5cc Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Fri, 14 Sep 2012 13:25:55 -0400
Subject: [PATCH] styles for a slightly better multiple choice and solution
 span

---
 .../lib/capa/capa/templates/choicegroup.html  | 22 +++++++------
 .../lib/xmodule/xmodule/css/capa/display.scss | 32 +++++++++++++++++++
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/common/lib/capa/capa/templates/choicegroup.html b/common/lib/capa/capa/templates/choicegroup.html
index cb11350a63..106694ea4a 100644
--- a/common/lib/capa/capa/templates/choicegroup.html
+++ b/common/lib/capa/capa/templates/choicegroup.html
@@ -1,14 +1,4 @@
 <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>
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 0591a01843..ba3d7e716c 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/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 {