Times Table

Create The User Interface

We are going to create an app that lets the user practice their times tables. The user will enter a number and the app will display that times table.

For this app, you will not get a screencast that shows you how to build the user interface. You will have to create it using the user interface design diagram shown below:

Create The Program Blocks

In the times table app , There are three main stages:

1. Getting the times table number from the user via the text box
2. Creating the times table header e.g. The 12 Times Table
3. Creating the times table itself:

There is only one event we need to worry about in this program - pushing the button - it has the following set of algorithms.

When button “Display table” clicked

1. set a variable <table> to the number entered in the text box
2. call Create Table Header procedure
3. call Create Table procedure
4. clear the text box

To Create Table Header (procedure)

1. set the table header label’s text to “The” <table> “Times Table”

To Create Table (procedure)

1. repeat 12 times using a counter
2. create a new line in the table
3. add this line on to the previous table text

Line 2 in the To Create Table procedure is a bit complicated. It joins together several elements. It uses variables, calculations and sections of text. It also includes a special text character \n which forces App Inventor to take a new line. The block for putting the new line together is shown below:

Your teacher will now show the class the screencast video for creating the program blocks. You can watch this again yourself at any time:

Extension Task 1:

Design and write an app to create a conversion table of kilograms to pounds (1kg = 2.2 lb). The table should go from:

• 1 to 10 for kilogrammes to pounds
• 5 to 100 in steps of 5 (use the STEP feature in the loop) pounds to kilogrammes

e.g. Kilogrammes to Pounds conversion

1kg = 2.2lb

2kg = 4.4lb

3kg = 6.6lb

…etc.

There is no input from the user in this app. It should just work when you click a “Display conversion table” button. You might want to put in two buttons - one to convert kilogrammes to pounds and one to convert pounds to kilogrammes

Extension Task 2:

Design and write an app that lets the user enter the current exchange rate for US Dollars and produces a table to convert US Dollars to Pounds.

Choose suitable start and end points for the amounts, as well as an interval (step) for your table. Use a search engine to find out the current exchange rate when testing your app.

Extension Task 3:

Validation is an algorithm that checks if the input to a computer is valid - in other words if the input falls within a range of values that the program should accept. Validation reject invalid data, which help you create programs that don't crash or produce weird or wrong answers.

Now let’s amend the app so that if the text box is empty, the user receives an error message. Our app will only create the times table if a number is entered. Here is the algorithm for this:

When button “Display table” clicked

1. if text box is empty
2. display error message
3. else
4. display table

The modified program should look something like the diagram below:

To display the error message, we will use a Notifier component (User Interface→Notifier), so add one to your component screen. The Notifier component is used to create a box on the screen with a message.

A Notifier is useful because it stops the user performing any other function in the app until they have dealt with the notification. This way, we can be sure the user has seen and (hopefully) read the message. On a desktop computer, a notification is often called a dialogue box.

The code to the make the Notifier, and which bits make what appear on the dialogue box, is shown below –feel free to alter the text:

Add validation to your times table app so it rejects the textbox being left empty.

See if you can work out how to make the program only accept numbers between 1 and 10 as valid input.