Running Khan Academy programs on your computer

Coding environment
18 Sep 2012 Code on Github

Introduction

I've noticed a lot of people asking how they can run the programs they've seen or created on Khan Academy's computer science area, so I've written this post to explain how to (sort of) achieve it. Note that not all Khan Academy programs will run on your computer.

What you need

To run a KA program you need a few things, all of which are easy to get. You can download the files you need here. You will want to create a folder somewhere on your computer to keep all the files of this project in. One thing you don't need to download is Javascript. Your program is written in Javascript and it is interpreted by your browser. Which brings us to...

1. A browser

This program is a program that opens web pages like the one you now to view this page. For security reasons, Chrome doesn't work when opening trying to run this type of file on your computer (unless you set up a simple server) so for this I recommend using Firefox.

2. An HTML document

You need to display your program somewhere and that somewhere is a web page. Webpages are written in a language called Hyper Text Markup Language (HTML) which tells your browser what to display. You can open HTML files with your browser even if they are on your computer and not on the internet. I've written a very basic HTML file (called main.txt) which you can download at the bottom of this page (change the filename to main.html).

If you open the file with Notepad (don't use Word) you should see the line:

<script src="https://cdn.rawgit.com/processing-js/processing-js/v1.4.8/processing.js"></script>

This tells the browser to get the processing.js file. If you want you can download the file here and use a local version.

<canvas width="400" height="400" data-processing-sources="code.js"></canvas>

This line tells your browser to create a 400 x 400 pixel area to display the code which is in a file called code.pde. You can change these values if you want a bigger space or use a different filename for the code.

3. Your code

Finally you need your code. I've included an example as code.js here but you can copy your own code into that file. When using your own code, you will need to make a few changes. You won't be able to use any images as these are stored on the Khan Academy site.

To the top of your code add:

void setup() {
  size(400, 400);
}

Move any part of your code that draws something (e.g. line(x1, y1, x2, y2)) into the draw() function.

Change how you define you draw() function from:

var draw = function() {

To:

void draw() {

If you are dealing with mouse events then change mouseIsPressed to mousePressed. Other variables may be changed - I've not checked everything.

Viewing the program

Finally open main.html with Firefox (right click on the file and choose Open With or open Firefox and drag the file into the Firefox window), and you should see the code running. If you not then you can try to debug the problem with Firebug or ask below.

Comments (31)

utunga on 13 Oct 2012, 1:47 a.m.

Great page, thanks. We get this error from processing.js when we try to load it from our local computer however.. (in Chrome)

XMLHttpRequest cannot load file:///C:/Documents%20and%20Settings/Baxter/Desktop/code.js. Origin null is not allowed by Access-Control-Allow-Origin.Uncaught Processing.js: Unable to load pjs sketch files: code.js ==> XMLHttpRequest failure, possibly due to a same-origin policy violation. You can try loading this page in another browser, or load it from http://localhost using a local webserver. See the Processing.js README for a more detailed explanation of this problem and solutions. processing.js:13

Peter on 22 Oct 2012, 11:57 p.m.

Hi Utunga, that is a problem with Chrome - I don't think there's a way around it, so I just use Firefox.

Anonymous on 28 Nov 2012, 1:28 a.m.

You can fix the Chrome problem temporarily if you start it with this command line switch:
"chrome --allow-file-access-from-files".

Anonymous on 28 Nov 2012, 1:34 a.m.

** or save the files on a webserver. Even http://localhost/... will work.

Anonymous on 7 Apr 2013, 5:36 a.m.

"If you are dealing with mouse events then change mouseIsPressed to mousePressed. Other variables may be changed - I've not checked everything."

where could i find the other ones?

Peter on 7 May 2013, 5:04 p.m.

You can find the real Processing functions and variables at http://processingjs.org/reference/ I don't know if there's a list of the KA ones anywhere.

Dan Finlay on 16 May 2013, 10:30 a.m.

I think this is a great resource, and to help people use your files easier I've made a github repository for your files, properly named.:

https://github.com/flyswatter/BootsOfKhan

Marcus Tan on 25 May 2013, 7:24 a.m.

Mine wont work on mouse event...what should i change my "mousePressed" to?

sua may tinh on 27 Jun 2013, 9:52 a.m.

thanks you very much

Peter on 27 Jun 2013, 1:28 p.m.

You need to change mousePressed to mouseIsPressed.

Yevgen Barsukov on 23 Jul 2013, 7:17 a.m.

Very useful, thanks a lot!

I was trying to run Khan academy js directly in html code without a need to download any files or using any external files.

To do this, the only modification your method needed is:

- to address processing.js directly to web-source:

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>

- to move data-processing in-line like this. Here "processing code" is your

java-script copied from Khan directly.

<script type="text/processing" data-processing-target="targetcanvas">
/* processing code here */
</script>
...
<canvas id="targetcanvas"></canvas>
This result in in-line representation that can be posted directly into html.
See example here:http://jsbin.com/ipawer/1/edit
It is using directly the code from Khan academy here:https://www.khanacademy.org/cs/squirmy-blobs/1823814038 with only modifications
of adding:
void setup() {
size(400, 400);
}
and changing void draw = function() to void draw()
With best regards, Yevgen

Joseph on 19 Nov 2013, 11:01 p.m.

Thank you Lots!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Go to my programs page on KA here: https://www.khanacademy.org/profile/joezgames/projects

Jason on 21 Jan 2014, 9:10 p.m.

Thanks to Peter and Yevgen I got what I was after! I wanted to play with it in JSFiddle and I needed the jsbin example to get there. Thanks again!

Anonymous on 5 Feb 2014, 3:26 a.m.

Very nice, thank you. The one minor problem that I am having is that when I copy my code, it removes the returns I have, making it very hard to read. I have to go through the code and format it myself if I want to change it in the future.

Anonymous on 1 Mar 2014, 5:20 a.m.

Also all functions that are only drawn once go into void setup. All variables are named outside void setup and draw.

jennyol on 3 Mar 2014, 3:45 a.m.

This is great and easy to get running - but I would like my students to be able to debug the khan academy code. I have tried using the firefox built in debugger, and also firebug, but it only lets me see the processingjs code and not my own code.

Daniel Ohanessian on 12 Mar 2014, 8:39 p.m.

Should I use TextEdit on Mac? Or a different software? Or maybe it doesn't even work for Macs?

Anonymous on 26 Mar 2014, 2:16 p.m.

When I open the main page, it just shows the actuall code of main.html, and yes, I did change the extension. >:(

raj on 18 May 2014, 8:44 p.m.

Hi,

I'm using textwrangler in mac. This is my html page:

<html>
<head>
<script source="code.js"></script>
</head>

<body>
<h1> First Page</h1>
</body>

</html>

This is my javascript page:

noStroke();
var x=11; //position of the car

var draw=function(){
background(252, 255, 214);

//draw the car body
fill(255, 0, 115);
rect(x, 200, 100, 20);
rect(x + 15, 178, 70, 40);

//draw the wheels
fill(77, 66, 66);
ellipse(x + 25, 221, 24, 24);
ellipse(x + 75,221, 24, 24);
x=x+3;
};

when i run main.html with firefox, I'm getting only heading (first page). it doesnt show the javascript stuff. can you tell me what's wrong?

Thank you,

The Portal Pro on 8 Jul 2014, 7 a.m.

You did not close the <head> tag properly in main.html

paul on 30 Jul 2014, 2:43 p.m.

Note that you also need to convert anything from degrees to radians, and also things like var mousePressed = function() need to be changed to void mousePressed()

Schneck on 16 Aug 2014, 3:57 p.m.

Thanks, very useful. I have found a way to do this preserving the JavaScript-only approach used at Khan Academy. Here's a file where you should be able to post most code directly from Khan Academy. At least, it preserves mouseIsPressed and keyIsPressed and getImage and how draw gets defined.

<!DOCTYPE html>
<head>
<title>JavaScript</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var processing = new Processing(canvas, function(processing) {
processing.size(400, 400);
processing.background(0xFFF);

var mouseIsPressed = false;
processing.mousePressed = function () {
mouseIsPressed = true;
};
processing.mouseReleased = function () {
mouseIsPressed = false;
};

var keyIsPressed = false;
processing.keyPressed = function () {
keyIsPressed = true;
};
processing.keyReleased = function () {
keyIsPressed = false;
};

function getImage(s) {
var url = "https://www.kasandbox.org/stylesheets/"
+ "scratchpads-exec-package/images/" + s + ".png";
processing.externals.sketch.imageCache.add(url);
return processing.loadImage(url);
}

with (processing) {

// INSERT YOUR CODE HERE

}

if (typeof draw !== 'undefined') processing.draw = draw;
});
</script>
</body>

Richard S on 20 Nov 2014, 9:30 p.m.

I want to add my main.html and code.js & prossesing.js to a google site. I want it to be able to be open by clicking and opening the main.html. Is that possible, if so, could someone tell me how, or lead me in the right direction.

Anonymous on 14 Jan 2015, 2:54 a.m.

Can we do this whole thing without downloading stuff?

Eric Balingit on 23 Jan 2015, 8:39 p.m.

I made an "almost" quick-and-dirty sandbox that allows easy copy-paste of code from KA - no conversion needed.

See my answer to this stack-overflow question:
https://stackoverflow.com/questions/15190606/what-language-is-khan-academy-cs-using/28116890#28116890

VPK on 20 Feb 2015, 10:30 p.m.

I have students who want to run their scrip offline. The problem they are having is with the images. They copied a folder with the images they used in Kahn Academy to their hard drive. How do they get the Javascrip to recognise it?t

caBumBoomZXNG on 12 Mar 2015, 12:53 a.m.

i tried the download code.. but it didnt work. my computer tried to do somthing, but failed. the error i got in the web console was 'uncaught exception: Processing.js: Unable to execute pjs sketch: SyntaxError: unterminated string literal' what is wrong?

Anonymous on 21 May 2015, 2:52 p.m.

i cant get it work :(
https://www.khanacademy.org/computer-programming/bloon-tower-defense/2866611026

Anonymous on 11 Jul 2016, 7:28 p.m.

From :

https://www.khanacademy.org/computer-programming/how-to-run-ka-code-offlineand-on-a-website/5391455023792128

This also work : In a text editor paste this, name it .html and save. Put your code where it asks you.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>

<body>
<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");
var processing = new Processing(canvas, function(processing) {
processing.size(400, 400);
processing.background(0xFFF);
var mouseIsPressed = false;

processing.mousePressed = function () { mouseIsPressed = true; };
processing.mouseReleased = function () { mouseIsPressed = false; };

var keyIsPressed = false;
processing.keyPressed = function () { keyIsPressed = true; };
processing.keyReleased = function () { keyIsPressed = false; };

var sine = function(deg){
return sin(deg/(180/3.1415926535));
}

var cosine = function(deg){
return cos(deg/(180/3.1415926535));
}

var rotate2 = function(deg){
rotate(deg/(180/3.1415926535));
}

function getImage(s) {
var url = "https://www.kasandbox.org/stylesheets/scratchpads-exec-package/images/" + s + ".png";
processing.externals.sketch.imageCache.add(url);
return processing.loadImage(url);
}

with (processing) {
// INSERT YOUR KHAN ACADEMY PROGRAM HERE
}

if (typeof draw !== 'undefined') processing.draw = draw;
});
</script>
</body>
</html>

rhgrafix on 7 Apr 2019, 9:49 p.m.

They must have changed something because none of these methods work, maybe it's because kasandbox doesn't allow access? Anyone have a new method? Latest post is almost 3 years ago.
Thanks

classified on 21 May 2020, 6:36 p.m.

The methods work for me...

Coding environment