Your Kid’s Coding Skills Will Leap Ahead with Hopscotch!

Share this post:

I started programming in the 1970s, when I was eight years old. At the time, that was a very young age to be coding.

In those days, you pretty much had to build your own computer from scratch. Then — if it started up OK — you used the BASIC computer language to write simple programs and games. (If you got really good, you started using assembly to write better games.)

BASIC was a fairly easy language to learn, but it still involved learning lots of strange new statements and commands that you had to type perfectly into the computer. Make a single mistake, and you were greeted with the dreaded ?SYNTAX ERROR message!

Things have come a long way, and these days kids have more opportunities than ever to learn programming. What’s more, there are many apps available that allow your kid to learn coding concepts and write simple programs, without having to wrestle with all those arcane BASIC statements and syntax errors.

One such app is Hopscotch. This is a beautiful, easy-to-use iPad app that your kid can pick up in a matter of minutes. Within an hour, they’ll be creating their first computer programs.

In this article, I’ll show you how you and your kid can get the most from Hopscotch. You’ll get an introduction to Hopscotch, learn some basic programming skills, and explore some example coding projects that your kid can do. By the time you’ve finished reading and your kid has spent some time with Hopscotch, they’ll be well on their way to becoming a coding ninja!

You’ll also explore some other great websites and apps that teach coding skills, as well as some excellent programming books aimed at kids.

What is Hopscotch?

Hopscotch is an iPad app that lets you create simple computer programs, known as projects in the app. Rather than having to type lots of lines of text — as you do with traditional computer programming — you create programs in Hopscotch simply by dragging and dropping blocks into place.

As programming tools go, Hopscotch is relatively limited in its abilities; however, that is a good thing, as it keeps things simple enough for even young kids to play with.

While Hopscotch may be fairly basic, you can still create a surprisingly wide range of projects with it, such as:

• Drawings and pictures
• Mathematical shapes
• Characters that respond to actions, such as shaking the iPad or clapping your hands
• Simple interactive games
• Animated stories

…and anything else your kid can dream up!

How does Hopscotch work?

The basic idea of Hopscotch is that you add characters to the stage, then add various rules to each character to make it behave in different ways.

Each rule has two parts:

• An event, such as “When project is started”, “When iPad is shaken”, or “When iPad detects a loud noise”.
• An ability, which is a sequence of steps for the character to carry out. (In computer programming parlance this would be called a subroutine or a method.)

There are many built-in abilities that make a character do fun things, such as “Act like a balloon”, “Break dance” and “Go for a walk”. However, the fun really begins when you start creating your own abilities.

To create an ability, you drag in blocks from a palette. Each block is a simple instruction that you want the character to carry out, such as “Move forward a certain number of pixels”, “Rotate a certain number of degrees”, or “Grow by so many percent”.

There are also blocks that let the character draw on the screen, as well as blocks to repeat a set of instructions (known as a “loop” to programmers), and blocks to set and work with numeric values (known as “variables” in the programming world).

By combining these blocks together in different ways, you can make the characters carry out quite intricate tasks as they respond to events. This is the essence of computer programming.

A simple project to try: Bear Stairs

The best way to learn Hopscotch is to dive in and start creating a project. Here’s a simple project you can try with your kid to get up to speed with Hopscotch.

You’re going to get a bear to draw some stairs!

Drawing a single step

Let’s start by drawing a single step. Follow these steps (pun not intended):

• Create a new project. Launch Hopscotch, then tap New Project.
• Add a bear. Tap the + (plus) icon, and choose the bear. Drag him down to the bottom left corner of the stage.
• Add a “Draw a step” ability. Let’s start by getting our bear to draw a single step. Tap the little “box” icon in the top right corner, then tap “Create a New Ability” in the pop-up menu. Tap the “Untitled Ability” heading at the top, and rename the ability to “Draw a step”.
• Get Bear to draw the first line. On the left is a palette of blocks, or instructions for the bear. Tap the purple Drawing section to expand it, then drag the Move with Trail block into the right-hand window. Type “100” using the keypad on the left, then tap the check mark to finish:

• Try it out. You’ve told your bear to move forward 100 pixels, leaving a trail behind it. To try it out, tap the Play button in the top right corner of the window. You should see your little guy carry out your instruction:

• Get Bear to draw the rest of the step. Now we want Bear to face upwards, then draw another line to create the other half of the step, then face to the right again. First, drag out a Rotate block and set its value to 90 degrees. Then add another Move with Trail block, setting it to 100 pixels. Finally, add another Rotate block and set it to -90 degrees.
• Try it out. Press the Play button, and your bear should draw a complete step, like this:

Great! Tap outside the “Draw a step” ability window to close it.

Drawing a set of stairs

Now that your bear can draw a step, drawing a set of stairs is simply a matter of drawing the same step several times. To do this, we need to create a loop. Follow these steps:

• Add a rule. Tap the bear, then tap “Give Bear a new rule”. Then, under the “Choose an Event” menu, choose “When project is started”. This will make the ability run straight after you press the Start button.
• Add a new ability. You’ll then see a list of abilities that Bear can do. Tap the “Create a New Ability” option at the bottom of the list. This brings up the ability editor again. Tap the “Untitled Ability” heading at the top, and rename the ability to “Draw some stairs”.
• Create the loop. Tap the Control Flow section on the left to open it, then drag the Repeat block into the right hand window. Enter ‘6’ to make the loop run 6 times, then tap the checkmark.
• Add the “Draw a step” ability to the loop. Scroll down to the “My Abilities” section in the left hand column, and tap it. You should see your “Draw a Step” ability in there. Drag it so that it sits inside the “Repeat” loop block, like this:

All good! Your bear can now draw 6 steps to make a set of stairs.

Now tap outside the “Draw some stairs” window to close it.

Try it out

Tap the Start button in the top right corner of the window to run the project. Your bear should now draw a nice set of stairs!

 

Congratulations — you’ve just written a computer program. 🙂

Some other fun projects to try

Now that you can create a basic program in Hopscotch, why not try creating some other projects? Here are some ideas:

Etch-a-Sketch

Write a program that lets you draw lines on the screen by tilting the iPad, a bit like the Etch-a-Sketch toys. You can use the “Text” character to create a letter ‘O’ (for a “pen”), then add rules that draw left, right, up and down as the iPad is tilted:

For an added bonus, you can make the screen clear when you shake the iPad! Check out the “When iPad is shaken” event.

Spirograph

You can use the graphics features of Hopscotch to draw fascinating geometric shapes like a Spirograph. The basic idea is this:

1. Draw a straight line.
2. Change direction by a fixed angle (try angles between 91 degrees and 179 degrees).
3. Draw another straight line, slightly shorter this time.
4. Repeat until you reach the centre.

Hint: You can use values to store the angle to use, as well as the current line length.

Catch the Monkey

Try writing a simple game in Hopscotch! Use a Text character to create a cup to catch the falling monkey. When using the Set Position block, you can drag in the “Random” value from the left-hand window to create a random value that changes each time. That way, you can make the monkey fall from different places.

Hint: The stage is 1,024 pixels across and 768 pixels high.

Another hint: Store the player’s score in a “Score” value. Use the “When Monkey bumps…” event to detect when the monkey is caught by the cup, and increase the player’s score.

Sharing projects with others

A really nice feature of Hopscotch is that you can upload your creations to the cloud, and also play with and download other people’s projects.

To upload your project, just tap the Cloud icon in the project window:

To try out a project someone else has made, tap Community from the home screen, then tap the project’s Play button. To download a project so that you can tinker with it, tap the project’s Download button:

Pulling apart other people’s projects to see how they work is a fantastic way to learn!

Other apps and websites to try

If your kid enjoys Hopscotch and wants to explore programming further, there are some other apps and websites worth looking at:

• Scratch is like a more powerful version of Hopscotch, with a huge range of action blocks (known as “scripts”), as well as the ability to design your own sprites (characters), record and play sounds, and lots more. (Note that it uses Flash, so it only runs on desktop and laptop computers.) For a really fun intro to writing video games with Scratch, check out Shaun the Sheep’s Game Academy!

• Tynker is another programming environment that uses draggable coloured blocks to create programs. In addition, Tynker features a complete programming course for kids, including a storyline, lectures, exercises and quizzes to help keep your kid motivated. You can also track your kid’s progress through the Tynker dashboard. Tynker costs $50 per course at the time of writing.
• Cargo-Bot is a simple puzzle game where you program a robot to move crates around. It’s easy for young kids to learn, and lots of fun. This is a nice gentle introduction to programming. (Interestingly, Cargo-Bot was itself created using Codea, an app that lets you build games and other apps right on the iPad. If your kid wants to explore programming in more depth on the iPad then Codea is definitely worth a look!)

• Code.org has many excellent online structured lessons and coding tutorials that use Blockly, a Scratch-like block-based editor. The tutorials also feature characters from Angry Birds and Plants vs. Zombies for added entertainment!
• Lightbot is a fun game for iOS and Android devices that gets you to program a robot to solve various different puzzles. Along the way, your kid will learn about procedures, loops, debugging, and lots more programming concepts. (There’s a simple free Flash version if you want to get a feel for the game.)
• Finally, Codecademy is a fantastic way to learn real-world programming. There are free interactive courses available for a range of languages, from HTML, CSS and JavaScript through to Python, Ruby and PHP.

Good books for little coders

If your kid prefers to learn through reading, there are tons of good coding books for kids out there. Here are some great ones:

• Hello World!: Computer Programming for Kids and Other Beginners  was written by a dad and his young son. It teaches coding skills using the Python programming language, along with lots of excellent cartoons, pictures and fun programming examples.
• Super Scratch Programming Adventure! teaches programming using Scratch, and is targeted at kids who want to create games but don’t know where to begin. It uses a cartoon storyline along with some simple games to teach basic programming concepts.
• 3D Game Programming for Kids: Create Interactive Worlds with JavaScript takes things up a notch, and shows your kid how to create complete 3D games in their web browser using the popular JavaScript language. If your kid already has some knowledge of the basics of programming then this book will motivate them to take their skills to the next level.

I hope you enjoyed this guide to Hopscotch. It really is a fantastic app for getting your kid into coding. With Hopscotch, plus all the other excellent learning resources out there, your kid will be a champion coder in no time!

Even better, the Hopscotch team are constantly improving the app. Soon they’re planning to introduce conditional blocks, which will take the app to a whole new level.

Do you know of any other great ways to help kids learn programming? I’d love to hear about them in the comments below. Thanks for reading!

[Image credits: Beautiful Rainbow by Alison, cropped // My House! & Flower 1 petals by Megan (find both these projects in the Hopscotch Community!)]