Comments (20)
Yay! it finally works, thanks so much for your help @amr66 & @albertjan. What is the function called that clears the turtle canvas?
from skulpt_example.
I don't think this is a primary goal of my work at the moment, but you are invited to contribue...
Is that web page called coding kids a project you are working at. Looks very well designed! It seems we have a little hype around interactive web programming these days, which i approve.
from skulpt_example.
Yes, coding-kids.net is mine. Can you add me to repo and I will add codemirror to the skulpt.html?
from skulpt_example.
done :-)
from skulpt_example.
I have been working on CodeMirror for the skulpt.html page, but I have run into an issue:
The code I am using is here: https://github.com/amr66/skulpt_example/blob/skulpt-codemirror/skulpt.html
But regardless of what is in the textarea, it always runs the default program involving turtle and printing the words "Hello World". I think this is an issue with the JavaScript not updating the variable that stores the textarea, but I am not sure. Can you help? Thanks
from skulpt_example.
I think, the editor.js may be a good starting point. It is used on skulpt.org's Demo. When i watch at firefox inspector i see textarea with id=code is set to display:none and the codemirror div is dynamically added. This happens in editor.js i think...
i added editor.js to static
from skulpt_example.
ok, so how do I fix this?
from skulpt_example.
I think you need to call getValue
on the codemirror instance.
from skulpt_example.
@babybigfox @amr66 means this file, https://github.com/skulpt/skulpt/blob/master/doc/static/env/editor.js which shows how we do it on the skulpt homepage.
from skulpt_example.
@albertjan can you make a branch from the skulpt-codemirror and show me the code, and then we can test it, because I am not sure what you mean.
from skulpt_example.
@babybigfox I'm not gonna do it for you. 😄 this line has your answer: https://github.com/skulpt/skulpt/blob/master/doc/static/env/editor.js#L37
from skulpt_example.
@albertjan so i add that line to runit()?
from skulpt_example.
Well you pass the program you run to importMainWithBody
the third parameter. You pass it the contents of the textarea, which stays the same because codemirror changes it into something else. The editor.getValue()
replaces that, that gets the contents (or value) of the codemirror editor.
But @babybigfox you could have tried adding that line to runit if that solves it. And you could have compared that line to your line containing importMainWithBody
that would have told you how to fix it. So next time do that before you ask a question ok? 😄
from skulpt_example.
oh ok, I am new to GitHub and JavaScript in general, so I will take that advice on board. I will do this and post the updates
from skulpt_example.
good thing! :-) I was debugging editor.js but it is to complex. Building from scratch like @babybigfox did is much better!
from skulpt_example.
@amr66 do you know what the function for clearing the turtle canvas is?
from skulpt_example.
Found this:
$('#mycanvas').hide();
this is the way editor.js does it, i think, the whole function there is:
$('#clearoutput').click(function (e) {
$('#edoutput').text('');
$('#mycanvas').hide();
});
this must be a jquery thing...
oh, and before code execution they do:
if (editor.getValue().indexOf('turtle') > -1 ) {
$('#mycanvas').show()
}
from skulpt_example.
oh ok, I will try it
from skulpt_example.
@amr66 I don't think that that is it, I don't think one exists yet, don't worry
from skulpt_example.
@amr66 @albertjan If you would like to see the code in action it is at this url: http://ckdata.neocities.org/python-coding-area.html
from skulpt_example.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skulpt_example.