Unit 4 Lesson 11

Name(s) Al Reem Hamed Date 9/10/2022

Activity Guide - Functions Make

Step 1 - Try the app
"color
● Try many of the different options.
● Pay attention to what is happening on the screen "quo Outpu
when you move the slider or choose an item from the
dropdown. teOu t"
● When does the screen update? "quo
● What happens if you choose lavender and Lucida "fontF
tput" "col
"font
Sans from the dropdowns? Try choosing lightgreen
"feed teInp
and moving the slider until you receive feedback.
amilyI orIn
SizeI
backO ut"
Discuss with a Partner
● What does this app do? Let you write a quote, change nput" put"
nput"
the font, and the quote background color.
● What are the inputs? quote input, family font input,
utput"
colors input, and font size.
● What are the outputs? Color output, quote output and size output
● How could a function be used in this app? When there is something repeated just call the function

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 type that user selects

fontSize
the font size that user selects

quote The quote that users enter (write)

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 == “Lucida Sans” ){

setText("feedbackOutput", “Great Combo!” );
} else if ( color == “lightblue” && fontFamily == “Trebuchet” ){
setText("feedbackOutput", “Looking good” );
} else {
setText("feedbackOutput", “Nice design” );
}

Computer Science Principles 1

 Unit 4 Lesson 11
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?
The count should be updated since it increases and Review the updateScreen() Pattern to help you plan
decreases when clicking. (var count, upButton, your function.
downButton)

When then programmer should write the code again, so

instead of repeating it he just call the 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 User will change between fonts types when click on the fontFamily drop down
menu.

"fontSizeInput" change User will change between text size using the slide back and fourth.

"colorInput" change User change between colors using the drop down menu.

Computer Science Principles 2

 Unit 4 Lesson 11
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 you submit, check the rubric below to make sure your program meets the requirements of the task.

Category Extensive Evidence Convincing Limited Evidence No Evidence

Evidence

Input onEvents are created onEvents are created onEvents are created onEvents are not
for all the required for most of the for some of the created for any
inputs. inputs. inputs. inputs.

Storage: Variables Variables are created Most information is Some information is There are no
and appropriately stored in a variable stored in a variable variables which store
used for all pieces of and appropriately and appropriately the necessary
information used in updated throughout updated throughout information for the
the app. the app. the app. app to work correctly.

Code: Conditionals An if-else-if An if-else-if An if-else statement No conditional is

statement is used statement is used or an if statement is present.
which correctly that partially checks used that checks if
checks if certain if certain options one option has been
options have been have been selected selected.
selected and and displays
displays feedback. feedback.

Code: Functions A function is used A function is used A function is used There is no function
which correctly which correctly which updates some which updates the
updates all output updates most of the of the output screen.
elements. The output elements. The elements or the
function is called in function is called in function is only called
all onEvents. all onEvents. in some onEvents.

Code runs without No errors are present One or two errors are Three or four errors More than four errors
errors. in the required code. present in the are present in the are present in the
required code. required code. required code.

Coding Comments Comments are used Comments are used Comments are used Comments are not
to correctly explain to explain the to explain the present.
the purpose and purpose and function purpose and function
function of all of most onEvents of some onEvents
onEvents and and functions. and functions.
functions.

Computer Science Principles 3