Scratch

Scratch [162] is a wholly visual drag-and-drop programming environment with jigsaw puzzle–style pieces, aimed at novices and children. A simple program in the Scratch interface is shown in Figure2.3. Scratch programs manipulate a persistent microworld; the Scratch environment also includes a persistent graphical area which may contain multiple “sprites”, each of which has its own independent code associated with it and may move, draw, or display messages from itself. The Scratch language follows a concurrent event-driven model, where many pieces of code may be executing at once, in the same or different sprites.

Scratch takes full advantage of its purely-graphical nature; the shape of each tile maps exactly to where it is syntactically valid, and some tiles

Figure 2.4: Screenshot of a simple program running in the Blockly interface.

combine what would be multiple concepts in most languages into a single element. Consequently, Scratch code does not have a textual form and cannot be “written”. Scratch has been found useful for motivating new programmers to begin exploring the ideas of programming, and inspired our work.

2.5.2

Blockly

Blockly [10] is very similar in ethos to Scratch, but incorporates multiple variant languages which can be extended with JavaScript code, and lacks the persistent world of Scratch. Blockly runs entirely in a web browser. A simple program in the “turtle graphics” variant is shown in Figure2.4.

The user can export their Blockly program to JavaScript or Python code that has essentially the same behaviour as the original Blockly program.

There is no way to reimport exported code back into Blockly.

Blockly supports extending the language with new tiles, and its in- cluded demonstrations use this ability. The Blockly interface is embedded in a host application (within a web page), and the host can define additional tiles along with how they should behave. Both the tiles and the behaviours are defined in JavaScript, the language of the host environment.

2.5.3

Codemancer

Codemancer [111] is a game designed to teach programming concepts. Within the game, programs are treated as magic spells, and the player assembles the correct spell to solve a problem out of “runes” (tiles) which they drag into place in the desired sequence to write a procedural program solving a task. A sample program in the interface is shown in Figure2.5. Runes primarily move the player character around the game world or perform in-world actions, but also include control-flow constructs such as conditionals and loops. In each level the user makes one program that has a single flow of control and a linear definition.

2.5.4

Lego Mindstorms

Lego Mindstorms [99] is a combination software and hardware system for building and controlling small robots built out of specialised Lego bricks. The main environment used for Mindstorms programming uses a drag-and- drop (in some versions, point-and-click) interface. The language focuses on specifying sequences of responses to sensor stimuli, and includes explicit control-flow constructs which are shown through physical layout.

Lego Mindstorms takes its name from Papert’s book [143] in which he proposed microworld-based learning. Lego Mindstorms contrasts with the other microworld languages and environments we discuss in that it controls a physical robot in the real (macro) world. The robot has interchangeable components chosen by the user that can vary dramatically in capability.

Figure 2.5: Screenshot of a program in Codemancer from a video demon- stration of the software: http://youtu.be/590fFcwIcms?t=2m50s.

2.5.5

Calico

Calico [9,20] is a multi-language IDE for introductory programming built on top of Microsoft’s Dynamic Language Runtime. A visual language called Jigsaw has been built especially for this environment. Jigsaw uses puzzle pieces and drag-and-drop similar to Scratch. A key part of the Calico environment is that code written in one of the supported languages can be accessed from another; as a consequence, a Jigsaw program can run code written in (for example) Python, Ruby, or Scheme as a library function. Jigsaw’s execution model is based on translation to Python, and a Jigsaw program can be exported to Python code. Some Python programs can also be converted into Jigsaw code. The Jigsaw syntax does not match Python’s, instead using tiles like “repeat n times” for a looping construct and “let” for variable assignments, but the language does map onto Python code. The authors intend to allow Jigsaw code to be translated automatically into (but not from) several textual languages [9]; only Python support appears to be

Figure 2.6: Screenshot of a simple program in the Alice interface.

implemented at present. Calico provides several graphical, microworld, and real-world robotics libraries that can be accessed from any supported language, including Jigsaw.

2.5.6

Alice

Alice [31] is a 3D microworld language manipulated by drag-and-drop. The Alice IDE allows users to drop 3D models into the world and associate logic with them. Each object in the world is also an object in the object orientation sense, and can respond to outside events and messages. All code is strongly statically typed. Code editing is by drag-and-drop and menu selection; there is no concrete text, although recent versions of Alice can also export code to Java. Some code is shown in the Alice interface in Figure2.6.

Figure 2.7: Screenshot of code and microworld in Greenfoot.

2.5.7

Greenfoot

Greenfoot [95] is an IDE for a subset of Java, presenting a graphical mi- croworld based on the Actor model. The Greenfoot tutorial program is shown in Figure2.7. Users write textual source code, but many high-level concepts are available as built-in methods of the world, or are predefined for all actors. Code is written and accessed only with textual Java syntax, which users must learn assisted by common IDE features.

2.5.8

TouchDevelop

TouchDevelop [75] integrates an essentially textual language with an IDE aimed at touch-screen usage. The IDE avoids most use of textual input by

Figure 2.8: Screenshot of code editor in TouchDevelop.

having the user manipulate the syntax tree itself: the user touches where they want to change and the IDE presents them with a list of options they can put there. When the programmer adds a new element the system will prompt them to fill in any required arguments, like the condition of a loop. A simple “turtle graphics” program is shown being edited in Figure2.8.

The syntax is reasonably conventional, although symbols are used to mark method calls and some aspects, such as comments, are shown only by typographic features. Programs are always shown textually with light visual annotation, and editing always corresponds essentially to a textual insertion or deletion.

The interface is designed to be used on tablets and mobile phones, as are the resulting programs, but they may also be used without a touch screen.

2.5.9

Droplet

Droplet [40] is a combined visual-textual editor that treats block-oriented visual display as “syntax highlighting” for text, and can transition between the two displays. Droplet supports multiple languages through writing CoffeeScript or JavaScript code defining blocks and a parser. Droplet aims to be useful both for transition from visual to textual languages and as a general editor on mobile devices.