Functions Make

Name(s) Natalie, Justin, and Mias_______________________________________________ Period ______ Date ___________________

Activity Guide - Functions Make

Step 1 - Try the app

Try many of the different options.

Pay attention to what is happening on the screen when you move the slider or choose an item from the dropdown.
When does the screen update?
What happens if you choose lavender and Lucinda Sans from the dropdowns? Try choosing lightreen and moving the slider until you receive feedback.

Discuss with a Partner

What does this app do?
What are the inputs?
What are the outputs?
How could a function be used in this app?

Step 2 - Plan

Variables: Fill in the table below for each variable you'll need to create.

Variable Name	What the Variable Stores
color	The background color the user selects
fontFamily	The font of the quote output
quote	The feedback of your quote
fontSize	The font size

Conditionals: An if-else-if statement is used to check if certain options have been selected. Set up the conditional below using the variables you created above.

Note: You can be creative here! Choose your own combinations and feedback messages.

if (color == “lavender” && fontFamily == “Lucinda Sans” ){

setText("feedbackOutput", “Great Combo!”

} else if ( color == “lightgreen” && size == 25){

setText("feedbackOutput", “Looking fresh!”);

} else {

setText("feedbackOutput", “Nice design!”);

}

Functions: Consider what should be included in a function that updates the screen. Write out your plan below.

Things to think about:

What elements on the screen need to be updated using the variables above?
Does the conditional above belong in the function? Why or why not?
When will the function be called?

Feedback

Textbox output:

Color

Font

Text

Yes goes in function because we have to check the conditional everytime we change something

In the beginning and in each onEvent

Review the updateScreen() Pattern to help you plan your function.

Inputs: What are the inputs for the app? These will all be turned into onEvents.

Input	Action	Result
"quoteInput"	input	The text on the screen appears, one character at a time as it's typed.
"fontFamilyInput"	change	The text on the screen changes fonts
"colorInput"	change	The background of the box on the screen changes
"fontSizeInput"	slider	The text on the screen changes font sizes

Step 3 - Write Your Code

Write the code for the app, using your plan above and the comments provided in Code Studio to help
Step You Can Follow

Create all the variables from your table above.
Give your variables a starting value using the assignment operator (=)
Create a conditional that checks if various options are selected.
Create a function that updates the screen.
Create event handlers (onEvent) for the inputs in your table above
Use your debugging skills to identify unexpected behavior and fix your program
Comment your code as you go, explaining what each event handler and function does

Extension Ideas

Create a dropdown with image names and decorate your quote!

Step 4 - Submit

Before your submit check the rubric below to make sure your program

Category	Extensive Evidence	Convincing Evidence	Limited Evidence	No Evidence
Input	onEvents are created for all the required inputs.	onEvents are created for most of the inputs.	onEvents are created for some of the inputs.	onEvents are not created for any inputs.
Storage: Variables	Variables are created and appropriately used for all pieces of information used in the app.	Most information is stored in a variable and appropriately updated throughout the app.	Some information is stored in a variable and appropriately updated throughout the app.	There are no variables which store the necessary information for the app to work correctly.
Code: Conditionals	An if-else-if statement is used which correctly checks if certain options have been selected and displays feedback.	An if-else-if statement is used that partially checks if certain options have been selected and displays feedback.	An if-else statement or an if statement is used that checks if one option has been selected.	No conditional is present.
Code: Functions	A function is used which correctly updates all output elements. The function is called in all onEvents.	A function is used which correctly updates most of the output elements. The function is called in all onEvents.	A function is used which updates some of the output elements or the function is only called in some onEvents.	There is no function which updates the screen.
Code runs without errors.	No errors are present in the required code.	One or two errors are present in the required code.	Three or four errors are present in the required code.	More than four errors are present in the required code.
Coding Comments	Comments are used to correctly explain the purpose and function of all onEvents and functions.	Comments are used to explain the purpose and function of most onEvents and functions.	Comments are used to explain the purpose and function of some onEvents and functions.	Comments are not present.

Computer Science Principles