some more refactoring

Philip Guo · Philip Guo · commit 2b29b4d9ce46 · 2011-09-27T09:29:08.000-04:00
diff --git a/TODO b/TODO
@@ -106,11 +106,6 @@ line of code immediately below each annotation.
   perhaps deploy online on WebFaction, since they offer both Python 2.X
   and Python 3.X on their servers.
 
----
-2011-09-22
-
-- Make the 'Edit code' window display in the same place as the read-only
-  code display column, in order to prevent abrupt jumping.
 
 ---
 2011-09-23
@@ -147,7 +142,8 @@ display!)
 ---
 2011-09-26
 
-A subset of the suggestions from MIT folks:
+A subset of the suggestions from MIT folks (see more in my private notes
+file):
 
 - people thought that it's important to draw arrowheads at the end of
   pointers ... try to make them relatively 'clean-looking', though
@@ -158,9 +154,6 @@ A subset of the suggestions from MIT folks:
   - one idea is to LIMIT the size of the returned JSON data from the
     back-end???
 
-- add a highlighter in the code to indicate that the program has
-  TERMINATED properly (maybe light blue highlight of the code line?)
-
 - to make it easier to jump to certain points in execution rather than
   tediously single-step through execution.  e.g., could imagine adding a
   scrubber (like for video playback) combined with pointing at line of
diff --git a/edu-python-questions.js b/edu-python-questions.js
@@ -19,9 +19,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 */
 
-
 // UI for online problem sets
 
 // Pre-req: edu-python.js should be imported BEFORE this file
 
 
+$(document).ready(function() {
+  eduPythonCommonInit(); // must call this first!
+
+  $("#pyOutputPane").hide();
+
+  $("#executeBtn").attr('disabled', false);
+  $("#executeBtn").click(function() {
+    $('#executeBtn').html("Please wait ... processing your code");
+    $('#executeBtn').attr('disabled', true);
+    $("#pyOutputPane").hide();
+
+    $.post("cgi-bin/web_exec.py",
+           {user_script : $("#pyInput").val()},
+           function(traceData) {
+             renderPyCodeOutput($("#pyInput").val());
+             processTrace(traceData);
+
+            $("#pyInputPane").hide();
+            $("#pyOutputPane").show();
+            appMode = 'visualize';
+
+            $('#executeBtn').html("Visualize execution");
+            $('#executeBtn').attr('disabled', false);
+           },
+           "json");
+  });
+
+
+  $("#editBtn").click(function() {
+    $("#pyInputPane").show();
+    $("#pyOutputPane").hide();
+    appMode = 'edit';
+  });
+});
+
diff --git a/edu-python-tutor.js b/edu-python-tutor.js
@@ -33,35 +33,24 @@ $(document).ready(function() {
 
   $("#executeBtn").attr('disabled', false);
   $("#executeBtn").click(function() {
-    if (localTesting) {
-      renderPyCodeOutput($("#pyInput").val());
-
-      processTrace(data_test_trace);
-
-      $("#pyInputPane").hide();
-      $("#pyOutputPane").show();
-      appMode = 'visualize';
-    }
-    else {
-      $('#executeBtn').html("Please wait ... processing your code");
-      $('#executeBtn').attr('disabled', true);
-      $("#pyOutputPane").hide();
-
-      $.post("cgi-bin/web_exec.py",
-             {user_script : $("#pyInput").val()},
-             function(traceData) {
-               renderPyCodeOutput($("#pyInput").val());
-               processTrace(traceData);
-
-              $("#pyInputPane").hide();
-              $("#pyOutputPane").show();
-              appMode = 'visualize';
-
-              $('#executeBtn').html("Visualize execution");
-              $('#executeBtn').attr('disabled', false);
-             },
-             "json");
-    }
+    $('#executeBtn').html("Please wait ... processing your code");
+    $('#executeBtn').attr('disabled', true);
+    $("#pyOutputPane").hide();
+
+    $.post("cgi-bin/web_exec.py",
+           {user_script : $("#pyInput").val()},
+           function(traceData) {
+             renderPyCodeOutput($("#pyInput").val());
+             processTrace(traceData);
+
+            $("#pyInputPane").hide();
+            $("#pyOutputPane").show();
+            appMode = 'visualize';
+
+            $('#executeBtn').html("Visualize execution");
+            $('#executeBtn').attr('disabled', false);
+           },
+           "json");
   });
 
 
diff --git a/edu-python.js b/edu-python.js
@@ -32,9 +32,6 @@ var useJsPlumbRendering = true;
 var stackGrowsDown = true;
 
 
-var localTesting = false; // if this is true, mock-data.js had also better be included
-
-
 /* colors - see edu-python.css */
 var lightYellow = '#F5F798';
 var lightLineColor = '#FFFFCC';
@@ -44,6 +41,7 @@ var visitedLineColor = '#3D58A2';
 var lightGray = "#cccccc";
 //var lightGray = "#dddddd";
 var darkBlue = "#3D58A2";
+var lightBlue = "#899CD1";
 var pinkish = "#F15149";
 
 
@@ -153,6 +151,9 @@ function highlightCodeLine(curLine, visitedLinesSet, hasError, isTerminated) {
   if (!isTerminated || hasError) {
     tbl.find('td.cod:eq(' + (curLine - 1) + ')').css('background-color', lineBgCol);
   }
+  else if (isTerminated) {
+    tbl.find('td.cod:eq(' + (curLine - 1) + ')').css('background-color', lightBlue);
+  }
 }
 
 // relies on curTrace and curInstr globals
diff --git a/question.html b/question.html
@@ -61,11 +61,11 @@
 <div class="questionsHeaderStmt" id="ProblemStatement"><b>Problem</b>: Write a function that
 reverses a list in-place.</div>
 
-<div class="questionsHeaderStmt" id="ExampleStatement"><b>Example</b>: A list [INSERT LIST DIAGRAM]
-should be mutated to look like [INSERT LIST DIAGRAM]</div>
+<div class="questionsHeaderStmt" id="ExampleStatement"><b>Example</b>: A
+list <span id="exampleInputData"></span> should be mutated to look like
+<span id="exampleOutputData"></span></div>
 
 <div class="questionsHeaderStmt" id="HintStatement"><a href="#" id="showHintHref">Show hint</a></div>
-
 <div class="questionsHeaderStmt" id="SolutionStatement"><a href="#" id="showSolutionHref">Show solution</a></div>
 
 </div>
