Coin Flip Tutorial 1 - 6

Video (English)

Instructions (English)

Instructions (Spanish)

Printable

Coin Flip is an app that simulates the flipping of a two-sided coin. This app uses App Inventor’s random number generator and two images to simulate the coin flip. Objectives: In this lesson you will learn to:

● create an artifact that uses Randomness and simulates a model;

● create a simple model of a coin flipping;

● use random number blocks to generate a random value in a specific range;

● define a global variable and assign it an initial value;

● use a conditional statement, IF/Else, to evaluate a variable and follow an algorithm based on the value of a variable.

Click to watch Preview Video

Getting Ready

Open App Inventor with the Coin Flip Media Only template. This will open a project that contains

the images you will need in this lesson. Use the Save As option to rename your project to

CoinFlip.

Be patient. It sometimes takes a moment to retrieve and open the project.

Coin Flip Tutorial (Video Tutorial)

The Coin Flip UI

The UI for our Coin Flip app will consist of two Components: a

Button and an Image.

The Button is used to flip the coin to either heads or tails.

The Image is used to display either heads or tails when the coin

is flipped.

Adding the Button

1. Get a Button from the Palette’s User Interface category

2. Change the text

3. Set the Width to Fill Parent

Adding the Image

1. Get an Image component from the Palette’s User Interface category

2. Change the picture to heads.jpg provided in the template

Coding the Behavior

The Coin Flip app should simulate the flipping of a two-sided coin. When the user clicks the

button, the coin should be flipped and land on either heads or tails. The picture should change

to represent the side the coin lands on. A variable coin will be used to represent either heads or

tails and an If/Else statement will be used to display the correct image.

Handling the Button Click Event

Nearly all of the app’s code will be inside the Button1.Click event handler. Begin by getting a Button1.Click event handler from the Toolbox. The code for this app is as follows:

Let’s discuss how the coin variable will work.

Coin Variable

Coin will be a global variable that can have one of two values: 1 (for heads) or 2 (for tails). First initialize the variable by getting an initialize global variable block from the Toolbox. Name the variable coin and set coin to heads by giving it an initial value of 1. Now each time Button1 is clicked, coin should ‘flip’ and randomly ‘land’ on 1 (heads) or 2 (tails). To do this, you will need to get a setter block for coin from the Toolbox.

Pause for a moment and let’s discuss randomness.

Randomness in App Inventor

To randomly set the value of coin to be either 1 or 2, you will need to use App Inventor’s random integer block. App Inventor has several blocks for randomness in the Toolbox’s Math drawer. You may have already seen and used these blocks when you completed the AndroidMash app.

1. Random Fraction: Randomly selects a number between 0 and 1 (not including 1):

2. Random Integer: Randomly selects a number between two specified integers, inclusive:

Get the random integer block from the Toolbox and plug it into the coin setter block. Then,

specify the range to be from 1 to 2 using the number blocks that are provided.

Now, if you were to click the button, coin would ‘flip’ and randomly ‘land’ on 1 (heads) or 2 (tails)

but you would only see the heads.jpg image on your screen. Let’s use an If/Else statement to

determine when heads.jpg should be shown and when tails.jpg should be shown.

If/Else Statement

If you are already comfortable in your understanding of the if/else statement, you could skip this

section of the tutorial. But it may be useful to review this information anyway.

If/Else statements are conditionals that are often used in programming because they help

determine the flow of the program. The format of an If/Else statement is:

If (condition):

statement(s)1

Else:

statement(s)2

This means if a specified condition is true, do statement(s)1. Else, if the specified condition is

false, do statement(s)2. For example, say we were playing a game of “Go Fish.” If you have the

card I ask for, then you would give me your card. Else, you would tell me “Go Fish.” The latter

would mean that the condition “you have the card I ask for” is false, that is, you don’t have the

card I asked for. If/Else statements are all around us and they control the flow of things that we

do, especially when we play games. Let’s try implementing an If/Else statement:

1. Get an If block from the Control drawer in the Toolbox and plug it into the Button1.Click event

handler.

2. Click the blue plus sign to find the else if and else blocks.

3. Drag an else block over to the if block

Now, you should have an If/else block that looks like this:

The first slot, the if-slot, is where you put the condition that you want to check. For the Coin Flip

app, the condition should be: if the value of coin is 1 (heads). In App Inventor, this is expressed

as:

Replicate this code in your app.

Next, the do-slot of the If/else block is where you tell the app what to do if the condition specified

is true. For this app, if the global variable coin equals 1, that is, the coin was flipped and landed

on heads, then set the image to heads.jpg. To specify which picture to use, get a text block form

the Text drawer and type the name of the picture exactly how it is listed in the Media section in

the bottom left of the Blocks Editor. Your code should look like this:

When would the condition we have specified be false? And, what should go in the else-slot of

the If/else block? Since you have coded coin to be a random integer between 1 and 2, this

condition is only false when coin equals 2 (tails). In the else slot, tell the program what to do

when the condition specified is false. In this case, tell the program to set the image to tails.jpg.

Your code should look like this:

Now, you have a fully functioning Coin Flip app that simulates the flipping of a two-sided coin.

Test out your app to make sure it works correctly. How accurately can you predict whether the

next ‘flip’ will be heads or tails? If you can’t predict any more accurately than flipping a real

coin, then perhaps we can see we have created a pretty good computer model or computer

simulation of a coin flip.

How Does a Computer Model Randomness

App Inventor -- and other computer languages -- use a form of randomness called pseudo

randomness. Pseudo randomness is a model (or simulation) of true randomness. Just like

your app models or simulates a coin flip, the App Inventor blocks random-fraction and random-

integer, which we used to generate random numbers, are models or simulations of truly random

numbers. In fact, there are algorithms in App Inventor, known as Pseudo Random Number

Generators or PRNGs, that simulate the generation of random numbers.

As we will learn later in the course when talk about encryption, the development of secure

networks -- such as the Internet -- depends in crucial ways on the development of good PRNGs.

So this is an important area of research in computer science and related fields of mathematics.

Nice work! Now reflect on what you learned in this lesson and do the interactive exercises.

Reflection for the Student

In your portfolio, create a new page named Coin Flip and answer the following questions:

1. Write an if/else statement to express the following real life situation. Mary likes ice cream

and always chooses chocolate unless there is no chocolate in which case she chooses

strawberry. But if there’s no strawberry either then she settles for vanilla, which, for some

reason, is always available.

2. Give another example from real life where you use if/else logic to make a decision.

3. What enables us to simulate coin flipping in this app is App Inventor’s random-integer

block. This blocks constitute a model of randomness -- an abstraction of real

randomness such as flipping a real coin. How might we use the CoinFlip app test

whether this is a good model of randomness?

Exercises (Formative Assessment)

To practice your skills and test your knowledge try some interactive exercises.

Mini Projects

The next lesson provides some ideas and hints for adding enhancements to this app.

Solutions to Coin Flip Mini Projects

Starting App Inventor 2

If you haven’t already done so, open App Inventor 2 (remember to use Google Chrome). Go to My Projects > More Actions > Upload Template and select the Mobile CSP repository from the drop-down menu. Then choose the CoinFlipProjects template and click the ‘OK’ button. This will open a blank project in App Inventor. Use the Save As button to rename your project “CoinFlipProject#” [where # will be replaced by the mini project number you will complete from the list of mini projects below.]

Solutions: The following blocks solve the problems below.

For problem 1: Add an Accelerometer sensor component to the Designer:

Instead of using the when Button.Clicked event handler, use when Accelerometer.Shaking to activate the same block of commands as in the original program:

Delete the Button component from the Designer. (This will automatically delete the leftover empty event handler in Blocks as well.)

For problem 2: Add a TextToSpeech component (under “Other stuff”) to the Designer. In Blocks View, call the Speak procedure (with the appropriate message “heads” or “tails”) after changing the picture of the coin image:

For problem 3: Change the random integer from 1 to 2 block to a random fraction block (under Built-In “Math”), which chooses a number between 0 and 1. However, since the number will be a fraction and not an integer, the possible results of the block represent an infinite set, and to ensure the same 50-50 chance between heads and tails, an inequality must be used to cover half the set in the condition for the if block:

For problem 4: Upload an additional Media file to represent the image for the third side of the coin (here it is bellies.jpg--just being silly). Add an additional condition to the if block by clicking the plus sign and dragging an else if into the if frame. Click the minus sign to reduce the popup if window. Now change the random integer block to choose an integer from 1 to 3, rather than 1 to 2, and in the else if socket, add a condition to check when coin is equal to 2. In this case, change the picture to the newly uploaded side of the coin:

For problem 5: Add two Clock components, one to time the so-called spinning motion (called “SpinClock” here) and one to maintain the time the coin continues to spin (called “DelayClock”). Under Properties, TimerEnabled should be unchecked for both clocks. The TimerInterval for SpinClock should be set to 300 ms, and for DelayClock it should be 3000 ms. (If you want it to “spin” faster, put in a lower value for the TimerInterval of SpinClock):

In Blocks, enable both clocks when the button is clicked. Pull the blocks for changing the picture for CoinImage out of this event handler for now, because we do not want to change the picture until after the “spinning” is over. You may leave the random integer block in:

Every time the SpinClock fires (which is several times a second because it controls the animation), we want to change the image. Notice that a coin-edge.gif image was included in the template. This image can be used to show the edge of coin between heads and tails as the coin is flipped. This requires the use of two conditional if/else blocks--do NOT use a blue Math = block to define the condition! Since we are dealing with a filename as the property in question here, we cannot use a numerical comparative condition. Make SURE you use either a green Logic = block or a pink compare texts = Block. In addition, the order of the conditions that the If checks matters, you should make the coin flip from heads to the edge to tails:

The DelayClock has a much larger interval and its only purpose is to end the motion and display which side of the coin came up, so it only fires once. In other words, it disables both clocks and

changes the image the first time it fires. Bring the old blocks you pulled out from the Button.Clicked event handler back into this Clock.Timer one:

For problem 6. We revised the app to model this experiment: Stand 20 Lincoln pennies on edge and then bang the table. Suppose they have a 70% bias towards heads. Note that you have to use the random-fraction block in this case, which returns random value in the interval [0, 1) -- i.e., from 0 to 1 but not including 1. So the value returned should be less than 0.7 approximately 70% of the time, which gives us our model. Result: In the simulation, heads come up far more than tails.

Mini Projects

Here are some creative projects. Complete each project. Use the Save As button to rename your project to “CoinFlipProject#” [where # will be replaced by the mini project number you will complete from the list of mini projects below.] 1. Modify your app so that the user can shake the phone to flip the coin.

2. Modify your app so that “heads” or “tails” is spoken when the coin is flipped.

3. Modify the procedure in the Coin Flip app to use random fraction instead of random integer.

4. You now have an app that can flip a two-sided coin. Modify your app that so that it can flip a three-sided coin. (Hint: You will need to check the result of the flip with three conditions.)

5. Advanced: Add animation so that an image of a coin spins before revealing heads or tails.(Hint: Use a second clock timer to control the animation of the coin flip.)

6. Advanced: Create a similar app to model the Lincoln Penny. a biased coin. According to this report, if you stand a bunch of Lincoln pennies on their edge and then bang the table, they have a strong bias toward coming up heads. Let’s suppose the coin has a 70% chance of coming up heads (30% tails) in this experiment. Create a model to simulate that result.

7. Come up with your own ideas to enhance your app.