4.2. LightsOff Tutorial¶
Time Estimate: 45 minutes
4.2.1. Introduction and Goals¶
The LightsOff app is a variation of the classic Whack-a-Mole game. The purpose of the app is to promote the socially useful message of saving electricity. In the game, a light bulb pops up at random positions on the screen. One function in the app is the player can score by touching the light bulb before it disappears and pops up in a new position. This tutorial guides you through the basic steps in creating the game.
| (Teacher Tube version) |
Learning Objectives: I will learn to
Language Objectives: I will be able to
|
| Acknowledgement: The socially useful theme for this app -- helping to save electricity -- was suggested by Boston Latin Academy students Adam Vardaro and Daniel Rodriguez through their teacher, Ms. Ingrid Roche. | |
4.2.2. Learning Activities¶
Tutorial
To get started, open App Inventor with the LightsOff Template in a separate tab. Rename the project to LightsOff or something similar. If the template does not open, download the .aia file, go to App Inventor and do File/Import and import in the downloaded .aia file.
Follow along with your teacher or the video tutorial. Or, if you prefer, click on the Text Version button above to use the written version of the tutorial or use the Short Handout for more of a challenge.
4.2.3. Summary¶
In this lesson, you learned how to:
4.2.4. Self-Check¶
- Label
- Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
- Button
- Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
- Ball
- Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
- Canvas
- That's correct! Image sprites and balls can only be added within a Canvas component (found under Drawing and Animation) and not directly on screen
Q-2: An ImageSprite component can only be inserted into what other component?
- True
- Try asking a classmate for advice—s/he may be able to explain/suggest some ideas or recommend some strategies.
- False
- That's correct! In order to use an ImageSprite component, you must have a Canvas component to put it on.
Q-3: True or False: You can drag and drop the ImageSprite Component from Animation tab directly onto the screen?
- When the user shakes the phone.
- Programming what happens when the user shakes the phone would require the use of the Accelerometer Sensor.
- When the user tilts the phone.
- Programming what happens when the user tilts the phone would require the use of the Orientation Sensor.
- When the Clock.Timer ticks.
- Correct! Each time the Clock's Timer fires, the Mole moves to a new random location.
- When the Sound beeps.
- The Sound will beep only after the player has successfully touched the ImageSprite.
Q-4: What event causes the ImageSprite to move to a new random location?
- 1.5
- Recall that the TimerInterval property requires that you specify an amount of time in milliseconds.
- 15
- Recall that the TimerInterval property requires that you specify an amount of time in milliseconds.
- 150
- Recall that the TimerInterval property requires that you specify an amount of time in milliseconds.
- 1500
- That's correct! The TimerInterval property requires that you specify an amount of time in milliseconds. 1.5 seconds is equivalent to 1500 milliseconds.
Q-5: What value would you give the Clock’s TimerInterval property to have the ImageSprite move every 1.5 seconds?
4.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.