<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/js/skulpt.min.js" type="text/javascript"></script> | |
<script src="http://www.skulpt.org/js/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> |
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!
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.
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.
The Skulpt site works fine for me oddly enough.
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
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
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.
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 you have to have a python web server and server interaction for that, not with Skulpt. Skulpt is just an emulator of python.
@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/
Thank you!!
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
I am trying this code but this is not working I have a problem in script which is not giving proper result.
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.
when I copy skulpt.min.js and skulpt-stdlib.js to the local, they donnot work,why?
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.
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.
Thank you. This is the best documentation for understanding skulpt.
Can Skulpt support numpy, pandas and matplotlib modules?
I have tried "import os" but it doesn't seem to accept it, how can I get around this?
Hi I was trying to teach a friend some javascript and he was using skulpt. I are quite many anti-patterns used in the above I rewrote it with him while explaining the what/why. Note I'm using newer browser features like ?.
and arrow-functions so will only work in evergreen browsers. However I assume most people will work in a package.json
env using some form of transpiler.
I will just leave the snippet here incase you want to use some if it. You can dial back the features used but newer ordering make more sense.
Notes:
- jquery isn't used just confuse people that its imported.
Sk.pre = "output";
@ line 33 what is this doing it make no sense and code runs fine without it.- import the script at the end of the
body
this mean that the html is present whendocument.get...
is called so the references can be cache and its easier to spot the moving parts. - type="text/javascript" not needed in html:5
<html>
<head>
<script src="http://www.skulpt.org/js/skulpt.min.js"></script>
<script src="http://www.skulpt.org/js/skulpt-stdlib.js"></script>
</head>
<body>
<h3>Try This</h3>
<form>
<textarea id="skulpt--input" cols="40" rows="10">
import turtle
t = turtle.Turtle()
t.forward(100)
print "Hello World"
</textarea
><br />
<button type="button" onclick="skulptMain()">Run</button>
</form>
<pre id="skulpt--output"></pre>
<div id="skulpt-canvas--output"></div>
<script>
const inputRef = document.getElementById("skulpt--input");
const outputRef = document.getElementById("skulpt--output");
function skulptMain() {
outputRef.innerHTML = "";
Sk.configure({
output: (text) => {
outputRef.innerHTML = outputRef.innerHTML + text;
},
read: (file) => {
if (Sk.builtinFiles?.["files"][file] === undefined) {
throw `File not found: '${file}'`;
}
return Sk.builtinFiles["files"][file];
},
});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target =
"skulpt-canvas--output";
Sk.misceval
.asyncToPromise(() =>
Sk.importMainWithBody("<stdin>", false, inputRef.value, true)
)
.then(
(mod) => console.log("success"),
(err) => console.log(err.toString())
);
}
</script>
</body>
</html>
Hi , i want to add other python libraries like numpy , matplotlib, sklearn into the skulpt...
Can you please tell me if this is possible and how?
thank you
skulpt is an implementation of Python in Javascript. It runs completely in the browser. Much of bumpy, matplotlib and sklearn are implemented in C or FORTRAN and do not run in the browser, so this is not as easy as you might think. There are some partial implementations of a few things like numpy that others have done.
I have a big problem, I would like to create a function check(Javascript) text form output but I don't know how to create that
I need a solution please help.
Best regards
This seems to run Python 2, is there a Python 3 version?
(I tried print(6/5)
and print 6 / 5
and both seemed to behave like Python 2)
This seems to run Python 2, is there a Python 3 version?
(I triedprint(6/5)
andprint 6 / 5
and both seemed to behave like Python 2)
Check out this issue skulpt/skulpt#777
The example worked well for me but I cannot seem to prompt the user for an input using turtle.textinput().
This is the beginning of my code:
import turtle
screen = turtle.Screen()
screen.setup(width=500, height=400)
user_bet = screen.textinput("Place your bet","Which turtle do you think will win? Enter a colour: ")
And it returns the error:
AttributeError: 'Screen' object has no attribute 'textinput' on line 7
I have python projects that need to import/modify other files. How can I do this using skulpt?
"Uncaught ReferenceError: Sk is not defined skulpt"
To avoid the error above I had to remove the www.
from the script URLs. See this stackoverflow answer.
@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?