In this project, you will code a counter, so you can build a physical controller for your micro:bit!

Gather all of your supplies, and then assemble the Code-a-Key backpack, Makey Makey and BBC micro:bit as shown on the instruction card included with the Code-a-Key backpack. Remember, when plugging the micro:bit into the backpack, the LED array should be pointing out from the backpack. 

We love stomp switches, they are a great way to trigger a keypress on a Makey Makey by getting up and doing something physical! If you have never built a stomp switch before, don’t worry about it, we have you covered! Check out our tutorial on how to build one out of cardboard. Don’t worry, we will wait right here for you to get your stomp switch built!

Build a Stomp Switch!

Once you have your cardboard stomp switch built, it is now time to hook it up to your Makey Makey! Using two alligator clips, clip your stomp switch to EARTH on the Makey Makey and the Space key. 

Do a quick test of your stomp switch by plugging your Makey Makey into the USB port of your computer and pressing (or stomping) on your stomp switch. The LED by the keyboard icon on the Code-a-Key backpack should light up, and it should produce a spacebar keypress on your computer! Tip: You can set your mouse cursor into the navigation bar or open a writing app (like Google Docs) to see the cursor moving a space every time you stomp.

The next step in building this physical counter is to program the BBC micro:bit. Connect the micro:bit to your computer USB port using the micro B USB Cable that came with your micro:bit. 

Next, open up your web browser to the Microsoft MakeCode page for the micro:bit and start a new project.

To use the Code-a-Key backpack with the micro:bit, we need to first add the Code-a-Key Extension to your MakeCode project. Click on the Extensions drawer and put “Code-a-Key” in the search bar of the Extensions window. The Code-a-Key Extension should be the only package that shows up. Click on the image to add it to your programming drawers. 

With the Extension added, we can now create our MakeCode program! Start by pulling the initialize Makey Makey block from the Makey Makey code drawer and place it inside the on start block. This will set everything up correctly for the micro:bit to be able to use the Code-a-Key backpack.

One best practice that we recommend for programs that use the Code-a-Key backpack is to also add visual feedback on the LED array at the start of your program to let you know that the micro:bit is done initializing everything. We do this by adding the display icon block after your initialize block. The icon choice is up to you, but we like to use the heart icon!

With the Code-a-Key extension ready, let’s program the micro:bit to wait and listen for a keypress from the Makey Makey and then count how many times it is pressed. 

The first thing we are going to do is to do some foundational work. We are going to create a variable in MakeCode to store the number of times that the stomp switch is pressed. To create a variable, click on the Variables drawer and click on Make a Variable. A window will pop up and ask you to name your variable. Type in “Stomps.”

With the variable created, we now have access to a few new blocks in the Variables drawer. Click and drag on the set Stomps to 0 block from the drawer and place it inside of your on start event block, just below the show icon block. 

This block will set your variable named “Stomps” to value 0 at the start of your program. It is a best practice to do this when creating new variables, as you can guarantee that variables will reset to 0 each time the micro:bit turns on. 

Now, from the Makey Makey drawer, bring the when Makey Makey key pressed event block into your program. This event block will be triggered when you press any keyboard key on your Makey Makey. So, when you press the stomp switch, which is connected to Space key, it will execute this code.

What code do you want it to execute? Good question! How about increasing or “incrementing” the stomps variable?

From the Variables drawer, drag the change Stomps by 1 block into your when Makey Makey Key Pressed event block. The variable is already increasing by 1, so each time a key is pressed on the Makey Makey, your variable will increase by the value of 1. 

The next step in creating our micro:bit program is to display the value of the stomps variable on the LED display! 

From the Basics drawer, click and drag the show number 0 block and place it inside of your forever event block.

To have the display show the number of the Stomps variable, we need to open the Variables drawer and drag the Stomps variable block into the show number 0 block, replacing the 0 as its value so your code will now read show number stomps.

The final step in programming our counter project is to create a way to reset the counter back to 0. This can be done a number of ways, but the most straightforward way to do it would be to leverage the buttons on the micro:bit for now. 

From the Inputs drawer, drag in the on button A pressed event block into your program. Now from the Variables drawer, drag in your set Stomps to 0 block and place that inside of your on button A pressed event block. So, when the A button is pressed on the micro:bit, it will reset your variable back to 0!

When you complete your program, double-check that all of your key presses and releases match our example, and then download the code to your micro:bit. When your code is done being downloaded to your micro:bit, the icon you chose should show up on the LED array. 

You can find our complete program example here!

Now that you have successfully coded your physical counter with the micro:bit and Code-a-Key backpack, it is now time to test it and see how accurate it is!

Unplug the micro:bit USB from your computer and plug the Makey Makey into your computer. You should see the Makey Makey go through its start-up LED sequence and then your micro:bit should show the initialize icon you gave it, followed by the number 0. Success!

Now, the fun part… Stomp on your stomp switch! The number on the micro:bit display should increase by one. Stomp again and check for the number changing. Now, press the A button on the micro:bit and reset the value to 0!

You now have a physical counter that uses a stomp switch! The question is now “What to use it for?” Here are a couple of ideas that have come up to inspire you to get out there and start counting…

• Use it to count laps around the gym. Each time you finish a lap, stomp on the switch!
• Place it at the bottom of a staircase to count how many people walked downstairs.  
• Place the switch in the bottom of a basket and throw an apple or ball into it to count how many apples make it in a basket.

In using your counter, you may have noticed that you have to keep looking at the micro:bit to see if the keypress was triggered or not. Wouldn’t it be nice to add some sort of audio feedback to the project?  

If you have a micro:bit 2.0 you can add that audio feedback easily by adding a single block to your makeCode program! 

Plug your micro:bit back into your computer and pull up your MakeCode program for the counter. From the Music drawer drag the play giggle until done block and place it at the bottom of your when Makey Makey key pressed event block code.

You can click on the giggle dropdown menu to select a sound of your choice and then change the until done dropdown menu to the option called : in background. This will play the sound effect while continuing to run the rest of your code and not delay anything while it is playing!

Download your code to your micro:bit and test the project out again. You now have a project that gives audio feedback when the key is triggered!

For more fun projects, check out:

Code-a-Key Project #0 Hello World

Code-a-Key Project #1 Stomp Switch (This guide)

Code-a-Key Project #2 Bouncy Face Tilt Controller 

Code-a-Key Project #3 Flashlight Piano