Formatted new hints and testing blocks

common/lib/capa/capa/templates/textbox.html

@@ -7,26 +7,28 @@
 
   <span id="answer_${id}"></span>
 
+  <div class="grader-status">
     % if state == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+      <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
     % elif state == 'correct':
-  <span class="correct" id="status_${id}"></span>
+      <span class="correct" id="status_${id}">Correct</span>
     % elif state == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
+      <span class="incorrect" id="status_${id}">Incorrect</span>
     % elif state == 'queued':
-  <span class="processing" id="status_${id}"></span>
+      <span class="processing" id="status_${id}">Queued</span>
       <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
+
     % if hidden:
       <div style="display:none;" name="${hidden}" inputid="input_${id}" />
     % endif
-  <br/>
-  <span style="display:none;" class="debug">(${state})</span>
-  <br/>
-  <span class="message">${msg|n}</span>
-  <br/>
 
-  <br/>
+    <p class="debug">${state}</p>
+  </div>
+
+  <div class="external-grader-message">
+    ${msg|n}
+  </div>
 
   <script>
     // Note: We need to make the area follow the CodeMirror for this to work.
@@ -43,14 +45,25 @@
         indentWithTabs: true,
         smartIndent: false
       });
+
+      // this should be brought back into problems
+      $('.longform-body').hide();
+      $('.longform-header').append('<a href="" class="full">See full output</a>');
+
+      $('.full').click(function() {
+        $(this).parent().siblings().slideToggle();
+        $(this).parent().parent().toggleClass('open');
+        var text = $(this).text() == 'See full output' ? 'Hide output' : 'See full output';
+        $(this).text(text);
+        return false;
+      });
+
+      $('.collapsible section').hide()
+      $('.collapsible header a').click(function() {
+        $(this).parent().siblings().slideToggle();
+        $(this).parent().parent().toggleClass('open');
+        return false
+      });
     });
   </script>
-  <style type="text/css">
-    .CodeMirror {
-        border: 1px solid black;
-        font-size: 14px;
-        line-height: 18px;
-        resize: both;
-    }
-  </style>
 </section>

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

@@ -16,6 +16,7 @@ h2 {
   }
 }
 
+
 section.problem {
   @media print {
     display: block;
@@ -171,6 +172,30 @@ section.problem {
         top: 6px;
       }
     }
+
+    .grader-status {
+      padding: 9px;
+      background: #F6F6F6;
+      border: 1px solid #ddd;
+      border-top: 0;
+      margin-bottom: 20px;
+      @include clearfix;
+
+      span {
+        text-indent: -9999px;
+        overflow: hidden;
+        display: block;
+        float: left;
+        margin: -7px 7px 0 0;
+      }
+
+      p {
+        line-height: 20px;
+        text-transform: capitalize;
+        margin-bottom: 0;
+        float: left;
+      }
+    }
   }
 
   ul {
@@ -246,6 +271,69 @@ section.problem {
 
   }
 
+  code {
+    margin: 0 2px;
+    padding: 0px 5px;
+    white-space: nowrap;
+    border: 1px solid #EAEAEA;
+    background-color: #F8F8F8;
+    @include border-radius(3px);
+    font-size: .9em;
+  }
+
+  pre {
+    background-color: #F8F8F8;
+    border: 1px solid #CCC;
+    font-size: .9em;
+    line-height: 1.4;
+    overflow: auto;
+    padding: 6px 10px;
+    @include border-radius(3px);
+
+    > code {
+      margin: 0;
+      padding: 0;
+      white-space: pre;
+      border: none;
+      background: transparent;
+    }
+  }
+
+  .CodeMirror {
+    border: 1px solid black;
+    font-size: 14px;
+    line-height: 18px;
+    resize: both;
+
+    pre {
+      @include border-radius(0);
+      border-radius: 0;
+      border-width: 0;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      white-space: pre;
+      word-wrap: normal;
+      overflow: hidden;
+      resize: none;
+
+      &.CodeMirror-cursor {
+        z-index: 10;
+        position: absolute;
+        visibility: hidden;
+        border-left: 1px solid black;
+        border-right: none;
+        width: 0;
+      }
+    }
+  }
+
+  .CodeMirror-focused pre.CodeMirror-cursor {
+    visibility: visible;
+  }
+
   hr {
     background: #ddd;
     border: none;
@@ -308,7 +396,7 @@ section.problem {
         a {
           display: block;
           padding: 9px;
-          background: #f3f3f3;
+          background: #F6F6F6;
           @include box-shadow(inset 0 0 0 1px #fff);
         }
       }
@@ -318,4 +406,44 @@ section.problem {
       }
     }
   }
+
+  .test {
+    border-top: 1px solid #aaa;
+    padding-top: 18px;
+
+    header {
+      margin-bottom: 12px;
+    }
+
+    .shortform, .longform {
+      border: 1px solid #d3d3d3;
+      padding: 9px;
+      margin-bottom: 12px;
+      @include box-shadow(inset 0 0 0 1px #f3f3f3);
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    a.full {
+      @include position(absolute,  0 0 0px 0px);
+      font-size: .8em;
+      padding: 4px;
+      text-align: right;
+      width: 100%;
+      display: block;
+      background: #F3F3F3;
+      @include box-sizing(border-box);
+    }
+
+    .longform {
+      position: relative;
+      padding-bottom: 20px;
+    }
+
+    .longform-header {
+      margin-bottom: lh();
+    }
+  }
 }