Merge pull request #132 from MITx/kf-problems

I'll go ahead and merge this, since it fixes nearly all the issues we had with problem and html css, and this should go in before more changes.  The table borders can be fixed in another round.

common/lib/capa/templates/textinput.html

@@ -1,22 +1,36 @@
 <section id="textinput_${id}" class="textinput">
+    % if state == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif state == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif state == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif state == 'incomplete':
+    <div class="incorrect" id="status_${id}">
+    % endif
+
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
    % if size:
    size="${size}"
    % endif
    />
 
-  <span id="answer_${id}"></span>
+      <p class="status">
+        % if state == 'unsubmitted':
+        unanswered
+        % elif state == 'correct':
+        correct
+        % elif state == 'incorrect':
+        incorrect
+        % elif state == 'incomplete':
+        incomplete
+        % endif
+      </p>
+
+  <p id="answer_${id}" class="answer"></p>
 
-  % 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
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
+</div>
 </section>

common/lib/capa/templates/textinput_dynamath.html

@@ -2,34 +2,36 @@
 ### version of textline.html which does dynammic math
 ###
 <section class="text-input-dynamath">
-  <table style="display:inline; vertical-align:middle;">
-    <tr>
-      <td>
-        <input type="text" name="input_${id}" id="input_${id}" value="${value}" class="math" size="${size if size else ''}" />
-      </td>
-      <td>
-        <span id="answer_${id}"></span>
+    % if state == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif state == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif state == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif state == 'incomplete':
+    <div class="incorrect" id="status_${id}">
+    % endif
 
+      <input type="text" name="input_${id}" id="input_${id}" value="${value}" class="math" size="${size if size else ''}" />
+
+      <p class="status">
         % if state == 'unsubmitted':
-        <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+        unanswered
         % elif state == 'correct':
-        <span class="correct" id="status_${id}"></span>
+        correct
         % elif state == 'incorrect':
-        <span class="incorrect" id="status_${id}"></span>
+        incorrect
         % elif state == 'incomplete':
-        <span class="incorrect" id="status_${id}"></span>
+        incomplete
         % endif
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <span id="display_${id}">`{::}`</span>
-      </td>
-      <td>
+      </p>
+
+      <p id="answer_${id}" class="answer"></p>
+
+      <div id="display_${id}" class="equation">`{::}`</div>
+
+    </div>
         <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">  </textarea>
-      </td>
-    </tr>
-  </table>
   % if msg:
       <span class="message">${msg|n}</span>
   % endif

lms/static/sass/application.scss

@@ -7,7 +7,7 @@
 @import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
 
 // pages
-@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
+@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier", "courseware/problems";
 @import "textbook";
 @import "info";
 @import "profile";

lms/static/sass/courseware/_courseware.scss

@@ -12,7 +12,11 @@ div.course-wrapper {
   @extend .table-wrapper;
 
   ul, ol {
-    list-style: none;
+    padding-left: lh();
+
+    li {
+      margin-bottom: lh(.5);
+    }
   }
 
   section.course-content {
@@ -32,148 +36,6 @@ div.course-wrapper {
       }
     }
 
-    ul {
-      li {
-        margin-bottom: lh(.5);
-      }
-    }
-
-    .problem-set {
-      position: relative;
-      @extend .clearfix;
-
-      h2 {
-        margin-top: 0;
-        margin-bottom: 15px;
-        width: flex-grid(2, 9);
-        padding-right: flex-gutter(9);
-        border-right: 1px dashed #ddd;
-        @include box-sizing(border-box);
-        display: table-cell;
-        vertical-align: top;
-
-        &.problem-header {
-          section.staff {
-            margin-top: 30px;
-            font-size: 80%;
-          }
-        }
-
-        @media screen and (max-width:1120px) {
-          display: block;
-          width: auto;
-          border-right: 0;
-        }
-
-        @media print {
-          display: block;
-          width: auto;
-          border-right: 0;
-        }
-      }
-
-      section.problem {
-        display: table-cell;
-        width: flex-grid(7, 9);
-        padding-left: flex-gutter(9);
-
-        @media screen and (max-width:1120px) {
-          display: block;
-          width: auto;
-          padding: 0;
-        }
-
-        @media print {
-          display: block;
-          width: auto;
-          padding: 0;
-
-          canvas, img {
-            page-break-inside: avoid;
-          }
-        }
-
-        span {
-          &.unanswered, &.ui-icon-bullet {
-            @include inline-block();
-            background: url('../images/unanswered-icon.png') center center no-repeat;
-            height: 14px;
-            position: relative;
-            top: 4px;
-            width: 14px;
-          }
-
-          &.correct, &.ui-icon-check {
-            @include inline-block();
-            background: url('../images/correct-icon.png') center center no-repeat;
-            height: 20px;
-            position: relative;
-            top: 6px;
-            width: 25px;
-          }
-
-          &.incorrect, &.ui-icon-close {
-            @include inline-block();
-            background: url('../images/incorrect-icon.png') center center no-repeat;
-            height: 20px;
-            width: 20px;
-            position: relative;
-            top: 6px;
-          }
-        }
-      }
-
-      div {
-        > span {
-          display: block;
-          margin-bottom: lh(.5);
-
-          &[answer] {
-            border-top: 1px solid #ededed;
-            border-bottom: 1px solid #ededed;
-            background: #f3f3f3;
-            margin: 0 (-(lh()));
-            padding: lh(.5) lh();
-          }
-        }
-      }
-
-      input[type="text"] {
-        display: inline-block;
-        width: 50%;
-      }
-
-      center {
-        display: block;
-        margin: lh() 0;
-        border: 1px solid #ccc;
-        padding: lh();
-      }
-
-      section.action {
-        margin-top: lh();
-
-        input[type="button"] {
-          padding: lh(.4) lh();
-          text-shadow: 0 -1px 0 #666;
-        }
-      }
-    }
-
-    section.problems-wrapper, div#seq_content {
-      @extend .problem-set;
-    }
-
-    section.problems-wrapper {
-      display: table;
-      width: 100%;
-
-      @media screen and (max-width:1120px) {
-        display: block;
-        width: auto;
-      }
-    }
-
     div#seq_content {
       h1 {
         background: none;
@@ -184,6 +46,9 @@ div.course-wrapper {
     }
 
     ol.vert-mod {
+      list-style: none;
+      padding-left: 0;
+
       > li {
         @extend .clearfix;
         @extend .problem-set;
@@ -221,10 +86,6 @@ div.course-wrapper {
           height: 150px;
         }
 
-        ul {
-          list-style: disc outside none;
-          padding-left: 1em;
-        }
 
         nav.sequence-bottom {
           ul {

lms/static/sass/courseware/_problems.scss

@@ -0,0 +1,291 @@
+section.problem-set {
+  position: relative;
+  @extend .clearfix;
+
+  h2 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    width: flex-grid(2, 9);
+    padding-right: flex-gutter(9);
+    border-right: 1px dashed #ddd;
+    @include box-sizing(border-box);
+    display: table-cell;
+    vertical-align: top;
+
+    &.problem-header {
+      section.staff {
+        margin-top: 30px;
+        font-size: 80%;
+      }
+    }
+
+    @media screen and (max-width:1120px) {
+      display: block;
+      width: auto;
+      border-right: 0;
+    }
+
+    @media print {
+      display: block;
+      width: auto;
+      border-right: 0;
+    }
+  }
+
+  section.problem {
+    display: table-cell;
+    width: flex-grid(7, 9);
+    padding-left: flex-gutter(9);
+
+    @media screen and (max-width:1120px) {
+      display: block;
+      width: auto;
+      padding: 0;
+    }
+
+    @media print {
+      display: block;
+      width: auto;
+      padding: 0;
+
+      canvas, img {
+        page-break-inside: avoid;
+      }
+    }
+
+    div {
+      p.status {
+        text-indent: -9999px;
+        margin: -1px 0 0 10px;
+      }
+
+      &.unanswered {
+        p.status {
+          @include inline-block();
+          background: url('../images/unanswered-icon.png') center center no-repeat;
+          height: 14px;
+          width: 14px;
+        }
+      }
+
+      &.correct, &.ui-icon-check {
+        p.status {
+          @include inline-block();
+          background: url('../images/correct-icon.png') center center no-repeat;
+          height: 20px;
+          width: 25px;
+        }
+
+        input {
+          border-color: green;
+        }
+      }
+
+      &.incorrect, &.ui-icon-close {
+        p.status {
+          @include inline-block();
+          background: url('../images/incorrect-icon.png') center center no-repeat;
+          height: 20px;
+          width: 20px;
+          text-indent: -9999px;
+        }
+
+        input {
+          border-color: red;
+        }
+      }
+
+      > span {
+        display: block;
+        margin-bottom: lh(.5);
+      }
+
+      p.answer {
+        @include inline-block();
+        margin-bottom: 0;
+        margin-left: 10px;
+
+        &:before {
+          content: "Answer: ";
+          font-weight: bold;
+          display: inline;
+
+        }
+        &:empty {
+          &:before {
+            display: none;
+          }
+        }
+      }
+
+      div.equation {
+        clear: both;
+        padding: 6px;
+        background: #eee;
+
+        span {
+          margin-bottom: 0;
+        }
+      }
+
+      span {
+        &.unanswered, &.ui-icon-bullet {
+          @include inline-block();
+          background: url('../images/unanswered-icon.png') center center no-repeat;
+          height: 14px;
+          position: relative;
+          top: 4px;
+          width: 14px;
+        }
+
+        &.correct, &.ui-icon-check {
+          @include inline-block();
+          background: url('../images/correct-icon.png') center center no-repeat;
+          height: 20px;
+          position: relative;
+          top: 6px;
+          width: 25px;
+        }
+
+        &.incorrect, &.ui-icon-close {
+          @include inline-block();
+          background: url('../images/incorrect-icon.png') center center no-repeat;
+          height: 20px;
+          width: 20px;
+          position: relative;
+          top: 6px;
+        }
+      }
+    }
+
+    ul {
+      list-style: disc outside none;
+      margin-bottom: lh();
+      margin-left: .75em;
+      margin-left: .75rem;
+    }
+
+    ol {
+      list-style: decimal outside none;
+      margin-bottom: lh();
+      margin-left: .75em;
+      margin-left: .75rem;
+    }
+
+    dl {
+      line-height: 1.4em;
+    }
+
+    dl dt {
+      font-weight: bold;
+    }
+
+    dl dd {
+      margin-bottom: 0;
+    }
+
+    dd {
+      margin-left: .5em;
+      margin-left: .5rem;
+    }
+
+    li {
+      line-height: 1.4em;
+      margin-bottom: lh(.5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      margin-bottom: lh();
+    }
+
+    table {
+      margin-bottom: lh();
+      width: 100%;
+      border: 1px solid #ddd;
+      border-collapse: collapse;
+
+      th {
+        border-bottom: 2px solid #ccc;
+        font-weight: bold;
+        text-align: left;
+      }
+
+      td {
+        border: 1px solid #ddd;
+      }
+
+      caption, th, td {
+        padding: .25em .75em .25em 0;
+        padding: .25rem .75rem .25rem 0;
+      }
+
+      caption {
+        background: #f1f1f1;
+        margin-bottom: .75em;
+        margin-bottom: .75rem;
+        padding: .75em 0;
+        padding: .75rem 0;
+      }
+
+      tr, td, th {
+        vertical-align: middle;
+      }
+
+    }
+
+    hr {
+      background: #ddd;
+      border: none;
+      clear: both;
+      color: #ddd;
+      float: none;
+      height: 1px;
+      margin: 0 0 .75rem;
+      width: 100%;
+    }
+
+    .hidden {
+      display: none;
+      visibility: hidden;
+    }
+
+    input[type="text"] {
+      display: inline-block;
+      width: 50%;
+    }
+
+    center {
+      display: block;
+      margin: lh() 0;
+      border: 1px solid #ccc;
+      padding: lh();
+    }
+  }
+
+  section.action {
+    margin-top: lh(.5);
+
+    input[type="button"] {
+      padding: lh(.4) lh();
+      text-shadow: 0 -1px 0 #666;
+    }
+  }
+}
+
+section.problems-wrapper, div#seq_content {
+  @extend .problem-set;
+}
+
+section.problems-wrapper {
+  display: table;
+  width: 100%;
+
+  @media screen and (max-width:1120px) {
+    display: block;
+    width: auto;
+  }
+}

lms/static/sass/courseware/_video.scss

@@ -442,6 +442,8 @@ section.course-content {
       max-height: 460px;
       overflow: auto;
       width: flex-grid(3, 9);
+      padding-left: 0;
+      list-style: none;
 
       li {
         border: 0;