Practical Debugging – Scratch@MIT 2016

A couple of weeks age, I ran a ‘Practical Debugging in Scratch’ workshop at the 2016 Scratch@MIT conference in Boston. It was an amazing experience, and great to meet so many other passionate educators from around the world.

debugging.jpg

The workshop briefly introduced debugging (including its history and some terminology), along with some teaching strategies for ensuring that debugging is approached as a part of the programming process.

However, the bulk of the workshop introduced some practical techniques for debugging projects in Scratch, including:

  • Commenting scripts with their intended purpose, as well as commenting blocks (or sets of blocks) for which the effects aren’t immediately obvious. Parts of a script can also be ‘commented out’ by dragging and dropping, facilitating the testing of later parts of a script;
  • Making script output as visible as possible. This can be done by displaying variables on the stage, clicking individual blocks to test their output and using ‘say’ blocks within scripts to give visible feedback;
  • Stepping through scripts can be achieved through the use of ‘wait’ or ‘wait until key pressed’ blocks, slowing down the execution of a complex or fast-moving code;
  • Testing expected and unexpected user input can lead to using input validation to make a script more robust. Input can be validated by using ‘repeat until’ blocks, Boolean operators, or even a list of accepted answers;

validation.png

  • Lists can also be used to log data, which is useful for sequences of data, or multi-part calculations;
  • Custom blocks allow the creation of modular code. It’s much easier to find a bug when a sprite jumps if your project has a custom block called ‘jump’!

One final technique covered was the use of cheats as a testing method. Although children often see cheats as a way of making playing a game easier, they were first introduced to make play testing easier. Before a game is released, the entire game has to be rigorously tested, and cheats make this easier. For example. How can you test the last level of a game without having to repeatedly play previous levels? A good cheat shouldn’t be easily discoverable, or interfere with normal play. Combinations of key presses work well, but children also really enjoy creating tiny 1-pixel sprites that can be clicked to activate a cheat or other ‘Easter egg‘.

Screen Shot 2016-08-19 at 10.26.51.png

The notes from the workshop are available at jumpto.cc/practical-debugging. Sharing techniques with children to spot and fix problems in their Scratch projects themselves will empower them, giving them more ownership of their creations. This is especially important for lifelong learning, at times in the future where there may not be an educator on hand to help them. In fact, many of the strategies covered in this workshop are used in industry by software development teams!

Advertisements

Olympic Gold – Part 2

In Part 1, I showed how to make a 3D perspective sprint game in Scratch.

Screen Shot 2016-07-01 at 13.09.25.png

In this second part, I’ll show how to make a really simple MaKey MaKey running mat to use as input for the game.

To make the running mat you’ll need:

  • A MaKey MaKey
  • 2 pieces of cardboard
  • Some sponges or foam
  • Aluminium foil
  • Glue
  • Scissors

00

First, cut your sponges to create 3 strips down the left. right and middle of one of your pieces of cardboard.

01.JPG

Cut and glue some aluminium foil in the 2 gaps between the sponge strips. These will be the connections for the left and right foot pedals. Make sure that the foil isn’t touching the sponge – or you’ll crete a short circuit.

02.JPG

Cover the second piece of cardboard with aluminium foil. This will make a connection with the foot pedals when stood on.

03.JPG

Attach the left and right pedals to the left and right arrow keys on the MakeyMakey. Connect the large foil-covered piece of cardboard to the Earth connection on the MaKey MaKey.

04.JPG

You can now turn over the top foil-covered cardboard and glue it onto the cardboard with the 2 foot pedals.

The running mat works by having left and right foot pedals that are separated from the Earth connection by rows of sponge. Standing on the sponge quashes it, and connects the pedal to the earth connection, completing the circuit!

Connect your MaKey MaKey to your computer and open the Scratch Olympic Gold project. You can now control the game with your new running mat, standing on the left and right foot pedals as fast as you can to sprint!

Here’s the running mat in action (sorry about the portrait view):

 

Embracing ‘chaos’ in your Code Club

At a recent Code Club meet-up, I was chatting to a volunteer who asked for tips on running a Code Club because they felt that some aspects of their club were, in their words, ‘chaos’.

This got me thinking that, in some ways, my club can be chaos too – and I think that’s a good thing. Obviously there is a need for rules and structure within a club, but children also need an environment in which they feel free to experiment and share ideas.

Here are a few ways in which I’d consider my club ‘chaos’:

Children work on different projects. They are personalising their learning, working on a Halo 002project that interests them, at their own pace. I’ve known children skip projects that don’t interest them, or spend weeks on a project that captures their imagination. Some children may, after completing a handful of projects, decide that they have enough knowledge and skill to build something of their own.

Children move around a lot. They look around at what others are making, getting ideas and inspiration. They often invite others to play (i.e. test) their finished projects, and then make improvements based on feedback they receive. Children get a lot of motivation from seeing others huddled around their computer, playing and enjoying a project they made. For this reason, children often make sure that their project is of high quality before allowing others to play with it.

Robot 004It can sometimes get loud. Children ask each other questions, and move around the room to help each other out. They test each other’s projects, giving verbal feedback, sharing ideas or even just having fun with the things they’ve created. When children are motivated to create things that interest them, I think it’s important that they have time to enjoy the things they’ve made.

Children play games. My club use online Scratch, and so as well as playing each other’s games they do get time to play other Scratch projects online. Obviously it’s important that this doesn’t dominate a club, but I think children learn lots about what’s possible with Scratch – especially when moving past the basics. Posting their own creations online is also a great opportunity for children to get real feedback from the community.

What some volunteers call ‘chaos’ is in fact part of the fun, and part of the learning experience; it is how children show the excitement and enthusiasm they feel when making things with computers. All this differentiates a Code Club from regular computing classes, so I always advise volunteers to embrace it!

[Republished from the Code Club blog]

Olympic Gold – Part 1

To celebrate the 2016 Rio Olympics, I wanted to create a ‘3D’ running game, using a MakeyMakey running mat as input. In the first of 2 posts, I outline the process of creating the game. (See part 2 for how to create the running mat.)

Sprinting in 2D

Initially I created something very simple, with the Scratch cat moving towards a finish line when the left and right arrow keys are alternately pressed.

Here’s what the project looks like (click the image below to play):

image00.png

The code needed to create this game is very simple. A sprite just moves (and changes costume) whenever the left and right arrow keys are pressed, until the finish line is reached.

image05.png

However, there’s a problem when playing the game – simply holding down the left and right arrow keys causes the Scratch cat to sprint towards the finish line in record time! To fix this, I decided to add in blocks to wait until each key is not pressed after it has been pressed. This means that each key has to be pressed and released in turn for the cat to move.

image03.png

Sprinting in ‘3D’

After children have grasped the basics of Scratch, one thing I’m often asked is whether it’s possible to make 3D games in Scratch. Although not easy, the answer is that it’s definitely possible.

What they often want is for characters to move towards them, instead of left-to-right across the stage. This can be achieved by creating a stage background with a 3D perspective, like this:

image01.png

The code can then be adapted to enlarge and move the finish line as the left and right arrow keys are pressed (and released):

image06.png

Notice how it’s now the finish line that’s moving, so I’ve created a ‘distance’ variable, so that the game knows when the race is over.

Here’s the finished ‘Olympic Gold’ project (click the image below to play):

Screen Shot 2016-07-01 at 13.09.25.png

Hall of Fame

The game includes a high score table (created as a list) to keep track of the fastest sprinters. At the end of each game, a check is made to see whether the player’s time is faster than the slowest time in the list (the last item).

image02.png

If the player has sprinted fast enough to make the high score table, a custom Scratch block inserts the player’s score at the correct position in the list.

image04.png

Creating a ‘3D’ Sprint Game

A simplified version of this game is available available to registered clubs as a new ‘Sprint!’ Scratch project, along with 3 other Olympics-themed projects.

Text-based Scratch using tosh

Today I had a first look at the public beta of tosh, a text-based version of Scratch created by Tim Radvan that I’ve been excited to try out for a while. Although tosh does have an offline app for mac, it’s also available online (and doesn’t use Flash! 🎉). Here’s my first attempt at writing a tosh program:

Screen Shot 2016-04-10 at 11.13.39.png

The tosh syntax is (almost) identical to Scratch, and coding in tosh felt very familiar from the start. There were, however, times when I didn’t know the exact tosh syntax. For example, what is the syntax for a ‘turn’ block? I also couldn’t remember whether it’s ‘goto’ or ‘go to’. The tosh IDE includes some really useful features, including syntax highlighting (the text is colour-coded using the Scratch category colours) and tabbed autocomplete. It was the latter that really helped me get used to writing text-based Scratch very quickly:

The compatibility with Scratch means that existing Scratch resources (including Code Club’s Scratch projects) can be completed using tosh. This means that there’s already a huge amount of tosh learning resources available, and there will be minimal effort required to create new resources for this new text-based language! The familiarity of the tosh syntax will also be a huge benefit to teachers, giving initial confidence when moving to text-based languages for the first time.

In fact, it’s even possible to import and export project files between Scratch and tosh (both use the same .sb2 file extension).

tosh is in beta, and obviously there are a couple of improvements to be made. There’s no colour picker, so coding ‘touching colour’ blocks is quite difficult if using images with non-basic colours. The ‘join’ block syntax also doesn’t look very intuitive in text format (i.e. ‘say join join “hello” name “!”‘ would look much more natural if the ‘say’ block just had multiple input parameters). However, this is a very small price to pay for compatibility with Scratch itself, and this hurdle can be overcome by thinking “how would this look in Scratch?”.

tosh will be invaluable in helping children as they progress from block-based to graphical programming. Children will be writing code in a language that is already familiar to them, albeit using a different input method. They will already understand the concept of the stage, sprites, and how to make sprites do what they want them to.

As Tim puts it on his blog:

I also hope that tosh might let beginners transition to text-based coding: as their creations become larger and more difficult to work with inside Scratch, they can edit them using tosh. They can learn about syntax errors, and how unforgivingly precise computers are, entirely separate from the concern of learning a new programming paradigm.

Children could start by recreating some of their existing Scratch projects in tosh, or even opening a Scratch file in tosh and making small amendments to their code. Not only is the syntax familiar to children, it’s also easy to write. Parentheses are kept to a minimum, the ‘end’ keyword means there are no difficult-to-type characters to delimit code, and the autocomplete feature minimises the amount of typing further.

The tosh environment allows children to write text-based programs that have an exciting graphical output, whist hiding the associated boilerplate code. This has been one of the criticisms of using Python with Pygame as an introduction to text-based programming.

tosh looks like a great way to introduce children to text-based programming, and I’m looking forward to using it in my Code Club.

New HTML & CSS Projects

We’ve finished updating our HTML & CSS curriculum, which now contains 12 new projects. These new projects each introduce web design concepts through fun, engaging activities.

The new projects make use of Trinket to create and share webpages online. Trinket offers several advantages over using a text editor offline. As well as seeing a live preview of their code, children can save and share their webpages online, and can remix webpages shared by others. This can also be achieved without a login, via uniquely generated Trinket urls.

Here are a couple of my favourite projects:

Build a Robot: In this project, children will learn about CSS positioning by building their own robot from various components.

Screen Shot 2016-02-18 at 19.22.37.png  robot-examples.png

For example, the following CSS would position the robot’s eyes by setting it’s width, as well as it’s position from the top and the left of the browser window:

#eyes1 {
 width: 200px;
 position: absolute;
 top: 200px;
 left: 100px;
}

robot-eyes-position2.png

Linked Rooms: Children learn how to use image hyperlinks to move between webpages by creating a separate page for each room, using doors to move between rooms. Each room can also be styled using it’s own CSS.

rooms-hall-finished.png

rooms-games-finished.png

Pixel Art: In this project, children create a pixel art editor. They will be introduced to JavaScript, and how it can be used to change the colour of each pixel. They will also learn how to use HTML tables to create a grid of pixels.

pixel-art-final.png

The projects can be found at codeclubprojects.org. As usual, we’d really welcome your feedback via email (projects@codeclub.org.uk), Github or through the feedback link at the end of each individual project. Let us know what you think!

 

ScratchX Spelling Test

There are some situations in which the experimental ScratchX ‘speak’ block (see previous post) would be useful, and one of those is a spelling test. In a spelling test, you cannot display the word to spell, and so previous spelling tests I’ve made in Scratch have involved recording the sound of me saying every word in the test.

With a ‘speak’ block, you can simply loop through all of the items in a ‘words’ list, speak the word and then ask the user to spell it. You can then use a decision to let the user know if they got the spelling right, and even update a score if they got it right.

Here’s how the code could look:

SpellingCode.pngWordList.png

The tricky part of this code is the code for looping through each item in the ‘words’ list, which is achieved with this code:

repeat.png

This means that the code is repeated 3 times for my list of 3 words. To speak each word in the list in turn, an ‘index’ variable is initially set to 1, which means that the code…

SpellingCode

…will speak the word at position 1 – the first word in the list. Adding 1 to the ‘index’ variable will set it to 2, meaning that next word 2 will be spoken. This continues for each word in the list.

Here’s the spelling test in action [download link]:

From what I can tell, the ScratchX extension makes use of the WebKit Speech Synthesis API. This shows that it’s also possible to create webpages that can speak the phrases given to them. One possible use for this is a screenreader for the partially sighted.

Here’s a sample Trinket showing a speaking webpage. This will work on all WebKit browsers (Chrome, Safari and Opera) [Trinket link].