Google Doc Access Directions:
● Please click on File in the upper left corner.
● If you are working on a Chromebook or Google Docs, choose the Make a copy option and save
a copy of the document to your Google Drive.
● If not, choose the Download as option and then the Microsoft Word (.docx) option to download
an editable copy of the document to your computer.
Module Four Lesson One Activity:
Variables Explore/Investigate
Log in to Code.org and navigate to Variables - Explore.
Go through levels 1-3 exploring each app. These are samples of the kinds of apps you
will be able to build by the end of this module.
As you go through them, write down at least one example where the app seems to be
keeping track of a piece of information or using it to make decisions below. (5 pts)
Pet Rock App(2 pts):
The app keeps track of the number of clicks I make on the rock.
Poetry App(2 pts):
The app keeps track of what words are selected.
Home Thermostat App(2 pts):
It has a database for username and password login information.
Now let’s look at a new app that stores information in variables and investigate several
versions of the "Thermostat App" to understand how variables store and update
information. Navigate to Variables -Investigate in code.org
Directions: Use this activity guide to record your thoughts and responses to the
prompts, you are welcome to discuss with a classmate, but you each must submit
individual activity guides with individual answers.
____________________________________________________________
Level 1 - Run and observe what happens - try clicking on various parts of the app’s
screen. Answer the questions below(5pts each):
● (5 pts)How does the app work? The app works by using UI elements to
change a number on the screen
● (5 pts)What are the variables? Nothing
● (5 pts)What is being stored? Nothing What is being changed?
The temperature number as you click the up arrow or down arrow
____________________________________________________________
Level 2
Now look at the code behind the app.
Complete the following prompts for both sections of code (5pts)
Lines 1-12 (5 pts)
● Explain what the section does - 1 Section consists of holding variables, and
another section has the rules for what the down arrow.
● Call out any lines of code you thought were interesting or confusing - I thought
that the tempF = temp + “F” was interesting.
Lines 14-21 (5 pts)
● Explain what the section does - A section states what the up arrow does when
clicked.
● Call out any lines of code you thought were interesting or confusing
Nothing
Right now the temperature changes by one degree when the buttons are clicked.
● Modify the code so the temperature changes by two degrees when the buttons
are clicked. Add a comment above where you modified the code explaining what
you did.
Copy and Paste the new code lines(5pts each) and comments(5pts each):
// Button to decrease the temperature by
// one degree F.
onEvent("downButton", "click", function() {
temp = temp - 2;
tempF = temp + " F";
setText("temperatureText", tempF);
playSound("sound://category_objects/sharp_switch.mp3");
});
// Button to increase the temperature by
// one degree F.
onEvent("upButton", "click", function(){
temp = temp + 2;
tempF = temp + " F";
setText("temperatureText", tempF);
playSound("sound://category_objects/sharp_switch.mp3");
});
____________________________________________________________
Level 3
● (5 pts) How do you think Math.round works? The Math.round works by having
the stated valu,e dow whatever math is needed to for the needed output
● (5 pts) Delete Math.round in lines 3, 15, and 28. What happens? (Add it back in.)
Delete the space in between the quotation marks and the letter "F" in line 4. How
does this change what is displayed on the screen? It changes the number
displayed for celcius
● Modify the code: Change the code so that no space displays between the
temperature and the unit descriptions ("F" or "C").
Copy and Paste the new code lines(5pts) and comments(5pts):
// Create and assign variables
var tempF = 70;
var tempC = Math.round((tempF - 32)*(5/9));
var tempDisplayF = tempF + "F";
var tempDisplayC = tempC + "C";
// Set temperature on the screen
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
// Button to decrease the temperature by
// one degree F.
onEvent("downButton", "click", function() {
tempF = tempF - 1;
tempC = Math.round((tempF - 32)*(5/9));
tempDisplayF = tempF + "F";
tempDisplayC = tempC + "C";
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
playSound("sound://category_objects/sharp_switch.mp3");
});
// Button to increase the temperature by
// one degree F.
onEvent("upButton", "click", function(){
tempF = tempF + 1;
tempC = Math.round((tempF - 32)*(5/9));
tempDisplayF = tempF + "F";
tempDisplayC = tempC + "C";
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
playSound("sound://category_objects/sharp_switch.mp3");
});
Level 4
● (5 pts) What new information is being stored?
The name inputted at the begenning is stored
Level 5
Investigate the code for this new version of the Thermostat App.
● (5 pts) What’s code has been changed? Code has been changed to have the
name that was inputted, right beside the text “Hi”
● (5 pts) What’s code has been added? A new variable has been added, as with a
text box to input your name.
● (5 pts) What's happening on line 40? Hover over the getText() block in the
toolbox to read its documentation. The getText() block grabs the given text input
and places it where it wants too.
● (5 pts) Using concatenation, add an exclamation point "!" to the end of the string
stored in userName so the following is displayed:
Copy and paste the new line of code here:
// Create and assign variables
var tempF = 70;
var tempC = Math.round((tempF - 32)*(5/9));
var tempDisplayF = tempF + " F";
var tempDisplayC = tempC + " C";
var userName;
// Set temperature on the screen
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
// Button to decrease the temperature by
// one degree F.
onEvent("downButton", "click", function() {
tempF = tempF - 1;
tempC = Math.round((tempF - 32)*(5/9));
tempDisplayF = tempF + " F";
tempDisplayC = tempC + " C";
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
playSound("sound://category_objects/sharp_switch.mp3");
});
// Button to increase the temperature by
// one degree F.
onEvent("upButton", "click", function(){
tempF = tempF + 1;
tempC = Math.round((tempF - 32)*(5/9));
tempDisplayF = tempF + " F";
tempDisplayC = tempC + " C";
setText("temperatureF", tempDisplayF);
setText("temperatureC", tempDisplayC);
playSound("sound://category_objects/sharp_switch.mp3");
});
// Button to log in to the app
onEvent("loginButton", "click", function(){
userName = "Hi, " + getText("nameInput") + " !";
setText("usernameText", userName);
setScreen("homeScreen");
});
// Button to return to the log in screen
onEvent("homeButton", "click", function(){
setScreen("loginScreen");
});
Explain in your own words the process of creating and updating a variable. How does
the Counter Pattern with Event similar to the one below work - I have started it for you.
Name Code(Block) Code(Text)
Counter var myVar = 0;
Pattern with
onEvent("id", "click",
Event function() {
myVar = myVar + 1;
});
Steps for Counter Pattern with Event:
1. Variable is defined and assigned a value
2. Event is triggered
3. Variable is set
4. Variable if shown
