Whilst looking around to see what sorts of graphical editors there are out there for teaching introductory python programming, I ran a search for blockly python. If you haven’t come across Blockly before, it’s a library for building browser based graphical programming interfaces, based on interlocking blocks, with a Scratch style aesthetic: blockly.
I already knew that Blockly could be customised to generate Python code but the BlockPy environment from Virginia Tech’s Software Innovations Lab is even richer:
For a start, the environment is set up for working with small data sets, and can display small tabular datasets as well as plot them. (You may remember we also used data to motivate programming for the FutureLearn Learn To Code (a line at a time) course.) The language is a subset of Python 2.7 (the environment uses the Skulpt client side Python interpreter; I’m not sure if the turtle demo works!).
The environment also supports blocks-to-code as well as code-to-blocks translations, so you can paste a chunk of code into the text view, and then display the blocks equivalent. (I think this is done by parsing the Python into AST and then using that as the bridge to the blocks view?)
Alternatively, it you’re happier with the blocks, you can write a programme graphically and then grab the code version. Or you can flip between the two…
As well as the blocks/code view, there is a pseudo-code view that maps the code into more explanatory language. This feature is under active development, I think…
To aid debugging – and learning – the environment allows you to step through the code a line at a time, previewing the current state in the panels on the right hand side.
If you get an error, an error prompt appears. This seems to be quite friendly in some cases, though I suspect not every error or warning is trapped for (I need to explore this a bit more; I can’t help thinking than an “expert” view to show the actual error message might also be useful if the environment is being used as a stepping stone to text-based Python programming.)
The code is available on Github, and I made a start on putting it into a docker container until my build broke (Kitematic on my machine doesn’t seem to like Java at the moment – a known issue – which seems to be required as part of the build process)…
The environment is also wrapped up in a server side environment, and on the Virginia Tech is wrapped in a login-if-you-want-to environment. I didn’t see any benefit from logging in, though I was hoping to be able to name and save my own programmes. (I wonder if it’s also possible to serialise and encode a programme into a URL so it can be shared?)
You can also embed the environment – prepopulated with code, if required, though I’m not sure how to to that? – inline in a web page, so we could embed it in course materials, for example. Being able to hooks this into an auto-marking tool could also be interesting…
All in all, a really nice environment, and one that I think we could explore for OUr own introductory computing courses.
I also started wondering about how BlockPy might be able to work with a Jupyter server/IPython kernel, or be morphed into an IPyWidget…
In the first case, BlockPy could be used to fire up an IPython process via a Jupyter server, and handle code execution and parsing (for AST-block conversion?) that way rather then using the in-browser Python Skulpt library. Having a BlockPy front end to complement Jupyter notebooks could be quite interesting, I think?
On the widget front, I can imagine running BlockPy within a Jupyter notebook, using it to generate code that could be exported into a code cell, for example, though I’m not really clear what benefit this would provide?
So – anyone know if there is any work anywhere looking at taking the BlockPy front-end and making it a standalone Jupyter client?! :-)
OUseful.Info, the blog... 
I was using the JavaScript version of this on my web site. I tried to embed it but the dynamic aspects failed to perform as expected. This is because I am using a wordpress site at present and embedding code doesn’t seem to be a trivial exercise. Instead I added another page and linked to it. I thought it was a great idea, I’m not a fan of Scratch and I like the ‘best of both worlds’ format of blockly. If I ever get any time I intend to take down the wordpress site and integrate it properly with my site.
Monette
WordPress.com doesn’t like arbitrary embeds, but I thought WordPress self-hosting let you embed pretty much anything? Or do you need to create custom plugins etc etc to wrap iframes?
As to Blockly – agreed; I prefer it to Scratch; though OU legacy means we may well keep on looking back rather than forwards for future intro-to-coding course support…:-(
(FWIW, I use Reclaim Hosting – https://reclaimhosting.com/ )
That’s really handy info thank you :) I have hosting provided by my ex-boss for free, lucky me. I set up the wordpress site when I was teaching because one of my classes didn’t have moodle access so it was a quick way to give them access to materials from home. I said I would leave it there for them for as long as possible so it’s still there for now. So the page I am linking to is on my site which is fine. It just looks a bit random hanging on the end. When I reclaim the site I’ll try to get it a little more cohesive. Further to intro-to-coding: I found the materials for the hour of code and beyond were fantastic for teaching basic coding as well, my daughter loved it.
Great write-up! Here’s some developer responses:
The Turtle demo partially works – I’ve been meaning to set it up to work, and had some code that could actually make turtles appear and such. Needs a bit more before it’s ready for release.
The “Mutual Language Translation” does indeed work by parsing the AST and generating relevant XML. Blockly makes the blocks->code transition simple.
The pseudo-code feature is indeed under development, and we’re testing it out in the classroom starting today. It remains to be seen if it’s useful, but it certainly seemed interesting!
We have some write-ups for many kinds of errors, although some we can give better advice for than others. Complete list is here: https://github.com/RealTimeWeb/blockpy/blob/master/analyzer/python_errors.js . I think this is influenced by the Runestone project, which had some influence on this project.
Logging in doesn’t have much use, yet, unless you’re in the LTI side of things. There, it’s absolutely crucial and happens behind-the-scenes. I have big plans for the regular logging in, but haven’t had time to focus my attention there. I also want to see what sort of features instructors expect (managing assignments, managing classes, etc.).
The features to embed BlockPy canvases, share user submissions, and custom assignments are actually fairly close to completion, but have a few key features left. I really want to setup a “shareable URL” system, but just need the development time to make it happen.
One of the best features of BlockPy not immediately visible from the currently exposed view is that it can give you feedback to students. Essentially, you define a function that is run when students’ run their code, and evaluates it (currently, able to look at the source code, properties they created, and whatever they printed, but I have big plans). You can use this to either mark “Success” or return a string of feedback. You can start seeing what’s exposed when you have the LTI stuff hooked in via this: think.cs.vt.edu/blockpy/blockpy/?mode=instructor
Here’s a short paper we wrote about BlockPy (http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=7369009). We submitted a paper to COMPSAC that’s longer, and we’re hopefully writing a journal paper for a new open-access venue on Block-based languages. This will have some actual evaluation data too!
Please feel free to raise issues on the BlockPy site, or engage on the google group. I’d love to see people interested in BlockPy, and this is a good time to make suggestions.
Hi Cory –
Thanks for the comprehensive comment – it’ll be interesting to hear how the pseudo-code interpretation goes with learners…
The turtle thing’s not really one of my favourites, but I know it’s a staple and it seems that in terms of screen layout it’d naturally sit where the current chart canvas area is.
Re: the development time required to finish off the shareable URL – understood:-) I was thinking in the short term that it would provided a compact way of saving programmes without the need to have any heavy machinery. (I was thinking in terms of the code being encoded within the URL, rather than being saved server side and represented by a shortcode. It’s a bit clunky, but self-contained, and would be okay for short programmes…)
Re: building test functions into the code – interesting. (Is that how things like CodeRunner (Moodle plugin) work?
Thanks for the paper refs – will check them out…and as for raising issues, I may well do!;-)
Turtles aren’t really my favorite thing either, and the Blockly Games suite is already so good. Hence why it always seems to slip down my priority list…
Apparently a feature I had forgotten was that you could pass in a URL as a query string parameter, and the page would attempt to GET whatever it found there as code.
E.g., http://think.cs.vt.edu/blockpy/blockpy/?url=http%3A%2F%2Fthink.cs.vt.edu%2Fblockpy%2Fstatic%2Fprograms%2Faverage.py
Doesn’t work against CSRF, but works for publicly accessible endpoints. Would be trivial to change this to have it just decode it as code. I should find some time to make that happen.
I’m not familiar with CodeRunner, so I can’t say that if it does something like that. I usually compare the feature to something like WebCAT, although they use unit testing and we don’t demand that.