3.2. Paint Pot Tutorial

This lesson engages the student in an instructor-led App Inventor tutorial that leads to the creation of a simple "finger painting" app. It reinforces the enduring understanding that programs are developed by people for different purposes, including creative expression. This app introduces App Inventor's Canvas component as well as variables. Developing this app will extend the student's understanding of the App Inventor development platform and deepen their understanding of the event-driven programming model.

CSP Framework
Big Idea 3: Algorithms and Programming (AAP)
Enduring Understanding AAP-1: To find specific solutions to generalizable problems, programmers represent and organize data in multiple ways.
Learning Objective AAP-1.A: Represent a value with a variable.
Skill 3.A AAP-1.A.1 AAP-1.A.2 Essential Knowledge AAP-1.A.1: A variable is an abstraction inside a program that can hold a value. Each variable has associated data storage that represents one value at a time, but that value can be a list or other collection that in turn contains multiple values. Essential Knowledge AAP-1.A.2: Using meaningful variable names helps with the readability of program code and understanding of what values are represented by the variables.
Learning Objective AAP-1.B: Determine the value of a variable as a result of an assignment.
Skill 4.B AAP-1.B.1 AAP-1.B.2 AAP-1.B.3 Essential Knowledge AAP-1.B.1: The assignment operator allows a program to change the value represented by a variable. Essential Knowledge AAP-1.B.2: The exam reference sheet provides the ← operator to use for assignment. For example, a ← expression evaluates expression and then assigns the result to the variable a. Essential Knowledge AAP-1.B.3: The value stored in a variable will be the most recent value assigned. For example a ← 1 b ← a a ← 2 display(b) still displays 1.
Enduring Understanding AAP-2: The way statements are sequenced and combined in a program determines the computed result. Programs incorporate iteration and selection constructs to represent repetition and make decisions to handle varied input values.
Learning Objective AAP-2.B: Represent a step-by-step algorithmic process using sequential code statements.
Skill 2.B AAP-2.B.2 AAP-2.B.3 AAP-2.B.4 AAP-2.B.5 Essential Knowledge AAP-2.B.2: A code statement is a part of program code that expresses an action to be carried out. Essential Knowledge AAP-2.B.3: An expression can consist of a value, a variable, an operator, or a procedure call that returns a value. Essential Knowledge AAP-2.B.4: Expressions are evaluated to produce a single value. Essential Knowledge AAP-2.B.5: The evaluation of expressions follows a set order of operations defined by the programming language.
Learning Objective AAP-2.C: Evaluate expressions that use arithmetic operators.
Skill 4.B AAP-2.C.1 AAP-2.C.3 Essential Knowledge AAP-2.C.1: Arithmetic operators are part of most programming languages and include addition, subtraction, multiplication, division, and modulus operators. Essential Knowledge AAP-2.C.3: The exam reference sheet provides the arithmetic operators +, -, *, /, and MOD. - a + b - a * b - a / b - a MOD b These are used to perform arithmetic on a and b. For example, 17 / 5 evaluates to 3.4.

Professional Development

The Student Lesson: Complete the activities for Mobile CSP Unit 3, Lesson 3.2: Paint Pot Tutorial.

Materials

• Presentation system (LCD projector/Interactive whiteboard)
• Access to computer, laptop, or Chromebook (install the Companion app on Chromebooks)
• Access to mobile device with the Companion app installed or access to the emulator installed on the computer or laptop. 
• Paint Pot Tutorial (video or handout)

3.2.1. Learning Activities

Estimated Length: 90 minutes

• Hook/Motivation (5 Minutes): Ask the students if they have used the Snap Chat app. Have them brainstorm the user interface components and the functionality needed to draw on the picture. Explain to them that the app they'll create in this lesson is similar to the drawing portion of Snap Chat and such a drawing program was one of the first programs developed to demonstrate the potential of personal computers.
• Experiences and Explorations (75 minutes):
  • Day 1 Walkthrough, Part 1 (40 mins): Lead the students through the Paint Pot Tutorial Part 1, which introduces the painting and drawing Canvas and its related event handlers. You could use the short handout for the text tutorial as a teaching guide. Review the App Inventor environment and focus on the event-driven programming in the app.
  • Day 2 Walkthrough, Part 2 (45 mins): Lead the students through the Paint Pot Tutorial Part 2, which introduces the concept of a variable for the dot size and incrementing and decrementing its value. You will need to explain that variables are a way to give a name to a memory location and they can hold any value. Explain that variables are like labeled drawers (or boxes) - they allow you to store data that can be accessed, changed, and stored again. (See the background reading for more information.). This is data abstraction. You will need to explain how to add 1 to a variable using code like the following:
    
• Rethink, Reflect and/or Revise (10 minutes): Discuss the new language elements (such as the Touched and Drag events and variables) in Paint Pot. Encourage students to talk about what they understood and did not understand in the tutorial. Ask the students to describe the event-handling that occurs in this app and how the use of the variable makes the program more abstract. Ask the students to write a reflection in their Google portfolio. If time permits, have the students try the interactive exercises in the Mobile CSP lesson.

AP Classroom

The College Board's AP Classroom provides a question bank and Topic Questions. You may create a formative assessment quiz in AP Classroom, assign the quiz (a set of questions), and then review the results in class to identify and address any student misunderstandings. The following are suggested topic questions that you could assign once students have completed this lesson.

Suggested Topic Questions:

• Topic 3.1 Variables and Assignments
  

Assessment Opportunities and Solutions

Solutions Note: Solutions are only available to verified educators who have joined the Teaching Mobile CSP Google group/forum in Unit 1.

• Quizly Solutions
• Portfolio Reflection Questions Solutions

Assessment Opportunities

You can examine students’ work on the interactive exercise and their reflection portfolio entries to assess their progress on the following learning objectives. If students are able to do what is listed there, they are ready to move on to the next lesson.

• Interactive Exercises:
• Portfolio Reflections:
  LO X.X.X - Students should be able to ...
• In the PaintPot App, look for:
  -Something unique to each student so that they are expressing themselves creatively

Differentiation: More Practice

• How Do You? Remember Information in Variables
• AI2 Documentation on Variables

Differentiation: Enrichment

Students can try creating a variable for the line width as well as the dot size.

Background Knowledge: Variables as Abstraction

Variables in programming are an example of abstraction. The original version of PaintPot paints dots that all have the same radius -- 5 pixels. Every dot will have a radius set to 5. The radius will never change! Programmers refer to the number 5 here as a constant or a literal value because its value never changes -- it is literally 5. Abstraction allows us to make the program more flexible (i.e. it allows us to draw dots of different sizes.) If we replaced the number 5 with a symbol or variable, such as dotsize, that can represent any value, the radius will be whatever value the variable dotsize represents

Now, if we set dotsize’s value to 5, then it would draw a dot of radius 5. If we set it to 8, it will draw a dot of radius 8. And so on. So, rather than just be a constant, such as 5, dotsize is an abstract variable that can stand for any value. This is a simple example of the abstraction principle.

Teaching Tips: Introducing Variables

This lesson introduces the concept of variables to students. Learning about how computer variables are different from other variables they've encountered in math classes can be a stumbling block. Read this article on Understanding Computer Variables. The first 1:30 minutes of this video explains variables nicely, too.

3.2.2. Professional Development Reflection

Discuss the following questions with other teachers in your professional development program.

• How does this lesson build towards the enduring understanding that abstractions are used to write programs?

I am confident I can teach this lesson to my students.
• 1. Strongly Agree
• 2. Agree
• 3. Neutral
• 4. Disagree
• 5. Strongly Disagree

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