Lets create an App called Animal Quiz.

In this app we will add 3 questions (screens) where in each

question the user has to guess the name of an animal. If he choose the rigth answer we will display a
congratulations message and move to the next question, if not we will receive Incorrect. Try Again
message.

1. Start by creating a new project.

2. Name it animal_quiz

3. First start to build the interface.

Change the properties of Screen1:

4. Now add an HorizontalArrangement. The layout components allow us to display other components inside
of them.

In App Inventor we can use 3 Layouts to display other components:

Horizontal arrangement: component to display a group of components laid out from left to right.
Table arrangement: component to display a group of components in a tabular fashion.
Vertical arrangement: component to display a group of components laid out from top to bottom, leftaligned.
More info about Layout components here
Drag and Drop an HorizontalArragement to the App interface

5. Now lets upload an image to our project.

Click Upload File and select an image from your computer or use the image (andeTw.PNG) provided for
this tutorial.
6. Next step: change the properties of the HorizontalArrangement component.

7. Add a Button inside of the HorizontalArragement.

8. Change the properties of the Button. Dont forget to add the image uploaded previously to the Button.

In properties Widht and Height when you choose Fill parent the component will adjust to values of
the component where he belongs.

9. Because our quiz will have 3 questions we need to add 3 more screens. Lets do it.

10. Add the name of the screen

11. Now do the same for more 2 screens. Name them Question2 and Question3. After adding the 3 new
screens you should have this.

12. Lets change the name of Button1 to btnStart.

Select Button1 and click Rename

13. Now lets code..

In this situation we want that when user click on the Button (btnStart) he opens another screen. In this
case screen Question1.

Click Blocks.

14. On the Blocks Panel select btnStart.

15. Choose the event When btnStart.click just click on it.

16. After that open the Control options (

) and choose

17. Add it to event When btnStart.click

18. No we need to tell our App the name of the screen that we want to open.

19. So choose Text from the Blocks Panel and Click on the Text string

20. Add it to your code.

21. Inside of the TextString write the name of the screen that we want to open when the user click on
btnStart.

If you dont rebember the name of the Screen, go back to Designer and confirm it.

22. Now lets go back to Designer Mode.

23. Lets create the interface for our first question. We will only show on this tutorial how to create and code
the First Question (Question1 screen) you will have to do the same for the others two questions (Screens).

24. Choose screen Question1.

25. Lets upload images of 3 different animals to our App. I will use a Lion, a Eagle and a Dragon. Choose
however animals you want to use in our App or use the files available on Activity 3.

26. Add an image component to your screen and configure it with this properties.

27. Now lets add a Label with some information to the user. Configure the label component so that looks like
this (or configure it to your own appearance).

Now we need to give 3 options to the user to try to guess the name of the animal.
So lets add 3 Buttons to our interface. Change the name of the 3 Buttons to: btnOp1, btnOp2 and btnOp3 and
change their properties to look like is shown in the next image.

10

28. Now we need to code our Interface. For that we need to think of an algorithm (that is really a good
practice when we code. First think/reflect about what we want to happen, after that code it).

In this case what we want?

1) If the user clicks in btnOp1 (Goat) or btnOp2 (Fish) we will inform the user that his choice is: Incorrect.
Try Again

2) If the user click in btnOp3 (Eagle) we will:

a.

inform the user that is choice is: Correct. Congratulations;

b. move to next question (Screen question2).

29. In order to be able to show a message to the user we need a non-visible componente called Notifier. Add
one to your App.

11

So lets code our Algorithm.

30. Click on Blocks to go the code Editor.
31. We need to code each button according to our algorithm. So lets start with btnOp1. Select btnOp1
from the Blocks Panel. The event that will be triggered when a user clicks on the button is . Click.

From the Viewer choose.

Now lets code the actions that we define on our algorithm.

12

Add a Notifier Message to display a message to user when he clicks(press) this button.

From the Blocks Panel click on

to see the actions options of this component.

32. Choose the ShowAlert notice and add it to btnOp1 click event.

13

Should look like this.

And now we need to write the message that we want to display to the user. Choose a Text String from
Text group and add it to do ShowAlert notice.

Your code should look like this

14

Now we just need to add the message that we want to display to the user when we click(press) this
button.

33. Now is time to test your App before continue. From the menu choose Connect->AI Companion. If you
doesnt have an Android Device use the Emulator option.

Scan the QRCode and see the action in your device.

15

34. Now we have to code btnOp2. The fastest and easy way is to duplicate the btnOp1 code, because the
code to the btnOp2 is similar. Lets do it.

Click with the right button mouse on the actual code block and choose Duplicate.

35. When we duplicate a block of code, App Inventor warn us with an error, because we have two blocks with
the action (event) for the same component(btnOp1).

16

Lets change the componente associated with the second code block. Just click on
listbox will open. Choose btnOp2.

and a

36. Now that we have code the two buttons with the wrong anwsers we need to program btnOp3 that is
the rigth choice. Create the code for btnOp3 so that inform the user of the right choice. (duplicate a code
block again for btnOp3).
37. After that your code should look like this.

17

38. Test your App to see if everything is working well as you want.
39. But as you know we need one more action to btnOp3. We need to move to next Screen (Question2). Lets
do it. Choose Control from the Blocks Panel and choose another screen Screen name

Add this block to the btnOp3 click event.

Now we just have to indicate the name of the Screen. Pick up a Text String and add it to this block code.
Inser the name of the next Screen -> Question2

18

40. The final code for the screen Question1 should look like this

41. Now its your turn. Create the interface for Question2 and Question3 screens and have fun coding them.

19