Coding

On code.org, complete The Maze, The Artist 1 and 2, and the Farmer. Then pick an hour of code project to complete and share the address with me. You can choose The Artist (hour of code version), Flappy Code, or Play Lab. To access the Hour of Code project, log in to your Code.org account (see below) and click "My Dashboard."

Find your code.org section below:

To get to the Hour of Code options, click "My Dashboard" once you're logged in.

App Lab Activity

1. In this activity, you will make a Simple Game in Code.org’s App Lab. In the game, the user will tap on a picture as fast as possible in a certain amount of time and then receive a score. In the example below, the game will be called “Poke the Pig” because a pig image is used. You can name your game whatever you want and use a different picture.

2. Log in to your code.org account. Click the “Create” button at the top of the screen and select “App Lab.”

3. Click the “Design” button to go into design mode. We will start by designing the app (adding screens, an image, titles, etc), and then we will code it.

4. In design mode, look on the right side of the screen to find the Properties panel. Change the ID of screen 1 to startScreen and then choose a background color.

5. Drag an image from the Design Toolbox into your mobile screen. The properties in the Properties panel should change (there will be more of them). Click Choose… in the properties panel next to the image property.

6. Click Upload File and then navigate to the App Lab Images folder: Desktop-->Tech & Engineerin-->College & Career Awareness-->App Lab Images. Choose an image to upload for your game. If you are working on this activity at home: You will need to find and download a picture from the Internet, since you will not be able to access the App Lab Images folder from home.

7. Once you’ve selected an image, it should show up in the “Choose Assets” window. Click Choose to add it to your game! You can resize the image by clicking and dragging the lower right-hand corner of the image.

8. Drag and drop a label into your mobile screen from the Design Toolbox. In the text property, type the name of your game. Look at the other properties for the label—you can also change the text color, font size, text alignment (centering the text), etc.

9. Now we’re ready to make our 2nd screen! Drag and drop a screen from the design toolbox into your mobile screen. Change the ID of screen2 to endScreen, and add a background color if you want.

10. Drag a Text Area onto your mobile screen and resize it so it fills more of the screen. Find the “Background Color” property for the text area and move the 2nd slider all the way to the left—this will remove the white background color.

11. In the text property of the text area, type a message for the end of the game, leaving a big space for the score (which will be a different element from the design toolbox). Format the text using text color, font size, and text alignment properties again. It should look something like this when you finish-->

12. Drag and drop another label onto your screen. Change the id of this label to score. For text, put 0, and increase the font size and center it with text alignment. Then change width to 320 and x position to 0.

13. You’re ready to code your game! Click the Code button. In the UI Controls section, find setScreen() and add it to your workspace. Click the little black triangle and choose startScreen from the list.

14. Go to the Variables section and drag in a var x =_ block. Change x to clicks. This variable will keep track of how many times the user clicks on the image. On the right side of the equal sign (=), put a zero (0).

15. Go back to UI Controls and get an onEvent block. For ID, choose your image. Leave “click” alone. Go to Variables again and grab x = _. Put this block inside the green part of onEvent. On the left side of the equal sign (=), put clicks (the name of your variable you created in step 14). On the other side, put clicks + 1. Now each time the user clicks on the image, 1 will be added to the clicks variable, which will later become the score.

16. Next, go to Controls and add a setTimeout to your workspace after the onEvent. Change the number in setTimeout from 1000 to 10000. (1000 milliseconds = 1 second, 10000 ms = 10 s). Inside the setTimeout, add two blocks from UI Controls—setScreen() and setText(). For the setScreen, choose endScreen. For setText, choose score for the ID and type clicks for the text. Make sure you delete the quotation marks around clicks! setTimeout will keep time—after 10 seconds, the screen will change to endScreen and the score label you made earlier will show the value of the click variable!

17. Test out your game! If it works, after 10 seconds, the screen will switch to your 2nd screen and display a score. If not, compare your code very carefully to the code above. Tiny things—like extra symbols, misspellings or capital letters—can make the code not work!