3-5-7 is a two player game that consists of three rows of buttons or tiles. The first row has three buttons, the second row has five buttons and the third row has seven buttons. The objective of the game is for the winning person to remove the last buttons from the game board. The only rule is that a user may remove as many tiles from a single row as they like when it is their turn.

The graphical user interface for this game is simple and requires placing three rows of buttons onto a LiveCode card. A button to reset the tiles is also added.

When you open LiveCode for the first time, you should be presented with a display that may look something like the one shown here. You have two panels with controls and buttons and a stack on which you can create the game. If you do not have a blank stack on your screen, then you can create one by selecting: File -> New Stack > Default size.

Next ensure that the Edit (pointer) tool is selected. That is the black arrow with the cross next to it (circled). You use the Edit (pointer) tool to work on your stack. The Run (browse) tool next to it is used for running the application you have created.

In Edit (pointer) mode, select a Standard Button icon from the left panel and drag it onto your card. You have to repeat this step 15 times, creating three distinct rows of buttons. The first row has three buttons, the second row has five buttons and the third row has seven buttons. It does not matter if the buttons overlap at the moment as we are going to resize them and align them. It does matter that the buttons are separated into three lines.

Tip: Instead of dragging out a button 15 times, you can duplicate the button by clicking on the button, holding down the Control key (Windows) on your keyboard and dragging. On Mac, hold the Alt key and drag.

Right-Click on the background of the card and select the Card Property Inspector (1). This opens a dialog window with which you can alter properties of items on the card. Then select all of the buttons on the screen (2). You can do this by clicking and dragging with the mouse over all of the buttons. This creates a selection rectangle that surrounds all of the buttons on the card. Notice how this creates little squares around the borders of all the buttons indicating all the buttons have been selected. Now select Position from the tabs in the Card Property Inspector. Change the width and height of the buttons to 40 as shown (3).

Once the buttons have been resized, you can position the buttons for the game play. You can do this manually or allow LiveCode to help you distribute the buttons for you. Select a row of buttons at a time, using the method described in the previous step (1). This time you have to create the selection rectangle around the buttons of each line. Then select the Align Controls in the Card Property Inspector (2). This allows you to align buttons across the card. First press the horizontal Distribute button (3) and select Across Card from the drop down list. This spaces the buttons across the card. Then select the Align Objects Middle button to align the buttons horizontally (4). Repeat this step for each line of buttons.

Now that the buttons are aligned, we need to name them so they can be identified in our script later. Select one button at a time and go to the Basic tab in the Card Property Inspector (1). Name each button in turn Btn X Y, where X is the position of the button on a line and Y is the line the button is on (2). Then ensure that the buttons you named do not display their name. You hide the name by unticking the selection box Show name (3).

The last step in creating the user interface is to add a Reset button. You can place this where you would like and resize it to the dimension of your preference. Use the Card Property Inspector to change the name of the button to Reset.

This tutorial provides you with a game interface that you can use to play the game of 3-5-7. No functionality is currently associated with the buttons. Simple button operations are added in the next tutorial: Game 3-5-7 - Basic Functionality.