Variables, Conditionals, and Functions - Lesson 2: Variables Investigate

Overview

In this lesson students work with partners to investigate several versions of the "Thermostat App" to understand how variables store and update information. To begin, students examine a version of the app where the temperature displayed changes each time a button is clicked. The next two versions of the app demonstrate how variables can store strings. Students learn about the patterns they are observing, specifically "Counter Pattern with Event" and "Variables with String Concatenation Pattern". To conclude the lesson, students review and discuss the programming patterns that they will make use of in the programs they write.

Goals

Students will be able to:

  • Identify common programming patterns when using variables as part of an app
  • Explain the purpose of those programming patterns with variables both in terms of how they work and what they accomplish
  • Modify apps that make use of common programming patterns with variables to adjust their functionality

Purpose

After building a conceptual model for variables in the previous lesson, students investigate three working examples of apps that make use of variables. This lesson also introduces common programming patterns when using variables. Students will have some opportunities to modify working code in this lesson, but the most significant practice with variables will come in the following lesson.

Resources

Teaching Tip

This is the first official "Investigate" lesson in the EIPM model. Review the EIPM model in the EIPM: A Short Introduction - Resource

Investigate Lessons

Overview: Students investigate two or three sample programs that use the new concept.

  • Close-reading of working programs
  • Teacher-led discussions
  • Tasks to modify apps

Goal: Students become comfortable reading and modifying programs that use the new concept.

A sketch showing a teacher lead students through material on a display.

Getting Started (5 minutes)

Preview the Lesson

  • Yesterday we explored storing information like a computer. Computers store each piece of information in a variable. In Javascript, we name or declare a variable with the keyword "var". In Quorum, we declare it by type, like "integer", "text", or "Button" Today we are going to look at a new app that stores information in variables.

Discuss: Let's do a quick review. How does a baggy represent a variable?

Discussion Goal

Discussion Goal: The baggy represents a variable by storing one item: a value on a sticky note placed in a named baggy. The value in the baggy can be changed at any time, just like a variable's value can change.

Activity (35 minutes)

Group: Place students in pairs. One student per group should open the apps used for this lesson, beginning with Lesson2_App1.

Investigation #1: Thermostat App v.1

Open a Project: Have students open the project Lesson2_App1.

Activity: This project introduces a new app for students to investigate. It represents a Thermostat App where the temperature can be changed up and down.

  • Run the app: Let students run the app for a few minutes.
  • Predict: Students predict the information that is being stored in variables.
  • Assign Code Sections: Have students open the file Main.quorum. Assign half the pairs to investigate the first section of the Button handling code on lines 83 and 93. The other half investigates the second half on lines 95 to 101. Both groups should also look at lines 79 and 80 and consider how they are related to their sections.
  • Read Code: Groups should carefully read the code for their section making sure they understand how it works. Give them 3 minutes to do so.
  • Explain Your Section: Have partners make a group with members of the other section and carefully explain how their section works line by line.
  • Class Discussion: Ask a few members of each section to quickly share out how their section works. Display the code at the front so you can talk through it together.

Discussion Goal

Discussion Goal: Here are some points that students are likely to bring up while discussing their code:

Lines 79-80:

  • Two variables are created, temperature and tempF.
  • temperature gets the value 70 and tempF is set to an empty string, which is represented with empty quotation marks.

Lines 83-93:

  • On line 83, a sound is played.
  • On line 85, we create a variable and store the name of the button that was clicked.
  • Although we haven't explicitly discussed conditionals yet, students may recognize that code inside the block starting on line 88 will only trigger for the "down" button.
  • When the down button is clicked, the temperature variable decreases by one.
  • Then the tempF variable is updated with the current value of temperature joined with the letter F.
  • The text on the screen is set to dispay the value stored in the variable tempF.

Lines 95-101:

  • Although we haven't explicitly discussed conditionals yet, students may recognize that code inside the block starting on line 96 will only trigger for the "up" button.
  • When the up button is clicked, the temperature variable increases by one.
  • Then the tempF variable is updated with the current value of temperature joined with the letter F.
  • The text on the screen is set to dispay the value stored in the variable tempF.

Modify: Have groups return to their original seats. Give them a couple of minutes to work on modifying the app to change the degrees by two when the up and down arrows are clicked.

Investigation #2: Thermostat App v.2

Open a Project: Have students open the project Lesson2_App2.

Activity: This program is an updated version of the Thermostat app. This time students should continue to work in partners but do not need to work with other groups. They will need to:

  • Run the app: Let students run the app for a few minutes.
  • Discuss Changes: Talk through how the app is different than the first version.
  • Find the Round command. Discuss with a partner how this command might work. Try deleting Round in lines 12, 102, and 112. What happens? Add it back in.
  • Class Discussion: Ask a few students to explain what's happening on line 12 with Round.
  • Modify the Code: Change the code so that no space displays between the temperature and the unit description ("F" or "C").
Discussion Goal

Discussion Goal: On line 3, the Fahrenheit temperature is converted to Celsius. Round rounds a given value to the nearest integer.

Investigation #3: Thermostat App v.3

Open a Project: Have students open the project Lesson2_App3.

Activity: This program is again an updated version of the Thermostat app with a login screen.

  • Run the app: Let students run the app for a few minutes.
  • Predict: Students predict the information that is being stored in variables.
  • Read Code: Give students a few minutes to read and discuss the code with their partners. What has changed? What has stayed the same?
  • Class Discussion: Look at line 208. How does nameField:GetText() work? What is it doing?
  • Modify the Code: Add an explanation point "!" to the end of the string stored in userName.
Discussion Goal

Discussion Goal: nameField:GetText() gets the string of text the user typed into the nameField text box. In our app, the name written in the nameField element is concatenated with "Hi" and then stored in the variable myName.

Patterns (7 minutes)

  • We are learning two patterns here:
      • - Counter Pattern with Event
      • - Variables with String Concatenation Pattern
    • The Counter Pattern with Event is a common pattern for updating variables that you will use in making many different apps. We call it the Counter Pattern with Event.

    Display: Talk through the pattern with students.

    integer counter = 0

action ButtonActivated(Button myButton)
     counter = counter + 1
end

    Discuss: With a partner, discuss the following:

    • The "Counter Pattern with Event" should look familiar! How would you explain this pattern to another person?
    • When might you want to use the "Counter Pattern with Event"?

    Discussion Goal

    Discussion Goal: Students should step through each line of the pattern, explaining what's happening.

    Counter Pattern with Event:

    • The counter variable gets the value 0
    • When the event is triggered, counter is updated, getting the current value of counter and adding 1.

    The Counter Pattern with Event might be used to update a score in a game when an item is clicked.

    Remarks

    • Variables can store many different types of information including numbers and Strings. Anything placed inside of the quotation marks becomes a String.
    • Guess what! There's a pattern for working with Strings. When we want to combine Strings with other Strings, numbers, or even with another variable we call that concatenation.

    Display: Talk through the pattern with students.

    text myString = "rock"
text myOtherString = "roll"

text myStory = myString + " and " + myOtherStrin

    Discuss: Explain to a partner how the "Variable with String Concatenation Pattern" works.

    Discussion Goal

    Discussion Goal: Students should be able to verbally explain how the Variable with String Concatenation Pattern works.

    Changes

    • myString gets the value "rock"
    • myOtherString gets the value "roll"
    • myStory gets the value that is stored in myString ("rock") and combines that with a string "and" and the value stored in myOtherString ("roll")
    • myStory now stores the value: "rock and roll"

Wrap Up (5 minutes)

Remarks

  • The patterns we learned today are present in many different kinds of apps, and we'll learn many new patterns as we go.

Discuss: Let's review. What can be stored in a variable? Why is using a meaningful name for the variable important?

Discussion Goal

Discussion Answers:

Please see the Unit4AnswerKey.md document.

Journal

Add to your journal the definition for variable.

  • Variable: a reference to a value or expression that can be used repeatedly throughout a program.
  • Today we've learned a lot about how variables work in actual programs.

Assessment: Check for Understanding

Check For Understanding Question(s) and solutions can be found in each lesson on Code Studio. These questions can be used for an exit ticket.

For Students

Open a word doc or google doc and copy/paste the following question.

Question

Explain in your own words the process of creating and updating a variable. How does the Counter Pattern with Event work?

Standards Alignment

  • CSTA K-12 Computer Science Standards (2017): 2-AP-11, 3B-AP-23
  • CSP2021: AAP-1.A.2, AAP-1.A.3, AAP-2.D.1

Next Tutorial

In the next tutorial, we will discuss CSP Unit 4 Lesson 3 Variables Practice, which describes Practice debugging and writing variables.

Go BackNext Tutorial