Student Instructions

Adding a New Screen

We're going to add new screens to the Recycle Helper app from the previous lesson. To complete this app, you're going to need more than just a home screen. To create more screens, just click the dropdown at the top of the app display and select "New Screen..."

Do This

• Create a New Screen and give it the ID "about".

Student Instructions

Design the About Screen

To add elements to your new About screen, you'll need to first select it from the screens dropdown.

Do This

• Complete the About screen using the prototype to the right.
• Use the screens dropdown to switch between your Home and About screens.

Student Instructions

Screen Import

In addition to adding new blank screens, you can import screens from "Import Screen..." To import a screen from someone else, you'll need them to give you the sharing URL.

Note: Screens you import must not share any IDs with elements already in your app!

Do This

Another student has created a search results screen that you can import into your app. Their app's share link is https://studio.code.org/projects/applab/XkcpDVj8MJWQvUr9OSgIlA/

• Select "Import Screen... from the screens dropdown.
• Copy and paste the above url into the import screens dialog.
• Select the screen you wish to import.
• Click Import to import the screen.
• Use the screens dropdown to switch between your Home, About, and Search screens.

Student Instructions

Contact Screen Import

Yet another student created a Contact screen that you can import into your app. Their share link is https://studio.code.org/projects/applab/QUAOln68kifScEwQauwNqw/

Do This

• Select "Import Screen... from the screens dropdown.
• Copy and paste the above url into the import screens dialog.
• Select the screen you wish to import.
• Click Import to import the screen.
• Use the screens dropdown to make sure your app has Home, About, Contact, and Search screens.

Student Instructions

Button Events

With our screens in place, it's time to start actually programming the app so that it responds to button clicks. For each button on each screen, you'll want to add an onEvent block that watches for that button to be clicked and responds appropriately. To start off with we'll just watch the home_search_btn button and print something to the console when it's clicked

Do This

You're now in Code Mode (you can use the buttons above your app to switch between Code Mode and Design Mode). This is where you can write the code that will respond to users interacting with your app.

• Drag out an onEvent block from the code toolbox.
• Select home_search_btn from the "id" dropdown.
• Drag out a console.log block from the variables drawer.
• Run your app.
• Click the Search button and look for messages in the console.

Student Instructions

Changing Screens On Click

The setScreen block will change your app to whichever screen you specify. If you place a setScreen block inside an onEvent block, you can program your buttons to change to the correct screen.

Do This

Using the onEvent block that you've created, make your program change to the "search" screen when the home_search_btn is clicked.

• Drag out a setScreen block an put it inside the onEvent block.
• Select "search" from the setScreen dropdown.
• Run your app and test the home_search_btn button.

Student Instructions

Wire Up the Other Buttons

Now that you've made one button work, just follow the same pattern for all of your others.

Do This

• For each button, create an event that links to the appropriate screen when the button is pressed.
• Run your app and test that all of the buttons work.

Student Instructions

Back To Your App

Now that you've had some practice with importing screens, it's time to start working on your team's app.

Do This

Each member of your team is going to create their own copy of the app, with all of the team members' screens imported in. This will be your copy of the app, and the copy that you will start to add code to in the next lesson. (Don't forget that you'll also need to import your own screen into this project.)

• Collect all of the sharing urls for your team's pages, including your own. Each team member can find the share url for their own screen by going back to the last level of the previous lesson and clicking the Share button in the upper-left corner
• Import each of the screens, one at a time
  • If you run into an ID error with one of the screens, discuss the issue with the screen's creator so it can be fixed and imported
• Set the main screen as the default. Don't worry about adding any code at this point; we'll get to that in the next level.

Student Instructions

Linking Screens

With all of your screens in place you can start adding events that will change the screens. When you're done with this step you'll actually have an interactive prototype!

Do This

For each screen of your app:

• Find all of the button IDs
• For each button, add an event handler that watches that ID
• In each event handler, use setScreen() to move the the right screen
• Test it all out!

Depending on the number of screens and buttons your app has, this can be a pretty involved process. Make sure that you test your work often, using console.log() blocks to debug any strange behavior with your app. When you think you've got the whole thing working, compare your app with other members of your group to see if they work the same.