Sunday, December 8, 2013

How to Run Codeskulptor Python Programs on your own Page

Codeskulptor is a browser-based Python programming environment built by Scott Rixner of Rice University and is used in his An Introduction to Interactive Programming in Python class on Coursera.

Codeskulptor screenshot

In order to make the programming environment easy to use, Codeskulptor implements, among other things, a "simplegui" module which makes it easier to build interactive programs in the browser. The module is written in JavaScript and can therefore not be used in python projects outside of Codeskultor.

However, since CodeSkulptor is based on Skulpt and JavaScript, it should be possible to use these to run CodeSkulptor-specific interactive programs on your own website.

First, we visit Skulpt and copy the code under the heading "Getting Started". What we mostly need is all the code inside the <body> </body> tags.

<script type="text/javascript">
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) {
   var mypre = document.getElementById("output");
   mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
   if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
           throw "File not found: '" + x + "'";
   return Sk.builtinFiles["files"][x];
}
 
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
  var prog = document.getElementById("yourcode").value;
  var mypre = document.getElementById("output");
  mypre.innerHTML = '';
  Sk.canvas = "mycanvas";
  Sk.pre = "output";
  Sk.configure({output:outf, read:builtinRead});
  eval(Sk.importMainWithBody("<stdin>",false,prog));
}
</script>
 
<h3>Try This</h3>
<form>
<textarea id="yourcode" cols="40" rows="10">import turtle
 
t = turtle.Turtle()
t.forward(100)
 
print "Hello World"
</textarea><br />
<button type="button" onclick="runit()">Run</button>
</form>
<pre id="output" ></pre>
<!-- If you want turtle graphics include a canvas -->
<canvas id="mycanvas" ></mycanvas>

Second, we head over to Codeskulptor, and get a copy of the JavaScript include files there (to use in place of the ones used in Skulpt). As of this writing, the current list of included JavaScript files are

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.axislabels.min.js"></script>
 <script src="http://www.codeskulptor.org/js/jquery.flot.orderbars.min.js"></script>
 <script src="http://www.codeskulptor.org/js/numeric-1.2.6.min.js"></script>
 <script src="http://www.codeskulptor.org/skulpt/skulpt.min.js"></script>
 <script src="http://www.codeskulptor.org/skulpt/skulpt-stdlib.js"></script>
 <script src="http://www.codeskulptor.org/js/codeskulptor-compressed.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Ideally, you probably should copy those files to your own server (in case they change in the future), but you can, instead, just include those same JavaScript files on your own page, preferably in the header.

(There is one other JavaScript file include in Codeskulptor
<script src="http://www.codeskulptor.org/js/codemirror-compressed.js"></script>
but you don't need this one because it is part of CodeMirror's code to syntax-color the code.)

Then use the HTML+JavaScript code copied from Skulpt on your page.

Don't forget to put your python code as the contents of the textarea.

To see this in action, see here or at techni.ca here.