I wrote a description last year of different kinds of exercises people use when teaching programming. In it, I talked about the many kinds of things that could be implemented by dragging and dropping labels on diagrams, from matching problems to tracing execution and even Parsons Problems.

Well, Isaac Ezer went ahead and created a prototype. The map of Canada below is stored as an SVG with the labels in the correct places but surrounded by double curly braces like {{Ontario}}; you could create a diagram of your own using any vector drawing tool without doing any programming. Isaac's Dragnet library searches the SVG for labels of this kind and pulls them over to the site. To complete the exercise, you click on the labels and drag them onto the -- markers that the library has placed where they were.

A finished tool would need more bells and whistles, like a re-set button to move all the labels back to the menu on the right, but this is pretty awesome for 147 lines of JavaScript. If you'd like to help improve it, please fork its GitHub repository and submit some pull requests. And if you're a computing education researcher and you'd like to do some studies of whether diagram labelling and execution tracing help people learn to code, please get in touch.

image/svg+xml {Ontario} {Quebec} {Alberta}