Explore MIT App Inventor - Game

Mini Golf: Fling, TouchUp, TouchDown Gestures for App Inventor 2

joanie — Wed, 07 Aug 2013 14:13:24 +0000

This Mini Golf App demonstrates how to use the Fling, TouchUp, and TouchDown gestures for Sprites
Note that these event handlers are also available for the Canvas.

To play this mini golf app, the player first positions his/her ball within the confines of the tee, and then flings the ball toward the hole. The ball will bounce off of the rectangular obstacle and the sides of the course. For each fling of the ball, the stroke count goes up by one. The total score is the number of strokes it takes to complete the entire course.

This tutorial covers:

Using the Sprite component and the TouchUp, TouchDown, and Flung events
Using a Clock component
Dynamic Positioning of sprites on a canvas, based on the size of the screen
Sprite Collisions

This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify the app's behavior. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Part I: Start a new app and make a ball that responds to fling events

We'll build this app in stages, adding a little bit of the game at a time. Log into App Inventor and start a new project. Name it "MiniGolf". When the Design window opens notice that App Inventor automatically names the screen "Screen1", but you can set the Title of the screen, which will show up in the top bar of the app. Think of a title related to Mini Golf, or feel free to use the suggested title "Fling It Mini Golf", and type it into the Properties pane on the right side of the Designer.

In the Screen Properties (shown in right-hand pane): Uncheck the checkbox labeled "Scrollable" so that the screen will not scroll when the app is running. Screens that are set to scroll do not have a height. We’ll need our screen to have a defined height in order to set up the golf course properly.

Add the following components in the Designer:

Component Type	Palette Group	What You'll Name It	Purpose	Properties
Canvas	Basic	Canvas1	The canvas serves as the golf course	Height: 300 Width: FillParent BackgroundColor: Green (or whatever you like!)
BallSprite	Animation	GolfBall	This is the ball the player will fling to try to hit the Hole	Radius = 10 Color: White (or your choice!) Speed: 0 Interval: 1 (ms) Z = 2 (when sprites are overlapping, the one with the higher z will appear on top)
BallSprite	Animation	Hole	This will be the target for the GolfBall	Radius = 15 Color: Black Speed: 0
Clock	Basic	Clock1	The clock will fire continuously to control the movement of the ball	Timer Always Fires Timer Enabled TimerInterval: 100

Open the Blocks Editor

Program the behavior of the Ball:

First, use the GolfBall.Flung event handler to move the golf ball when it is flung. Notice how this event handler takes in 6 different arguments:

x, the x position on the Canvas grid of the user's finger
y, the y position on the Canvas grid of the user's finger
speed, the speed of the user's flinging gesture
heading, the direction (in degrees) of the user's fling gesture
xvel, the speed in the x direction of the user's fling
yvel, the speed in the y direction of the user's fling

Essentially, you want to set the GolfBall sprite’s speed and heading to match the speed and heading of the player’s fling gesture. You may want to scale up the speed a little bit because the speed of the fling is a little slower than how a golf ball would move. You can play with this "scaling factor" to make the ball more or less responsive to a fling.

Program the behavior of the clock:

Use timer event to slow ball down so it doesn’t bounce around forever.

Each time the clock fires, it will reduce the speed of the ball slightly. Notice that if the ball is not moving then these blocks will do nothing. If you don’t have this then the ball will just bounce forever.

You'll need to use the if mutator function to change the if block into an if-else block. For a summary of mutators, check out the Mutators page

Program a new procedure called SetupNewHole:

This procedure will be called when a hole is scored and the ball has to be placed back at the starting point. Note that the Hole.MoveTo block sets the hole up in a new random location for the next play.

Program the Behavior of the Hole: When the ball collides with the hole, the ball disappears and resets at the bottom of the screen.

Note: When you first drag out the GolfBall.CollidedWith event handler, the named parameter is called "other". Notice that the if then block tests to see if the object involved in the collision with the golf ball (other) is the black ball sprite representing the hole. You can't just put a text block with the word "Hole" in it, you must use the component Hole block, that can be found in the drawer for the Hole image sprite. Do not use a text block here.

Test this Behavior. Connect your device to AppInventor, or start the emulator to load your app. When you fling the ball it should move in the direction of your fling, with a speed similar to the strength of your fling. The ball should slow down as it moves, eventually stopping. When the ball hits the hole, the ball should reset at the bottom of the screen and the hole should move to a new random location.

Does your ball get stuck if it hits the edge?

This is easy to fix with the when EdgeReached event. Note that you can find the "edge" value block by using a get block and selecting "edge" from the dropdown.

Double check to make sure your code is right: fling the ball a few times and see that that ball now bounces off the edges of the course.

Part II: Keeping Score

Games are more fun if you have a way to see how you’re doing. Let’s add a stroke counter. In mini golf your score goes up as you take more strokes. The goal is to have the lowest score possible. Let’s show the player how many strokes she or he has taken on this hole. Let’s also show the number of strokes taken during the whole game.

Go back to the Designer and set up the following components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement	Screen Arrangement	HorizontalArrangement1	Contains LabelScore and LabelStroke	Place at top of screen
Label1	Basic	LabelScore	Displays the total stroke count for the entire game
Label2	Basic	LabelStroke	Displays the stroke count for the hole the player is currently on

In the Blocks Editor, you can program updates to the Score and Stroke labels. First, set two new global variables called StrokeCount and Score, and set their initial values to 0.

Then add the following blocks to the GolfBall.Flung event (red rectangle indicates new blocks):

Next add the following blocks to the Event that handles the ball hitting the hole:

Test the behavior. With these new changes, you should have a "Total Strokes" count and "This Hole" count at the top of the screen. When you fling the ball, the "This Hole" count  and "Total Strokes" count should both increase by one, and when you make the ball go into the hole the "This Hole" count should reset to 0.

Part III: Positioning Ball on Tee using TouchUp and TouchDown events

Ok, so now you’ve got a working game! Now let’s make it a little more interesting and fun. First we’ll add a Tee and let the player position the golf ball on the tee before they fling the ball.

Go back to the Designer and add three new image sprite components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	Tee	A rectangular area in which the player can position their ball before teeing off.	Upload the Tee image (right click on this link, or see below).
ImageSprite	Animation	LeftSprite	This is a left pointing arrow that the player will use to move the ball to the left on the tee	Upload the left arrow graphic (right click on this link
ImageSprite	Animation	RightSprite	This is a right pointing arrow that the player will use to move the ball to the left on the tee	Upload the right arrow graphic (right click on this link

Program the size of the canvas, and the placement of the ball and image sprites on the canvas:

First, program the setup of these components on the screen. It’s best to accommodate all different screen sizes by placing the sprites on the screen relative to the size of the screen. The blocks below show how to set up the screen dynamically so that everything fits the right way. We start off by making the canvas size based on the screen size, and then we place each sprite in relation to the width and height of the canvas. We'll make a procedure to do this for us. Try to understand all of these blocks before you move on.

Position the Golf Ball on the Tee using TouchUp and TouchDown on the Arrow sprites:

To handle this, first set up two global variables that are toggled each time an arrow is pressed.

Program the behavior of the Right and Left Arrows

The left and right arrows are image sprites, so they come equipped with the ability to know when the player is is holding his/her finger down on them. The following blocks toggle the global variables based on whether the user is pressing either of these arrows.

Procedure MoveBallOnTee:

Make a new procedure MoveBallOnTee that makes the golf ball move left or right on the tee depending on the global variables. Although the math here looks complicated, it’s pretty simple. If the ball is supposed to move left, you first check to make sure that moving the ball 2 pixels left will not exceed the left-most coordinate of the Tee. If moving the golf ball to the right, you first check that moving the ball right 2 pixels will not move it past the right-most coordinate of the Tee.

Note: if blocks look different in this image than on your own screen, this is because they were aligned differently. If you right click on the blocks, a list of options will appear and one of them is external inputs. When you select this, it will change how the blocks are configured. It does not change how the blocks function. If you want to change this, right click again and select internal inputs.

MoveBallOnCourse Procedure

Note that the blocks that we had inside the Clock1.Timer event are now moved over to a new procedure called MoveBallOnCourse:

On each new course, players can position the ball on the tee before attempting to fling the ball toward the hole. To program this, you first have to check to make sure this is a new course and the ball has not been flung yet. If StrokeCount = 0 then we know this course is brand new and the player has not yet attempted to get the ball into the hole.

As the blocks above show, after verifying that the StrokeCount is 0, you then want to proceed to move the golf ball left or right depending on which arrow is being pressed.

Test the behavior. Make sure your app is doing what you expect: play the game on your device or emulator. Before you tee off, are you able to move the ball left and right on the tee by using the left and right arrows? After you tee off, you should no longer be able to use the left and right arrows (pressing them will do nothing). After the ball goes into the hole and the screen resets, you should then be able to move the ball left and right on the tee before teeing off again.

Keep track of the number of holes played, and allow a game reset

The game is working pretty well now, but what about giving the player a way to reset the game? Also, it would be nice to give the player some instructions so they know how to play the game. While we’re at it, let’s also give an indication of how many holes the player has completed. Add the following components in the Designer:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement2	Screen Arrangement	Horizontal Arrangement2	Contains the NewGame button and the HoleNum label
Button	Basic	ButtonNewGame	Resets the game to Hole #1 with a score of 0.	Text: "New Game"
Label3	Basic	LabelHoleNum	Displays the current hole number, increments by one each time a hole is completed.	Text = "Hole # 1" Font: bold, 28, blue
Label4	Basic	LabelInstruct	Displays instructions	Text = "Use arrows to position ball on tee. Hit the ball by flinging it with your finger."

Define a new global variable to keep track of the Hole Number:

Add the following blocks to the SetupNewHole procedure: set global HoleCount and set LabelHoleNum.Text...

Program the "New Game" button’s behavior, which is pretty simple. When the button is pressed, set up a new course and reset both the hole stroke counter and total stroke counter to zero. Also set the hole number back to 1, by displaying "Hole #1" in LabelHoleNum. The blocks look like this:

Test the behavior.

Go back to your device or emulator and play the game some more. Now you should see the Hole # displayed in the lower right. Hitting "New Game" button should reset the game, returning both scores to 0, resetting the screen, and setting the Hole number to #1.

Part IV: Introduce an Obstacle

Most mini golf courses have obstacles on them. Let’s add a simple rectangular obstacle that will randomly position itself on the course somewhere between the Tee and the Hole. Each time a new course is presented, the obstacle will move, just the same way the Hole moves each time a new course is set up.

Add the following component in the Designer:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	ObstacleSprite1	This sprite will be somewhere between the golf ball and hole and will make it harder to get the ball into the hole	Upload the obstacle (rectangle) graphic (right click on this link, or see below).

Program the behavior of the obstacle in the blocks editor. First, set the behavior for when the ball hits the obstacle. *Note: Using Heading = 0 - heading works because we are dealing with bouncing off of horizonal surfaces, this will not work for bouncing off of vertical or inclined surfaces. For our purposes, it works all right. See Challenge #2 below for more information.

Each time the course is reset, position the obstacle will be positioned randomly. Add these blocks to the SetupNewHole procedure:

Test the behavior. Play the game again. Notice that the ball bounces off when it hits the obstacle. When the ball goes into the hole, or when the New Game button is pressed, the obstacle appears in a new location somewhere between the tee and the hole.

That’s it! Share your game with friends by building an APK or by downloading the source and sharing the zip file with other App Inventors!

Part V: Challenges

Here are some extra challenges to make your game better.

Challenge 1: Program the Ball to Hole collision so that the ball only goes into the hole if the golf ball’s speed is not too fast. In real mini golf, the ball will bounce right over the hole if you hit the ball too hard.

Challenge 2: There is a slight bug when the ball hits the vertical sides of obstacle. Figure out how to program the ball to obstacle collision so that it bounces the way you would expect when the ball hits the vertical sides.

Challenge 3: Limit the number of holes per game. Keep track of the number of holes and end the game after a set number. (A typical mini golf course has 18 holes.)

Below is a summary of all of the components:

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with Mini Golf? Return to the other tutorials.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

MoleMash for App Inventor 2

aaron — Wed, 03 Jul 2013 14:29:42 +0000

In the game MoleMash, a mole pops up at random positions on a playing field, and the player scores points by hitting the mole before it jumps away. This tutorial shows how to build MoleMash as an example of a simple game that uses animation.

The tutorial assumes that you have completed the HelloPurr and PaintPot tutorials.

Download Book Chapter (PDF)

Getting Started

Connect to the App Inventor web site and start a new project. Name it "MoleMash", and also set the screen's Title to "MoleMash". Open the Blocks Editor and connect to the phone.

Also download this picture of a mole and save it on your computer.

Introduction

You'll design the game so that the mole moves once every half-second. If it is touched, the score increases by one, and the phone vibrates. Pressing restart resets the score to zero.

This tutorial introduces:

image sprites
timers and the Clock component
procedures
picking random numbers between 0 and 1
text blocks
typeblocking

The first components

Several components should be familiar from previous tutorials:

A Canvas named "MyCanvas". This is the area where the mole moves.
A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole.
A Button named "ResetButton".

Drag these components from the Palette onto the Viewer and assign their names. Put MyCanvas on top and set its dimensions to 300 pixels wide by 300 pixels high. Set the Text of ScoreLabel to "Score: ---". Set the Text of ResetButton to "Reset". Also add a Sound component and name it "Noise". You'll use Noise to make the phone vibrate when the mole is hit, similar to the way you made the kitty purr in HelloPurr.

Timers and the Clock component

You need to arrange for the mole to jump periodically, and you'll do this with the aid of a Clock component. The Clock component provides various operations dealing with time, like telling you what the date is. Here, you'll use the component as a timer that fires at regular internals. The firing interval is determined by the Clock 's TimerInterval property. Drag out a Clock component; it will go into the non-visible components area. Name it "MoleTimer". Set its TimeInterval to 500 milliseconds to make the mole move every half second. Make sure that Enabled is checked.

Adding an Image Sprite

To add the moving mole we'll use a sprite.

Sprites are images that can move on the screen within a Canvas. Each sprite has a Speed and a Heading, and also an Interval that determines how often the sprite moves at its designated speed. Sprites can also detect when they are touched. In MoleMash, the mole has a speed zero, so it won't move by itself. Instead, you'll be setting the mole's position each time the timer fires. Drag an ImageSprite component onto the Viewer. You'll find this component in the Animation category of the Palette. Place it within MyCanvas area. Set these properties for the Mole sprite:

Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial.
Enabled: checked
Interval: 500 (The interval doesn't matter here, because the mole's speed is zero: it's not moving by itself.)
Heading: 0 The heading doesn't matter here either, because the speed is 0.
Speed: 0.0
Visible: checked
Width: Automatic
Height: Automatic

You should see the x and y properties already filled in. They were determined by where you placed the mole when you dragged it onto MyCanvas. Go ahead and drag the mole some more. You should see x and y change. You should also see the mole on your connected phone, and the mole moving around on the phone as you drag it around in the Designer. You've now specified all the components. The Designer should look like this. Notice how Mole is indented under MyCanvas in the component structure list, indicating that the sprite is a sub-component of the canvas.

Component Behavior and Event Handlers

Now you'll specify the component behavior. This introduces some new App Inventor ideas. The first is the idea of a procedure. For an overview and explanation of procedures, check out the Procedures page.

A procedure is a sequence of statements that you can refer to all at once as single command. If you have a sequence that you need to use more than once in a program, you can define that as a procedure, and then you don't have to repeat the sequence each time you use it. Procedures in App Inventor can take arguments and return values. This tutorial covers only the simplest case: procedures that take no arguments and return no values.

Define Procedures

Define two procedures:

MoveMole moves the Mole sprite to a new random position on the canvas.
UpdateScore shows the score, by changing the text of the ScoreLabel

Start with MoveMole:

In the Blocks Editor, under Built-In, open the Procedures drawer. Drag out a to procedure block and change the label "procedure" to "MoveMole".
```
Note: There are two similar blocks: procedure then do and procedure then resu;t. Here you should use procedure then do.
```
The to MoveMole block has a slot labeled "do". That's where you put the statements for the procedure. In this case there will be two statements: one to set the mole's x position and one to set its y position. In each case, you'll set the position to be a random fraction, between 0 and 1, of the difference between the size of the canvas and the size of the mole. You create that value using blocks for random fraction and multiplication and subtraction. You can find these in the Math drawer.
Build the MoveMole procedure. The completed definition should look like this:

MoveMole does not take any arguments so you don't have to use the mutator function of the procedure block. Observe how the blocks connect together: the first statement uses the Mole.X set block to set mole's horizontal position. The value plugged into the block's socket is the result of multiplying:
1. The result of the call random fraction block, which a value between 0 and 1
2. The result of subtracting the mole's width from the canvas width
The vertical position is handled similarly.

With MoveMole done, the next step is to define a variable called score to hold the score (number of hits) and give it initial value 0. Also define a procedure UpdateScore that shows the score in ScoreLabel. The actual contents to be shown in ScoreLabel will be the text "Score: " joined to the value of score.

To create the "Score: " part of the label, drag out a text block from the Text drawer. Change the block to read "Score: " rather than "text".
Use a join block to attach this to a block that gives the value of the score variable. You can find the join block in the Text drawer.

Here's how score and UpdateScore should look:

Add a Timer

The next step is to make the mole keep moving. Here's where you'll use MoleTimer. Clock components have an event handler called when ... Timer that triggers repeatedly at a rate determined by the TimerInterval.

Set up MoleTimer to call MoveMole each time the timer fires, by building the event handler like this:

Notice how the mole starts jumping around on the phone as soon as you define the event handler. This is an example of how things in App Inventor start happening instantaneously, as soon as you define them.

Add a Mole Touch Handler

The program should increment the score each time the mole is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for Mole that:

Increments the score.
Calls UpdateScore to show the new score.
Makes the phone vibrate for 1/10 second (100 milliseconds).
Calls MoveMole so that the mole moves right away, rather than waiting for the timer.

Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

Here's a tip: You can use typeblocking: typing to quickly create blocks.

To create a value block containing 100, just type 100 and press return.
To create a MoveMole block, just type MoveMole and select the block you want from the list

Reset the Score

One final detail is resetting the score. That's simply a matter of making the ResetButton change the score to 0 and calling UpdateScore.

Complete Program

Here's the complete MoleMash program:

Variations

Once you get the game working, you might want to explore some variations. For example:

Make the game vary the speed of the mole in response to how well the player is doing. To vary how quickly the mole moves, you'll need to change the MoleTimer's Interval property.
Keep track of when the player hits the mole and when the player misses the mole, and show a score with both hits and misses. To do this, you'll need do define touched handlers both for Mole, same as now, and for MyCanvas. One subtle issue, if the player touches the mole, does that also count as a touch for MyCanvas? The answer is yes. Both touch events will register.

Review

Here are some of the ideas covered in this project:

Sprites are touch-sensitive shapes that you can program to move around on a Canvas.
The Clock component can be used as a timer to make events that happen at regular intervals.
Procedures are defined using to blocks.
For each procedure you define, App Inventor automatically creates an associated call block and places it in the My Definitions drawer.
Making a random-fraction block produces a number between 0 and 1.
Text blocks specify literal text, similar to the way that number blocks specify literal numbers.
Typeblocking is a way to create blocks quickly, by typing a block's name.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with MoleMash? Return to the other tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Basic

Tutorial Type:

MoleMash 2 for App Inventor 2

aaron — Tue, 02 Jul 2013 14:47:11 +0000

What You're Building

Download Refined Version (Book Chapter PDF)

This tutorial shows you how to build a game similar to the Whac-A-MoleTM arcade game. Specifically, your goal is to whack (tap) a mole that randomly pops out of one of five fixed holes. Every time you succeed, your score is increased by one point.

In order to highlight new App Inventor features — the Advanced tab and Sprite Z-layering — this app takes a different approach than the original Mole Mash tutorial, which you need not have read in order to do this one. You should, however, be familiar with the basics of App Inventor — using the Component Designer to build a user interface and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Introduction

This tutorial includes:

Creating a list of components
Using functionality from the Advanced section of the Blocks Editor to get and set properties of arbitrary components
Having game events controlled by the Clock component
Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another

Getting Started

Connect to the App Inventor web site and start a new project. Set the screen's Title property to an appropriate name, such as "Mole Mash". Open the Blocks Editor and connect it to the phone. Download these image files (created by Yun Miao) by right-clicking on them, then add them to the project by pressing the "Add..." button in the Media pane.

Set up the Components

The user interface will contain a total of 6 ImageSprites: 5 unmoving holes and 1 mole, which will move on top of the holes. Use the component designer to create the user interface. When you are done, it should look something like the picture below. Don't worry about lining up the holes evenly. You will specify their locations through their X and Y properties. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	GameCanvas	The game field
ImageSprite (5)	Animation	Hole1 ... Hole5	Holes from which the mole can appear
ImageSprite	Animation	Mole	The mole
HorizontalArrangement	Screen Arrangement	ScoreArrangement	To display the score
Label	Basic	ScoreTextLabel	To hold "Score: "
Label	Basic	ScoreValueLabel	To hold the score (# of times the mole was hit)
Clock	Basic	MoleClock	To control the mole's movement
Sound	Media	Buzzer	To vibrate when the mole is touched

Make the following changes to the components' properties:

Component	Action
Canvas1	Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.
Hole1	Set X to 20 and Y to 60 (upper left).
Hole2	Set X to 130 and Y to 60 (upper center).
Hole3	Set X to 240 and Y to 60 (upper right)
Hole4	Set X to 75 and Y to 140 (lower left).
Hole5	Set X to 185 and Y to 140 (lower right).
Mole	Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which have the default Z value of 1.
ScoreTextLabel	Set Text to "Score: ".
ScoreTextValue	Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks Editor.

Add Behaviors to the Components

Here is an overview of what we need to create blocks to do:

Create variables:
1. holes: a list of holes
2. currentHole: the hole the mole is currently coming out of
When the app starts:
1. Populate the list of holes.
2. Set each hole's Picture property to "hole.png".
3. Call procedure MoveMole (below).
Create a procedure MoveMole to:
1. Set currentHole to a random hole from the list holes.
2. Move the mole to the location of currentHole.
Make MoleClock call MoveMole whenever its timer goes off (every second).
Implement a handler that does the following when the mole is touched:
1. Add one to the score.
2. Make the phone briefly vibrate.
3. Call MoveMole.

To proceed, switch to the Blocks Editor.

Creating Variables

Create the variables holes and currentHole. For now, we will give them "dummy" initial values; we'll set their real initial values in the Screen1.Initialize event handler, which is run when the app starts. (For technical reasons, components cannot be referred to in def blocks, which are run before the app has started.) Here is a picture and list of the blocks you will need:

Block type	Drawer	Purpose
def variable as (holes)	Definition	Hold a list of holes.
make a list	Lists	Create an empty list, to be filled in when the program starts.
def variable as (currentHole)	Definition	Hold the mole's current hole.
number (0)	Numbers	Provide a required initial value for currentHole.

As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App

The first event to occur in any program in Screen1.Initialize, so we will put start-up code in that handler. Specifically, we will add the hole components to the list holes, set each hole's Picture property to "hole.png", and call MoveMole. Since we have not yet written MoveMole, we will create an empty procedure with that name, which we will fill in later.

Below are a picture and table of the blocks you need to create. Note that the "Any ImageSprite" drawer is found under the "Advanced" tab to the right of "Built-In" and "My Blocks" in the Blocks Editor.

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Specify what should happen when the app starts.
add items to list	Lists	Add the following values to...
holes	My Definitions	...the list of holes:
component Hole1	Hole1	-the upper left hole
component Hole2	Hole2	-the upper center hole
component Hole3	Hole3	-the upper right hole
component Hole4	Hole4	-the lower left hole
component Hole5	Hole5	-the lower right hole
foreach	Control	Specify that we would like...
name (hole)	Definitions	...a variable named "hole"...
holes	My Definitions	...to take on each of the values in the list holes .
ImageSprite.Picture	Any Image Sprite	Set the Picture property of...
value hole	My Definitions	...the ImageSprite referred to by the variable hole ...
text (hole.png)	Text	...to the picture of the empty hole.
to procedure (MoveMole)	Definition	Create an procedure, to be filled in later, for moving the mole.
MoveMole	My Definitions	Call MoveMole to make the first placement of the mole.

Compare the foreach block to the equivalent blocks that would be necessary without it:

Not only is the left set of blocks shorter, it is less repetitious, sparing the programmer from semi-mindless copy-and-pasting and making it easier to modify, for example, if the name of the picture is changed.

Moving the Mole

Now let's fill in the body of the procedure MoveMole, which we'll call when the program starts, when the mole gets touched, and when our timer goes off every second. What we want it to do is to pick a random hole and move the mole on top of it. Here are a picture and list of the new blocks:

Block type	Drawer	Purpose
set currentHole to	My Definitions	Save the...
call pick random item	Lists	...randomly selected...
holes	My Definitions	...hole.
call Mole.MoveTo	Mole	Move the mole to the...
ImageSprite.X	Advanced/ImageSprite	..x-coordinate of...
currentHole	My Definitions	...the chosen hole...
ImageSprite.Y	Advanced/ImageSprite	...and the y-coordinate of...
current Hole	My Definitions	...the chosen hole.

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just need two blocks to accomplish that:

Block type	Drawer	Purpose
MoleClock.Timer	MoleClock	When the timer goes off...
call MoveMole	My Definitions	...move the mole.

Registering Touches

Finally, we need to specify what happens when the mole is touched. Specifically, we want to:

Increment the score.
Make the phone vibrate briefly.
Move the mole.

We can easily translate these to blocks:

Block type	Drawer	Purpose
Mole.Touched	Mole	When the mole is touched...
set ScoreValueLabel.Text to	ScoreValueLabel	...update the visible score to...
block	Math	...the result of adding...
number (1)	Math	...1 [and]...
ScoreValueLabel.Text	ScoreValueLabel	...the previous score.
call Buzzer.Vibrate	Buzzer	Make the phone vibrate for...
number (100)	Math	...100 milliseconds.
call MoveMole	My Definitions	Move the mole to a new location.

Final Program

Variations

Here are some variations you might want to implement:

Adding a Reset button to set the score back to 0.
Having the score depend not just on the number of hits but also the number of misses and escaped moles.
Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the player is doing poorly.
Adding a second mole on a different timer.

You can see how to implement the first two variations in the original Mole Mash tutorial.

Review

Here are some of the ideas covered in this tutorial:

Putting components in a List.
Performing an operation on every component in a List using the foreach block and Advanced features.
Placing an ImageSprite on top of another, using their Z properties to control which goes in front.
Using the Clock component to control game play.
Creating a procedure and calling it from multiple places.

Done with MoleMash 2? Return to the other tutorials here.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Get the Gold for App Inventor 2

aaron — Mon, 01 Jul 2013 18:09:32 +0000

What You're Building

By building the Get The Gold App you will get practice with setting visibility, using Clock components and Timers, and detecting collisions in App Inventor. You'll program an application that has a pirate ship whose goal is to collect all the gold on the screen.

Getting Started

Connect to the App Inventor web site and start a new project. Name it GetTheGold, and also set the screen's Title to "GetTheGold". Switch to the Blocks view and connect to a device or emulator.

Introduction

This tutorial introduces the following skills, useful for future game development:

Using the Clock component
Using Clock.Timer to move sprites
Using Sprite.Flung to move a sprite
Using collision detection

Getting Ready

For this game, you will have two types of imagesprites: pirate and gold coin. Click below to download the image file for your sprites.

Set up the Components

Use the component designer to create the interface for GetTheGold. When you finish, it should look something like the snapshot below (more detailed instructions below the snapshot).

To create this interface, put the following components into the Designer by dragging them from the Component Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	Canvas1	The background that we will be putting our imagesprites on
ImageSprite	Animation	PirateSprite	The pirate ship in our game
ImageSprite	Animation	ImageSprite2	One of the gold coins in the game
ImageSprite	Animation	ImageSprite3	One of the gold coins in the game
ImageSprite	Animation	ImageSprite4	One of the gold coins in the game
ImageSprite	Animation	ImageSprite5	One of the gold coins in the game
ImageSprite	Animation	ImageSprite6	One of the gold coins in the game
Clock	Basic	Clock1	We use the Clock for its Timer method to move the coins
Button	Basic	ResetButton	To reset the game so the player can play again

Set the properties of the components as described below:

Component	Action
ResetButton	Change Text property to "Reset".
PirateSprite	Change Speed property to 6.	Upload the pirateship image and set Picture property to pirateship.
ImageSprite(2,3,4,5,6)	Upload the goldcoin image and set Picture property to goldcoin.
Clock	Change TimerInterval property to 2000.

Moving the Pirate

To move the PirateSprite, we want the user to be able to "fling" the sprite in the direction that they choose. To do this, we will use the PirateSprite.Flung event handler.

You may notice that PirateSprite.Flung takes in 6 attributes: x, y, xvel, yvel, speed, and heading. We want to reassign PirateSprite's current heading to the heading given to us from PirateSprite.Flung. This means that the user can now control the direction of the pirate ship with their fingers by flinging on the screen.

To prevent the pirate from moving off the screen, we will also use PirateSprite.Bounce when an edge is reached.

Moving the Coins

We want the coins to move to random positions on the screen. We will use Clock1.Timer and the ImageSprite's MoveTo method to do this.

When the Clock1.Timer goes off, we want all of our gold coin ImageSprites to move to a new random location on the Canvas. We will do this by using the Sprite.MoveTo block.

MoveTo takes in two arguments: the x and y coordinates on the canvas of the new position we want the sprite to move to. We want the Sprite to move to a new random location so we will use the random integer block found in the Math box. Since we want each Gold ImageSprite to move to a new location, we repeat this process for each sprite's MoveTo function.

For ImageSprite2, we want x to be a random integer from 0 to Canvas1.Width-ImageSprite2.Width and y to be a random integer from 0 to Canvas1.Height-ImageSprite2.Height. This is to be repeated for all the Gold Image Sprites.

Remember that sprites are measured at the upper left corner as (0,0) so if we don't want them to go off the screen, we need to take the sprite's height/width into account when setting the range for our random numbers.

We will do this by setting up our blocks as in the image below:

Detecting Collisions

App Inventor detects collisions by checking for an intersection between the bounding rectangles of each ImageSprite. We call this rectangle-based collision detection. As you can see in the image below, sprites with circular or polygon shape will appear to collide because of the rectangular bounds around them when they might not actually be colliding.

We can use the PirateSprite.CollidedWith event handler to detect whenever the pirate ship collides with another sprite or gold coin. You may notice that PirateSprite.CollidedWith takes in an argument. This argument is the object that PirateSprite just collided with. We will be testing inside the handler for which object so the name of this argument is not significant. You can name it other.

Whenever the pirate collides with a gold coin, we want the coin to disappear. We can do this by setting the coin's visibility to false. To find which coin the pirate collided with, we will use the PirateSprite.CollidingWith.

We can use PirateSprite.CollidingWith to take in a component (each of the gold coin sprites) to detect which sprite was hit. This is a component block and NOT a text block with the words ImageSprite inside. The component block can be found in the drawer for each component. If a sprite was hit, we will set its visibility to false.

Reset Button

After the user hits all of the gold sprites with the pirate ship, none of them will be visible. The reset button should set all of the gold sprites' visibility to true.

Complete Program

Here's the complete GetTheGold program.

Package the final version of the app by choosing Package For Phone | Barcode from the Component Designer menu. When the barcode appears, use the barcode scanner on your phone to download and install the app.

Variations

Once you get this program running, you may want to do the following additional features to extend it. For example,

Create a label to display the time that it took you to get all the gold
Change the speed of the ship or gold coins
Add an enemy sprite that when collided with, causes your pirate to lose speed
Use one of the phone's sensors to control movement of the pirate ship

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with GetTheGold? Return to to the other App Inventor 2 tutorials here.

Tutorial Version:

App Inventor 2

Tutorial Difficulty:

Advanced

Tutorial Type:

Get the Gold

aaron — Fri, 28 Jun 2013 21:35:19 +0000

What You're Building

Getting Started

Connect to the App Inventor web site and start a new project. Name it GetTheGold, and also set the screen's Title to "GetTheGold". Open the Blocks Editor and connect to a device or emulator.

Introduction

This tutorial introduces the following skills, useful for future game development:

Using the Clock component
Using Clock.Timer to move sprites
Using Sprite.Flung to move a sprite
Using collision detection

Getting Ready

For this game, you will have two types of imagesprites: pirate and gold coin. Click below to download the image file for your sprites.

Set up the Components

Use the component designer to create the interface for GetTheGold. When you finish, it should look something like the snapshot below (more detailed instructions below the snapshot).

To create this interface, put the following components into the Designer by dragging them from the Component Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	Canvas1	The background that we will be putting our imagesprites on
ImageSprite	Animation	PirateSprite	The pirate ship in our game
ImageSprite	Animation	ImageSprite2	One of the gold coins in the game
ImageSprite	Animation	ImageSprite3	One of the gold coins in the game
ImageSprite	Animation	ImageSprite4	One of the gold coins in the game
ImageSprite	Animation	ImageSprite5	One of the gold coins in the game
ImageSprite	Animation	ImageSprite6	One of the gold coins in the game
Clock	Basic	Clock1	We use the Clock for its Timer method to move the coins
Button	Basic	ResetButton	To reset the game so the player can play again

Set the properties of the components as described below:

Component	Action
ResetButton	Change Text property to "Reset".
PirateSprite	Change Speed property to 6.	Upload the pirateship image and set Picture property to pirateship.
ImageSprite(2,3,4,5,6)	Upload the goldcoin image and set Picture property to goldcoin.
Clock	Change TimerInterval property to 2000.

Moving the Pirate

To move the PirateSprite, we want the user to be able to "fling" the sprite in the direction that they choose. To do this, we will use the PirateSprite.Flung event handler.

To prevent the pirate from moving off the screen, we will also use PirateSprite.Bounce when an edge is reached.

Moving the Coins

We want the coins to move to random positions on the screen. We will use Clock1.Timer and the ImageSprite's MoveTo method to do this.

When the Clock1.Timer goes off, we want all of our gold coin ImageSprites to move to a new random location on the Canvas. We will do this by using the Sprite.MoveTo block.

We will do this by setting up our blocks as in the image below:

Detecting Collisions

Reset Button

After the user hits all of the gold sprites with the pirate ship, none of them will be visible. The reset button should set all of the gold sprites' visibility to true.

Complete Program

Here's the complete GetTheGold program.

Variations

Once you get this program running, you may want to do the following additional features to extend it. For example,

Create a label to display the time that it took you to get all the gold
Change the speed of the ship or gold coins
Add an enemy sprite that when collided with, causes your pirate to lose speed
Use one of the phone's sensors to control movement of the pirate ship

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with GetTheGold? Return to to the other modules here or the tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

MoleMash 2

aaron — Wed, 26 Jun 2013 19:45:48 +0000

What You're Building

Download Refined Version (Book Chapter PDF)

Introduction

This tutorial includes:

Creating a list of components
Using functionality from the Advanced section of the Blocks Editor to get and set properties of arbitrary components
Having game events controlled by the Clock component
Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another

Getting Started

Set up the Components

Create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Canvas	Basic	GameCanvas	The game field
ImageSprite (5)	Animation	Hole1 ... Hole5	Holes from which the mole can appear
ImageSprite	Animation	Mole	The mole
HorizontalArrangement	Screen Arrangement	ScoreArrangement	To display the score
Label	Basic	ScoreTextLabel	To hold "Score: "
Label	Basic	ScoreValueLabel	To hold the score (# of times the mole was hit)
Clock	Basic	MoleClock	To control the mole's movement
Sound	Media	Buzzer	To vibrate when the mole is touched

Make the following changes to the components' properties:

Component	Action
Canvas1	Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.
Hole1	Set X to 20 and Y to 60 (upper left).
Hole2	Set X to 130 and Y to 60 (upper center).
Hole3	Set X to 240 and Y to 60 (upper right)
Hole4	Set X to 75 and Y to 140 (lower left).
Hole5	Set X to 185 and Y to 140 (lower right).
Mole	Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which have the default Z value of 1.
ScoreTextLabel	Set Text to "Score: ".
ScoreTextValue	Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks Editor.

Add Behaviors to the Components

Here is an overview of what we need to create blocks to do:

Create variables:
1. holes: a list of holes
2. currentHole: the hole the mole is currently coming out of
When the app starts:
1. Populate the list of holes.
2. Set each hole's Picture property to "hole.png".
3. Call procedure MoveMole (below).
Create a procedure MoveMole to:
1. Set currentHole to a random hole from the list holes.
2. Move the mole to the location of currentHole.
Make MoleClock call MoveMole whenever its timer goes off (every second).
Implement a handler that does the following when the mole is touched:
1. Add one to the score.
2. Make the phone briefly vibrate.
3. Call MoveMole.

To proceed, open the Blocks Editor.

Creating Variables

Block type	Drawer	Purpose
def variable as (holes)	Definition	Hold a list of holes.
make a list	Lists	Create an empty list, to be filled in when the program starts.
def variable as (currentHole)	Definition	Hold the mole's current hole.
number (0)	Numbers	Provide a required initial value for currentHole.

As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Specify what should happen when the app starts.
add items to list	Lists	Add the following values to...
holes	My Definitions	...the list of holes:
component Hole1	Hole1	-the upper left hole
component Hole2	Hole2	-the upper center hole
component Hole3	Hole3	-the upper right hole
component Hole4	Hole4	-the lower left hole
component Hole5	Hole5	-the lower right hole
foreach	Control	Specify that we would like...
name (hole)	Definitions	...a variable named "hole"...
holes	My Definitions	...to take on each of the values in the list holes .
ImageSprite.Picture	Any Image Sprite	Set the Picture property of...
value hole	My Definitions	...the ImageSprite referred to by the variable hole ...
text (hole.png)	Text	...to the picture of the empty hole.
to procedure (MoveMole)	Definition	Create an procedure, to be filled in later, for moving the mole.
MoveMole	My Definitions	Call MoveMole to make the first placement of the mole.

Compare the foreach block to the equivalent blocks that would be necessary without it:

Moving the Mole

Block type	Drawer	Purpose
set currentHole to	My Definitions	Save the...
call pick random item	Lists	...randomly selected...
holes	My Definitions	...hole.
call Mole.MoveTo	Mole	Move the mole to the...
ImageSprite.X	Advanced/ImageSprite	..x-coordinate of...
currentHole	My Definitions	...the chosen hole...
ImageSprite.Y	Advanced/ImageSprite	...and the y-coordinate of...
current Hole	My Definitions	...the chosen hole.

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just need two blocks to accomplish that:

Block type	Drawer	Purpose
MoleClock.Timer	MoleClock	When the timer goes off...
call MoveMole	My Definitions	...move the mole.

Registering Touches

Finally, we need to specify what happens when the mole is touched. Specifically, we want to:

Increment the score.
Make the phone vibrate briefly.
Move the mole.

We can easily translate these to blocks:

Block type	Drawer	Purpose
Mole.Touched	Mole	When the mole is touched...
set ScoreValueLabel.Text to	ScoreValueLabel	...update the visible score to...
block	Math	...the result of adding...
number (1)	Math	...1 [and]...
ScoreValueLabel.Text	ScoreValueLabel	...the previous score.
call Buzzer.Vibrate	Buzzer	Make the phone vibrate for...
number (100)	Math	...100 milliseconds.
call MoveMole	My Definitions	Move the mole to a new location.

Final Program

Variations

Here are some variations you might want to implement:

Adding a Reset button to set the score back to 0.
Having the score depend not just on the number of hits but also the number of misses and escaped moles.
Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the player is doing poorly.
Adding a second mole on a different timer.

You can see how to implement the first two variations in the original Mole Mash tutorial.

Review

Here are some of the ideas covered in this tutorial:

Putting components in a List.
Performing an operation on every component in a List using the foreach block and Advanced features.
Placing an ImageSprite on top of another, using their Z properties to control which goes in front.
Using the Clock component to control game play.
Creating a procedure and calling it from multiple places.

Done with MoleMash 2? Return to the other tutorials here.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Or download the apk

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

MakeQuiz and TakeQuiz

aaron — Fri, 14 Jun 2013 16:11:21 +0000

MakeQuiz and TakeQuiz

What you're building

MakeQuiz and TakeQuiz are two apps that, in tandem, allow a teacher to create quizzes for a student. Parents can create fun trivia apps for their children during a long road trip, grade school teachers can build "Math Blaster" quizzes, and college students can build quizzes to help their study groups prepare for a final. This tutorial will walk you through creating both the MakeQuiz and the TakeQuiz app.

This tutorial is a followup of the QuizMe tutorial -- if you haven't completed that tutorial you should do so before continuing.

Getting started

Connect to the App Inventor web site and start a new project. Name it "MakeQuiz", and also set the screen's Title to "MakeQuiz". Open the Blocks Editor and connect to the phone.

Introduction

You'll design two apps, MakeQuiz for the "teacher" and TakeQuiz for the "student". With MakeQuiz:

The user enters questions and answers in an input form.
The previously entered question-answer pairs are displayed.
The quiz is stored persistently, in a database.

TakeQuiz will work similarly to the QuizMe app-- in fact you'll build it using QuizMe as a basis. TakeQuiz will differ in that the questions asked will be those that were entered into the database using MakeQuiz.

This tutorial introduces the following App Inventor concepts:

Input forms for allowing the user to enter information.
Displaying lists: serializing a list variable to display it on separate lines.
Persistent data: MakeQuiz will save the quiz questions and answers in a database and TakeQuiz will load them in from the database.
Data Sharing: the two apps together illustrate how two phones (and even two apps) can communicate through a shared, web database:

Set up the Components for MakeQuiz

Use the Component Designer to create the interface for MakeQuiz. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

You'll use the following components to create MakeQuiz. Drag each component from the Palette into the Viewer and name it as specified below:

Component Type	Palette Group	What you'll name it	Purpose of Component
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Display the question prompt and textbox on one line
Label	Basic	Label1	The "Question:" prompt
TextBox	Basic	QuestionText	User enters questions here
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Display the answer prompt and textbox on one line
Label	Basic	Label2	The "Answer:" prompt
TextBox	Basic	AnswerText	User enters answers here
Button	Basic	SubmitButton	User clicks to submit a QA pair.
Label	Basic	QuestionsAnswersLabel	This will display previously entered QAs
TinyWebDB	Other Stuff	TinyWebDB1	To store to and retrieve from database

Set the properties of the components in the following way:

Set the Text of Label1 to "Question": and the Text of Label2 to "Answer":
Set the Hint of QuestionText to "enter a question" and the Hint of AnswerText to "enter an answer".
Set the Text of SubmitButton to " Submit "
Set the Text of QuestionsAnswersLabel to "Questions and Answers".

Put Label1 and QuestionText in HorizontalArrangement1, and Label2 and AnswerText in HorizontalArrangement2.

Add behaviors to the components

Open the Blocks Editor to add the behaviors for the app. As with the original QuizMe app, you'll first define some global variables for the QuestionList and AnswerList , but this time you won't provide fixed questions and answers. You'll need the following blocks:

Block type	Drawer	Purpose
def variable ("QuestionList")	Definitions	Defines the QuestionList variable (rename it)
def variable ("AnswerList")	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	To set up the QuestionList for new items
make a list	Lists	To set up the AnswerList for new items

The blocks should look like this:

Note that, unlike the original QuizMe app, the lists are empty to begin with. This is because with MakeQuiz and TakeQuiz, all data is created by the user of the app (it is user-generated).

Handle the User's entries

The first behavior you'll build is for handling the user's input. Specifically, when the user enters a question and answer and clicks submit, you'll use add item to list blocks to update the QuestionList and AnswerList.

You'll need the following blocks:

Block type	Drawer	Purpose
SubmitButton.Click	SubmitButton	This event is triggered when the user clicks this button.
add items to list (2)	Lists	Use these to add the data entered by the user to the lists
global QuestionList	My Definitions	Plug into list slot of first add items to list
QuestionText.Text	QuestionText	User's entry; plug it into item slot of first add items to list
global AnswerList	My Definitions	Plug into list slot of second add items to list
AnswerText.Text	AnswerText	User's entry; plug it into item slot of second add items to list

The blocks should look like this:

How the blocks work

add items to list appends each item to the end of a list. Here, the app takes the text the user has entered in the QuestionText and AnswerText text boxes and appends each to the corresponding list.

The behavior updates the hidden QuestionList and AnswerList variables, but the changes are not shown to the user. To display these lists, create a procedure "displayQAs" which makes a text object with both lists and places it into the QuestionsAnswersLabel. Then make sure to call the procedure at the bottom of SubmitButton.Click. You'll need the following blocks:

Block type	Drawer	Purpose
procedure "displayQAs"	Definitions	Put the code to display questions and answers here
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Display the lists in this label.
make text	Text	Make a text object out of two lists and a colon separator
global QuestionList	My Definitions	Plug into make text
text (":")	Text	Plug into make text
global AnswerList	My Definitions	Plug into make text
call displayQAs	My Definitions	Place in the bottom of the SubmitButton.Click event-handler

The blocks should look like this:

How the blocks work

The displayQAs procedure is called after the lists are modified in SubmitButton.Click. The QuestionsAnswersLabel is modified to display the two lists separated by a colon. By default, App Inventor displays lists with surrounding parenthesis and spaces between items:

(item1 item2 item3)

Of course, this is not the ideal way to display the lists, but it will allow you to test your behavior for now. Later, you'll modify the displayQAs procedure to display a list on separate lines, and to display each question together with its corresponding answer.

Test this behavior. On the phone, enter a question and answer and click Submit. The app should display the single entry in the QuestionList, a colon, and then the single entry in the AnswerList. Add a second question and answer to make sure the lists are being created correctly.

Blanking Out the Question and Answer

When a user submits a question-answer pair, you should clear the QuestionText and AnswerText text boxes so they're ready for a new entry.

You'll need the following blocks:

Block type	Drawer	Purpose
set QuestionText.Text to	QuestionText	To blank out question
set AnswerText.Text to	AnswerText	To blank out answer
text (2 blank ones)

Here's how the blocks for the updated event handler should look:

How the blocks work

When the user submits a new question and answer, they are added to their respective lists. At that point, the text in the QuestionText and AnswerText is "blanked out" with empty text blocks (you create an empty text block by clicking on the the block's text and pressing the delete button).

Test the behavior. Add some questions and answers. When you submit them, the QuestionText and AnswerText should show only their hint (when a TextBox's Text property is empty it shows the hint until the user clicks it).

Storing the questions and answers in a database

As is, the app records the questions and answers entered by the user, but only in the phone's temporary memory. All variables in App Inventor are transient data-- they are stored on the phone and the data only "lives" through one run of an app. When the user closes the app, the data is lost.

The MakeQuiz app needs to record the questions and answers in a database. This will allow the quiz creator (teacher) to always edit the latest update of the quiz. It will also allow the TakeQuiz app to load the quiz and administer it to the student.

You'll use the TinyWebDB component to store and retrieve the QuestionList and AnswerList to and from a database. TinyWebDB allows you to store data in AppInventor-compliant databases that live on the web instead of on the phone.

The general scheme for storing a list persistently is the following: each time a new item is added to the list, use TinyWebDB to update the database version of the list. Then each time the app is opened (Screen1.Initialize event), reload the database version of the list into the variable.

Start by storing the QuestionList and AnswerList in the database each time the user enters a new pair. You'll need the following blocks:

Block type	Drawer	Purpose
TinyWebDB1.StoreValue	TinyWebDB1	for storing questions in the database
text ("questions")	Text	Plug in "questions" as the tag of StoreValue
global QuestionList	My Definitions	Plug into the value slot of StoreValue
TinyWebDB1.StoreValue	TinyWebDB1	For storing answers in the database
text ("answers")	Text	Plug in "answers" as the tag of StoreValue
global AnswerList	My Definitions	Plug into the value slot of StoreValue

The blocks should look like this:

How the blocks work

The last two rows of blocks store data in the database. The tag arguments label the data being stored so that you can retrieve it later. The QuestionList is stored with a tag of "questions" while the AnswerList is stored with a tag of "answers".

Although our example uses "questions" as the tag, you should actually use your own tag, e.g., "DavesQuestions", because by default, the database entries of all App Inventor programs share the same namespace and so your list of questions may get confused with someone else's list of questions since you both used the same tag. For more information, see Creating a Custom TinyWebDB service.

Test this behavior. TinyWebDB stores information on the web, so you can open a browser page to test whether this behavior is working. By default, TinyWebDB stores information at http://appinvtinywebdb.appspot.com . Browse there to check if your data was stored as desired. There will be many entries, as the default service is for testing and is used by many programmers. If you search on the page, you should find the tag-value pairs you just stored.

Because the default service is shared amongst programmers and apps, it is only for testing. Fortunately, setting up your own database service is straight forward. For more information, see Creating a Custom TinyWebDB service.

Loading Data from the Database

Once the blocks for storing the lists are working, you can add the blocks for loading the lists back in each time the app begins.

Loading data from a TinyWebDB database is a two-step process. First, you request the data by calling TinyWebDB.GetValue and providing a tag.

GetValue only requests the data from the web service. After the request is made, your app can do other things, such as responding to user actions, while it waits for the TinyWebDB web service to send the data. When the data arrives, a TinyWebDB.GotValue event is triggered. When that event occurs, the data requested is in a variable named "valueFromWebDB". The tag you requested is in the variable "tagFromWebDB". You can access these variables in the TinyWebDB.GotValue event handler.

In this case, the app needs to request two things from the TinyWebDB web service, the questions and the answers, so the Screen1.Initialize will make two calls to getValue. When the data arrives and the GotValue event-handler is triggered, the app should check the tag to see which request has arrived, and then load the corresponding list. Once the lists are both loaded, displayQAs can be called to display them.

You'll need the following blocks:

Block type	Drawer	Purpose
Screen1.Initialize	Screen1	Event handler triggered when app begins
TinyWebDB.GetValue (2)	TinyWebDB	To request the stored QuestionList and AnswerList
text ("questions")	Text	use as the tag to retrieve QuestionList
text ("answers")	Text	use as the tag to retrieve AnswerList
TinyWebDB.GotValue	TinyWebDB1	Event handler triggered when data arrives
ifelse	Control	Need to ask which GetValue request arrived
= block	Math	Compare tagFromWebDB to "questions"
text ("questions")	Text	This is the tag that was used to store QuestionList
value TagFromWebDB	My Definitions	An argument of GotValue, specifies which request
set QuestionList to	My Definitions	If TagFromWebDB is "questions" this list will be set
set AnswerList to	My Definitions	If TagFromWebDB is not "questions" this list will be set
value ValueFromWebDB (2)	My Definitions	This holds the value returned from database
if	Control	Check if both the lists are loaded before displaying
= block	Math	Compare the lengths of the lists
length of list (2)	Lists	Check if the length of the lists are the same
global QuestionList	My Definitions	Plug into one of the length of list blocks
global AnswerList	My Definitions	Plug into the other length of list blocks
call displayQAs	My Definitions	Display the newly loaded questions and answers

The blocks should look like:

How the blocks work

When the app begins, the Screen1.Initialize event is triggered. The app calls TinyWebDB1.GetValue twice, once to request the stored QuestionList and once to request the stored AnswerList. After requesting the data, the app can handle other events while it waits for the web database to answer the request.

When the data arrives from the web database, the TinyWebDB1.GotValue event is triggered. Since two requests were made, it will be triggered twice, once for each list.

In the GotValue event-handler, the value returned is in the variable valueFromWebDB . The corresponding tag is in tagFromWebDB . The blocks first check to see which request has returned (even though the request for "questions" is made first in Screen1.Initialize, there is no guarantee that the QuestionList will arrive first). If the tag is "questions", the valueFromWebDB is put into the variable QuestionList. Otherwise (else) it is placed in the AnswerList.

At the bottom of GotValue, the app checks to see if both lists have been loaded-- one way to check is to see if the lengths of the lists are the same. If they are, displayQAs is called to display them on the phone.

Test this behavior. Select Restart Phone in the Blocks Editor. When the app initializes, it should display the previously entered questions and answers. If you close the app and restart again, the previous quiz should still appear.

The version of MakeQuiz you've created so far works: the user can create a quiz and it will be stored persistently in the database. If you can accept the fact that the quiz is displayed in an inelegant way, you can proceed to creating the sister app, TakeQuiz, which lets a user step through the quiz and answer the questions.

If you'd like to learn how to display list data in a more elegant fashion, step through the steps directly below.

Displaying a List on Multiple Lines

In the app you've built so far, the question and answer lists are displayed separately and with the default list display format, e.g.,

(question1 question2 question3): (answer1 answer2 answer3)

In this section, you'll modify the app so that the newly entered question-answer pairs are displayed in tandem, one on each line:

question1:answer1
question2:answer2
question3:answer3

Displaying the data in this way is non-trivial, so you'll start by first displaying a single list, the QuestionList, with each item on a separate line.

To display a list on separate lines, you must serialize it . This means to build a single text object with all the items of the list in it and a special character, '\n', between each item. A "\n" within a text object appears as a newline character when displayed. 

For example, suppose the user has entered two questions, "What is the capital of California?" and "What is the capital of New York?" and these have succesfully been added to the QuestionList . Your displayQAs procedure should build a text object from QuestionList that looks like:

"\nWhat is the capital of California\nWhat is the capital of New York?"

When displayed on the phone, such text would appear as: 

What is the capital of California? 
What is the capital of New York?

All the changes will occur in the procedure displayQAs. You'll remove the blocks within that procedure, and use a foreach block to build the text by successively adding each question. The blocks within the foreach should add the current item (question) to the end of the text object (QuestionsAnswersLabel) you are building. You'll need the following blocks:

Block type	Drawer	Purpose
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Initialize the label to empty before repeatedly adding to it
text (blank)	Text	plug into set QuestionsAnswersLabel.Text to
foreach	Control	For each item in list, you'll concatenate it to the QuestionsAnswersLabel
name var	already in foreach	The current item of foreach; rename it to "question"
global QuestionList	My Definitions	Plug this into "in list" slot of foreach
set QuestionsAnswersLabel.Text to	QuestionsAnswersLabel	Iteratively build the text
make text	Text	build a text object
QuestionsAnswersLabel.Text	QuestionsAnswersLabel	Plug into make text
value question	My Definitions	Plug into make text (make sure you've renamed foreach variable to "question")
text ("/n")	Text	New-line character so following text on another line

The blocks should look like this:

How the blocks work

When the procedure is called, the QuestionsAnswersLabel.Text is first set to the empty text. This is in preparation for the foreach block that comes next, which will build the text in QuestionsAnswersLabel.Text incrementally.

The foreach block specifies that the blocks within it are to be executed once for every item in QuestionList. If there are three questions, then the inner blocks will be executed three times. Within the foreach, the current item being processed is named question.

On each iteration, QuestionsAnswersLabel.Text is modified. Each time it is set to its previous value, along with the newline character, "\n" and the current question being processed.

When the foreach completes, QuestionsAnswersLabel.Text will be text string with all the items separated by newline characters. As the app is processing each iteration of the foreach , the phone display doesn't change. But when it completes, the text in QuestionsAnswersLabel.Text is displayed on the phone and the items appear on separate lines.

Test the behavior. On the phone, add another question and answer and click Submit. Now, only the questions should be displayed and they should be displayed on separate lines.

Including the answer in DisplayQAs

The displayQAs procedure you've created ignores answers and only displays questions. In the next version of displayQAs , you'll display the data as question-answer pairs, e.g.,

What is the capital of California?: Sacramento
What is the capital of New York?: Albany

Modify displayQAs. Use an index variable to access each answer as the foreach block walks through the questions. You'll need the following blocks:

Block type	Drawer	Purpose
def var ("answer")	Definitions	To temporarily store each answer
def var ("answerIndex")	Definitions	To keep track of which answer (and question) you're on
text ("text")	Text	Initialize the variable answer to text.
number (1)	Math	Initialize the variable answerIndex to 1
set answerIndex to	My Definitions	Re-initialize answerIndex each time displayQAs called
number (1)	Math	To re-initialize answerIndex to 1
set answer to	My Definitions	set this variable each time in the foreach
select list item	Lists	select from the list AnswerList
global AnswerList	My Definitions	plug into list slot of select list item
global answerIndex	My Definitions	Plug into index slot of select list item
set answerIndex to	My Definitions	In order to increment it each iteration through loop
global answerIndex	My Definitions	To increment answerIndex , add 1 to itself.
number (1)	Math	To increment answerIndex

The blocks should look like this:

How the blocks work

The foreach only allows you to iterate through one list. In this case, there are two lists and you need to step through and select each answer as you proceed through the questions. The strategy is to use an index variable, as was done with the currentQuestionIndex in the QuizMe tutorial.

For this behavior, the index is a position in the AnswerList, so its named answerIndex. The index is set to 1 before the foreach begins. Within the foreach, it is used to select the current answer from the AnswerList, and then it is incremented.

Test this behavior. On the phone, add some more question/answer pairs. The display should now show each question with its corresponding answer, and each question:answer pair on separate lines.

Final MakeQuiz App

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run MakeQuiz.

Or download the source code

TakeQuiz

Building TakeQuiz is simpler; it can be built with a few modifications to the QuizMe app you completed earlier (if you have not completed that tutorial, do so now before continuing).

Begin by opening your QuizMe app, choosing SaveAs, and naming the new project "TakeQuiz." This will leave your QuizMe app as is and allow you to use a copy of it as the basis for TakeQuiz.

This version of MakeQuiz/TakeQuiz does not handle images, so first remove the images from the TakeQuiz app:

In the Component Designer, choose each image from the media palette and delete it. Also delete the Image1 component, which will remove all references to it from the Blocks Editor.
In the Blocks Editor, drag the PictureList to the trash.

Since TakeQuiz will work with database data, drag a TinyWebDB component into the Component Designer viewer.

Now modify the blocks so that the quiz given to the user is the one from the database. First, since there are no fixed questions and answers, remove all of the actual question and answer text blocks from the make a list blocks within the QuestionList and AnswerList. The blocks should look like this:

Now modify your Screen1.Initialize so that it calls TinyWebDB.GetValue twice to load the lists. The blocks should look like this:

Finally, drag out a TinyWebDB.GotValue event-handler. This event-handler should look similar to the one used in MakeQuiz, but here you only want to show the first question and none of the answers. The blocks should look like this:

How the Blocks Work

When the app begins, Screen1.Initialize is triggered and the app requests the questions and the answers from the web database. When each of those requests arrives, the TinyWebDB.GotValue event-handler is triggered. The app asks which request has come in, using tagFromWebDB , and places the valueFromWebDB into the appropriate list. If it is the QuestionList being loaded, the first question is selected from QuestionList and displayed.

Test the behavior. Click Restart Phone App. Does the first question from the quiz you created with MakeQuiz appear? Can you take the quiz just as you did with QuizMe (except for the pictures)?

Final Program (Take Quiz)

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run Take Quiz.

Or download the source code.

Variations

Once you get MakeQuiz and TakeQuiz working, you might want to explore some variations. For example,

Incorporate images into the apps. The images will need to be URLs from the web, and the test creator will need to specify these URLs as a third item in the MakeQuiz form.
Allow the user to delete items from the questions and answers. You can let the user choose using the ListPicker component, and you can remove an item with the remove list item
Allow multiple quizzes to be created. You'll need to conceptualize the list of quizzes as a list of lists.

Review

Here are some of the ideas covered in this tutorial:

You can store data persistently in a web database with the TinyWebDB component.
You retrieve data from a TinyWebDB database by requesting it with GetValue . When the web database returns the data, the TinyWebDB.GotValue event is triggered. At that point, you can put the data in a list or process it in some way.
TinyWebDB data can be shared amongst multiple phones and apps.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with MakeQuiz and TakeQuiz? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

QuizMe

aaron — Fri, 14 Jun 2013 16:10:24 +0000

QuizMe

What you're building

Download Alternate Example Version (Book Chapter PDF)

QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe:

The user steps through a series of questions, clicking a button to proceed to the next question.
The user enters an answer for each question and the app reports whether each answer is correct or not.

With QuizMe, the quiz questions are always the same unless you, the programmer, change them. Later, you can create MakeQuiz & TakeQuiz, an app that lets users of the app create and modify the quiz questions.

This tutorial assumes you are familiar with the basics of App Inventor -- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Getting Started

Connect to the App Inventor web site and start a new project. Name it QuizMe, and also set the screen's Title to "QuizMe". Open the Blocks Editor and connect to the phone.

Also download the following pictures of baseball players and save them on your computer. Later, you'll load these images into your project.

Introduction

You'll design the quiz game so that the user proceeds from question to question by clicking a Next button, and receives simple correct/incorrect feedback on each answer.

This tutorial introduces:

Defining and displaying lists of information.
Sequencing through a list using an index variable -- a variable that keeps track of a position in a list.
Conditional behaviors-- performing certain operations only when a condition is met.
Switching an image to show a different picture at different times.

Set up the Components

Use the component designer to create the interface for QuizMe. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

To create this interface, first load the images you downloaded into the project. Click on the Add button in the Media area and select one of the downloaded files (e.g., Larsenberra.jpg). Then do the same for the other three images.

Next, create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	The picture part of the question
Label	Basic	QuestionLabel	Displays the current question
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Organizes the AnswerPrompt and Text
Label	Basic	AnswerPromptLabel	Text prompting for an anwer
TextBox	Basic	AnswerText	User will enter answer here.
Label	Basic	RightWrongLabel	Correct/Incorrect is displayed here.
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Organizes the AnswerButton and NextButton
Button	Basic	AnswerButton	User clicks to submit an answer
Button	Basic	NextButton	User clicks to proceed to the next answer

Set the properties of the components as described below:

Component	Action
Image1	Set its Picture property to "Larsenberra.jpg". This is the first picture that should appear.
QuestionLabel	Change Text property to "question"
AnswerPromptLabel	Change Text property to "Enter Answer:". On the Viewer screen, move this label into HorizontalArrangement1.
AnswerText	Change Hint to "please enter an answer". On the Viewer screen, move AnswerText into HorizontalArrangement1.
AnswerButton	Change Text property to "Submit". On the Viewer, move the button into HorizontalArrangment2.
NextButton	Change Text property to "Next". Move the button into HorizontalArrangement2.
RightWrongLabel	Change Text property to "correct/incorrect".

Add Behaviors to the Components

Open the Blocks Editor to add the behaviors for the app. First, you'll define two list variables, QuestionList to hold the list of questions, and AnswerList to hold the list of corresponding answers.

To define the two list variables, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the QuestionList variable (rename it)
def variable	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	Used to insert the items of the QuestionList
text (3 of them)	Text	The actual questions
make a list	Lists	Used to insert the items of the AnswerList
text (3 of them)	Text	The actual answers

You create global variables by dragging in a def variable block from the Definitions drawer and double-clicking the default name "variable" to change its name. The def variable block has a slot for the initial value of the variable. The variable can represent a number or text, or even a list, for which you can plug in a make a list block into the variable definition.

The blocks should look like this:

Define the Hidden Index Variable

Each time the user clicks the NextButton to proceed through the quiz, the app needs to remember which question it is on. In programming, to remember something, you define a new variable. In this case, the app needs to remember the current question number -- the index into the list QuestionList.

To create the variable currentQuestionIndex, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the currentQuestionIndex variable (rename it)
number (1)	Math	Set the initial value of currentQuestionIndex to 1

The blocks should look like this:

Display the first question

To start, you'll ignore the answers and just work on the behavior to sequence through the questions. The desired behavior is the following: when the app starts, the first question should appear in the label named QuestionLabel. When the user clicks the NextButton, the second question should appear. When the user clicks again, the third should appear. When the last question is reached, clicking the NextButton should result in the first question once again appearing in the QuestionLabel.

With App Inventor, you select particular items in a list with the select list item block. The block asks you to specify the list and an index--a position in the list. If a list has three items, the indexes 1, 2, and 3 are valid.

For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component.

For this app initialization behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
Screen1.Initialize	Screen1	When the app begins, this event-handler is triggered.
set QuestionLabel.Text to	QuestionLabel	Need to put the first question in QuestionLabel
select list item	Lists	Need to select the first question from QuestionLabel
global QuestionList	My Definitions	The list to select from
number (1)	Math	Select the first question by using an index of 1

The blocks should look like this:

How the blocks work

The Screen1.Initialize event is triggered when the app begins. The first item of the variable QuestionList is selected and placed into QuestionLabel.Text. So when the app begins, the user will see the first question.

Test this behavior. Click Restart Phone App (or Connect Phone if not connected). What appears on the phone? If you created the QuestionList as described above, the first item of QuestionList, "Who pitched a perfect game in the World Series?", should appear in the QuestionLabel.

Iterating Through the Questions

Now program the behavior of the NextButton. You've already defined the currentQuestionIndex to remember the question the user is on. When NextButton is clicked, the app needs to increment this variable, e.g., change it from 1 to 2 or from 2 to 3, etc., and then use the resulting value to select the new "current" question. For this behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
NextButton.Click	NextButton	When user clicks Next, this event-handler is triggered.
set currentQuestionIndex to	My Definitions	Need to put the first question in QuestionLabel
+ block	Math	Used to increment currentQuestionIndex
global currentQuestionIndex	My Definitions	New value will be old value + 1
number (1)	Math	For the + 1
set QuestionLabel.Text to	QuestionLabel	Need to display the next question here
select list item	Lists	Need to select the first question from QuestionList
global QuestionList	My Definitions	Plug into list slot of call select list item
global currentQuestionIndex	My Definitions	Plug into index slot of call select list item, we want nth item

The blocks should look like this:

How the Blocks Work

The first row of blocks increments the variable currentQuestionIndex. If currentQuestionIndex has a 1 in it, it is changed to 2. If it has a 2, it is changed to 3, and so on. Once the currentQuestionIndex variable has been changed, the app uses it to select the "current" question.

Recall that in the Screen.Initialize event-handler, the app selected the first question to display:

When the NextButton is clicked, the app doesn't choose the first item in the list, or the 2nd or 3rd, it chooses the currentQuestionIndex-th item.

The blocks are executed in a right-to-left manner. The app first evaluates the index parameter of select list item, which is the variable currentQuestionIndex. The number is stored in currentQuestionIndex is used as the index when the select list item is executed.

When the NextButton is clicked for the first time, the increment blocks will set currentQuestionIndex from 1 to 2, so the app will select the second item from QuestionList, "who pitched the first perfect game of 2010?". The second time NextButton is clicked, currentQuestionIndex will be set from 2 to 3, and the app will select the 3rd question in the list, "who pitched the first perfect game of the modern era?"

Test this behavior. Test the behavior of the NextButton to see if the app is working correctly thus far. To test, play the role of the user and click the NextButton on the phone. Does the phone display the second question, "Who pitched the first perfect game of 2010?" It should, and the third question should appear when you click the NextButton again. If this is working, pat yourself on the back quickly, and then go on.

Try clicking the NextButton again (a third time). You should see an error: "Attempting to get item 4 of a list of length 3". The app has a bug-- do you know what the problem is?

The problem with the app is that it always increments the currentQuestionIndex variable when the NextButton is clicked. When currentQuestionIndex is already 3 and the user clicks the NextButton, the app changes currentQuestionIndex from 3 to 4, then calls select list item to get the currentQuestionIndex-th , or in this case, the 4th item. Since there are only three items in the variable QuestionList, Android complains.

What the app needs to do is ask a question-- check a condition-- when the NextButton is clicked, and execute different blocks dependending on the answer. One way to ask the question is to ask, "is the variable currentQuestionIndex already 3?" If the answer is yes, you should set currentQuestionIndex back to 0 so the user is taken back to the first question.

You'll need the following blocks:

Block Type	Drawer	Purpose
if test then-do	Control	To ask if user is on last question
= block	Math	to test if currentQuestionIndex is 3
global currentQuestionIndex	My Definitions	-
number 3	Math	3 is number of items in the list
set currentQuestionIndex to	My Definitions	set to 0 to go back to first question
Number 0	Math	set to 0 because next blocks will increment to 1

The modified NextButton.Click event-handler should look like this:

How the blocks work

When the NextButton is clicked, the app first checks to see if currentQuestionIndex has a 3 in it. If it does, currentQuestionIndex is set back to 0 so that when 1 is added to it with the blocks below, it will be 1 and the quiz will loop back to display the first question. Note that only the blocks inset within the if-test-then-do block are dependent on the condition-- the increment and set QuestionLabel.Text to blocks are executed under all conditions.

Test this behavior. Because variables like currentQuestionIndex are hidden, they are often the source of bugs in a program. Fortunately, App Inventor provides a way to make such hidden variables transparent during testing. Specifically, App Inventor allows you to "watch" how the value of a variable change as an app progresses. For this test, right-click the currentQuestionIndex def block in the Blocks Editor and choose Watch. Then choose Restart Phone App. The def block will then appear with a watch box showing the initial value of currentQuestionIndex (which should be 1):

Now pick up the phone and click the NextButton. The second question, "who pitched the most recent perfect game in the major leagues?" should appear in the QuestionLabel on the phone, as before. On the App Inventor screen, 2 should appear in the currentQuestionIndex memory cell:

When you click again, the third question should appear on the phone and 3 should appear in the memory cell . If you click again, 1 should appear in currentQuestionIndex and the first question on the phone.

A Maintainable App: Making it Easy to Modify the Questions

Next, you'll modify the app to make it easy to add and remove elements from the list. You'll rewrite the blocks so that they'll work on any list, not just one with exactly three items. To begin, add a fourth question to QuestionList and another answer into AnswerList. The blocks should look like this:

Test the modified app. Click the NextButton a number of times. You should see that the fourth question never appears, no matter how many times you click Next.

The problem is that the test to see if the user is on the last question is too specific: it asks if the currentQuestionIndex variable is 3:

You could just change the number 3 to a 4, and the app would again work correctly. The problem with this solution, however, is that each time you modify the questions and answers, you also have to remember to make this change. Such dependencies in a computer program often lead to bugs, especially as an app grows in complexity. It's much better to set the program up so that it will work no matter how many questions there are. Such generality is even more important when the list you are working with changes dynamically, e.g., a quiz app that allows the user to add new questions.

The better solution is to ask the question in a more general way. You really want to know if the current question the user is on-- the value of currentQuestionIndex -- is as large as the number of items in QuestionList. If the app asks the question in this more general manner, it will work even when you add to or remove items from the QuestionList. To modify the NextButton.Click event-handler you'll replace the previous test that referred directly to 3. You'll need the following blocks:

Block Type	Drawer	Purpose
length of list	Lists	asks how many items are in QuestionList
global QuestionList	My Definitions	put into list slot of length of list

Your NextButton.Click event-handler should now appear as:

How the Blocks Work

The if test now compares the currentQuestionIndex to the length of the QuestionList. So if currentQuestionIndex has a 4 in it, and the length of the QuestionList is 4, then the currentQuestionIndex will be set to 0 (and then 1 after the increment operation in the first row of blocks after the if). Note that, because the blocks no longer refer to 3 or any specific size, the behavior will work no matter how many items are in the list.

Test the modified behavior. When you click the NextButton, does the app now sequence through the four questions, moving to the first one after the fourth?

Switching the Image for Each Question

The current app shows the same image, no matter what question is being asked. You can change this so an image pertaining to each question appears when the NextButton is clicked. Earlier, you added four pictures as media for the project. Now, you'll create a third list, PictureList, with the names of the image files as its items. and you'll modify the NextButton.Click event-handler to switch the picture each time.

First, create a PictureList and initialize it with the names of the image files. Be sure that the names are exactly the same as the names of the files that were loaded in to the media of the project. Here's how the blocks for the PictureList should look:

Next, you need to modify the NextButton.Click event-handler so that it modifies the picture depending on what question the user is on. If you set the Image.Picture property to a file name of an image that has been loaded, that image will appear. To modify NextButton.Click, you'll need the following blocks:

Block Type	Drawer	Purpose
set Image1.Picture to	Image1	set this to change the picture
select list item	Lists	need to select the picture corresponding to current question
global PictureList	My Definitions	select a file name from this list
global currentQuestionIndex	My Definitions	select the currentQuestionIndex-th item

Here is how the blocks should look:

How the Blocks Work

The currentQuestionIndex serves as the index for the QuestionList and the currentQuestionIndex is 1, the app selects the first question and the first picture. When currentQuestionIndex is 2, the app selects the second question and second picture. Of course this scheme depends on the lists being in sync and indeed they are. For instance, the first picture, LarsenBerra.jpg, is a picture of Don Larsen, and Don Larsen is the answer to the first question, "Who pitched a perfect game in the World Series?" Test the modified behavior. Does a different image appear each time you click the NextButton?

Evaluating Answers

Next, you'll add blocks that report whether the user has answered a question correctly or not. The user enters the answer in AnswerText and then clicks the AnswerButton. The app must compare the user's entry with the answer to the "current" question, using an ifelse block to check. The RightWrongLabel should be modified to report whether or not the answer is correct. You'll need the following blocks for this behavior:

Block Type	Drawer	Purpose
AnswerButton.Click	AnswerButton	the behavior is triggered when user clicks the AnswerButton
ifelse	Control	if answer is correct, do one thing, else do another
= block	Math	to ask if answer is correct
AnswerText.Text	AnswerText	the user's answer is in this textbox
select list item	Lists	to select the current answer from AnswerList
global AnswerList	My Definitions	The list to select from
global currentQuestionIndex	My Definitions	the question number (and answer number) the user is on
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "correct"	Text	if answer is right
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "incorrect"	Text	if answer is wrong

The blocks should look like this:

How the Blocks Work

The ifelse test reads, "is the user's answer (AnswerText.Text) equal to the currentQuestionIndex-th item in the AnswerList?" If currentQuestionIndex is 1, the app will compare the user's answer with the first item in AnswerList, "Don Larsen". If currentQuestionIndex is 2, the app will compare the user's answer with the second answer in the list, "Dallas Braden", and so on. If the test result is positive, the then-do blocks are executed and the RightWrongLabel is set to "correct!". If the test is false, the else-do blocks are executed and the RightWrongLabel is set to "incorrect".

Test the modified app. Try answering one of the questions. It should report whether or not you answered the question exactly as is specified in the AnswerList. Test with both a correct and incorrect answer (because text is being compared, the test is case-sensitive).

Click the NextButton and answer a second question. Does it still work? It should, but you might notice that when you click the NextButton, the "correct"/"incorrect" text and the previous answer are still there. Though it's fairly innocuous, such user interface issues will definitely be noticed by the users of your app.

To blank out the RightWrongLabel and the AnswerText, you'll put the following blocks within the NextButton.click event-handler:

Block Type	Drawer	Purpose
set RightWrongLabel.Text to	RightWrongLabel	the label to blank out
text (blank)	Text	When Next is clicked, erase old answer critique
set AnswerText.Text to	AnswerText	the user's answer from previous question
text (blank)	Text	When Next is clicked, erase old answer

The blocks should look like this:

How the Blocks Work

When the NextButton is clicked, the user is moving on to the next question, so the top two rows of the event-handler blank out the RightWrongLabel and the AnswerText.

Test this behavior. Answer a question and click Submit, then click the NextButton. Does your previous answer and the apps critique disappear?

Final Program

QuizMe! Final Version:

Variations

Once you get a quiz working, you might want to explore some variations. For example,

Instead of just showing images for each question, try playing a sound clip or a short video. With sound, you can turn your quiz app into a Name That Tune app.
The quiz is very rigid in terms of what is accepted as a valid answer. There are a number of ways to modify this. One is to use the text.contains block to see if the user's answer is contained in the actual answer. Another is to provide multiple answers for each question, and check by iterating (using foreach) through them to see if any match.
Transform the quiz so that it is multiple-choice. The list of answers will need to be a list of lists, with each sub-list holding the answer choices. Use the ListPicker component to allow the user to choose an answer.

Review

Here are some of the ideas covered in this tutorial:

Apps can be written in a general manner so that they work with any data list.
Index variables are used to track the current position within a list. When you increment them, be careful about reaching the end of the list.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with QuizMe? Return to the other tutorials here.

QuizMe

What you're building

Download Alternate Example Version (Book Chapter PDF)

QuizMe is a trivia game about baseball, but you can use it as a template to build quizzes on any topic. With QuizMe:

The user steps through a series of questions, clicking a button to proceed to the next question.
The user enters an answer for each question and the app reports whether each answer is correct or not.

Getting Started

Connect to the App Inventor web site and start a new project. Name it QuizMe, and also set the screen's Title to "QuizMe". Open the Blocks Editor and connect to the phone.

Also download the following pictures of baseball players and save them on your computer. Later, you'll load these images into your project.

Introduction

You'll design the quiz game so that the user proceeds from question to question by clicking a Next button, and receives simple correct/incorrect feedback on each answer.

This tutorial introduces:

Defining and displaying lists of information.
Sequencing through a list using an index variable -- a variable that keeps track of a position in a list.
Conditional behaviors-- performing certain operations only when a condition is met.
Switching an image to show a different picture at different times.

Set up the Components

Use the component designer to create the interface for QuizMe. When you finish, it should look something like the snapshot below (there are also more detailed instructions below the snapshot).

Next, create the following components by dragging them from the Palette into the Viewer.

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	The picture part of the question
Label	Basic	QuestionLabel	Displays the current question
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Organizes the AnswerPrompt and Text
Label	Basic	AnswerPromptLabel	Text prompting for an anwer
TextBox	Basic	AnswerText	User will enter answer here.
Label	Basic	RightWrongLabel	Correct/Incorrect is displayed here.
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Organizes the AnswerButton and NextButton
Button	Basic	AnswerButton	User clicks to submit an answer
Button	Basic	NextButton	User clicks to proceed to the next answer

Set the properties of the components as described below:

Component	Action
Image1	Set its Picture property to "Larsenberra.jpg". This is the first picture that should appear.
QuestionLabel	Change Text property to "question"
AnswerPromptLabel	Change Text property to "Enter Answer:". On the Viewer screen, move this label into HorizontalArrangement1.
AnswerText	Change Hint to "please enter an answer". On the Viewer screen, move AnswerText into HorizontalArrangement1.
AnswerButton	Change Text property to "Submit". On the Viewer, move the button into HorizontalArrangment2.
NextButton	Change Text property to "Next". Move the button into HorizontalArrangement2.
RightWrongLabel	Change Text property to "correct/incorrect".

Add Behaviors to the Components

Open the Blocks Editor to add the behaviors for the app. First, you'll define two list variables, QuestionList to hold the list of questions, and AnswerList to hold the list of corresponding answers.

To define the two list variables, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the QuestionList variable (rename it)
def variable	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	Used to insert the items of the QuestionList
text (3 of them)	Text	The actual questions
make a list	Lists	Used to insert the items of the AnswerList
text (3 of them)	Text	The actual answers

The blocks should look like this:

Define the Hidden Index Variable

To create the variable currentQuestionIndex, you'll need the following blocks:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the currentQuestionIndex variable (rename it)
number (1)	Math	Set the initial value of currentQuestionIndex to 1

The blocks should look like this:

Display the first question

With App Inventor, you select particular items in a list with the select list item block. The block asks you to specify the list and an index--a position in the list. If a list has three items, the indexes 1, 2, and 3 are valid.

For QuizMe, when the app starts, the app should choose the first question in the list and display it in the QuestionLabel component.

For this app initialization behavior, you'll need the following blocks:

Block Type	Drawer	Purpose
Screen1.Initialize	Screen1	When the app begins, this event-handler is triggered.
set QuestionLabel.Text to	QuestionLabel	Need to put the first question in QuestionLabel
select list item	Lists	Need to select the first question from QuestionLabel
global QuestionList	My Definitions	The list to select from
number (1)	Math	Select the first question by using an index of 1

The blocks should look like this:

How the blocks work

Test this behavior. Click Restart Phone App (or Connect Phone if not connected). What appears on the phone? If you created the QuestionList as described above, the first item of QuestionList, "Who pitched a perfect game in the World Series?", should appear in the QuestionLabel.

Iterating Through the Questions

Block Type	Drawer	Purpose
NextButton.Click	NextButton	When user clicks Next, this event-handler is triggered.
set currentQuestionIndex to	My Definitions	Need to put the first question in QuestionLabel
+ block	Math	Used to increment currentQuestionIndex
global currentQuestionIndex	My Definitions	New value will be old value + 1
number (1)	Math	For the + 1
set QuestionLabel.Text to	QuestionLabel	Need to display the next question here
select list item	Lists	Need to select the first question from QuestionList
global QuestionList	My Definitions	Plug into list slot of call select list item
global currentQuestionIndex	My Definitions	Plug into index slot of call select list item, we want nth item

The blocks should look like this:

How the Blocks Work

Recall that in the Screen.Initialize event-handler, the app selected the first question to display:

When the NextButton is clicked, the app doesn't choose the first item in the list, or the 2nd or 3rd, it chooses the currentQuestionIndex-th item.

Test this behavior. Test the behavior of the NextButton to see if the app is working correctly thus far. To test, play the role of the user and click the NextButton on the phone. Does the phone display the second question, "Who pitched the first perfect game of 2010?" It should, and the third question should appear when you click the NextButton again. If this is working, pat yourself on the back quickly, and then go on.

Try clicking the NextButton again (a third time). You should see an error: "Attempting to get item 4 of a list of length 3". The app has a bug-- do you know what the problem is?

You'll need the following blocks:

Block Type	Drawer	Purpose
if test then-do	Control	To ask if user is on last question
= block	Math	to test if currentQuestionIndex is 3
global currentQuestionIndex	My Definitions	-
number 3	Math	3 is number of items in the list
set currentQuestionIndex to	My Definitions	set to 0 to go back to first question
Number 0	Math	set to 0 because next blocks will increment to 1

The modified NextButton.Click event-handler should look like this:

How the blocks work

Test this behavior. Because variables like currentQuestionIndex are hidden, they are often the source of bugs in a program. Fortunately, App Inventor provides a way to make such hidden variables transparent during testing. Specifically, App Inventor allows you to "watch" how the value of a variable change as an app progresses. For this test, right-click the currentQuestionIndex def block in the Blocks Editor and choose Watch. Then choose Restart Phone App. The def block will then appear with a watch box showing the initial value of currentQuestionIndex (which should be 1):

Now pick up the phone and click the NextButton. The second question, "who pitched the most recent perfect game in the major leagues?" should appear in the QuestionLabel on the phone, as before. On the App Inventor screen, 2 should appear in the currentQuestionIndex memory cell:

When you click again, the third question should appear on the phone and 3 should appear in the memory cell . If you click again, 1 should appear in currentQuestionIndex and the first question on the phone.

A Maintainable App: Making it Easy to Modify the Questions

Test the modified app. Click the NextButton a number of times. You should see that the fourth question never appears, no matter how many times you click Next.

The problem is that the test to see if the user is on the last question is too specific: it asks if the currentQuestionIndex variable is 3:

Block Type	Drawer	Purpose
length of list	Lists	asks how many items are in QuestionList
global QuestionList	My Definitions	put into list slot of length of list

Your NextButton.Click event-handler should now appear as:

How the Blocks Work

Test the modified behavior. When you click the NextButton, does the app now sequence through the four questions, moving to the first one after the fourth?

Switching the Image for Each Question

Block Type	Drawer	Purpose
set Image1.Picture to	Image1	set this to change the picture
select list item	Lists	need to select the picture corresponding to current question
global PictureList	My Definitions	select a file name from this list
global currentQuestionIndex	My Definitions	select the currentQuestionIndex-th item

Here is how the blocks should look:

How the Blocks Work

Evaluating Answers

Block Type	Drawer	Purpose
AnswerButton.Click	AnswerButton	the behavior is triggered when user clicks the AnswerButton
ifelse	Control	if answer is correct, do one thing, else do another
= block	Math	to ask if answer is correct
AnswerText.Text	AnswerText	the user's answer is in this textbox
select list item	Lists	to select the current answer from AnswerList
global AnswerList	My Definitions	The list to select from
global currentQuestionIndex	My Definitions	the question number (and answer number) the user is on
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "correct"	Text	if answer is right
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "incorrect"	Text	if answer is wrong

The blocks should look like this:

How the Blocks Work

Test the modified app. Try answering one of the questions. It should report whether or not you answered the question exactly as is specified in the AnswerList. Test with both a correct and incorrect answer (because text is being compared, the test is case-sensitive).

Click the NextButton and answer a second question. Does it still work? It should, but you might notice that when you click the NextButton, the "correct"/"incorrect" text and the previous answer are still there. Though it's fairly innocuous, such user interface issues will definitely be noticed by the users of your app.

To blank out the RightWrongLabel and the AnswerText, you'll put the following blocks within the NextButton.click event-handler:

Block Type	Drawer	Purpose
set RightWrongLabel.Text to	RightWrongLabel	the label to blank out
text (blank)	Text	When Next is clicked, erase old answer critique
set AnswerText.Text to	AnswerText	the user's answer from previous question
text (blank)	Text	When Next is clicked, erase old answer

The blocks should look like this:

How the Blocks Work

When the NextButton is clicked, the user is moving on to the next question, so the top two rows of the event-handler blank out the RightWrongLabel and the AnswerText.

Test this behavior. Answer a question and click Submit, then click the NextButton. Does your previous answer and the apps critique disappear?

Final Program

QuizMe! Final Version:

Variations

Once you get a quiz working, you might want to explore some variations. For example,

Instead of just showing images for each question, try playing a sound clip or a short video. With sound, you can turn your quiz app into a Name That Tune app.
The quiz is very rigid in terms of what is accepted as a valid answer. There are a number of ways to modify this. One is to use the text.contains block to see if the user's answer is contained in the actual answer. Another is to provide multiple answers for each question, and check by iterating (using foreach) through them to see if any match.
Transform the quiz so that it is multiple-choice. The list of answers will need to be a list of lists, with each sub-list holding the answer choices. Use the ListPicker component to allow the user to choose an answer.

Review

Here are some of the ideas covered in this tutorial:

Apps can be written in a general manner so that they work with any data list.
Index variables are used to track the current position within a list. When you increment them, be careful about reaching the end of the list.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Or download the apk

MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

Done with QuizMe? Return to the other tutorials here.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

Mini Golf: Fling, TouchUp, TouchDown Gestures

aaron — Fri, 14 Jun 2013 15:45:30 +0000

This Mini Golf App demonstrates how to use the Fling, TouchUp, and TouchDown gestures for Sprites
Note that these event handlers are also available for the Canvas.

This tutorial covers:

Using the Sprite component and the TouchUp, TouchDown, and Flung events
Using a Clock component
Dynamic Positioning of sprites on a canvas, based on the size of the screen
Sprite Collisions

Part I: Start a new app and make a ball that responds to fling events

We'll build this app in stages, adding a little bit of the game at a time. Log into App Inventor and start a new project. Name it "MiniGolf". When the Design window opens notice that App Inventor automatically names the screen "Screen1", but you can set the Title of the screen, which will show up in the top bar of the app. Think of a title related to Mini Golf, or feel free to use the suggested title "Flingit Mini Golf", and type it into the Properties pane on the right side of the Designer.

Add the following components in the Designer:

Component Type	Palette Group	What You'll Name It	Purpose	Properties
Canvas1	Basic	Canvas1	The canvas serves as the golf course	Height: 300 Width: FillParent BackgroundColor: Green (or whatever you like!)
BallSprite	Animation	GolfBall	This is the ball the player will fling to try to hit the Hole	Radius = 10 Color: White (or your choice!) Speed: 0 Interval: 1 (ms) Z = 2 (this makes the sprite appear on top of sprites with lower numbers)
BallSprite	Animation	Hole	This will be the target for the GolfBall	Radius = 15 Color: Black Speed: 0
Clock1	Basic	Clock1	The clock will fire continuously to control the movement of the ball	Timer Always Fires Timer Enabled TimerInterval: 100

Open the Blocks Editor

Program the behavior of the Ball:

First, use the GolfBall.Flung event handler to move the golf ball when it is flung. Essentially, set the GolfBall sprite’s speed and heading to match the speed and heading of the player’s fling gesture. You may want to scale up the speed a little bit because the speed of the fling is a little slower than how a golf ball would move. You can play with this "scaling factor" to make the ball more or less responsive to a fling.

Program the behavior of the clock:

Use timer event to slow ball down so it doesn’t bounce around forever.

Program a new procedure called SetupNewHole:

Program the Behavior of the Hole: When the ball collides with the hole, the ball disappears and resets at the bottom of the screen.

Note: When you first drag out the GolfBall.CollidedWith event handler, the named parameter is called "other". You can rename this by clicking once on the word "other" and typing in something new. Use a name that makes sense, as in this example where we use "ObjectHitByGolfBall". Notice that the if then block tests to see if the object involved in the collision with the golf ball (ObjectHitByGolfBall) is the black ball sprite representing the hole. You can't just put a text block with the word "Hole" in it, you must use the component Hole block, that can be found in the Hole drawer under "My Blocks". Do not use a text block here.

Test this Behavior. Connect your device to AppInventor, or start the emulator to load your app. When you fling the ball it should move in the direction of your fling, with a speed similar to the strength of your fling. The ball should slow down as it moves, eventually stopping. When the ball hits the hole, the ball should reset at the bottom of the screen and the hole should move to a new random location.

Does your ball get stuck if it hits the edge?

This is easy to fix with the when EdgeReached event. Note that you can find the "edge" value block under My Definitions. You can also use a developer’s shortcut by clicking anywhere on the workspace background and typing the word "edge". You’ll see a dropdown box appear. If you click the word "edge" you’ll see the value edge block appear on the screen. Big time saver!

Double check to make sure your code is right: fling the ball a few times and see that that ball now bounces off the edges of the course.

Part II: Keeping Score

Go back to the Designer and set up the following components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement	Screen Arrangement	HorizontalArrangement1	Contains LabelScore and LabelStroke	Place at top of screen
Label1	Basic	LabelScore	Displays the total stroke count for the entire game
Label2	Basic	LabelStroke	Displays the stroke count for the hole the player is currently on

In the Blocks Editor, you can program updates to the Score and Stroke labels. First, set two new global variables called StrokeCount and Score, and set their initial values to 0.

Then add the following blocks to the GoflBall.Flung event (red rectangle indicates new blocks):

Next add the following blocks to the Event that handles the ball hitting the hole:

Test the behavior. With these new changes, you should have a "Total Strokes" count and "This Hole" count at the top of the screen. When you fling the ball, the "This Hole" count  and "Total Strokes" count should both increase by one, and when you make the ball go into the hole the "This Hole" count should reset to 0.

Part III: Positioning Ball on Tee using TouchUp and TouchDown events

Ok, so now you’ve got a working game! Now let’s make it a little more interesting and fun. First we’ll add a Tee and let the player position the golf ball on the tee before they fling the ball.

Go back to the Designer and add three new image sprite components:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	Tee	A rectangular area in which the player can position their ball before teeing off.	Upload the Tee image (right click on this link, or see below).
ImageSprite	Animation	LeftSprite	This is a left pointing arrow that the player will use to move the ball to the left on the tee	Upload the left arrow graphic (right click on this link
ImageSprite	Animation	RightSprite	This is a right pointing arrow that the player will use to move the ball to the left on the tee	Upload the right arrow graphic (right click on this link

Program the size of the canvas, and the placement of the ball and image sprites on the canvas:

First, program the setup of these components on the screen. It’s best to accommodate all different screen sizes by placing the sprites on the screen relative to the size of the screen. The blocks below show how to set up the screen dynamically so that everything fits the right way. We start off by making the canvas size based on the screen size, and then we place each sprite in relation to the width and height of the canvas. Try to understand all of these blocks before you move on.

Position the Golf Ball on the Tee using TouchUp and TouchDown on the Arrow sprites:

To handle this, first set up two global variables that are toggled each time an arrow is pressed.

Program the behavior of the Right and Left Arrows

Procedure MoveBallOnTee:

As the blocks above show, after verifying that the StrokeCount is 0, you then want to proceed to move the golf ball left or right depending on which arrow is being pressed.

Note that the blocks that we had inside the Clock1.Timer event are now moved over to a new procedure called MoveBallOnCourse:

MoveBallOnCourse Procedure

Test the behavior. Make sure your app is doing what you expect: play the game on your device or emulator. Before you tee off, are you able to move the ball left and right on the tee by using the left and right arrows? After you tee off, you should no longer be able to use the left and right arrows (pressing them will do nothing). After the ball goes into the hole and the screen resets, you should then be able to move the ball left and right on the tee before teeing off again.

Keep track of the number of holes played, and allow a game reset

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
Horizontal Arrangement2	Screen Arrangement	Horizontal Arrangement2	Contains the NewGame button and the HoleNum label
Button	Basic	ButtonNewGame	Resets the game to Hole #1 with a score of 0.	Text: "New Game"
Label3	Basic	LabelHoleNum	Displays the current hole number, increments by one each time a hole is completed.	Text = "Hole # 1" Font: bold, 28, blue
Label4	Basic	LabelInstruct	Displays instructions	Text = "Use arrows to position ball on tee. Hit the ball by flinging it with your finger."

Define a new global variable to keep track of the Hole Number:

Add the following blocks to the SetupNewHole procedure: set global HoleCount and set LabelHoleNum.Text...

Test the behavior.

Part IV: Introduce an Obstacle

Add the following component in the Designer:

Component Type	Palette Group	What You’ll Name It	Purpose	Properties
ImageSprite	Animation	ObstacleSprite1	This sprite will be somewhere between the golf ball and hole and will make it harder to get the ball into the hole	Upload the obstacle (rectangle) graphic (right click on this link, or see below).

Each time the course is reset, position the obstacle will be positioned randomly. Add these blocks to the SetupNewHole procedure:

Test the behavior. Play the game again. Notice that the ball bounces off when it hits the obstacle. When the ball goes into the hole, or when the New Game button is pressed, the obstacle appears in a new location somewhere between the tee and the hole.

That’s it! Share your game with friends by building an APK or by downloading the source and sharing the zip file with other App Inventors!

Part V: Challenges

Here are some extra challenges to make your game better.

Challenge 3: Limit the number of holes per game. Keep track of the number of holes and end the game after a set number. (A typical mini golf course has 18 holes.)

Below is a summary of all of the components, and a screen shot of all the blocks (some are collapsed to save space.)

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with Mini Golf? Return to the other tutorials.

Tutorial Version:

App Inventor 1

Tutorial Difficulty:

Advanced

Tutorial Type:

MoleMash

aaron — Fri, 14 Jun 2013 15:43:59 +0000

The tutorial assumes that you have completed the HelloPurr and PaintPot tutorials.

Download Book Chapter (PDF)

Getting Started

Connect to the App Inventor web site and start a new project. Name it "MoleMash", and also set the screen's Title to "MoleMash". Open the Blocks Editor and connect to the phone.

Also download this picture of a mole and save it on your computer.

Introduction

You'll design the game so that the mole moves once every half-second. If it is touched, the score increases by one, and the phone vibrates. Pressing restart resets the score to zero.

This tutorial introduces:

image sprites
timers and the Clock component
procedures
picking random numbers between 0 and 1
text blocks
typeblocking

The first components

Several components should be familiar from previous tutorials:

A Canvas named "MyCanvas". This is the area where the mole moves.
A Label named "ScoreLabel" that shows the score, i.e., the number of times the player has hit the mole.
A Button named "ResetButton".

Timers and the Clock component

Adding an Image Sprite

To add the moving mole we'll use a sprite.

Picture: Use mole.png, which you downloaded to your computer at the beginning of this tutorial.
Enabled: checked
Interval: 500 (The interval doesn't matter here, because the mole's speed is zero: it's not moving by itself.)
Heading: 0 The heading doesn't matter here either, because the speed is 0.
Speed: 0.0
Visible: checked
Width: Automatic
Height: Automatic

Component Behavior and Event Handlers

Now you'll specify the component behavior. This introduces some new App Inventor ideas. The first is the idea of a procedure.

Define Procedures

Define two procedures:

MoveMole moves the Mole sprite to a new random position on the canvas.
UpdateScore shows the score, by changing the text of the ScoreLabel

Start with MoveMole:

In the Blocks Editor, under Built-In, open the Definition drawer. Drag out a to procedure block and change the label "procedure" to "MoveMole".
```
Note: There are two similar blocks: procedure and procedureWithResult. Here you should use procedure.
```
The to MoveMole block has a slot labeled "do". That's where you put the statements for the procedure. In this case there will be two statements: one to set the mole's x position and one to set its y position. In each case, you'll set the position to be a random fraction, between 0 and 1, of the difference between the size of the canvas and the size of the mole. You create that value using blocks for random fraction and multiplication and subtraction. You can find these in the Math drawer.
Build the MoveMole procedure. The completed definition should look like this:

Leave the arg socket for MoveMole empty because MoveMole does not take any arguments. Observe how the blocks connect together: the first statement uses the Mole.X set block to set mole's horizontal position. The value plugged into the block's socket is the result of multiplying:
1. The result of the call random fraction block, which a value between 0 and 1
2. The result of subtracting the mole's width from the canvas width
The vertical position is handled similarly.

To create the "Score: " part of the label, drag out a text block from the Text drawer. Change the block to read "Score: " rather than "text".
Use a join block to attach this to a block that gives the value of the score variable. You can find the join block in the Text drawer.

Here's how score and UpdateScore should look:

Add a Timer

Set up MoleTimer to call MoveMole each time the timer fires, by building the event handler like this:

Notice how the mole starts jumping around on the phone as soon as you define the event handler. This is an example of how things in App Inventor start happening instantaneously, as soon as you define them.

Add a Mole Touch Handler

The program should increment the score each time the mole is touched. Sprites, like canvases, respond to touch events. So create a touch event handler for Mole that:

Increments the score.
Calls UpdateScore to show the new score.
Makes the phone vibrate for 1/10 second (100 milliseconds).
Calls MoveMole so that the mole moves right away, rather than waiting for the timer.

Here's what this looks like in blocks. Go ahead and assemble the when Mole.Touched blocks as shown.

Here's a tip: You can use typeblocking: typing to quickly create blocks.

To create a value block containing 100, just type 100 and press return.
To create a MoveMole block, just type MoveMole and select the block you want from the list

Reset the Score

One final detail is resetting the score. That's simply a matter of making the ResetButton change the score to 0 and calling UpdateScore.

Complete Program

Here's the complete MoleMash program:

Variations

Once you get the game working, you might want to explore some variations. For example:

Make the game vary the speed of the mole in response to how well the player is doing. To vary how quickly the mole moves, you'll need to change the MoleTimer's Interval property.
Keep track of when the player hits the mole and when the player misses the mole, and show a score with both hits and misses. To do this, you'll need do define touched handlers both for Mole, same as now, and for MyCanvas. One subtle issue, if the player touches the mole, does that also count as a touch for MyCanvas? The answer is yes. Both touch events will register.

Review

Here are some of the ideas covered in this project:

Sprites are touch-sensitive shapes that you can program to move around on a Canvas.
The Clock component can be used as a timer to make events that happen at regular intervals.
Procedures are defined using to blocks.
For each procedure you define, App Inventor automatically creates an associated call block and places it in the My Definitions drawer.
Making a random-fraction block produces a number between 0 and 1.
Text blocks specify literal text, similar to the way that number blocks specify literal numbers.
Typeblocking is a way to create blocks quickly, by typing a block's name.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.

Done with MoleMash? Return to the other tutorials here.