Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Here is about the simplest example I can think of that gets you a working skulpt environment. This little sample shows regular python as well as importing a module.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script>
<script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
</head>
<body>
<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.pre = "output";
Sk.configure({output:outf, read:builtinRead});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
</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 -->
<div id="mycanvas"></div>
</body>
</html>
@Chuphay

This comment has been minimized.

Show comment
Hide comment
@Chuphay

Chuphay Dec 12, 2013

I'm just getting started with programming, but this didn't work for me. even after changing
/mycanvas to /canvas. The console logger says that Sk is not defined

Chuphay commented Dec 12, 2013

I'm just getting started with programming, but this didn't work for me. even after changing
/mycanvas to /canvas. The console logger says that Sk is not defined

@andrewcase

This comment has been minimized.

Show comment
Hide comment
@andrewcase

andrewcase Mar 15, 2014

The skulpt.min.js and skulpt-stdlib.js need to be included with this, or provide a full URL for them. For example:

<script src="http://skulpt.org/static/skulpt.min.js" type="text/javascript"></script> <script src="http://skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>

andrewcase commented Mar 15, 2014

The skulpt.min.js and skulpt-stdlib.js need to be included with this, or provide a full URL for them. For example:

<script src="http://skulpt.org/static/skulpt.min.js" type="text/javascript"></script> <script src="http://skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script>
@rsaez

This comment has been minimized.

Show comment
Hide comment
@rsaez

rsaez Apr 17, 2014

Where is the example @andrewcase

rsaez commented Apr 17, 2014

Where is the example @andrewcase

@iptq

This comment has been minimized.

Show comment
Hide comment
@iptq

iptq Aug 14, 2014

I'm getting "ImportError: No module named on line "

iptq commented Aug 14, 2014

I'm getting "ImportError: No module named on line "

@akaak

This comment has been minimized.

Show comment
Hide comment
@akaak

akaak Jan 6, 2015

The section should have the full url to the JS files. like this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script> 

Or, see this gist: https://gist.github.com/akaak/42d4a78cef7f208bc343 and it works!

akaak commented Jan 6, 2015

The section should have the full url to the JS files. like this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt.min.js" type="text/javascript"></script> 
    <script src="http://www.skulpt.org/static/skulpt-stdlib.js" type="text/javascript"></script> 

Or, see this gist: https://gist.github.com/akaak/42d4a78cef7f208bc343 and it works!

@akaak

This comment has been minimized.

Show comment
Hide comment
@akaak

akaak Jan 6, 2015

Looks like @andrewcase comment did not display what he wanted to display because Markdown did not parse it as code!

akaak commented Jan 6, 2015

Looks like @andrewcase comment did not display what he wanted to display because Markdown did not parse it as code!

@CosmicWebServices

This comment has been minimized.

Show comment
Hide comment
@CosmicWebServices

CosmicWebServices commented Feb 27, 2015

This is great!

@brunodd

This comment has been minimized.

Show comment
Hide comment
@brunodd

brunodd Mar 23, 2015

This used to work great, but now I get:

ExternalError: TypeError: Cannot read property 'firstChild' of null on line 1

(Only with turtles)

brunodd commented Mar 23, 2015

This used to work great, but now I get:

ExternalError: TypeError: Cannot read property 'firstChild' of null on line 1

(Only with turtles)

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Mar 23, 2015

I just updated this gist, and there are a few small but important changes to notice.

  1. Notice that we now wrap the Sk.importMainWithBody inside Sk.misceval.asyncToPromise (lines 36-44) Also notice that there is a fourth parameter Sk.importMainWithBody("", false, prog, true); which is set to true to enable async processing. This has the amazing effect that turtle now runs asynchronously! No more will the turtle slow down as the drawing becomes larger, no more do precompute the entire drawing and then animate it later. Now it runs in real time. Which also means that we can, and do, support events: onclick, onkey, ontimer!
  2. We also made the change that you no longer need to supply a canvas element. (line 61) You now provide a div. and turtle will create the appropriate drawing context. Still a canvas for now, but could be SVG or webgl or whatever in the future.
  3. Instead of Sk.canvas we now use the more generic way of connecting the canvas with (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas'; (line 35)
Owner

bnmnetp commented Mar 23, 2015

I just updated this gist, and there are a few small but important changes to notice.

  1. Notice that we now wrap the Sk.importMainWithBody inside Sk.misceval.asyncToPromise (lines 36-44) Also notice that there is a fourth parameter Sk.importMainWithBody("", false, prog, true); which is set to true to enable async processing. This has the amazing effect that turtle now runs asynchronously! No more will the turtle slow down as the drawing becomes larger, no more do precompute the entire drawing and then animate it later. Now it runs in real time. Which also means that we can, and do, support events: onclick, onkey, ontimer!
  2. We also made the change that you no longer need to supply a canvas element. (line 61) You now provide a div. and turtle will create the appropriate drawing context. Still a canvas for now, but could be SVG or webgl or whatever in the future.
  3. Instead of Sk.canvas we now use the more generic way of connecting the canvas with (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas'; (line 35)
@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp
Owner

bnmnetp commented Mar 23, 2015

test

@brunodd

This comment has been minimized.

Show comment
Hide comment
@brunodd

brunodd Mar 23, 2015

I copy-pasted the gist into my project as a test run and it works smoothly. A big thanks to all those involved for the quick replies and easy fixes.
A quick question though:
How can I adjust the size/border/... of the 'mycanvas' div if it is no longer a canvas?

brunodd commented Mar 23, 2015

I copy-pasted the gist into my project as a test run and it works smoothly. A big thanks to all those involved for the quick replies and easy fixes.
A quick question though:
How can I adjust the size/border/... of the 'mycanvas' div if it is no longer a canvas?

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Mar 24, 2015

You can adjust the size in a couple of ways: Sk.TurtleGraphics.target.height = will give an initial height. It will also respect a call to Screen.setup(height,width) in the turtle program itself. bordering can be done with CSS.

Brad

Owner

bnmnetp commented Mar 24, 2015

You can adjust the size in a couple of ways: Sk.TurtleGraphics.target.height = will give an initial height. It will also respect a call to Screen.setup(height,width) in the turtle program itself. bordering can be done with CSS.

Brad

@TimRohr

This comment has been minimized.

Show comment
Hide comment
@TimRohr

TimRohr Apr 26, 2015

I have been able to run this successfully on my webpage with no issues. I then decided to try and modify the python code with my own code, but now when I hit run nothing happens? Any ideas would be greatly appreciated.

TimRohr commented Apr 26, 2015

I have been able to run this successfully on my webpage with no issues. I then decided to try and modify the python code with my own code, but now when I hit run nothing happens? Any ideas would be greatly appreciated.

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Apr 26, 2015

Have you checked the javascript console? Its pretty hard to know what happened without knowing how you changed the python or anything else. The most likely explanation is that you have an error in your python. In that case you will see the error message in the javascript console. That is what the console.log(err.toString) call does.

Owner

bnmnetp commented Apr 26, 2015

Have you checked the javascript console? Its pretty hard to know what happened without knowing how you changed the python or anything else. The most likely explanation is that you have an error in your python. In that case you will see the error message in the javascript console. That is what the console.log(err.toString) call does.

@polyphemus11

This comment has been minimized.

Show comment
Hide comment
@polyphemus11

polyphemus11 Jul 8, 2015

How do I include the turtle canvas? I went to CodeMirror and downloaded the turtle.js file, now where do I add the javascript code? I added it in the HEAD section, the FORM section, and wrapped it around the FORM section. I don't know what it means by, "include a canvas." Where do I include that code? What code do I include? Thanks for the help!

polyphemus11 commented Jul 8, 2015

How do I include the turtle canvas? I went to CodeMirror and downloaded the turtle.js file, now where do I add the javascript code? I added it in the HEAD section, the FORM section, and wrapped it around the FORM section. I don't know what it means by, "include a canvas." Where do I include that code? What code do I include? Thanks for the help!

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Jul 8, 2015

@polyphemus11, you don't need to do anything more, this gist has everything you need to run the example on the page itself. The canvas element is automatically added to the div. Did the page not work for you?

Owner

bnmnetp commented Jul 8, 2015

@polyphemus11, you don't need to do anything more, this gist has everything you need to run the example on the page itself. The canvas element is automatically added to the div. Did the page not work for you?

@geeksailor

This comment has been minimized.

Show comment
Hide comment
@geeksailor

geeksailor Aug 24, 2015

Is there any known browser compatibility issues? I am forced to use POS IE 10 at work and when I want to try and build my own Skulpt here it does not seem to work. All I get is a large black bar across the bottom and nothing outputs when I hit run. I have not made any modifications to the script either in the html or javascripts. Thanks!

geeksailor commented Aug 24, 2015

Is there any known browser compatibility issues? I am forced to use POS IE 10 at work and when I want to try and build my own Skulpt here it does not seem to work. All I get is a large black bar across the bottom and nothing outputs when I hit run. I have not made any modifications to the script either in the html or javascripts. Thanks!

@geeksailor

This comment has been minimized.

Show comment
Hide comment
@geeksailor

geeksailor Aug 24, 2015

Side note, I did load it into Firefox Portable (FPP) which I have and it appears to work fine. I would like to try and see if I can get it to work in IE though so I don't possibly get in trouble using a program I am not allowed to use.

geeksailor commented Aug 24, 2015

Side note, I did load it into Firefox Portable (FPP) which I have and it appears to work fine. I would like to try and see if I can get it to work in IE though so I don't possibly get in trouble using a program I am not allowed to use.

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Aug 24, 2015

Do the examples at skulpt.org work in IE for you? I'm a little surprised it doesn't just work. Not that I test IE regularly, but the last time I tried everything worked fine.

Owner

bnmnetp commented Aug 24, 2015

Do the examples at skulpt.org work in IE for you? I'm a little surprised it doesn't just work. Not that I test IE regularly, but the last time I tried everything worked fine.

@geeksailor

This comment has been minimized.

Show comment
Hide comment
@geeksailor

geeksailor Aug 24, 2015

The Skulpt site works fine for me oddly enough.

geeksailor commented Aug 24, 2015

The Skulpt site works fine for me oddly enough.

@geeksailor

This comment has been minimized.

Show comment
Hide comment
@geeksailor

geeksailor Aug 24, 2015

I edited the html to run the javascripts locally rather than remotely from the Skulpt site and enabled error output and I got the following error now:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:47:03 UTC

Message: Object doesn't support property or method 'create'
Line: 998
Char: 94
Code: 0
URI: skulpt.min.js

geeksailor commented Aug 24, 2015

I edited the html to run the javascripts locally rather than remotely from the Skulpt site and enabled error output and I got the following error now:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:47:03 UTC

Message: Object doesn't support property or method 'create'
Line: 998
Char: 94
Code: 0
URI: skulpt.min.js

@geeksailor

This comment has been minimized.

Show comment
Hide comment
@geeksailor

geeksailor Aug 24, 2015

Running the javascript codes remotely gives me:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:54:51 UTC

Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://www.skulpt.org/static/skulpt.min.js

geeksailor commented Aug 24, 2015

Running the javascript codes remotely gives me:
Webpage error details

User Agent:
Timestamp: Mon, 24 Aug 2015 15:54:51 UTC

Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://www.skulpt.org/static/skulpt.min.js

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Aug 24, 2015

Just cloned the gist to my windows 10 VM and opened it up. Works fine there, so I'm not sure what is going on for you.

Owner

bnmnetp commented Aug 24, 2015

Just cloned the gist to my windows 10 VM and opened it up. Works fine there, so I'm not sure what is going on for you.

@Carcabob

This comment has been minimized.

Show comment
Hide comment
@Carcabob

Carcabob Mar 21, 2016

This is awesome! I love Python, but I know almost nothing about HTML and Javascript. Is there a way to just get it to run the code without making a textbox and "Run" button?

Carcabob commented Mar 21, 2016

This is awesome! I love Python, but I know almost nothing about HTML and Javascript. Is there a way to just get it to run the code without making a textbox and "Run" button?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 22, 2016

@Carcabob you have to have a python web server and server interaction for that, not with Skulpt. Skulpt is just an emulator of python.

ghost commented Aug 22, 2016

@Carcabob you have to have a python web server and server interaction for that, not with Skulpt. Skulpt is just an emulator of python.

@saibotshamtul

This comment has been minimized.

Show comment
Hide comment
@saibotshamtul

saibotshamtul Oct 11, 2016

@Carcabob Yes, it can be done, if, at the bottom of the page, you add Javascript code that calls the runit function, it should run the code when the page loads. You can combine this with making the textbox display:none to hide it, and it should work how you want.

For example: http://codepen.io/saibotshamtul/full/LRmpmm/

saibotshamtul commented Oct 11, 2016

@Carcabob Yes, it can be done, if, at the bottom of the page, you add Javascript code that calls the runit function, it should run the code when the page loads. You can combine this with making the textbox display:none to hide it, and it should work how you want.

For example: http://codepen.io/saibotshamtul/full/LRmpmm/

@Amarix

This comment has been minimized.

Show comment
Hide comment
@Amarix

Amarix Jul 10, 2017

Thank you!!

Amarix commented Jul 10, 2017

Thank you!!

@reganarntzgray

This comment has been minimized.

Show comment
Hide comment
@reganarntzgray

reganarntzgray Aug 11, 2017

Hi, I am very new to programming. I am learning python and have created an interactive blackjack game that I wanted to share on my squarespace website. I tried posting in the gist on a squarespace code block and the run button and python text showed up but there is nowhere for the output to show up and nothing happens when I click run. Any advice?

Thanks!!
Regan

reganarntzgray commented Aug 11, 2017

Hi, I am very new to programming. I am learning python and have created an interactive blackjack game that I wanted to share on my squarespace website. I tried posting in the gist on a squarespace code block and the run button and python text showed up but there is nowhere for the output to show up and nothing happens when I click run. Any advice?

Thanks!!
Regan

@GraniteConsultingReviews

This comment has been minimized.

Show comment
Hide comment
@GraniteConsultingReviews

GraniteConsultingReviews Sep 4, 2017

I am trying this code but this is not working I have a problem in script which is not giving proper result.

I am trying this code but this is not working I have a problem in script which is not giving proper result.

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Sep 4, 2017

If I download the gist and bring it up in my browser it runs the example just fine. I don't know how to help you GraniteConsultingReviews because you haven't given me any information on what you are trying to do or what kind of script you are trying to run or even what is going wrong.

Owner

bnmnetp commented Sep 4, 2017

If I download the gist and bring it up in my browser it runs the example just fine. I don't know how to help you GraniteConsultingReviews because you haven't given me any information on what you are trying to do or what kind of script you are trying to run or even what is going wrong.

@Solomon1984ustc

This comment has been minimized.

Show comment
Hide comment
@Solomon1984ustc

Solomon1984ustc Jan 8, 2018

when I copy skulpt.min.js and skulpt-stdlib.js to the local, they donnot work,why?

Solomon1984ustc commented Jan 8, 2018

when I copy skulpt.min.js and skulpt-stdlib.js to the local, they donnot work,why?

@prescod

This comment has been minimized.

Show comment
Hide comment
@prescod

prescod Feb 5, 2018

I'm skeptical that line 33 is necessary:

Sk.pre = "output";

It seems to duplicate the role of the outf function.

It seems to work for me when I comment it out.

prescod commented Feb 5, 2018

I'm skeptical that line 33 is necessary:

Sk.pre = "output";

It seems to duplicate the role of the outf function.

It seems to work for me when I comment it out.

@bnmnetp

This comment has been minimized.

Show comment
Hide comment
@bnmnetp

bnmnetp Feb 5, 2018

It will work fine if that is the only instance of skulpt on the page. This may be totally left over, but it is important that we can have multiple instances of skulpt running on the page each with their own distinct output, and early on, if I recall correctly, this was a way to handle that. I never committed to making this a minimal perfect gist.

Owner

bnmnetp commented Feb 5, 2018

It will work fine if that is the only instance of skulpt on the page. This may be totally left over, but it is important that we can have multiple instances of skulpt running on the page each with their own distinct output, and early on, if I recall correctly, this was a way to handle that. I never committed to making this a minimal perfect gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment