Student activity guide
STEP 1: PREVIEW YOUR MISSION
In today’s coding activity, you will program an interactive GOAT product screen with a product
pricing page.
PROJECT PREVIEW Mission Checklist
Here’s an example of what your finished ❏ I opened the starter code.
program might look like: ❏ I programmed an “Order Now” button
that changes to a new screen when
clicked.
❏ I programmed the product pricing
page to show size and price details
when shoe size buttons are selected.
2 Student Activity Guide
STEP 2: READY, SET…Go!
Using a starter template, program a screen that displays size and price information when a user
clicks on the “Order Now” button.
A — open starter code
The walkthrough solution in this activity guide is just one way to build the program and
complete our Mission Checklist. There are many different ways to complete this activity– all
correct in their own ways.
1. Access AppLab by signing into your Code.org account.
2. Open up the Starter Code.
3. Click the “View code” button to the right of the screen.
4. Click on the “Remix” button in the top bar of the screen.
5. Click the “Design” button on top of your app screen to switch to
Design Mode.
B — programming the order now button
1. Now, find the button icon in your Design Toolbox and drag a button onto the bottom
center of the app screen.
2. Change the background color of the button to black by finding the “background color”
field in the properties tab and typing in #000000.
3. Find the “font family” field (directly under background color) and use the dropdown
menu to change the font to Arial.
4. Then, in the text field, type in “Order Now”.
5. Now, scroll to the top of the properties tab to find the purple “id” field and type in “Order”.
6. Find the “Code” button (on top of your app screen) and click it to switch into Code Mode.
7. Drag an onEvent block underneath the first two gray blocks (Part 1).
8. Using the dropdown menu, change the ID to “Order”-- the button we just created.
9. Then, scroll down in the Toolbox menu to find the setScreen block and drag it into the
onEvent block.
10. Using the dropdown menu, change the Screen ID to “screen_productPricing”.
LESSON 1.2 | How Do We Interact With Apps? Explore UI Design
3 Student Activity Guide
Now, we’ll test our code to see if the button works.
11. Click on the orange “Run” button beneath the app screen.
12. Then, click the “Order Now” button to test your code. It should show you the product
pricing screen after it is clicked.
C — create the product pricing page
Now, we’ll work on the product pricing page.
1. Click the “Design” button above the app screen to switch back to
Design Mode.
2. Then, using the dropdown menu above the product screen, select
“screen_productPricing”.
3. Click the “8.5” button on the app screen.
4. Click the “Duplicate” button on the right side of the screen to 15
buttons.
5. Then, drag and drop them into 3 rows of 5 buttons each..
6. Click the first button.
7. Then, in the “text” field, type in “5”
8. In the purple “id” field, type in “size_5”.
9. Repeat this process for each of the other
buttons, using the Product Pricing document
to include all the sizes in the table. Each button
should have a unique ID that matches the
display text.
10. On your app screen, click the “New (Instant
Ship)” text box.
11. Use the “Duplicate” button to make a copy.
12. In the “id” field, type in label_priceNewDefects.
13. In the “text” field, type in “New + Defects”
14. Click the white “Select” button.
15. Use the “Duplicate” button to create two more
“Select” buttons.
16. Drag each button down to the other two text boxes.
LESSON 1.2 | How Do We Interact With Apps? Explore UI Design
4 Student Activity Guide
17. Now, find the gray arrow directly underneath the “Best Price (Used)” text and click on it.
18. Then, use the “Duplicate” button to make a copy of it.
19. Drag the box underneath the “New + Defects” text element.
20. In the properties tab, change the ID to “label_priceNewDefects”.
21. Now, click the “Code” button above the app screen to switch back to Code Mode.
22. Drag an onEvent block underneath the Part 2 gray block.
23. Using the dropdown menu, change the ID to “size_5”-- the button we just created.
24. Then, scroll down in the Toolbox menu to find the setProperty block and drag it into the
onEvent block.
25. Using the dropdown menu, change the ID to “label_priceBestPrice”.
26. Then, in the next dropdown menu, select “text”.
27. In the last dropdown menu, type in the price listed in your Product Pricing document for a
Best Price, size 5 shoe ($70).
28. Repeat steps 41-44 for both the New (Instant Ship) and New + Defects pricing for a size 5
shoe, using the Product Details document.
29. Then, click the orange “Run” button underneath your app screen.
30. Test your code by clicking the “Order Now” button, followed by the size 5 button.
31. Now, using the information from the Product Pricing page, complete the necessary steps
to fill out prices for the rest of the shoe sizes.
○ You’ll need to create 14 more sets of code blocks filling in the specific shoe size and
price information according to the Product Pricing table.
LESSON 1.2 | How Do We Interact With Apps? Explore UI Design
5 Student Activity Guide
D — review your checklist
❏ I opened the starter code.
❏ I programmed an “Order Now” button that changes to a new screen when clicked.
❏ I programmed the product pricing page to show size and price details when shoe size
buttons are selected.
If you need help while working on your activity, you
Need Help? can watch the video walkthrough by clicking the
button here. Pause the video at any time and
return to your activity to try out each step for
yourself!
Appendix: VOCABULARY
Find this lesson's vocabulary below.
event (n):
Input from the user or environment that triggers a response
or outcome.
input (n):
The information computers get from users, devices, or other computers.
output (n):
The information computers give to users, devices, or other computers.
software (n):
A collection of programs, or instructions, that is run by a computer.
software engineer (n):
A person who designs, develops, and tests software for home, school, and business use.
user (n):
A person who uses or interacts with an app, software or product.
user interface (n):
The visual elements of a program (inputs and outputs), that allow a user to interact with an app
or software. Can include buttons, menus, images, text, graphics and more.
LESSON 1.2 | How Do We Interact With Apps? Explore UI Design
6 Student Activity Guide
Appendix: Helpful Links
Use the links in this section if you are stuck or simply want to know more about a concept.
Project Links Additional Links
● 1.2 Starter Code ● App Lab Documentation
● Coding Activity Walkthrough Video ● App Lab Tutorials
My cse3 journal
Extra space for notes, thoughts, and other things!
Notes
LESSON 1.2 | How Do We Interact With Apps? Explore UI Design
