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.

Professional Development

The Student Lesson: Complete the activities for Mobile CSP Unit 4, Lesson 4.2:LightsOff Tutorial.


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

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:

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