1. AppLab
Studio.code.org

2. AppLab – basic rules Students must be 13 years old
Students must log in
Many have already created an account from Hour of Code
I prefer to have students use a Google Account
2 Sides to creating an App
Design Mode
Code Mode
Blockly
Javascript
NAME EVERYTHING when designing your app

3. Naming Conventions
Name your labels and variables with names that make sense
scoreLabel, emojiLabel, backgroundImage, ouchSound
Not label1, label2, label3, image1, image2
Don’t include spaces in the names
scoreLabel not score label
Use camelcase
Start with a lower case letter and every beginning letter of a word capitalize
myFirstEmojiGame

4. Design Mode Change screens or create a new screen Switch Modes
Set Properties of Selected elements
Drag and drop elements into the screen

5. Code Mode Switch Switch to javascript Modes Menus of Code
Drag blocks of code

6. Let’s Create A Quick App
Search for AppLab and go to the link
Create an account or Sign in
Click on Create an App Button

7. Design Start Screen Make Sure you are in Design Mode
Drag a button here and name it startButton
Name your screen startScreen

8. Start Button Properties

9. Create a New Screen for the Game Screen
Name it gameScreen (id)
Pick a background color

10. Add a background image Make Sure you name it backgroundImage
Drag into the screen
Click here to choose an image

11. Add a background image Click Upload File Button Select Image to Upload
Click on Choose Button

12. Drag an image for the Emoji
Drag into the screen

13. Add a label to show score
Drag into the screen

14. Add Current Score Label
Drag into the screen

15. Add a end game screen Click on the screen button to add a new screen
Name the screen endGameScreen
Pick a background color
Add a Label to show the score
Name it endGameScoreLabel
Name it endScoreValueLabel
Add a button to play again
Name it playAgainButton

16. Example Screen

17. Switch to Code Mode

18. Adding a Variable for the Score
Drag into the screen

19. Rename variable and set to 0

20. Add Function for Play Game
Rename to playGame
Drag into the screen

21. Click on Show Text Button to add the next code by typing

22. Type this code into the playGame function
Then click on Show Blocks Button

23. Add event listener for start button clicked

24. Add three blocks (look at the colors for clues as where to find them)
Make sure you change the values in the blocks to match these

25. Add these blocks for “clicking on the emoji” underneath

26. Add these blocks for “missing” the emoji

27. Add these block to create a moveEmoji function

28. Add these block to create endgame function

29. Add this code to restart

30. Testing your App

31. Share it if you like