Running Khan Academy programs on your computer (2023)

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...

Top Articles
Latest Posts
Article information

Author: Kelle Weber

Last Updated: 01/27/2023

Views: 5516

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Kelle Weber

Birthday: 2000-08-05

Address: 6796 Juan Square, Markfort, MN 58988

Phone: +8215934114615

Job: Hospitality Director

Hobby: tabletop games, Foreign language learning, Leather crafting, Horseback riding, Swimming, Knapping, Handball

Introduction: My name is Kelle Weber, I am a magnificent, enchanting, fair, joyous, light, determined, joyous person who loves writing and wants to share my knowledge and understanding with you.