4.2. LightsOff Tutorial

This lesson creates an App Inventor version of the classic Whack-a-Mole game. The student will follow an instructor-led tutorial that will introduce the concepts of animation, timing, and randomness. The student will also see again the concept of a programmer-defined procedure, an important abstraction. This lesson reinforces the enduring understanding that procedures are useful abstractions that are used by programmers to structure and simplify programs.

CSP Framework
Big Idea 3: Algorithms and Programming (AAP)
Enduring Understanding AAP-3: Programmers break down problems into smaller and more manageable pieces. By creating procedures and leveraging parameters, programmers generalize processes that can be reused. Procedures allow programmers to draw upon existing code that has already been tested, allowing them to write programs more quickly and with more confidence.
Learning Objective AAP-3.A.a: For procedure calls: a. Write statements to call procedures. Learning Objective AAP-3.A.b: For procedure calls: b. Determine the result or effect of a procedure call.
Skill 4.B AAP-3.A.1 AAP-3.A.2 Essential Knowledge AAP-3.A.1: A procedure is a named group of programming instructions that may have parameters and return values. Essential Knowledge AAP-3.A.2: Procedures are referred to by different names, such as method or function, depending on the programming language.
Learning Objective AAP-3.B: Explain how the use of procedural abstraction manages complexity in a program.
Skill 3.C AAP-3.B.1 AAP-3.B.4 AAP-3.B.6 AAP-3.B.7 Essential Knowledge AAP-3.B.1: One common type of abstraction is procedural abstraction, which provides a name for a process and allows a procedure to be used only knowing what it does, not how it does it. Essential Knowledge AAP-3.B.4: A procedural abstraction may extract shared features to generalize functionality instead of duplicating code. This allows for program code reuse, which helps manage complexity. Essential Knowledge AAP-3.B.6: Using procedural abstraction helps improve code readability. Essential Knowledge AAP-3.B.7: Using procedural abstraction in a program allows programmers to change the internals of the procedure (to make it faster, more efficient, use less storage, etc.) without needing to notify users of the change as long as what the procedure does is preserved.
Learning Objective AAP-3.C: Develop procedural abstractions to manage complexity in a program by writing procedures.
Skill 3.B AAP-3.C.1 Essential Knowledge AAP-3.C.1: The exam reference sheet provides PROCEDURE procName(parameter1, parameter2, …){ } which is used to define a procedure that takes zero or more arguments. The procedure contains block of statements.

Professional Development

The Student Lesson: Complete the activities for Mobile CSP Unit 4, Lesson 4.2:LightsOff 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.
• LightsOff Tutorial 

4.2.1. Learning Activities

Estimated Length: 45 minutes

• Hook/Motivation (5 minutes): In the prior App Inventor lesson, Paint Pot, we introduced an abstraction concept, a variable. Do the students remember its purpose and why we decided to introduce a variable into the Paint Pot Lesson? Describe the student objectives for today’s lesson. In today's lesson another abstraction concept, the concept of defining a procedure from Paint Pot Refactoring, will be revisited. Remind the students that a procedure is a sequence of instructions that can be carried out by calling the procedure.
• Experiences and Explorations (25 minutes): Lead the students through the LightsOff tutorial. Allow faster students to follow the tutorial on their own. Identify new components used in this app, the ImageSprite, and how the ImageSprite component is used to animate the lightBulb. Ensure that students know that ImageSprites require a Canvas component. Lead the design of the UI with the students and walk students through the coding of the app. Be sure to spend time reiterating that a procedure is a sequence of instructions that can be carried out by calling the procedure.
• Rethink, Reflect and/or Revise (15 minutes): As a class discuss the following: How was the animation of the ImageSprite achieved in this app? How does a computer program perform animation? How does a computer card game produce a random card number in a specific range of values? Choose students “randomly” to answer the questions.
  Have the students try to complete the interactive exercises and complete a reflection in their portfolio. If students do not finish the reflection in class, have them finish it for homework.

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.12 Calling Procedures
• Topic 3.13 Developing Procedures

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
• LightsOff .aia file
• 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 XXX App, look for:

Differentiation: More Practice

If students are struggling with lesson concepts, have them review the following resources:

• AppInventor.org: How Do You Define a Procedure?
• AppInventor Documentation: Procedures
• AppInventor.org: How Do You Enable Timed Activity?
• AppInventor Documentation: ImageSprite

Differentiation: Enrichment

Students can try adding multiple sprites to their app that move around randomly as well using the same Timer event. For an extra challenge, they could use a second timer to move them at a different rate than the Android.

Background Knowledge: Procedures

• App Inventor documentation on ImageSprite and Canvas components.
• Defining a procedure: a series of actions conducted in a certain order or manner.
• From Wikipedia: "In computer programming, a subroutine is a sequence of program instructions that perform a specific task, packaged as a unit. This unit can then be used in programs wherever that particular task should be performed."
• Synonyms of procedure include subroutine, function, method, routine, and subprogram.

Teaching Tips:

4.2.2. Professional Development Reflection

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

• Is there anything else you would need to have or know to teach this lesson effectively?
• What specific elements of this lesson (examples, activities, etc.) would you change?
• How would you modify or add to the interactive exercises (formative assessments)?

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