Lesson 1: Variables Explore
45 minutes
Overview
To begin the lesson students explore sample apps similar to the ones they'll be able to build by the end of the unit. Then students complete an unplugged activity with plastic baggies and sticky notes to build a mental model of how variables are used to move and store information. The lesson ends with a synthesizing discussion and students adding key vocabulary to their journal.
Standards
AAP-1 - To find specific solutions to generalizable problems, programmers represent and organize data in multiple ways.
AAP-1.A - Represent a value with a variable.
- AAP-1.A.1 - A variable is an abstraction inside a program that can hold a value. Each variable has associated data storage that represents one value at a time, but that value can be a list or other collection that in turn contains multiple values.
- AAP-1.A.2 - Using meaningful variable names helps with the readability of program code and understanding of what values are represented by the variables.
- AAP-1.A.3 - Some programming languages provide types to represent data, which are referenced using variables. These types include numbers, Booleans, lists, and strings.
AAP-1.B - Determine the value of a variable as a result of an assignment.
- AAP-1.B.1 - The assignment operator allows a program to change the value represented by a variable.
- AAP-1.B.2 - The exam reference sheet provides the “←” operator to use for assignment. For example,a ← expression evaluates expression and then assigns the result to the variable a.
- AAP-1.B.3 - The value stored in a variable will be the most recent value assigned. For example: a ← 1b ← a a ← 2 display(b) still displays 1.
AAP-1.C - Represent a list or string using a variable.
- AAP-1.C.4 - A string is an ordered sequence of characters.
AAP-2 - The way statements are sequenced and combined in a program determines the computed result. Programs incorporate iteration and selection constructs to represent repetition and make decisions to handle varied input values.
AAP-2.B - Represent a step-by-step algorithmic process using sequential code statements.
- AAP-2.B.3 - An expression can consist of a value, a variable, an operator, or a procedure call that returns a value.
- AAP-2.B.4 - Expressions are evaluated to produce a single value.
- AAP-2.B.5 - The evaluation of expressions follows a set order of operations defined by the programming language.
AAP-2.C - Evaluate expressions that use arithmetic operators.
- AAP-2.C.1 - Arithmetic operators are part of most programming languages and include addition, subtraction, multiplication, division, and modulus operators.
- AAP-2.C.2 - The exam reference sheet provides a MOD b, which evaluates to the remainder when a is divided by b. Assume that a is an integer greater than or equal to 0 and b is an integer greater than 0. For example, 17 MOD 5 evaluates to 2.
- AAP-2.C.3 - The exam reference sheet provides the arithmetic operators +, -, *, /, and MOD. ● a + b● a – b● a * b● a / b● a MOD bThese are used to perform arithmetic on a and b. For example, 17 / 5 evaluates to 3.4.
- AAP-2.C.4 - The order of operations used in mathematics applies when evaluating expressions. The MOD operator has the same precedence as the * and / operators.
AAP-2.D - Evaluate expressions that manipulate strings.
- AAP-2.D.1 - String concatenation joins together two or more strings end-to-end to make a new string.
AAP-3 - Programmers break down problems into smaller and more manageable pieces. By creating procedures and leveraging parameters, programmers generalize processes that can be reused. Procedures allow programmers to draw upon existing code that has already been tested, allowing programmers to write programs more quickly and with more confidence.
AAP-3.A - For procedure calls: a. Write statements to call procedures. b. Determine the result or effect of a procedure call.
- AAP-3.A.6 - The exam reference sheet provides the procedure DISPLAY(expression) to display the value of expression, followed by a space.
AAP-3.E - For generating random values: a. Write expressions to generate possible values. b. Evaluate expressions to determine the possible results.
- AAP-3.E.1 - The exam reference sheet provides RANDOM(a, b) which generates and returns a random integer from a to b, inclusive. Each result is equally likely to occur. For example, RANDOM(1, 3) could return 1, 2, or 3.
DAT-1 - The way that the computer represents data is different from the way that the data are interpreted and displayed for the user. Programs are used to translate data into a representation that is more easily understood by people.
DAT-1.A - Explain how data can be represented using bits.
- DAT-1.A.1 - Data values can be stored in variables, lists of items, or standalone constants and can be passed as input to (or output from) procedures.
DAT-1.B - Explain the consequences of using bits to represent data.
- DAT-1.B.2 - Other programming languages provide an abstraction through which the size of representable integers is limited only by the size of the computer's memory; this is the case for the language defined in the exam reference sheet.
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
- 3B-AP-23 - Evaluate key qualities of a program through a process such as a code review.
Agenda
Objectives
Students will be able to:
- Evaluate expressions that include numbers, strings, and arithmetic operators.
- Trace simple programs that use variables, expressions, and variable assignment.
- Use appropriate vocabulary to describe variables, expressions, and variable assignment.
Preparation
For the entire EIPM Sequence:
- Review the information covered in the slides.
- Try completing the Make Task yourself.
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers.
- If you are teaching this virtually, consider checking our Virtual Modifications.
Explore:
- Collect for each pair of students:
- 3 sandwich baggies
- packs of red and yellow stickies
- pens / pencils
- 1 dry erase marker per four students (pairs can share)
- Review the sample apps shown in the warm up.
- Review the rules and vocabulary used in the slides.
Investigate:
- Review the example apps and the prompts that students will be asked to respond to for each.
Practice:
- Review the video in the level progression that covers global vs. local variables. This is a tricky topic.
- Review other programming levels to be better prepared to support students.
Make:
- Review the different steps students will be asked to complete as they build the app.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- CSP Debugging Guide - Resource
- CSP Unit 4 -Variables, Conditionals, and Functions - Slides
- CSP Unit 4 Lesson 1 - Variables Explore - Slides
- EIPM: A Short Introduction - Resource
- Guide to EIPM Lessons - Video
For the students
- CSP Variables Make - Photo Liker App - Activity Guide
- Debugging Global vs Local Variables - Video (Download)
- Unit 4 Journal (Digital) - Resource
- Unit 4 Journal (Interactive Notebook) - Resource
Vocabulary
- Assignment Operator - allows a program to change the value represented by a variable
- Expression - a combination of operators and values that evaluates to a single value
- String - an ordered sequence of characters
- Variable - a named reference to a value that can be used repeatedly throughout a program
Introduced Code
Teaching Guide
Set Up
This is the first official "Explore" lesson in the EIPM model. Review the EIPM model in the EIPM One Pager.
Explore Lessons:
Overview: Students explore the new concept through a teacher-led hands-on group activity.
- Typically uses physical manipulatives
- Teacher leads with the support of slides and activity guides
Goal: Students begin to develop a shared mental model and understand the main ideas of the new concept.
Watch the following videos:
The Pre-Unit Pulse
Have your students complete these questions independently some time before starting this unit.
Pre-Unit Pulse Questions: The answers to these questions can provide insights into the preferences, strengths, and motivations of your students. If you'd like to adapt the questions or add in your own, you may want to make a copy of this Google Form which already has the existing questions populated.
For more tips and ideas of how to use these questions, check out the CSP Guide to Pre-Unit Pulse Questions
Warm Up - Explore Sample Apps (10 minutes)
Distribute: Give each student a copy of the Unit 4 Journal (Digital/Interactive Notebook) or have students set up this unit's section in their CSP journals.
Journaling: Journaling can take many different forms, but in general, it’s a tool for individual processing and reflection in a form that can be revisited as students develop their skills and understandings. The medium used for journaling can vary depending on classroom needs.
For more guidance and examples, check out the CSP Guide to Journaling
Group: Place students in pairs
Do This: Give students 3-5 minutes to explore sample apps that they'll find on Code.org at the beginning of this lesson (in Levels 3-5). Students can explore one or more depending on time.
Discuss: These are samples of the kinds of apps you'll be able to build by the end of this unit. As you go through them, write down at least two examples where the app seems to be keeping track of a piece of information or using it to make decisions.
Discussion Goal: Have volunteers share what they noticed with the room. Some ideas include:
- The Pet Rock App keeps track of clicks and uses it to decide when the pet rock will "evolve"
- The Poem App keeps track of the poem as you write it
- The Thermostat App keeps track of temperature and uses it to change the color of the text
Remarks
Last unit we built apps that mostly focus on input and output. For example
- When button clicked → show picture
- When button clicked → change screen
- When button clicked → play a sound
But we all want our programs to do more than that! In this unit we’re going to learn how to build apps that keep track of information and use to make decisions and perform calculations. This is going to let us build much more powerful apps! So let's get started by diving in deep on what's involved with programming with information.
Activity (30 minutes)
Group: Group students in pairs.
Distribute: Give each pair of students:
- A small stack of red and yellow sticky notes
- A pen / pencil
- 3 plastic baggies
- A dry erase marker to share with another group
Supplies Substitutions: There's no need to use stickie notes if you have other scraps of colored paper. Also consider cutting stickies in 4 to make them go further. If you don't have dry erase markers handy consider using pieces of masking tape on the baggies.
Display: Use the activity slides for this lesson to guide the unplugged activity on Variables.
Running the Activity: This activity asks students to follow along as a number of core concepts for programming are introduced. The model is typically that a term or concept is introduced and modeled and then afterwards students are encouraged to try it out on their own. Trying it out typically means they are writing information on a sticky note and sharing it with another group before discussing the results with the whole class.
Slides with animations have an icon in the bottom left corner to let you know you need to click to reveal more of the slide's content.
To help you more easily prepare the activity and keep track of your instructions, detailed instructions have been included as speaker notes in the presentation. Here are some tips to help you throughout the presentation.
- There are opportunities throughout the presentation for students to actively engage. At these moments students should be making things with their manipulatives or using them to answer questions. Use these opportunities to check progress.
- There is a fair amount of new vocabulary introduced but it is introduced gradually and with intentional repetition. Make a point of actively modeling the use of new terms.
- The most important goal here is building a mental model. It is ok if students have some open questions that will get resolved over the subsequent conditional lessons.
- Both you and students can use the "Key Takeaways" to check your understanding at the end.
| Slides | Speaker Notes |
|---|---|
 | Say: Today we are going to explore Variables. |
 | Say: We're going to be thinking about how computers work with information. We're going to call one "piece" of information a "value". Right now there are two different types of values: numbers and strings. There are a few ways to tell them apart. Numbers work the way you normally think of numbers. They are made of the digits 0 through 9. We are going to put numbers on yellow sticky notes. When we write numbers you don't need quotes. Strings are made of any characters you can see on the keyboard which means all these examples count as strings. Strings go inside double quotes. You can see how it would be important to tell the number 123 apart from the string "123". Do This: Make one string and one number and hold it up at your table. |
 | Say: Operator is just a fancy name for the plus, minus, multiply, and divide symbols. An expression is a combination of two sticky notes and an operator. When I ask you "what's 2 plus 3" you say "5"! You just "evaluated" the expression 2+3, or figure out what the value is. Since 5 is a number, we put it on a yellow sticky. When evaluating an expression, we follow order of operations - just like in math class. Do This: Evaluate the expression 5-1 and make a sticky note. Make sure you pick the correct color and decide if you need quotes or not! |
 | Say: This table shows the different ways we can create expressions. We can use all four operators with numbers the normal way. When you want to use strings, you can only use the + operator and it connects the two words together. If you're connecting a number and a string, the number first gets converted to a string. Do This: With your partner make a sticky note for each of these 5 expressions and we'll share as a class.  Click for animation: Click through to see the answers. |
 | Say: We're going to call the plastic baggies on your table "variables". Variables can hold at most one value, or sticky note. They have names that use no quotes, include no spaces, and must start with a letter. For now just practice making a variable with your partner. Do This: Make one variable with any name you like. Share it with another group. Make sure you use a whiteboard marker so we can reuse the baggies later. |
 | Say: We can evaluate expressions that include variable names. To do that, first make a copy of the sticky note inside the variable. Then evaluate the expression the way you normally would. These two examples show you how. **Click for animation: ** Click through to see the answers. |
 | Do This: Evaluate these expressions. Make sure to pay attention to whether it evaluates to a string or a number. Note: Have students share their answers by holding up the sticky notes for each solution. **Click for animation: ** Click through to see the answers. |
 | Say: Now let's write programs. We're going to stop using sticky notes, but will highlight strings and numbers to help you remember the difference. |
 | Say: Here's what a program looks like. The var command tells the computer to create a variable. |
 | Say: The left arrow is called the "assignment operator". That's just a fancy word for "put this value in the baggy". If we wanted to read line 01 we would say "pow gets 3". We know that variables can only hold one sticky note or value. So if we try to assign a variable that already has a value in it, we just throw the old one away. Click for animation: ** Click through to run the program. **Say: In a computer you don't actually put the old number in a trash can, it's totally deleted! The numbers are stored as electrical charges somewhere in your computer's memory. When you assign a new number to a variable it actually erases the old number, and stores the new number in its place. |
 | Do This: Run this program. Compare your results with another group. Note: Walk around the room making sure students are following the rules correctly. No baggies should have more than one sticky note in them. **Click for animation: ** Click through to see the answers. |
 | Say: Now let's combine what we've learned. You can use assignment with expressions. In order for this to work you need to evaluate first, then assign. This makes sense because we know we can only put one sticky note in the variable baggy. |
 | Do This: Run the program. Compare your results with another group. Note: Walk around the room making sure students are evaluating before they assign. Reinforce the language "gets" for the assignment operator. For example, line 02 would read "fly gets two plus day". **Click for animation: ** Click through to see the answers. |
 | Say: We're not going to highlight our strings and numbers anymore. We can just use double quotes around the strings to tell the difference. |
 | Do This: Run through this program together as a class. Note: Reinforce: Evaluate, then assign As shown on line 04, there's no special "connection" made between variables. All we're doing is moving information around. Variables only hold one value, the old one is "thrown away" (again, what's happening is that assignment replaces the electric charges somewhere inside the computer so the old value is actually "erased" or "deleted") **Click for animation: ** Click through to run the program. |
 | Do This: Run this program. Compare your results with another group. Note: Have students hold up their two baggies when they're done. Make sure students are evaluating and then assigning. Call out that last three lines which can be a little nutty to think about. You're using a variable's value as part of the assignment. This lets it "count up by one". **Click for animation: ** Click through to see the answers. |
 | Do This: Review the key takeaways with students. |
 | Say: In some programming languages the assignment operator is not written with an arrow but is written as an equal sign. |
 | Say: Here's how the assignment operator looks in Javascript. We'll see more of this in the next lesson! Note: In math = means "are equal forever". In programming = means "put this value in this variable". |
Wrap Up (5 minutes)
Journal: Have students add the following words to their journals: Expression, Variable, Assignment Operator.
- Expression: a combination of operators and values that evaluates to a single value.
- Variable an abstraction inside the program that can hold a value. Each variable has associated data storage that represents one value at a time.
- Assignment operator: allows a program to change the value represented by a variable.
Remarks
This isn't the last time we'll look at these definitions and it's fine to update them as you get more experience. In fact, I'm sure you'll have a lot more to add once we see all of these concepts used inside of apps when we meet next time!
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.
Question: What will the value of score be at the end of the program?
var score
score <- 3
score <- score + 1
score <- "The score is: " + score
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
