Click, click...

The first few things we'll have to do are the same as the previous sketch.

Go to the Display section, and click on the "set font size to" block.

The next thing to set is a font type.

As you already know, you can find that block in the Display section as well.

Click on the block and drag it into the drawing area.

And now, let's set the font color.

You can choose whichever color you want, but we choose Red. 

Now that we have a font created, let's change what happens when a particular
event is triggered.

When you press Chatter's buttons, we trigger a particular event.

Luckily, we have a specific block defined for that, and it's under the I/O section. I/O stands for "Input/output".

Chatter's buttons are the so-called input devices because they send an electrical impulse to Chatter's computer when triggered. Chatter's display is an example of an output device because Chatter sends signals to it to display information.   

You need to find this purple block named "When button left gets pressed". Place the block onto the drawing area.  

We decided to start with the right button, so you can change the button you're working on to keep up with us.

Now, go back to the Display section, and find a "clear a display with screen color" block.

Drag it into a purple I/O block.

So, what you did now is you gave Chatter a command that when you press the right button, the first thing that'll happen is that the display will turn black.

The next block we'll search for is the print one (with the three white circles determining the text and the coordinates).

Drag it into a purple I/O block.

Change the print part into the "Right" and the coordinates into 120 and 60.

And as you have already learned, to make this code work, you need to put a "draw sprite to display" block.

Now we have to do the same code for the rest of the buttons, and the easiest way to do that is to duplicate the block you already made. 

To duplicate the block, click the right mouse button while placed on the purple part of the block. The menu should say "duplicate 5 blocks". Click on that, and an identical block should be created. 

Drag it on the drawing board, and let's change it slightly.

So, now we'll code what would happen if the left button gets pressed.

We decided to leave the screen color black, but now we'll print "Left" on the screen.

Also, we changed the coordinates of the text to be x=10 and y=60.

In the end, once again, there's a "draw sprite to display" block to make sure the code will appear on display.

You'll have to duplicate those five blocks three more times. 

Let's code the button you are using to go back on Chatter for a start.

As you can see, we decided to print "Back" and put coordinates to be x=65 and y=90.

Now, we'll make two duplicates for the enter button.

One input code will decide what will happen if the enter button gets pressed, and the other input code will determine what will happen if the enter button gets released.

Please, make sure that the block you'll use while releasing an enter button prints "Enter release" and the other one "Enter press".

If you did all the input/output blocks, it's time to get back to "Arduino run first" block.

Open the Display section, and choose the "clear the display with screen colour Black" block. 

Click on the block, drag it to the drawing area, and place it under the "Arduino run first" part of the sketch.

The next thing we'll need is also one of the well-known blocks.

Go to the Display section and choose this particular "print" block. We'll need two of them, but you can duplicate the other one easily.

Your sketch should look like this:

Make sure to print "Press one of the" in the one block and "top row buttons!" in the other one.

Also, please check the coordinations we put for each block.

Why did we print those two last sentences? 

We choose to print those out simply to make this code look better and more organized. When your Chatter turns on after the code complies, the first thing that will happen on display is "Press one of the top row buttons!" text will appear. After that, you can indeed press those buttons and check if the rest of your code is working properly.

For the end, make sure you place a "draw sprite to display" block at the end of the "Arduino run first" section for the "Press one of the top row buttons!" to appear.

Ta-daa!

Once the code is compiled, the Chatter will restart, and the screen will turn red with a black text saying, "Press one of the top row buttons!". 

Now, you can do as said and press one of the top row buttons. Once you press one of the buttons, the screen will turn black. 

Each button will trigger different text saying which one you pressed. So, if you press the right button, the screen will display "right", and if you press the left one, it will display "left". Also, we put the coordinations so that the right button triggers text on the right side, and the left button triggers text on the left side.

It's a bit different with the enter button. As you can see, we kept the same coordinations, but unlike the other buttons, we used this one twice - for pressing and releasing. So, as the command said, when you press enter, the screen will display "Enter press", and when you release enter, the screen will display "Enter release". 

Check the photos below to see what is supposed to happen: