Before you keep reading...

Runestone Academy can only continue if we get support from individuals like you. As a student you are well aware of the high cost of textbooks. Our mission is to provide great books to you for free, but we ask that you consider a $10 donation, more if you can or less if $10 is a burden.

Support Runestone Academy Today

Before you keep reading...

Making great stuff takes time and $$. If you appreciate the book you are reading now and want to keep quality materials free for other students please consider a donation to Runestone Academy. We ask that you consider a $10 donation, but if you can give more thats great, if $10 is too much for your budget we would be happy with whatever you can afford as a show of support.

Support Runestone Academy Today

3.2. Paint Pot Tutorial

Time Estimate: 90 minutes

3.2.1. Introduction and Goals

Paint Pot is a “finger painting” app. It simulates dipping your finger in a pot of a paint then drawing with it on a canvas. The app uses buttons to change the paint colors and MIT App Inventor’s touch and drag event handlers to draw circles and lines on the canvas.

(TeacherTube Version)

Learning Objectives: I will learn to follow a tutorial to create the PaintPot app deepen my understanding of event-driven programming learn how to use a variable to make a program more general Language Objectives: I will be able to explain the result of programming statements that include variables and assignments describe how a global variable is an abstraction use target vocabulary, such as variable, assignment, expression, operator, and pseudocode while describing app features and User Interface with the support of concept definitions and vocabulary notes from this lesson

3.2.2. Learning Activities

• text-version
• |
• short handout
• |
• YouTube video Part 1
• TeacherTube video Part 1


• YouTube video Part 2
• |
• TeacherTube video Part 2
• |
• AP CSP Reference Sheet

Tutorial Part 1: Painting and Drawing on a Canvas

To get started, open MIT App Inventor with the Paint Pot Template in a separate tab and follow along with the following video or your teacher.

Q-2: By default, when you add components to the MIT App Inventor Viewer they are laid out ___________.

• Vertically
• Horizontally
• If it were easy, you wouldn’t be learning anything!
• Diagonally
• If it were easy, you wouldn’t be learning anything!
• Randomly
• If it were easy, you wouldn’t be learning anything!

Q-3: Which value would you set the Width property to if you want your component, e.g., a Button, to fill its container?

• Automatic
• Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
• Fill parent
• Fill container
• Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
• Max pixels
• Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.

Q-4: Which of the following would be a good name for a button whose purpose was to allow the view to refresh the screen?

• Button1
• Don’t worry, it’s hard! Let’s go back and try it again.
• ButtonOne
• Don’t worry, it’s hard! Let’s go back and try it again.
• ButtonRefresh
• B1
• Don’t worry, it’s hard! Let’s go back and try it again.
• RefreshButton

Tutorial Part 2: Varying the Size of the Dots

Watch the video tutorial below or click here for the text version of the tutorial.
(TeacherTube version)

AP CSP Pseudocode: Variables and Assignment Statements

A variable provides a way to name a memory location in your program to hold different values. It is a data abstraction that exists in all programming languages. In MIT App Inventor, we set up a variable using the initialize global variable block. The get block is used to get the variable's current value whenever needed in the program. The set block is used to assign or change the value of the variable.

The AP CS Principles Exam does not have a designated programming language. It uses pseudocode which is a cross between computer code and everyday English. Pseudocode is less precise than actual computer code, such as Java or Python or MIT App Inventor, but more precise and less wordy than everyday English. The AP CSP Reference Sheet is provided during the exam to help you understand the AP pseudocode format used in the exam. It includes two pseudocode styles: text-based and block-based.

In the College Board AP CSP exam, MIT App Inventor set blocks are called assignment statements and are represented as the left-pointing arrow (←). The following text and block style pseudocode is used to assign values to variables:

Function	AP Text	AP Block	MIT App Inventor
Assignment:	a ← expression	a ← expression

The DISPLAY statement is used to display variable values or the value resulting from mathematical expressions like (a+b)/2. Expressions are made up of values, variables, math operators, and sometimes mathematical procedures like getting a random number or squaring a number. In mathematical expressions, the operators * for multiplication, / for division, and the mod operator (remainder after division) are done before + and - like in math, unless there are parentheses that for example tell the computer to do (a+b) first before dividing by 2. Notice that * is used for multiplication instead of x, because x would get confused with a variable name. Expressions are evaluated to produce a single value.

Function	AP Text	AP Block
Display:	DISPLAY(expression)	DISPLAY expression
Expressions:	a + b, a - b, a * b, a/b	a + b

For example, here is AP style pseudocode to set the dotsize variable to 5 and then increment it (add one to it). The variable dotsize will have the value 6 after these two lines of code are executed. The value stored in a variable will be the most recent value assigned.

Function	AP Text	AP Block	MIT App Inventor
Set dotsize to 5	dotsize ← 5	dotsize ← 5
Increment dotsize	dotsize ← dotsize + 1	dotsize ← dotsize + 1

Some exercises involving AP pseudocode for assignment are below. More complex AP pseudocode will be shown in Unit 4.

3.2.3. Summary

In this lesson, you learned how to:

3.2.4. Self-Check

Vocabulary

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

variable assignment expression

operator pseudocode

Check Your Understanding

Complete the following self-check exercises.

Q-8: Which of the following would be a valid MIT App Inventor variable name?

• 5
• Mistakes are welcome here! Try reviewing this; the value 5 is number. Numbers cannot be used as variable names. Try again
• -5
• Mistakes are welcome here! Try reviewing this; the value -5 is number. Numbers cannot be used as variable names. Try again
• "user name"
• Mistakes are welcome here! Try reviewing this; the text "user name" is a text value. Text values cannot be used as variable names.
• userName
• That's correct. Variable names are alphanumeric symbols that must begin with a letter and can contain any combination of letters and digits. Other examples would be name5, bigDot, passwd, smallDot. 

Q-9: A variable is an abstract symbol that refers to some particular value.  Which of the following symbols is a variable?

• 10
• Mistakes are welcome here! Try reviewing this. 10 is a number. It is a value not a variable.
• paintBrush
• Yes, paintBrush is an abstract symbol for some particular value -- although we don't know what value it is referring to here.
• "hello"
• Mistakes are welcome here! Try reviewing this. "hello" is a text value. It is not a variable. Text values are always represented in quote marks.
• true
• Mistakes are welcome here! Try reviewing this. true  is a boolean value.  So it cannot be used as the name of a variable.  The other boolean value is false.  
• x
• Yes. x is an abstract symbol that could be used for a variable name.  We don't know what value it is referring to here. 

Q-10: Suppose you initialize dotsize with the block

.

Which of the following blocks would you use to change the value of dotsize?

• 
  
• OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this. This getter block, , can only be used to 'get' the variable's current value. It cannot be used to change its value.
• 
  
• Yes, a setter block, , is the correct block to use to change or 'set' a variable's value.
• 
  
• OK, so you didn’t get it right this time. Let’s look at this as an opportunity to learn. Try reviewing this. The  block can only be used to create and initialize a variable. It cannot be used to change its value.
• None of the above.

Q-12: Using a variable is an example of abstraction because

• a variable is more general and more abstract than a specific value such as 5.
• True. A variable, such as  dotsize is more abstract than a value such as 5 because it can represent many different values.
• using a variable instead of a specific value makes an app more generally useful.
• True.  As we saw with dotsize using a variable made the program more useful.
• a variable is an abstract symbol that can represent lots of different values.
• True. As we saw with dotsize a variable can take on many different values during the course of a program.
• using a variable instead of a specific value makes an app more vague.
• Let me add new information to help you solve this. Variables are more general and more abstract, but that's not the same as being vague. We can always determine precisely what value a variable represents during the course of a program.

Q-14: What does the following AP CSP pseudocode display? Remember to trace through the code keeping track of the values in a and b after each line of code.

a ← 1 (Set a to 1)
b ← a (Set b to the current value of a)
b ← b + 1 (Add 1 to b)
a ← a + b (Set a to be the current value of a + b)
DISPLAY(a)
DISPLAY(b)


• 2  2
• 1  1
• 2  3
• 3  2
• Yes, that's correct. At first a is 1 and b is set to a which is 1.  Then, we add 1 to b and it becomes 2.   Then, a adds b (which is currently 2) to its value (which is currently 1) and becomes 3. 

3.2.5. 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.

You have attempted of activities on this page