U4Ch1L2_Variables Investigate

Purpose: Students investigate three working examples of apps that make use of variables.

 Log Into: U4Ch1L2: Follow instruction from this page, but at the same time use the App. 

Activity: Level #1: Thermostat App. V.1_  

• Play with the App! - What does it do?
•  Based on the Javascript skills that you have recently acquired, try to write the program for how the Blue & Red buttons work with a variable to present the changing temperature. Follow these steps:
  

1.  Go to the front board. Half the class will write the code for just the UpButton, and the other half of the class will write the code for just the DownButton. Much of the code that you will be writing, you have previously written .    Log onto Code.org, U3Ch1L5_Level6. This program contains many of the lines of code that you will need for this Thermostat Program (eg. On Event, Play Sound, Switch Screens, Set Text), so just copy and edit the lines you will need into this program. 
2. In the last lesson, you became familiar with Variables, Values, Strings, Numbers, Operators and Expressions. But there are some new programming skills I will share with you now, inorder for this Thermostat Program to work.
   •  Declare Your Variables: At the very beginning of your program, declare your variables before the 'On Event' commands.       
     • var temp = 70;
     • var tempF = "";
   • Program Calculations: Here are the calculations that allow the temperature to go up or down and for the text to eventually be seen on the screen:          
   •  temp = temp + 1:
   • tempF = temp +"F" 
3. Play with the Thermostat App one more time. Think about what is occurring, now begin writing the program on the board. We will compare your program to the actual program in a few minutes.

Activity: Level #2: Thermostat App. V.2_This Activity shows the actual program for the Thermostat App.     

• Students should compare their program to the actual program (Answer).
• Delete the space in between the quotation marks and the letter "F" in line 9. 
  • How does this change what is displayed on the screen?
  • Finally, Rewrite the program so that it changes by 5 degrees each time the button is clicked.

 Activity: Level #3: Thermostat App.

• Students should view the provided Block Program.  
•  What new features have been added to this program that did not exist in the last program? (Answer)
  •  Hint: Read the "Do This" section.

Activity: Level #4: Thermostat App.    

• Do This:
  • How does “Math.round” work? Delete it from lines #3, #15 and #28. What happened?
  • 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?

Activity: Level #5: Thermostat App.

• Students should play with the provided Thermostat App. 
• What new features have been added to this program that did not exist in the last program?  (Name required for Log in. Name placed on Screen 2 while using App.)

Activity: Level #6: Thermostat _This is the program for the App. above. 

• Do This:
  
• Investigate the code for this new version of the Thermostat App. What's changed? What's been added?
• What's happening on line 40? Hover over the getText() block in the toolbox to read its documentation.
• On Line 41, what happens when you add an exclamation point "!" to the end of the "string" stored in username.