Running Khan Academy programs on your computer

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 from the bottom this page. These files are text files - you will need to change file extensions from .txt to .js or .html by renaming the files (click on the filename and press F2). You may get a warning about changing the filename - click OK.

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 broswer. Which brings us to...

1. A browser

This program is a program that opens webpages 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 so for this I recommend using Firefox.

2. processing.js

This is a javascript file which deals with the graphics, letting you draw lines, circles etc.. You can download it below (remember to change the filename to processing.js) or can get the latest version from http://processingjs.org/download/.

3. An HTML document

You need to display your program somewhere and that somewhere is a webpage. Webpages are written in a language called Hyper Text Markup Langauge (HTML) which tells your browser what to display. You can open HTML files with your broswer 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="processing.js"></script>

This tells the broswer to use processing.js.

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

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

4. Your code

Finally you need your code. You can download an example below (rename to code.js) or you can copy your own code into a file called code.js. 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.

AttachmentSize
main.txt210 bytes
processing.txt226.42 KB
code.txt6.62 KB

Comments

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

 

 

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

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

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

"If you are dealing with mouse events then change http://www.petercollingridge.co.uk/sites/default/themes/skyblue/images/c...); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #666666; color: #ebebeb; padding-top: 1px; padding-right: 7px; padding-bottom: 1px; padding-left: 7px; background-position: initial initial; background-repeat: initial initial;">mouseIsPressed tohttp://www.petercollingridge.co.uk/sites/default/themes/skyblue/images/c...); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #666666; color: #ebebeb; padding-top: 1px; padding-right: 7px; padding-bottom: 1px; padding-left: 7px; background-position: initial initial; background-repeat: initial initial;">mousePressed. Other variables may be changed - I've not checked everything."

where could i find the other ones?

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.

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

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

thanks you very much

You need to change mousePressed to mouseIsPressed.

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

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

Go to my programs page on KA

here.

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!

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.

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

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.

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

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

Hi,

I'm using textwrangler in mac. 

This is my html page:

main.html

<html>

<head>

<script source="code.js">

</script>

</head>

<body>

<h1> First Page</h1>

 

</body>

 

</html>

This is my javascript page:

code.js

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,

Raj

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() 

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>

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.

Post new comment

The content of this field is kept private and will not be shown publicly.