Clean up the styling and make the evaluation parts collapsible.

common/lib/capa/capa/templates/openendedinput.html

@@ -27,8 +27,12 @@
     <input name="reload" class="reload" type="button" value="Recheck for Feedback" onclick="document.location.reload(true);" />
     % endif
   <div class="external-grader-message">
-    ${msg|n}
+      ${msg|n}
     % if status in ['correct','incorrect']:
+    <div class="collapsible evaluation-response">
+      <header>
+      <a href="#">Respond to Feedback</a>
+      </header>
     <section id="evaluation_${id}" class="evaluation">
     How accurate do you think this grading is?
         <div class="evaluation-scoring">
@@ -46,6 +50,7 @@
             <input name="submit-message" class="submit-message" type="button" value="Submit your message"/>
         </div>
     </section>
+    </div>
     % endif
   </div>
 </section>

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

@@ -311,6 +311,15 @@ section.problem {
         margin-right: 20px;
     }
 
+    .evaluation-response {
+        header {
+            text-align: right;
+            a {
+                font-size: .85em;
+            }
+        }
+    }
+
     .evaluation-scoring {
         .scoring-list {
             list-style-type: none;
@@ -670,6 +679,10 @@ section.problem {
       color: #2C2C2C;
       font-family: monospace;
       font-size: 1em;
+      padding-top: 10px;
+      header {
+          font-size: 1.4em;
+      }
 
       .shortform {
         font-weight: bold;