Ch. 1
Ch. 2

# Lesson 5: Variables

## Overview

In this lesson students learn how to use variables to label a number in their program or save a randomly generated value. Students begin the lesson with a very basic description of the purpose of a variable. Students then complete a level progression that reinforces the model of a variable as a way to label or name a number. Students use variables to save a random number to see that variables actually store or save their values, allowing them to use the same random number multiple times in their programs.

## Purpose

This lesson is the first time students will see variables in the course, and they are not expected to fully understand how variables work by its conclusion. Students should therefore leave this lesson knowing that variables are a way to label a value in their programs so that they can be reused or referenced later. In the following lesson students will be introduced to sprites, which need to be referenced by a variable.

Using variables to manipulate drawings is a surprisingly challenging skill that requires a great deal of forethought and planning. While students will use or modify many programs in this lesson, they are not expected to compose programs that use variables to modify the features of a drawing. In later lessons, students will expand their understanding of variables and more advanced ways they can be used.

## Objectives

### Students will be able to:

• Identify a variable as a way to label and reference a value in a program
• Use variables in a program to store a piece of information that is used multiple times
• Reason about and fix common errors encountered when programming with variables

## Preparation

• Review the level progression in Code Studio

Heads Up! Please make a copy of any documents you plan to share with students.

## Vocabulary

• Variable - A label for a piece of information used in a program.

## Introduced Code

• ``` Declare and assign a value to a variable ```
• ``` Declare a variable ```

# Teaching Guide

## Warm Up (10 Mins)

### Labels and Values

Teaching Tip

Avoiding Frontloading: While this lesson begins with two resources that explain how variables work, they'll likely be more meaningful to students once they have used variables in the drawing programs. Make sure students know these resources are available, and then return to them if you like at the end of the lesson to help in sense-making.

Video: As a class watch the video introducing variables.

Review: Students can review the most important points from the video on the map level in Level 4. Students don't need to understand all of these ideas right now, but they can use this level as a reference throughout the lesson.

Remarks

There's a lot to learn about variables and we'll be seeing them throughout this unit. Today we're going to see them used to help us draw pictures. The most important thing we care about today, though, is just seeing how giving a label to a value helps us write programs.

## Wrap Up (5 Mins)

### Reflection

Discussion Goal

Goal: Use this discussion to assess students' mental models of a variable. You may wish to have students write their responses so you can collect them to review later. You should be looking to see primarily that they understand that variables can label or name a number so that it can be used later in their programs. While there are other properties of a variable students may have learned, this is the most important before moving on to the next lesson.

Prompt: Give students the following prompts

• What is your own definition of a variable?
• Why are variables useful in programs?

Discuss: Have students silently write their ideas before sharing in pairs and then as a whole group.

Teaching Tip

Input-Output-Store-Process: The model students learned in Unit 1 might be nice to reference here. Students are storing information in a variable which means they are saving that information in memory.

CSS Classes: If students studied CSS classes in Unit 2 then they may be familiar with the act of creating a name for something in their programs in order to be able to reference it. While the context here is different, the idea of naming remains the same.

Journal: What connections do you see between variables and what you learned about the Input-Output-Store-Process model of a computer?

View on Code Studio

# Overview

This lesson introduces variables as a way to label a number in a program or save a randomly generated value. The class begins the lesson with a very basic description of the purpose of a variable and practices using the new blocks. Afterwards, the class uses variables to save a random number, allowing the programs to use the same random number multiple times.

## Vocabulary

• Variable - A placeholder for a piece of information that can change.

## Resources

• Intro to Variables
• 3
• (click tabs to see student view)
View on Code Studio

# Using Variables

In this program, the variable `xPosition` is used to store the x-coordinate of the circle.

# Do This

• Run the program to see how it works.
• Change the number that is stored into the variable (Show me where) and run the code again.
• Intro to Variables
• 5
• 6
• 7
• (click tabs to see student view)
View on Code Studio

# Predict

In which corner of the screen will the circle be drawn?

Hint: Click the "Show grid" box to help you find the exact coordinates on the screen.

View on Code Studio

# Debug: Using Variables

This program uses the variable `circleSize` to control the width and height of a circle. If you make the circle big enough, it will fill up the entire screen, as in the picture on the right.

# Do This

• Change the value assigned to `circleSize` so that the circle takes up the entire screen.
View on Code Studio

# Using a Variable Many Times

This program has only one variable called `petalSize` but it uses it 8 different times. This makes it easy to quickly make lots of changes to how your picture is drawn.

# Do This

• Change the number assigned to `petalSize` so the red petals touch one another.
• Try to find the size that makes the most sense. Compare your answer with someone around you.
• Intro to Variables
• 9
• 10
• (click tabs to see student view)
View on Code Studio

# Debug: Naming Variables

This program has multiple errors caused by bad label names. The errors prevent the program from being viewed in block mode, so the code is in text.

# Do This

• Find the rule each variable label violates.
• Correct the errors by picking new names that follow the rules you learned in the last level.
• If your program works it should draw the image on the right.

Hint: Click the arrow for a quick review of the rules.
• Labels can't have spaces.
• Capitalization and spelling must be exactly the same.

View on Code Studio

# Debug: Variables and Random Numbers

Variables can be assigned a random number too. This lets you save a single random value so that you can use it as many times as you want in your program.

# Do This

`eyeSize` is assigned a random number. Unfortunately only one of the eyes is currently using it.

• Run the program to see how it works.
• Change the program so that both eyes are always the same random size. Hint: you'll only need to make changes to one line of code.
View on Code Studio

# Challenge: Draw an Image

Check with your teacher before tackling this challenge level.

Using variables, draw an image where many of the items rely on a common variable for size or placement. For example, draw a face with variables controlling the size and/or placement of both eyes, ears, and nostrils. Once you have your drawing completed, try changing the values of your variables to make sure that the whole image changes together.

View on Code Studio

# Challenge: Updating Variables

Check with your teacher before tackling this challenge level.

So far we've only ever assigned a value to a variable once, but did you know you can update a variable during a program? Read through the example program we've provided, run it a few times to understand how it works, and then attempt to modify the program to draw one of the following images.

View on Code Studio

# Free Play

Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.

## Standards Alignment

#### CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
• 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
• 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
• 2-AP-17 - Systematically test and refine programs using a range of test cases.
• 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.