CPSC 110-08: Computing on Mobile Phones Spring 2012 Homework: Making a List Due: Monday 2/20 (before class)

CS Principles

• 4: The student can use programming as a creative tool.
• 15-16: The student can develop a (loop) algorithm in a language.
• 21-22: The student can develop a correct program.

Introduction

In this homework you will implement part I of a simple memory game. The game will display, for a moment, an increasingly long list of numbers and then invite the user to repeat the list from memory. How long a list can users remember?

For this homework we will just generate and display the list.

Reading Assignment

Read Chapter 19 of App Inventor, Programming Lists of Data (13 pages). This section describes how to use lists in your app.

Lists And Loops

One of the most basic types of data that computers have to deal with are lists. In App Inventor you can lists of numbers, lists of strings, lists of lists. As you get better at developing your apps, you'll find lots of reasons to use a list.

One of the most frequent operations that a computer can do is to repeat a sequence of operations and repetition is a fundamental construct in just about every programming language. When a sequence of operations is performed repeated, this is called a loop.

In this homework we will use a loop to create a list.

User Interface

For the first version our app will have a simple user interface consisting of a couple of buttons to control generation of the lists and a text box to display the lists. Using App Inventor's designer page, create the following user interface:

Each time the New List Button is clicked, it will generate a list of random digits between 0 and 9 and display it in the text box. Each time the Reset Button is clicked, it will re-initialize the list to the empty list. So the basic logic for this version is simply this:

Blocks Editor

We will use two global variables to keep track of the desired size of the list and theList itself. Each time ButtonNewList is clicked we will make a list, display it, and add 1 to the size variable for the next play. When the ResetButton is clicked, we will simply reset the variables and the text box to their original states.

Using the Blocks Editor, create the blocks shown in this diagram:

Top-down Program Design: Notice how we use procedures to divide the app into different logical components. The MakeList procedure will define the list making operations and the DisplayList procedure will handle the displaying of the list, which for now consists simply of setting the text box's text to the list we generate.

This is an example of top-down design: we define the overall structure of the app and then work our way down to defining lower-level procedures and functions. One advantage of this approach is that it's very easy to understand what the program does when ButtonNewList is clicked -- as long as meaningful procedure names are used.

The MakeList Procedure

Now let's define the MakeList procedure. Under App Inventor's Control menu there are three looping blocks: for each, for range, and while.

The most general loop construct is the while loop, which can be used -- together with other operations -- to program any loop whatsoever. Here is how we would use it in the MakeList procedure to create a list of length size:

In this case, each time the 'do' slot is executed, a new random integer between 0 and 9 is added to thelist. Each time through the loop, the list will grow in size until it reaches a length of size at which point the test will be false and the loop will terminate.

So, the while loop performs a test. If the test is true, then the body of the loop -- the do slot -- is performed. When the body is finished, the test is performed again and this process repeats until the test becomes false. We can express this in pseudocode as follows:

# Procedure to add random numbers to the global variable, theList
# Global: size specifies how many numbers to add to the list

To MakeList() :
   Set global theList to an empty list
   While length(theList) < size do:
      Add a random integer in the range 0-9 to theList

Initialization Step: It's important to realize that before we execute the while loop, we need to initialize theList to the empty list. Question: What would happen if we forgot this step?

Update Step: It's also important to note that the operation in the 'do' slot make progress toward the termination of the loop. In this the 'do' operation the list longer each time, eventually reaching length size.

Question: What would happen if we didn't make progress toward termination? Question: What would happen if the test never became false? Watson: What is an infinite loop?

While Loop Summary: A proper while loop consists of four parts:

1. The test slot: performs a true/false test that determines whether the statements in the do slot should be performed.
2. The do slot: contains the blocks that would be performed when the test is true.
3. The initialization step is one of more blocks that come before the loop that is used to set up the loop.
4. The update step is one of the statements in do slot that makes progress toward the termination of the loop.

Portfolio Page

The purpose of the write up is to get you to express what you did and what you learned in your own words. Your write up should include the following elements:

• Introduction -- Describe the main feature(s) of the MakeAList app, providing a link to this page.
• Main App Inventor Component(s) -- Describe what you consider to be the main App Inventor component(s) or feature(s) that this tutorial introduces.
• Main Computing Concept(s) -- Describe the main computing concepts that this app introduces -- e.g., a list and a loop. Describe the key parts of a while loop -- i.e., the initialization step, the test step, and the update step.
• Blocks Editor -- Post a screen shot of all the blocks in your app.
• Editing Style. Use some of the editing features (bold, italic, underscore, different font sizes) to make your page more readable and to highlight key words.

In Class