Variables, Conditionals, and Functions - Lesson 11: Functions Make
Overview
Using Programming Patterns and a step-by-step approach students make their own version of a Quote Maker app. At the beginning of the lesson students are able to explore a working version of the app. They are then given the design elements of the app but begin with a blank screen. Students use an Activity Guide to go through the high level steps they should use to develop their app but leaves it to them to decide how to write the code. At the end students submit their apps which can be assessed using a provided rubric.
Goals
Students will be able to:
- Recognize the need for a function to reduce repeated code while developing a functional app
- Implement a function using programming patterns while developing a functional app
- Write comments to clearly explain both the purpose and function of different segments of code within an app
- Use debugging skills as part of developing an app
Purpose
This lesson is an opportunity for students to take on the "blank screen" and build the code that runs an app entirely from scratch. Guidance provided throughout the lesson helps students break down the large task of "building an app" into more incremental steps that they can use on future projects, including this unit's final project and the Create PT.
Resources
Supplemental Code.org material
For the students
Getting Started (2 minutes)
Teaching Tip
When to Make Functions: The end of the previous lesson and the beginning of this lesson both emphasize a transition students will go through in making functions. Early on they are likely to either not use functions or only realize the need one after they've already written duplicate code. As they get more experienced as programmers, however, they will likely realize sooner and sooner in the process that a function will be necessary. As students grow more experienced they should actually be able to anticipate and write their functions from the beginning of designing their program. Use this brief introduction to reinforce that language.
Remarks
- For the past few days, we've learned a lot about using functions to simplify code and make it easy to edit. So far we have learned how to use functions to remove repeated code in our programs. Early on it's common to realize you need a function only after you've completely written the same chunk of code in two places. As you get better, however, you'll realize sooner and sooner in the process that you're likely going to need a function, and will be able avoid writing repeated code before putting it inside a function. Eventually you'll want to anticipate what your functions are going to be even before you start programming. These are the "during" and "before" levels we read about yesterday.
- In today's Make lesson and the following project you'll have a chance to practice this. See if sometimes you can work that "during" or "before" category.
Activity (38 minutes)
Group: Make a determination as to whether this project will be completed in pairs or individually. You may even choose to let students decide.
Run a Project: Have students open the Unit 4 Lesson11_ExampleApp project from the CSP Widgets repository and run it. Ask them to explore the following in the app:
- Try many of the different options.
- Pay attention to what is happening in the output window when you enter text or activate the buttons.
- When does the screen update?
- What happens if you choose lavender and Verdana from the buttons? Try choosing green and adjusting the font size until you receive feedback.
Discuss: If students are not working in pairs they should still discuss the prompts with a neighbor.
- What does this app do?
- What are the inputs?
- What are the outputs?
- How could a function be used in this app?
Discussion Goal
Discussion Goal
- What does this app do?
- Display a quote with user-defined fonts and background colors.
- What are the inputs?
- The buttons for background color, font family, and font size.
- The quote text field.
- What are the outputs?
- The fully designed quote displayed at the top of the screen
- The design feedback label at the end of the app
- How could a function be used in this app?
- Students may struggle with this question, and it's ok to not have it fully answered before beginning the project.
- A function can be used to update the screen.
- The function contains the conditional that is checked everytime the user interacts with the screen.
Teaching Tip
Supporting Students: While students are working on their apps, circulate the room and check in with students who need a little help. Encourage students to collaborate and discuss bugs with each other.
Debugging: Review with students steps they can use to debug if they get stuck:
- Add output statements to the code
- Explain the code to a friend
Remarks
- Now let's build this app. The screen has been set up for you - it's your job to add the code!
Open a Project: Have students open the CSP-Widget repository Lesson11_ProjectTemplate project.
Do This: Direct students to complete the Quote Maker App. An optional Activity Guide is provided if students would like guidance in creating the app. You may also choose to quickly review the UpdateScreen pattern with students, if needed.
Submit: Encourage students to check the rubric on the last page of the Activity Guide before submitting.
Wrap Up (5 minutes)
- Awesome work today! Make sure to submit your project when you're done with it!
Teaching Tip
Maximize Work Time: The wrap up is short to allow the maximum amount of time for students to complete the activity.
Assessment: Make Project
Assess: Use the rubric provided with the project to assess student projects.
Standards Alignment
- CSTA K-12 Computer Science Standards (2017): 2-AP-19, 3A-AP-17, 3B-AP-14
Next Tutorial
In the next tutorial, we will discuss CSP Unit 4 Lesson 12 Project - Decision Maker App Part 1, which describes Unit Project Day 1.