Add CodeMirror to skulpt.html about skulpt_example HOT 20 CLOSED

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.