khan/live-editor

A browser-based live coding environment.

Live Code Editor (in maintence mode)

WARNING: This project is currently in maintenance mode. Please feel free to file bug reports. If determine that the issue is serious enough we will fix it. Please do not submit PRs. We don't have the resources to review them and they'll be closed.

This is the live coding environment developed for the Khan Academy Computer Programming curriculum. It gives learners an editor on the left (either ACE or our Blocks-based drag-and-drop editor) and an output on the right (either JS+ProcessingJS, HTML, or SQL). Here's a tour of how it's used on KA.

You can find various demos in the demos/ directory, and start playing immediately with the simple demo:

• http://khan.github.io/live-editor/demos/simple/

Running

In order to run live-editor locally you'll have run a local web server. If you have python installed this can be accomplished by running the following command from the live-editor folder:

python -m SimpleHTTPServer

You should see the following console output:

Serving HTTP on 0.0.0.0 port 8000 ...

Open up a browser and navigate to http://0.0.0.0:8000/demos/simple.

Building

WARNING: This project requires node ~6 and npm ~3 in order for npm install to work correctly.

You can use the pre-built copies of everything inside the build/ directory. If you wish to make some changes and re-build the library from scratch you'll need to install some dependencies:

git submodule update --init --recursive
npm install
bower install

# Build the Ace editor files (This is usually *not* needed)
cd bower_components/ace
npm install
node Makefile.dryice.js -nc

At this point you can make a fresh build, using Gulp:

npm run build

If you have an issue with "this.merge" is undefined, then rm -rf node_modules/gulp-handlebars/node_modules/handlebars.

Testing

The tests are in the /tests folder. They use Mocha/Chai/Sinon. Gulp typically runs the tests when relevant files change, but you can explicitly run the tests with:

npm test

You can also run single test suites at a time - see gulpfile.js for what suites are available:

gulp test_output_pjs_assert

You can run the tests in the browser runner by opening the relevant webpage:

open tests/output/sql/index.html

TravisCI also runs those tests when new commits are made.

In order to run the tests that create Worker threads, you'll need to run Chrome with a flag:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

Please add tests whenever possible for any change that you make or propose.

How you can help

We have many open issues here. The top priority are those marked as regressionbug, since those are things that used to work. After that, the ones marked as browserbug may be the easiest to take on, and there are also plain old bugs. All the issues are tagged according to their environment, pjs, webpage, sql, or if they're generally about the ACE editor, editor. There are also a few bugs specifically about the demo pages, since those can get behind, and requests for more tests, since we can always use more of those!

Some aspects of the editor are in subrepos with their own issue trackers, like structuredjs and structuredblocks, so be sure to poke around those and see if they're more up your bug-fixing alley.

There are also a handful of ideas floating here from our community. You are welcome to take them on, but it's possible we won't merge them if we worry about their effect on the programming experience on Khan Academy, like if they may introduce backwards compatibilities or performance regressions.

We have no full-time resource working on the editing environment right now, so we will do pull requests when we find ourselves with time between other projects. We thank you for your contribution, even if we may be slow to acknowledge it at times. :)

Pull Requests

When submitting pull request please do the following:

• link to an issue, if no issue exists please create one
• write automated tests for new functionality or bug fixes
• include build files
• run the automated tests
• squash your commits into a single a commit

Before we can accept any pull requests you must sign our CLA.

How it works

For a deep dive into the components of the LiveEditor, read this wiki.

You can also watch these talks that the team has given about the editor:

• John Resig on CodeGenius
• Pamela Fox at ReactConf

live-editor's Issues

Move Tests to a Separate Tab

At the moment they're hastily integrated into the interface, they should be moved.

Assert for Undefined Variables

We should have an assertion for undefined variables of some sort.

Handle User Input

Provide a way for user's to prompt for input - would be nice to have this integrated into the output pane.

Scope on Tests is Broken

Attempting to access a user-defined variable ends with an error saying that it's undefined.

Need a separate testIO

Still hitting a number of issues regarding IO tests being run. For example if a user attempts to print in their program and there is no testIO it'll cause the test to break.

Share Problem

Provide a way for students to be able to share their results with each other.

We could start with something like:

/labs/cs/share/UID --> A user's problem in a specific exercise.

(It would run the code, and show the output, but default - but provide a tab for seeing the code.)

Allow recording on a per-problem basis

Right now recordings are done globally, they should be done on a per-problem basis.

Extra Parameter to testPrint( RegExp )

A method signature like this would be really useful:

testPrint(RegExp, "exptected string")

If a printed string matches RegExp and expected string, then it passes. If it only matches RegExp then it passes, but also has a warning. If the RegExp doesn't match then it fails.

Error when trying to use inputNumber

It says it doesn't exist, it needs to be added to the JSHINT clause.

Split Exercise

As exercises grow it would be good to be able to split an exercise into two exercises.

Add Way to Highlight User UI

If Sal were to make a video explaining how to use the CS tool he would want to highlight specific parts of the UI, there should be a way to both record this and replay it.

Output Pane

Have a separate pane for user-generated output. Only show the pane if some output was actually generated.

Show Exercise List on Main Page

Also make it so that the exercise page loads the exercise immediately.

testInput(Function) fails

No matter what is returned, it always returns undefined.

testInput(function(text) {
    return 42;
});

Different Assert Messages for Pass/Fail

This way we can provide hints for when the user has failed.

assert(output != "", true, "No text has been output. Have you called print()?", "Text has been output.");

Interpreter

If we run the code through an interpreter we would be able to do line-by-line step throughs of the code and be able to stop infinite loops.

Allow for Variable Number of IO Tests

The model doing testIO with an array of expected output is too rigid, there needs to be a greater level of flexibility. Having dynamic testInput/testPrint methods would solve this.

Reset Problem

Provide a way for students to reset a problem back to its original state.

Add User Result Storage API

Right now a user's code and results aren't stored anywhere, we should persist them.

Change How Key Presses are Tracked

It's done by binding multiple handlers at the moment, it can be done in a much cleaner manner using ACE's native methods:

   .editor.keyBinding.onTextInput( "foo!", false );
   .editor.keyBinding.onCommandKey( event, hashId??, keyCode )
   .editor.keyBinding.setKeyboardHandler({ handleKeyboard: function() { console.log( arguments ); } })

Auto-copy Start Code to Solution

Do this only once the first time the solution is shown - will make it easier to get started, at least.

Watch for Test Exceptions

Watch for if a user hasn't declared a variable and provide better contextual hints based upon that.

Prompt Response Gives Exception

An error is returned: "Unexpected end of input (stmt)" when a prompt is used. Perhaps this will be fixed with #16 is resolved.

Export/Import Problems

A way to export/import problems would be nice (since people could then generate problems using their own tooling).

Exception thrown with .replace()

If you run this it'll never complete.

For example Tom had the following code:

var i = 2;
i++;

and the following test:

test(function() {
testPrint(/Hello, World/);
});

and it never successfully completed.

Add Link/Button to View Exercise

Right now you have to jump back to the main list in order to view an exercise from the editor, a quick jump link could be provided.

Removing Problem Breaks Problem List

When a problem is removed the problem list becomes unusable and needs to be reloaded.

Contextual Feedback on Test Failures

Right now when an assertion fails it just shows you the assertion - it should at least provide you information on what the expected value was and what value was provided.

Support Test Groups

Allow a group of assertions to be run - each group running against the code again, cleanly.

Log All User Input

Log all the key presses and selection changes - same as one would do for the recording app. This will help with user debugging.

Improve README checkout instructions

Just running git submodule update --init inside the canvas-editor repo won't check out the submodules that Ace uses.

This tripped me up for a few minutes; a better instruction might be git clone --recursive https://github.com/Khan/canvas-editor.git

Make Assertions Work Async

With the new input delay the tests are actually run after the program initializes, which means that the assertion results aren't displayed.

Provide a way to test output/input

Once output/input is implemented there has to be a way to test and make sure that the user has output the correct response (or a correct response).

test()s don't keep closure

If you declare variables outside of a test() callback the closure isn't maintained.

Editor Gets into Bad State

I've seen times where no code is shown in an editor pane or when the code is saved from a cache and not the current version, this should be investigated.

Optionally Show Solution

If a solution exists ask the user after a few tries if they would like to view it.

Track Scroll Position Changes

In the recorder changes to scroll position aren't being tracked, this can be done easily using ACE's methods:

   this.session.addEventListener("changeScrollTop", this.$onScrollTopChange);
   this.session.getScrollTop()
   this.session.addEventListener("changeScrollLeft", this.$onScrollLeftChange);
   this.session.getScrollLeft()

Add inputNumber()

This is building off of input() in that it only accepts numbers and only returns numbers.

Disable Future Problems

Initial start by disabling future problems. Automatically un-disable them if the user has already tried them/gotten them right.

Add Problem While Sorting

You can add a problem while sorting, which breaks sorting.

Change How Selection is Tracked

Right now selection is tracked by watching mouse clicks, this should be changed to use ACE Editor's native methods, like so:

   .editor.selection.getCursor()
   .editor.selection.moveCursorTo( 1, 3 )
   .editor.selection.getSelectionAnchor()
   .editor.selection.setSelectionAnchor( 1, 3 )
   this.selection.addEventListener("changeCursor", this.$onCursorChange);
   this.selection.addEventListener("changeSelection", this.$onSelectionChange);

View Output from a Test Run

Right now there is no way to see the output from a test run - it might be interesting to see the testInput/testPrint errors integrated into it as well.

Canvas Undo in Replay

If you do an 'Undo' in the Canvas it isn't replicated in the replay at the moment.

Generate Long Hint / Error Messages

At the moment you can generate test hints using log and errors with assert (or similar) but it would be nice if there was a way to generate a longer explanation both of these. There are two ways in which this can be done:

hint( "Long message." );
error( "Long message." );

or:

assert( pass, "message", "Long message." );

Ask Student Question

Provide a type of problem where it asks the student for an answer to a question instead of doing normal validation.

Make sure that the student can't view the test code and that the test results aren't displayed. Also make sure that they can't edit the code.

Editor Undo and Paste in Replay

If you hit Ctrl+Z or Ctrl+V while editing - the effect will occur but it won't be replicated during replay.

Add Function Callbacks to testIO

With just analyzing strings/regexps it's not enough information to go off of.

Fix Clicking a Test

For some reason it broke, it should be fixed.

A way to do O(N) performance analysis

Some way to analyze looping would be interesting.

Require at least one problem

Right now it's letting you save an exercise with no problems in it, it seems like we should require at least one to save.