Guide for making a simple quiz app

Contents

Section 1: Creating the main question screen .................................................................................... 2

Section 2: Creating the screen for winners....................................................................................... 13

Section 3: Creating the screen for losers .......................................................................................... 16

Section 4: Adding code ..................................................................................................................... 19

Section 5: Testing your app............................................................................................................... 27

Section 1: Creating the main question screen
1.1) Go to MIT App Inventor

http://ai2.appinventor.mit.edu/

1.2) Open a new project

“Projects” menu > “Start new project”

1.3) Give the quiz a name and click OK

 1.4) Here is what you should see.

Let’s take a moment to talk about what we see.

Components
This is where
you will see
ALL the
components
Palette Viewer Properties
your app has,
This is how the app will This is where you customise a
All the components and the
look. You can rearrange component.
you can add are here. structure of
items in the viewer by Click on the component in the
Buttons, Images, etc your app.
clicking and dragging Components screen to see its
them . properties here.

1.5) Click on “Layout” in the Palette


1.6) Drag a “Vertical Arrangement” into your Viewer

Notice how you can see

the VerticalArrangement in
the Components
1.7) Add two more VerticalArrangements.

You should now have three in total and your screen should look like the below.

We will put a picture in the top box, a question in the middle box and some buttons for choosing
answers in the bottom box.

1.8) MAKE SURE YOUR COMPONENTS SHOW 3 VerticalArrangements. Do not confuse it with
HorizontalArrangements!

1.9) Let’s make the arrangement boxes the right size. Change the properties of the
VerticalArrangements as follows:

The top box should have:

Height = Fill parent AND Width = Fill parent

The middle box should have

Width = Fill parent

The bottom box should have

Width = Fill parent

When done, you should see something like this:

1.10) Let’s add the picture.

In the Palette, find “image” (part of “User Interface”) and drag it into the top box.

Notice how you can see

the image in the
Components now
1.11) Make sure you have selected the image in the Components panel.

Make sure the image is

selected here.

1.12) In the Properties panel change the Height and Width to “Fill parent”
1.13) Change the picture.

I am going to choose an ice cream, because I like ice cream.

 

Here’s what it looks like for me:

1.14) Now let’s add the question.

Drag a TextBox into the middle box.

1.15) Make sure the TextBox is selected in the Components panel.

1.16) Change the properties of the TextBox as follows:

FontSize = 32 (make the font smaller if you need to)

Height = Fill parent Width = Fill parent

ReadOnly = tick

Text = your question TextAlignment = center

This is what mine looks like now:

1.17) Next we want to add two buttons, side by side.

To make the buttons sit next to each other you must use a HORIZONTAL ARRANGEMENT. (Horizontal
means “sideways”).

Add a HorizontalArrangement to the bottom box:


1.18) Change the properties of the HorizontalArrangement for the width and height so it Fills parent:

1.19) Add two buttons from the Palette (in the “User Interface” section).

x2
1.20) Change their properties so the width is Fill parent, and change the text so one answer is
correct and the other answer is wrong.

This is what mine looks like now:

---------------------------------------------------------

Section 2: Creating the screen for winners

2.1) We need to add a screen for when the correct answer is picked.

Click “Add Screen”.

2.2) It is best practice to give things sensible names. You are NOT allowed any spaces in the name

I am calling mine “WinScreen”.

Click “OK”.
2.3) Let’s put a message in the middle of the screen.

To do this, first add 3 VerticalArrangements:

2.4) Make the Height of the top and bottom boxes “Fill parent”. Do NOT change the Height of the
middle box.

Do you see how the top and bottom box got

bigger and squeezed the box in the middle?

Height = Fill Parent

Height = Fill Parent

2.5) Make the middle box’s width “Fill parent”.

2.6) Add a label to the middle box. Change the properties of the label so it says “You win!”, the width
is “Fill parent” and the text is nice and big.

Remember, the “Arrangement” boxes are invisible. So when you run the app all you will see is “You
win!” in the middle of the screen. This is exactly what we want.

---------------------------------------------------------
Section 3: Creating the screen for losers
3.1) We need to make a screen for when you lose.

Click “Add Screen”.

3.2) It is best practice to give things sensible names. You are NOT allowed any spaces in the name

I am calling mine “LoseScreen”.

Click “OK”.

3.3) We want to add a message and a button to the middle of the screen.

Add 3 VerticalArrangements to the screen.

Make the Height of the top and bottom VerticalArrangements “Fill parent”.

Height = Fill Parent

Height = Fill Parent

3.4) Make the width of the middle box “Fill Parent”.

3.5) Add a label and a button to the middle box.

3.6) Change the properties of the label so it reads “Wrong answer!” and the text is bigger and
centred.

Change the properties of the button so it reads “Try again” and the text is bigger and centred.

This is what mine looks like:

Remember, the “Arrangement” boxes are invisible. So when you run the app all you will see is
“Wrong answer!” and the button with “Try again” in the middle of the screen. This is exactly what
we want.

Now we need to add a little code to our quiz, so it will change screens when the buttons are
pressed…

---------------------------------------------------------
Section 4: Adding code
4.1) To add and edit code, you need to go to the coding window.

Click “Blocks” at the top of the screen.

4.2) Select “Screen1” if it is not already selected.

 4.3) Let’s quickly review what we see on this screen:

General code is
here.
Most of the time
you will access a
component first
(see below), then
link it to some This is where your blocks of code will appear.
general code
afterwards. There are lots of useful options when you
RIGHT-click in this space, such as tidying up
your blocks or saving a picture of them.

All the screen’s

components are here.
Most of the time you will
access a component here
first, then connect it to Drag code you want to delete to the bin
general code (see above) to remove it.

Find “Button1” on the left and click on it to open a new menu.


4.4) Choose the block “when Button1.click do”

Your screen should look similar to this:

4.5) Go to the “Control” section at the top and add the block called “open another screen
screenName”


4.6) Clip this block into the previous block.

4.7) When someone playing the quiz presses “Button1” a new screen should be opened.

Depending on whether Button1 is the correct or wrong answer, you need to change “Screen1” to the
appropriate option. (Click on “Designer” at the top right of the screen if you cannot remember).

Change “Screen1” to “WinScreen” or “LoseScreen” according to your quiz.


4.8) Add another block of code for “Button2” that takes you to the other screen.

This is what my code looks like:

Screen1 (the screen with the question on) is finished now. But there is on more button that needs to
be coded. Do you remember where it is?

4.9) In the Blocks editor, go to “LoseScreen”


4.10) Click on “Button1” in the panel on the left, and add the “when Button1.click do” block.


4.11) Now open the “Control” section and choose the block called “Close screen”.

Make sure you do NOT choose “open another screen screenName”!

If you do, it will be very difficult to add more questions to your quiz… (can you think why?)

4.12) Clip the code together.

Well done! All the coding for this app is finished.

---------------------------------------------------------
Section 5: Testing your app
Let’s test the app!

You can connect from the Designer or Blocks screen – either will work.

5.1) Make sure you have “Screen1” open (otherwise you will not start the app in the correct place).

5.2) Choose “Connect” and “AI Companion”

5.3) On your phone, open the MIT App Inventor app and scan the QR code.

Check if your app works as you intended it to!