Chapter 2.4 - I Have a Dream Tutorial Part 2

Time Estimate: 45 minutes

2.4.1. Introduction and Goals¶

This is the "Hello World" of Thunkable, the first app most people build. You'll learn that app building is a creative process. You will write code that plays Martin Luther King’s “I have a dream” speech when the user touches the phone’s screen. Objectives: In this lesson, you will: follow a walkthrough to create the I Have a Dream app on a mobile device; learn how to use if-else selection blocks to improve the app's behavior.

Getting Ready

1. Open Thunkable.

2. Go to My Projects and select the Soundboard app that you created in the first tutorial.

I Have a Dream Tutorial Part 2

The I Have a Dream User Interface

User Interface

We are going to update our user interface to include some additional components toimprove our app. Our new user interface (UI) for our I Have a Dream app will consist of two Labels and three Images. Remember that this is done in the Design View.

Your Viewer panel should now look similar to this when your app is complete.

Adding two Image Components

1. Drag and drop an Image component to the Viewer. It will be named Image2.

2. Select Image2 by clicking on it in the Viewer or the Components panel.

3. Click on its Picture property and select the “mlk152x129.jpg” image from the drop-down list.

4. Change the Height and Width properties to match the image size or change the Picture Resize Mode property so it does not stretch the image.

5. Repeat this process for Malcolm X in the Viewer. Select Image3 in the Components panel and change its Picture property to “malcolm152x129.jpg”

Changing an Image Component

1. Select Image1 by clicking on it in the Viewer or the Components panel.

Click on its Picture property and select the “228px-MLK_and_Malcolm_X_USNWR_cropped.jpg” image from the drop-down list.

1. Change the Height and Width properties to match the image size or change the Picture Resize Mode property so it does not stretch the image.

Renaming the Components

We want to rename our components to make coding our app easier. Component names should include the component type and some sort of identifier.

To rename a component

1. Select the component in the Viewer or the Components panel

2. Click on the name in the Properties panel to Rename

3. Type the desired name in the textbox

4. Rename the Image2 component to MLKImage

5. Rename the Image3 component to MalcolmImage

We also want to change the Label’s Text property to reflect the new changes we are making to the app

1. Select Label1

2. Change the Text property from “Martin Luther King” to “Martin Luther King and Malcolm X”

3. Change the Font Size property to 16

4. Change the Font Weight property to Bold

5. Select Label2

6. Change the Text property from “Tap to hear the speech” to “Tap to hear each speech”

7. Change the Font Size property to 16

It’s time to get the app to play the speech when we touch its screen. For this we will be using the Blocks editor. So switch now to the Blocks Editor View. Delete any existing blocks.

Event Driven Programming

Mobile apps use a style of programming known as event driven programming. An app’s behavior depends on how the user programs the app to respond to various events. An example of an event would be when the user clicks on a button or when the phone’s location changes or when a text message is received. We’ll write apps that respond to all of these events.

For the I Have a Dream app, there is only one event that we care about, the Image click event. This event will be called when Martin Luther King or Malcolm X is clicked.

1. Click on the MLKImage component in the Toolbox.

2. Drag and drop the When MLKImage Click block into the Workspace.

This is an example of a when event block, which is also called an event handler block.

Notice that it has an empty do slot. When MLKImage is clicked, the app will do whatever code we put into this slot.

For the I Have a Dream app, we want it to play only one speech at a time and stop each speech when the pictures are clicked. To do this, we will need to use Logic

Adding an If block

If blocks allow the app to make decisions. In our app, we want to determine whether the sound should be played or stopped based on whether something is already playing. To do this, we need to use an If block.

1. Open Controls in the toolbox

2. Drag and drop the block that reads If/do/else into the when MLKImage click block in the workspace.

Now that we have our if block, we will add the question we want it to ask. To answer the question, we need a variable to keep track of whether or not the Sound is playing.

1. Open Variables in the toolbox

2. Drag and drop the block that reads initialize app variable name to into the workspace

3. Rename the variable name to isPlaying

4. Open Logic in the toolbox

5. Drag the false block and connect it to the initialize app variable isPlaying to block

1. Open Variables in the toolbox

2. Drag the app variable isPlaying block and drop it into its slot on the if block

When the MLKImage is clicked, the app now asks if the sound is playing. If it is, the code under do will be executed. If not, it will execute the else code instead. Next we will tell the app what to do in each case.

When MLKImage is clicked, we want the program to play king.mp3 if it is not playing, pause king.mp3 if it is playing, and always pause malcolm.mp3. To do this:

1. Open the Sound toolbox

2. Drag and drop the play block to the else slot in our new if block.

3. Change the sound file for the play block to king.mp3.

4. Open the Sound toolbox again

5. Drag and drop the pause block to the do slot in our new if block.

6. Change the sound file for the pause block to king.mp3.

7. Open the Sound toolbox again

8. Drag and drop the pause block to the do slot in our if block.

9. Change the sound file for the pause block to malcolm.mp3.

Updating the isPlaying state

Because we are using the isPlaying variable to keep track of whether or not the Sound is playing, we need to update the variable whenever we start and stop the sound.

1. When we pause the sound, isPlaying needs to be updated to false.

2. When we play the sound, isPlaying needs to be updated to true.

3. When a sound is finished playing, isPlaying needs to be updated to false.

We will use Variables and Logic from the toolbox to update the isPlaying variable to either true or false.

1. Open Variables in the toolbox

2. Drag and drop the block that reads set app variable isPlaying to into the do slot in our if block.

3. Open Logic in the toolbox

4. Drag the false block and connect it to the set app variable isPlaying to block

5. Open Variables in the toolbox

6. Drag and drop the block that reads set app variable isPlaying to into the else slot in our if block.

7. Open Logic in the toolbox

8. Drag the true block and connect it to the set app isPlaying to block

Duplicating a block of code

The next step is to code the behavior for MalcolmImage. Because it is similar to the behavior of MLKImage, we are able to make a shortcut by duplicating the code.

Right click on the when MLKImage Click block that is in the workspace and select “Duplicate”

We have now copied all the code needed for MalcolmImage, but it does not yet apply to the correct sound. We want MalcolmImage Click to stop king.mp3 and malcolm.mp3 if it is playing, or play malcolm.mp3 if it is not playing. We can change this easily by using the drop-down lists.

1. Click the small down arrow located in each block to open the drop down list

2. Where the block reads “MLKImage” change to “MalcolmImage”

3. Where the blocks read “king.mp3” change to “malcolm.mp3”

4. Where the block reads “malcolm.mp3” change to “king.mp3”

To summarize the behavior, whenever the user clicks on MLKImage or MalcolmImage, the app will stop both malcolm.mp3 and king.mp3 if either is playing. If neither sound is playing, the app will start playing the corresponding sound for the image. This completes the coding of the I Have a Dream app.

Running the App on the Phone (or Tablet)

You can test the app on your laptop/desktop computer using the Preview button or the Live Test button. If you want to test on a mobile device, it is recommended that you install the Thunkable Live app to test on your mobile device. Follow these setup instructions.

Nice work! Now, do the reflection about what you learned in this lesson.

Computing Innovations

With the expansion of computers and the Internet, every day new computing innovations are being developed. A computing innovation includes a program as an integral part of its function. The purpose of computing innovations is to solve problems or to pursue interests through creative expression. Understanding the purpose of a computing innovation provides developers with an improved ability to develop that computing innovation. Additionally, a computing innovation can be physical, non-physical computing software, or non-physical computing concepts. For example, self-driving cars, picture editing software, e-commerce. In this lesson, we're also creating a mobile app, which is certainly an example of a computing innovation. Can you think of other examples of computing innovations? Can you identify the function or purpose of each of those computing innovations?

Computing innovations, such as the I Have a Dream mobile app, are often improved through collaboration. Most computing innovations are developed by groups or teams of developers. Effective collaboration can take many forms. It can range from working with a diverse group of people to create or modify the computing innovation to consulting and communicating with users as part of the development process of the computing innovations (e.g. gathering information from potential users of your app to help understand the program from diverse perspectives). In the end, effective collaboration produces a computing innovation that reflects the diversity of talents and perspectives of those who designed it. Collaboration that includes diverse perspectives is important because it helps avoid bias in the development of computing innovations. One model to help facilitate collaboration is Pair Programming. This course emphasizes collaboration, so there will be plenty of opportunities for pair programming when developing apps in the course.

2.4.3. Summary

In this lesson, you learned how to:

Learning Objective CRD-1.A: Explain how computing innovations are improved through collaboration.

Learning Objective CRD-1.B: Explain how computing innovations are developed by groups of people.

Learning Objective CRD-2.A: Describe the purpose of a computing innovation.

Learning Objective AAP-2.H.b: For selection: b. Write conditional statements.

Learning Objective AAP-2.H.c: For selection: c. Determine the result of conditional statements.

2.4.4. Self-Check

Vocabulary

Here is a table of the technical terms we've introduced in this lesson. Hover over the terms to review the definitions.

computing innovation program purpose if/else UI components horizontal arrangement

Check Your Understanding

Complete the following self-check exercises.

Q-1: A computing innovation includes a program as an integral part of its function. Which of the following would be considered computing innovations? (Choose all that apply)

A. Bar codes

B. Office software (used to create spreadsheets or word documents)

C. A mobile app

D. Self-driving cars

1. A computing innovation includes a program as an integral part of its function. A bar code itself does not contain a program - it is an image.

2. A computing innovation includes a program as an integral part of its function. Office software is an example of computer software.

3. A computing innovation includes a program as an integral part of its function. Mobile apps surely count as such.

4. A computing innovation includes a program as an integral part of its function. Self-driving cars depend on computer programs to make them work.

Activity: 2.4.4.1 Multiple Choice (mcsp-2-4-1)

Q-2: Why are “if” blocks used in the “I Have a Dream” app?

A. "if" blocks are used to ask if the user wants to close the app

B. "if" blocks are used to determine, when the buttons are clicked, whether a speech is already playing.

C. "If" blocks are used to determine which speech is playing.

D. "if" blocks are used because there are two speeches to choose from.

Activity: 2.4.4.2 Multiple Choice (mcsp-2-4-2)

Q-3: Which of the following is the best name for a button whose function is to clear another component?

A. Clear

B. Button1

C. ClearButton

D. ButtonA

Activity: 2.4.4.3 Multiple Choice (mcsp-2-4-3)

Q-5: A horizontal arrangement allows buttons (and other components) to be placed side-by-side in the user interface.

A. False

B. True

Activity: 2.4.4.4 Multiple Choice (mcsp-2-4-4)

2.4.5. Sample AP CSP Exam Question

In the sample AP exam below, absent and onTime are variables that can be true or false, just like Player1.IsPlaying could be true or false in the if blocks in the I Have a Dream app. They are both false in this question. This question uses nested if blocks where a second if block is inside the else of the first if block.

Q-1: Consider the code segment below.If the variables onTime and absent both have the value false, what is displayed as a result of running the code segment?

A. Is anyone there?

B. Hello. Is anyone there?

C. Better late than never.

D. Hello. Better late than never.

Activity: 2.4.5.1 Multiple Choice (mcsp-2-4-5)

2.4.6. Reflection: For Your Portfolio

Answer the following portfolio reflection questions as directed by your instructor. Questions are also available in this Google Doc where you may use File > Make a Copy to make your own editable copy.