Merge pull request #600 from MITx/feature/kfiedler/hints

Added styles for problems

common/lib/capa/capa/templates/filesubmission.html

@@ -1,17 +1,18 @@
 <section id="filesubmission_${id}" class="filesubmission">
-    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/><br />
+  <div class="grader-status file">
     % 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
-    <span style="display:none;" class="debug">(${state})</span>
-    <br/>
-    <span class="message">${msg|n}</span>
-    <br/>
+    <p class="debug">${state}</p>
+
+    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files}" data-allowed_files="${allowed_files}"/>
+  </div>
+    <div class="message">${msg|n}</div>
 </section>

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

@@ -7,26 +7,28 @@
 
   <span id="answer_${id}"></span>
 
-  % 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 == 'queued':
-  <span class="processing" id="status_${id}"></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/>
+  <div class="grader-status">
+    % if state == 'unsubmitted':
+      <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
+    % elif state == 'correct':
+      <span class="correct" id="status_${id}">Correct</span>
+    % elif state == 'incorrect':
+      <span class="incorrect" id="status_${id}">Incorrect</span>
+    % elif state == 'queued':
+      <span class="processing" id="status_${id}">Queued</span>
+      <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
+    % endif
 
-  <br/>
+    % if hidden:
+      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
+    % endif
+
+    <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.
@@ -45,12 +47,4 @@
       });
     });
   </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,8 +172,54 @@ 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;
+      }
+
+      &.file {
+        background: #FFF;
+        margin-top: 20px;
+        padding: 20px 0 0 0;
+
+        border: {
+          top: 1px solid #eee;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+
+        p.debug {
+          display: none;
+        }
+
+        input {
+          float: left;
+        }
+      }
+    }
   }
 
+
   ul {
     list-style: disc outside none;
     margin-bottom: lh();
@@ -246,6 +293,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;
@@ -280,4 +390,96 @@ section.problem {
       @extend .blue-button;
     }
   }
+
+  div.capa_alert {
+    padding: 8px 12px;
+    border: 1px solid #EBE8BF;
+    border-radius: 3px;
+    background: #FFFCDD;
+    font-size: 0.9em;
+    margin-top: 10px;
+  }
+
+  .hints {
+    border: 1px solid #ccc;
+
+    h3 {
+      border-bottom: 1px solid #e3e3e3;
+      text-shadow: 0 1px 0 #fff;
+      padding: 9px;
+      background: #eee;
+      font-weight: bold;
+      font-size: em(16);
+    }
+
+    div {
+      border-bottom: 1px solid #ddd;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+
+      header {
+        a {
+          display: block;
+          padding: 9px;
+          background: #F6F6F6;
+          @include box-shadow(inset 0 0 0 1px #fff);
+        }
+      }
+
+      section {
+        padding: 9px;
+      }
+    }
+  }
+
+  .test {
+    padding-top: 18px;
+
+    header {
+      margin-bottom: 12px;
+
+      h3 {
+        font-size: 0.9em;
+        font-weight: bold;
+        font-style: normal;
+        text-transform: uppercase;
+        color: #AAA;
+      }
+    }
+
+    > section {
+      border: 1px solid #ddd;
+      padding: 9px 9px 20px;
+      margin-bottom: 10px;
+      background: #FFF;
+      position: relative;
+      @include box-shadow(inset 0 0 0 1px #eee);
+      @include border-radius(3px);
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .shortform {
+        margin-bottom: .6em;
+      }
+
+      a.full {
+        @include position(absolute,  0 0 1px 0px);
+        font-size: .8em;
+        padding: 4px;
+        text-align: right;
+        width: 100%;
+        display: block;
+        background: #F3F3F3;
+        @include box-sizing(border-box);
+      }
+    }
+  }
 }

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -263,8 +263,8 @@ class @Problem
       @el.find('.capa_alert').remove()
     alert_elem = "<div class='capa_alert'>" + msg + "</div>"
     @el.find('.action').after(alert_elem)
-    @el.find('.capa_alert').animate(opacity: 0, 500).animate(opacity: 1, 500)
-    
+    @el.find('.capa_alert').css(opacity: 0).animate(opacity: 1, 700)
+
   save: =>
     Logger.log 'problem_save', @answers
     $.postWithPrefix "#{@url}/problem_save", @answers, (response) =>

lms/templates/problem.html

@@ -32,3 +32,27 @@
   </section>
 </section>
 
+<%block name="js_extra">
+<script type="text/javascript" charset="utf-8">
+  $(function(){
+      // this should be brought back into problems
+      $('.longform').hide();
+      $('.shortform').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>
+</%block>