made raw user input box NOT a modal pop-up prompt!

pgbovine · pgbovine · commit 30534a84d2f7 · 2014-05-12T21:07:52.000-04:00
diff --git a/v3/css/pytutor.css b/v3/css/pytutor.css
@@ -723,6 +723,13 @@ div.ExecutionVisualizer .highlight-legend {
   border-color: #dddddd;
 }
 
+div.ExecutionVisualizer div#rawUserInputDiv {
+  padding: 5px;
+  width: 95%;
+  margin: 5px auto;
+  text-align: center;
+  border: 1px #e93f34 solid;
+}
 
 /* for pyCrazyMode */
 
diff --git a/v3/js/opt-frontend-common.js b/v3/js/opt-frontend-common.js
@@ -333,8 +333,6 @@ function updateAppDisplay(newAppMode) {
   }
 
   $('#urlOutput,#embedCodeOutput').val(''); // clear to avoid stale values
-
-  console.log('END updateAppDisplay', appMode);
 }
 
 
@@ -366,12 +364,10 @@ function doneExecutingCode() {
 
 
 function enterDisplayMode() {
-  console.log('enterDisplayMode');
   updateAppDisplay('display');
 }
 
 function enterEditMode() {
-  console.log('enterEditMode');
   updateAppDisplay('edit');
 }
 
diff --git a/v3/js/pytutor.js b/v3/js/pytutor.js
@@ -328,6 +328,7 @@ ExecutionVisualizer.prototype.render = function() {
          <button id="jmpStepFwd", type="button">Forward &gt;</button>\
          <button id="jmpLastInstr", type="button">Last &gt;&gt;</button>\
        </div>\
+       <div id="rawUserInputDiv"/>\
        <div id="errorOutput"/>\
        <div id="legendDiv"/>\
        <div id="stepAnnotationDiv">\
@@ -1388,7 +1389,7 @@ ExecutionVisualizer.prototype.updateOutputFull = function(smoothTransition) {
 
   if (isLastInstr) {
     if (this.promptForUserInput || this.promptForMouseInput) {
-      vcrControls.find("#curInstr").html('<b><font color="' + brightRed + '">user input</font></b>');
+      vcrControls.find("#curInstr").html('<b><font color="' + brightRed + '">Enter user input:</font></b>');
       // looks ugly when userInputPromptStr is TOO LONG
       //vcrControls.find("#curInstr").html('<b><font color="' + brightRed + '">' + this.userInputPromptStr + '</font></b>');
 
@@ -1740,19 +1741,22 @@ ExecutionVisualizer.prototype.updateOutputFull = function(smoothTransition) {
     }
   }
 
+  // handle raw user input
+  var ruiDiv = myViz.domRoot.find('#rawUserInputDiv');
+  ruiDiv.hide(); // hide by default
 
-  if (isLastInstr && this.executeCodeWithRawInputFunc) {
-    if (this.promptForUserInput) {
-      // blocking prompt dialog!
-      // put a default string of '' or else it looks ugly in IE
-      var userInput = prompt(this.userInputPromptStr, '');
+  if (isLastInstr && myViz.executeCodeWithRawInputFunc) {
+    if (myViz.promptForUserInput) {
+      ruiDiv.html(myViz.userInputPromptStr +
+                  ' <input id="raw_input_textbox" type="textbox" size="30"/>' +
+                  ' <button id="raw_input_submit_btn">Submit</button>');
+      ruiDiv.show();
 
-      // if you hit 'Cancel' in prompt(), it returns null
-      if (userInput !== null) {
-        // after executing, jump back to this.curInstr to give the
-        // illusion of continuity
-        this.executeCodeWithRawInputFunc(userInput, this.curInstr);
-      }
+      ruiDiv.find('#raw_input_submit_btn').click(function() {
+        var userInput = ruiDiv.find('#raw_input_textbox').val();
+        // advance instruction count by 1 to get to the NEXT instruction
+        myViz.executeCodeWithRawInputFunc(userInput, myViz.curInstr + 1);
+      });
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -333,8 +333,6 @@ function updateAppDisplay(newAppMode) {`
`333`	`333`	`}`
`334`	`334`
`335`	`335`	`$('#urlOutput,#embedCodeOutput').val(''); // clear to avoid stale values`
`336`		`-`
`337`		`- console.log('END updateAppDisplay', appMode);`
`338`	`336`	`}`
`339`	`337`
`340`	`338`
`@@ -366,12 +364,10 @@ function doneExecutingCode() {`
`366`	`364`
`367`	`365`
`368`	`366`	`function enterDisplayMode() {`
`369`		`- console.log('enterDisplayMode');`
`370`	`367`	`updateAppDisplay('display');`
`371`	`368`	`}`
`372`	`369`
`373`	`370`	`function enterEditMode() {`
`374`		`- console.log('enterEditMode');`
`375`	`371`	`updateAppDisplay('edit');`
`376`	`372`	`}`
`377`	`373`