Scribd
Upload
14K views3 pages

U4l11 Activity Guide - Functions Make

This document provides instructions for an activity to learn about functions. It includes 4 steps: 1) Try a functions app to understand inputs and outputs, 2) Plan variables, conditionals, and a function to update the screen, 3) Write the code, and 4) Submit and check against a rubric. The planning step involves creating variables to store color, font, and a button control, an if/else conditional to check conditions, and an updateScreen() function. The writing step implements these plans with onEvent handlers for inputs and calls to updateScreen().

Uploaded by

api-524141584
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14K views3 pages

U4l11 Activity Guide - Functions Make

This document provides instructions for an activity to learn about functions. It includes 4 steps: 1) Try a functions app to understand inputs and outputs, 2) Plan variables, conditionals, and a function to update the screen, 3) Write the code, and 4) Submit and check against a rubric. The planning step involves creating variables to store color, font, and a button control, an if/else conditional to check conditions, and an updateScreen() function. The writing step implements these plans with onEvent handlers for inputs and calls to updateScreen().

Uploaded by

api-524141584
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Functions Make

Name(s)_______________________________________________ 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  Controls the font size 


 

Update Controls the updating code section

ButtonControl Controls what the button does

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 == ​____blue;___________ ​&& fontFamily == ​_______bold;________ ​){


setText("feedbackOutput", ​_________red;bold_____________________​);
} else if ( ​______Button_________ ​== ​_____Update__________ ​&& ​______ButtonControl_________ ​==
______update;_________ ​){
setText("feedbackOutput", ​____________blue;__________________​);
} else {
setText("feedbackOutput", ​___________Update;___________________​);
}

Computer Science Principles 1


Functions Make

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?
1. UpdateScreen Review the ​updateScreen() Pattern​ to help you plan
2. No, because there is already color and and your function.
update var added
3. The function will be called once either the up or
down button is clicked

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  Font changes 


 

“ColorInput” Color Activates the color

“CountInput” Counts Counts the amount of times click

Computer Science Principles 2


Functions Make
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 Limited Evidence No Evidence


Evidence

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

Storage: Variables Variables are Most information is Some information is There are no
created and stored in a variable stored in a variable variables which store
appropriately used and appropriately and appropriately the necessary
for all pieces of updated throughout updated throughout information for the
information used in the app. the app. app to work
the app. 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
all onEvents. all onEvents. called in some
onEvents.

Code runs without No errors are One or two errors Three or four errors More than four errors
errors. present in the are present in the are present in the are present in the
required code. 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

You might also like