Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Rearrange output into 3 columns, enable real-time editing, enable rea…

…l-time input manipulation. Fixes #78. Fixes #79. Fixes #88. Fixes #90. Fixes #91.
  • Loading branch information...
commit 5cccd59e56e3620d1d4a2ccf1d6bd5357f134493 1 parent 8725799
@jeresig jeresig authored
Showing with 197 additions and 109 deletions.
  1. +35 −6 css/style.css
  2. +108 −89 js/play-ui.js
  3. +54 −14 js/utils.js
View
41 css/style.css
@@ -6,10 +6,13 @@ body {
#canvas-editor, #editor, #canvas, #play-overlay, #play-page .extra-editor {
position: relative;
- width: 640px;
height: 360px;
+ /*
+ width: 640px;
top: 0px;
left: 0px;
+ */
+ /*width: 100%;*/
}
#canvas, #play-overlay {
@@ -43,10 +46,12 @@ body {
#editor-box, #tests-box, #output-box, #solution-box {
overflow: hidden;
- position: absolute;
border-bottom: none;
+ /*
+ position: absolute;
top: 0px;
left: 0px;
+ */
}
#play-page .extra-editor {
@@ -103,7 +108,7 @@ body {
#output div input.text {
font-family: Monaco, Courier New;
font-size: 12px;
- width: 175px;
+ width: 125px;
}
.toolbar {
@@ -178,11 +183,13 @@ a.ui-button:visited:hover {
}
#tests {
+ font-size: 12px;
+ /*
position: absolute;
width: 300px;
- font-size: 12px;
top: 0px;
right: -308px;
+ */
}
#tests textarea {
@@ -265,7 +272,8 @@ a.ui-button:visited:hover {
}
#play-page #exercise-tabs {
- width: 948px;
+ /*width: 948px;*/
+ width: 1184px;
}
#play-page #code {
@@ -323,7 +331,7 @@ a.ui-button:visited:hover {
#play-page #main-tabs-nav {
border-bottom-color: #327E04; /*#D4CCB0;*/ /*#2779AA;*/
- width: 942px;
+ /*width: 942px;*/
}
#play-page .#main-tabs-nav li.ui-tabs-selected {
@@ -607,4 +615,25 @@ div#exercise-page {
.hotnumber .ui-slider-handle {
width: 8px;
+}
+
+.container-fluid > .sidebar {
+ display: none;
+}
+
+div.container-fluid > div.content {
+ margin-left: 0px;
+}
+
+#output.side {
+ /*
+ position: absolute;
+ width: 360px;
+ */
+ height: 360px;
+ border: 1px solid #D4CCB0;
+}
+
+#output-test {
+ display: none;
}
View
197 js/play-ui.js
@@ -4,6 +4,7 @@ var Exercise,
curProblem,
errors,
curPosition,
+ toExec,
DEBUG = false;
$(function(){
@@ -11,7 +12,13 @@ $(function(){
var editor = new Editor( "editor" );
Canvas.init();
- $("#editor").data( "editor", editor );
+ $("#editor")
+ .data( "editor", editor )
+ .hotNumber();
+
+ editor.editor.on( "change", function() {
+ toExec = editor.editor.getSession().getValue();
+ });
// Set up toolbar buttons
$(document).buttonize();
@@ -197,94 +204,7 @@ $(function(){
return false;
});
- $("#run-code").bind( "buttonClick", function() {
- var userCode = $("#editor").editorText(),
- validate = curProblem.validate,
- // TODO: Generate this list dynamically
- pass = JSHINT( "/*global input:false, inputNumber:false, print:false*/\n" + userCode ),
- hintData = JSHINT.data(),
- session = $("#editor").data( "editor" ).editor.getSession();
-
- extractResults( userCode );
-
- clear();
- $("#output-nav").addClass( "ui-state-disabled" );
- $("#results .desc").empty();
- $("#results").hide();
-
- session.clearAnnotations();
-
- errors = [];
-
- var doRunTests = !!(pass && !hintData.implieds);
-
- if ( doRunTests ) {
- $("#show-errors").addClass( "ui-state-disabled" );
- $("#editor-box").hideTip( "Error" );
-
- // Run the tests
- runTests( userCode, curProblem );
-
- // Then run the user code
- clear();
- runCode( userCode );
-
- if ( outputs.length > 0 ) {
- focusOutput();
-
- } else {
- focusProblem();
- }
- }
-
- if ( !doRunTests || errors.length ) {
- $("#show-errors").removeClass( "ui-state-disabled" );
-
- for ( var i = 0; i < JSHINT.errors.length; i++ ) {
- var error = JSHINT.errors[ i ];
-
- if ( error && error.line && error.character &&
- error.reason && !/unable to continue/i.test( error.reason ) ) {
-
- errors.push({
- row: error.line - 2,
- column: error.character - 1,
- text: error.reason,
- type: "error",
- lint: error
- });
- }
- }
-
- if ( hintData.implieds ) {
- for ( var i = 0; i < hintData.implieds.length; i++ ) {
- var implied = hintData.implieds[i];
-
- for ( var l = 0; l < implied.line.length; l++ ) {
- errors.push({
- row: implied.line[l] - 2,
- column: 0,
- text: "Using an undefined variable '" + implied.name + "'.",
- type: "error",
- lint: implied
- });
- }
- }
- }
-
- errors = errors.sort(function( a, b ) {
- return a.row - b.row;
- });
-
- session.setAnnotations( errors );
-
- $("#editor-box").showTip( "Error", errors, setCursor );
-
- if ( !doRunTests ) {
- $("#results").fadeOut( 400 );
- }
- }
- });
+ $("#run-code").bind( "buttonClick", execCode );
$("#editor-box-tabs")
.tabs({
@@ -360,6 +280,105 @@ $(function(){
}
});
+setInterval(function() {
+ if ( window.input != null && toExec != null ) {
+ execCode( toExec === true ? $("#editor").editorText() : toExec );
+ toExec = null;
+ curProblem.focusLine = null;
+ }
+}, 100 );
+
+var execCode = function( userCode ) {
+ var validate = curProblem.validate,
+ // TODO: Generate this list dynamically
+ pass = JSHINT( "/*global input:false, inputNumber:false, print:false*/\n" + userCode ),
+ hintData = JSHINT.data(),
+ session = $("#editor").data( "editor" ).editor.getSession();
+
+ if ( !curProblem.inputs ) {
+ curProblem.inputs = [];
+ }
+
+ extractResults( userCode );
+
+ $("#output-nav").addClass( "ui-state-disabled" );
+ $("#results .desc").empty();
+ $("#results").hide();
+
+ session.clearAnnotations();
+
+ errors = [];
+
+ var doRunTests = !!(pass && !hintData.implieds);
+
+ if ( doRunTests ) {
+ $("#show-errors").addClass( "ui-state-disabled" );
+ $("#editor-box").hideTip( "Error" );
+
+ // Run the tests
+ runTests( userCode, curProblem );
+
+ // Then run the user code
+ clear();
+ runCode( userCode );
+
+ if ( outputs.length > 0 ) {
+ focusOutput();
+
+ } else {
+ focusProblem();
+ }
+ }
+
+ if ( !doRunTests || errors.length ) {
+ $("#show-errors").removeClass( "ui-state-disabled" );
+
+ for ( var i = 0; i < JSHINT.errors.length; i++ ) {
+ var error = JSHINT.errors[ i ];
+
+ if ( error && error.line && error.character &&
+ error.reason && !/unable to continue/i.test( error.reason ) ) {
+
+ errors.push({
+ row: error.line - 2,
+ column: error.character - 1,
+ text: error.reason,
+ type: "error",
+ lint: error
+ });
+ }
+ }
+
+ if ( hintData.implieds ) {
+ for ( var i = 0; i < hintData.implieds.length; i++ ) {
+ var implied = hintData.implieds[i];
+
+ for ( var l = 0; l < implied.line.length; l++ ) {
+ errors.push({
+ row: implied.line[l] - 2,
+ column: 0,
+ text: "Using an undefined variable '" + implied.name + "'.",
+ type: "error",
+ lint: implied
+ });
+ }
+ }
+ }
+
+ errors = errors.sort(function( a, b ) {
+ return a.row - b.row;
+ });
+
+ session.setAnnotations( errors );
+
+ //$("#editor-box").showTip( "Error", errors, setCursor );
+
+ if ( !doRunTests ) {
+ $("#results").fadeOut( 400 );
+ }
+ }
+};
+
var openExercise = function( exercise ) {
Exercise = exercise;
View
68 js/utils.js
@@ -523,6 +523,8 @@ var finalResumeTest = function() {
var runTests = function( userCode, curProblem ) {
testMode = true;
+ clear();
+
asserts = [];
for ( var i = 0; i < tests.length; i++ ) (function( test ) {
@@ -580,7 +582,7 @@ var runTests = function( userCode, curProblem ) {
"Test Results: All Tests Passed!" :
"Test Results: " + (total - pass) + " Test" + (total - pass === 1 ? "" : "s") + " Failed." ).end()
.toggleClass( "error", pass < total )
- .fadeIn( 400 );
+ .show();
}
testMode = false;
@@ -589,13 +591,17 @@ var runTests = function( userCode, curProblem ) {
var print = function( msg ) {
resumeTest();
- var output = $("#output");
+ outputs.push( msg );
+
+ if ( curProblem.focusLine != null && curProblem.focusLine + 1 > ++curProblem.curLine ) {
+ return;
+ }
+
+ var output = $("#output" + (testMode ? "-test" : ""));
output.append( "<div>" + clean( msg ) + "</div>" );
output.scrollTop( output[0].scrollHeight );
- outputs.push( msg );
-
if ( window.waitTestPrint ) {
var doResume = window.waitTestPrint;
window.waitTestPrint = undefined
@@ -603,29 +609,63 @@ var print = function( msg ) {
}
};
+$(document).delegate( "#output input", "keydown keyup change", function() {
+ var last = $(this).data("last"),
+ val = $(this).val() || null;
+
+ if ( last != val ) {
+ var pos = $("#output input").index( this );
+
+ curProblem.inputs[ pos ] = val;
+ curProblem.focusLine = $("#output").children().index( this.parentNode );
+
+ $(this).data( "last", val );
+
+ toExec = true;
+ }
+});
+
var showInput = function( msg ) {
+ outputs.push( msg );
+
+ if ( curProblem.focusLine != null && curProblem.focusLine + 1 > ++curProblem.curLine ) {
+ return;
+ }
+
focusOutput();
- var output = $("#output");
+ var output = $("#output" + (testMode ? "-test" : ""));
+
+ var div = $( "<div>" + clean( msg ) + " <input type='text' class='text'/></div>" )
+ .appendTo( output );
- output.append( "<div>" + clean( msg ) + " " +
- ( window.toInput != null ?
- window.toInput :
- "<form><input type='text'/> <input type='submit' value='Enter'/></form></div>" ) );
+ var input = div.find( "input" )
+ .val( window.toInput != null ? window.toInput : "" );
output.scrollTop( output[0].scrollHeight );
-
- output.find("input[type='text']").last().focus();
+
+ if ( curProblem.inputNum - 1 === curProblem.focusInput ) {
+ input.focus();
+ }
};
var clear = function() {
- $("#output").empty();
- outputs = [];
+ if ( !testMode && curProblem.focusLine != null ) {
+ $("#output").children().slice( curProblem.focusLine + 1 ).remove();
+ outputs.splice( curProblem.focusLine + 1 );
+
+ } else {
+ $("#output" + (testMode ? "-test" : "")).empty();
+ outputs = [];
+ }
+
+ curProblem.inputNum = 0;
+ curProblem.curLine = -1;
};
var focusOutput = function() {
$("#output-nav").removeClass( "ui-state-disabled" );
- $("#editor-box-tabs").tabs( "select", 1 );
+ //$("#editor-box-tabs").tabs( "select", 1 );
};
var focusTests = function() {
Please sign in to comment.
Something went wrong with that request. Please try again.