1) Khan Academy teaches programming concepts to over 1.3 million students per month online. 2) They have developed a real-time JavaScript editor that uses static analysis to build challenges and allow coding on tablets and phones. 3) It runs code through analysis tools to provide error messages and hints, then uses abstract syntax trees and structured testing to check for specific functions, arguments, and program structures.

1. Using JS to teach JS
@ Khan Academy
John Resig (ejohn.org)
http://khanacademy.org/cs

2. Teaching CS
• At Khan Academy we teach programming
concepts to young students
• …currently 1.3 million of them a month!
• It’s really hard to do this!

3. • Building a real-time JavaScript editor
• Using static analysis to build challenges
• Writing JavaScript on a tablet or phone

4. Demo: Live Coding
Editor
https://github.com/Khan/live-editor

5. Step 1: Error Messages
• All code is run through JSHint
• And through an extra layer of error
handling (called “BabyHint”)

6. BabyHint
• Handles common mistakes:
• Spelling and case:“strokeWeight” vs.
“strokeweight”
• Gives sane errors about missing semicolons
• Provide hints about correct function arguments
strokeWeight(); (gives an error asking for more
args)
• Check for function declaration mistakes and
possible spacing mistakes (“vartest”)

7. Step 2:Worker Threads
• Run JavaScript code asynchronously in the
background of a page
• Available in Chrome, Firefox, Safari, and IE
10 (Need to make sure it works in IE 9!)
• Works by doing a string-only postMessage
to the worker and waiting for a response

8. Step 3: ExtractingValues
• var obj = { name:“John”, city:“Boston” };
with (obj) {
name += “ Resig”;
city = “Brooklyn”;
}
• obj.name === “John Resig”
obj.city === “Brooklyn”

9. With Statements
• var obj = { name:“John”, city:“Boston” };
with (obj) {
var city = “Brooklyn”;
var job = “Khan Academy”;
}
• obj.city === “Brooklyn”
obj.job === undefined

10. Example
• var x = 5, y = 1;
var draw = function() {
x += y;
};
• Values: {
x:“5”,
y:“1”,
draw:“function() { x += y; }”
}

11. Example (cont.)
• var x = 50, y = 1;
var draw = function() {
x += y;
};
• Values: {
x:“50”,
y:“1”,
draw:“function() { x += y; }”
}
• Compare with last value: oldX !== x
• Eval:“var x = 50;”

12. Demo 2: Challenges
and Parsing

13. Abstract Syntax Trees!
(ASTs)
• We use ESPrima to parse the user’s code

14. {
"type": "Program",
"body": [
{
"type": "ExpressionStatement",
"expression": {
"type": "CallExpression",
"callee": {
"type": "Identifier",
"name": "ellipse"
},
"arguments": [
{
"type": "Literal",
"value": 100,
"raw": "100"
},
{
"type": "Literal",
"value": 200,
"raw": "200"
},
{
"type": "Literal",
ellipse(100, 200, 300, 400);

15. Did a user call a
specific function?
• We can search through the the tree and
look for certain values
• if (obj.type === “CallExpression” &&
obj.callee.name === “ellipse”) { … }

16. Complexity
• What happens if we want to check for
something more complex?
• checkCode(code, {
method: {
name:“ellipse”,
args: [100, 200, 300, 400]
}
});

17. …
• But what if we want to check for more
than one function?
• What if the order matters?
• What about other things? if statements?
variables? loops?
• … this model doesn’t hold up well.

18. Demo 3: Structured JS
Testing
https://github.com/Khan/structuredjs

19. var oneFill = function() {
fill(_, _, _);
};
var twoFills = function() {
fill(_, _, _);
fill();
};
result = match(structure(oneFill));
if (passes(result)) {
if (!matches(structure(twoFills))) {
result = fail(
$._("Use another fill command for the cup!"));
}
}

20. var checkSameColor = function() {
var pattern = function() {
fill($a, $b, $c);
fill($a, $b, $c);
fill($a, $b, $c);
}
if (matches(structure(pattern))) {
return fail($._("You're using the same color for
fill three times! Use a different color!
Remember you can click the numbers in the
fill command and then use your mouse to select
a different color."));
}
return pass();
}

21. Demo 4: Mobile
https://github.com/Khan/structured-blocks

22. JSRules.addRule(JSASTRule.extend({
image: "ellipse.png",
structure: function() {
ellipse($x_number, $y_number,
$width_number, $height_number);
}
}));

23. ellipse($x_number, $y_number, $width_number, $height_number);
ellipse(100, 40, 50, 50);
x_number = 100
y_number = 40
width_number = 50
height_number = 50

24. ellipse($x_number, $y_number, $width_number, $height_number);
ellipse(100, 40, 50, 50);
x_number = 100
y_number = 40
width_number = 50
height_number = 50
Using escodegen

25. Links
Curriculum:
https://www.khanacademy.org/cs
Code:
https://github.com/Khan/live-editor
https://github.com/Khan/structuredjs
https://github.com/Khan/structured-blocks