Created by gamedesk logo
Design & Engineering > Computational Literacy


HopScotch is a vibrant visual programming language on the iPad that proves anybody can code. Even - and especially - kids.

grade level:
profile avatar
Created by
Sarah White
Curriculum Development Team


Designed specifically for kids, Hopscotch is an open-ended, single-player iPad app, similar to Scratch, that simplifies the creation of animations, stories, and games by breaking down the complex programming of sprites and text into intuitive and easy-to-use blocks. In addition, the color-coding of functional code blocks and quirky characters make the app particularly appealing to 6 to 12 year olds. Through trial, error, and constant iteration, kids discover how to manipulate the code, thinking critically and creatively, to make these characters do any number of things. Individually or in cooperation with other students via the share feature, kids gain and demonstrate understanding of programming, math and art that is relevant to geometry, design, and other computer applications. Hopscotch allows most anyone to learn fundamental programming logic; a practical skill to possess in this era of technological advancement.

Hopscotch Tutorial

HopScotch Breakdown

Upon opening the app for the first time, a tutorial shows the user the basic controls. Tapping the “+” button at the top adds another character or text object to the screen, called the “stage”. Entering just a space bar for the text makes an invisible object. After selecting an object, the app takes you to the top of the script box, where all of the code will be added. Scrolling up from here displays the name of the object and the first quadrant of a coordinate plane that shows where all of the objects are located at the beginning of the program.


Scroll up above the script box to see the coordinate plane.

On the right side of the screen is the play button which, upon tapping, starts running through the script boxes of your program. In the left sidebar, all of the various functions are color-coded into collapsible blocks by type:

  • Orange is Motion - These functions control where the object moves, in what direction it will move, and how fast it will move.
  • Magenta is Lines - The “leave a trail” capsule will leave a line of user-selected color and width behind the object when it moves in any direction. The “clear” function will erase all of the lines made by the object before this point.
  • Blue is Controls - This section has the equivalent of a for loop; the user sets how many times the lines of code inside the loop are repeated and a wait control to synchronize the various objects.
  • Green is Looks - Change what the object looks like, even make it invisible.
  • Yellow is Operators - A customizable random number generator can be placed anywhere a number is needed. It includes the option to put negative numbers as well.

It is easy to find the functions you need because they are all color-coded.

The “Help” button at the bottom of the menu explains what each function does in more detail. To add any of these functions, simply drag and drop it into the script box. Copying and pasting code blocks is not currently possible, but blocks (and all functions within them) can be moved together. Although “if” and “while” statements are not currently available, the ability to make an object invisible and a random number generator were added in with a recent update, based on user suggestions, so other features could currently be in the works.


Slide the black menu tab to the right to save, share, or get help on your project.

Above the script box is a drop-down menu with options for when to carry out the code in the box, based on the iPad’s features. For example, the code can be executed upon pressing the play button on the right-hand side, when the object is tapped, when the “stage” is tapped, when the iPad is tilted in any direction, or upon shaking the iPad. Users can also choose to deactivate certain parts of the code. Multiple script boxes can be added, with no apparent limit, for each object, each with its own drop-down executable option.


The various conditions on which the code can depend. Make your objects move when you tilt the iPad or even when there is a loud noise nearby!

By combining these functions in infinitely many ways, users can create and interactively animate the characters and text objects, although interactions between different characters aren’t currently possible. Pressing the play button will initiate the animations by switching to the display screen. Return to the code editing screen at any time by clicking the “X” in the upper right hand corner of the display screen. Before or after they have finished, users can save their projects or share it with friends via email by dragging the hidden menu from the left hand side of the coding screen. All their projects and those shared with them are stored on the iPad and accessible at any time, perfect for use for group and individual work in the classroom and at home.

topic discussion
comments powered by Disqus

Your feedback has been successfully sent! You will receive a response as soon as possible from a member of our Educade team.