better alignment of Expect output

Philip Guo · Philip Guo · commit 4f46c3ccae58 · 2011-10-02T14:25:12.000-04:00
diff --git a/edu-python-questions.js b/edu-python-questions.js
@@ -373,19 +373,23 @@ function gradeSubmission() {
 
     if (res.passed_test) {
       var happyFaceImg = '<img style="vertical-align: middle;" src="yellow-happy-face.png"/>';
-      $("#gradeMatrix tr.gradeMatrixRow:last").append('<td>' + happyFaceImg + '</td>');
+      $("#gradeMatrix tr.gradeMatrixRow:last").append('<td class="statusCell">' + happyFaceImg + '</td>');
+
+      // add an empty 'expected' cell
+      $("#gradeMatrix tr.gradeMatrixRow:last").append('<td class="expectedCell"></td>');
     }
     else {
       var sadFaceImg = '<img style="vertical-align: middle; margin-right: 8px;" src="red-sad-face.jpg"/>';
 
       var debugBtnID  = 'debug_test_' + i;
       var debugMeBtn = '<button id="' + debugBtnID + '" class="debugBtn" type="button">Debug me</button>';
-      var expectedSpan = '<span class="expectedSpan">Expected: </span>';
+      var expectedTd = '<td class="expectedCell">Expected: </td>';
 
-      $("#gradeMatrix tr.gradeMatrixRow:last").append('<td class="statusCell">' + sadFaceImg + debugMeBtn + expectedSpan + '</td>');
+      $("#gradeMatrix tr.gradeMatrixRow:last").append('<td class="statusCell">' + sadFaceImg + debugMeBtn + '</td>' + expectedTd);
 
-      var curCell = $("#gradeMatrix tr.gradeMatrixRow:last td.statusCell:last");
-      renderData(res.expect_val, curCell.find('span.expectedSpan:last'), true /* ignoreIDs */);
+      renderData(res.expect_val,
+                 $("#gradeMatrix tr.gradeMatrixRow:last td.expectedCell:last"),
+                 true /* ignoreIDs */);
 
       $('#' + debugBtnID).unbind(); // unbind it just to be paranoid
       $('#' + debugBtnID).click(genDebugLinkHandler(i));
diff --git a/edu-python.css b/edu-python.css
@@ -565,13 +565,23 @@ table#gradeMatrix {
 table#gradeMatrix thead {
   font-weight: bold;
   border: solid;
-  /*text-align: center;*/
+}
+
+table#gradeMatrix thead td.statusCell {
+  padding-left: 18px; /* to line up with smiley faces */
 }
 
 table#gradeMatrix td.testInputCell,
 table#gradeMatrix td.testOutputCell {
   padding-right: 25px;
-  padding-bottom: 8px;
+  padding-bottom: 10px;
+  vertical-align: middle;
+}
+
+table#gradeMatrix td.statusCell,
+table#gradeMatrix td.expectedCell {
+  padding-left: 12px;
+  padding-bottom: 10px;
   vertical-align: middle;
 }
  
@@ -608,6 +618,4 @@ div#submittedSolutionDisplay {
   margin-bottom: 20px;
 }
 
-.expectedSpan {
-  margin-left: 8px;
-}
+
diff --git a/question.html b/question.html
@@ -79,7 +79,7 @@
 </textarea>
 
 <p/>Write your test code here:<br/>
-<textarea class="codeInputPane" id="testCodeInput" cols="60" rows="4" wrap="off">
+<textarea class="codeInputPane" id="testCodeInput" cols="60" rows="3" wrap="off">
 </textarea>
 
 <p>
@@ -153,7 +153,8 @@
 <tr>
 <td>Input</td>
 <td>Result</td>
-<td>Status</td>
+<td class="statusCell">Status</td>
+<td></td>
 </tr>
 </thead>
 <tbody id="gradeMatrixTbody">
