Lesson 5: Variables

Overview

Question of the Day: How can we use variables to store information in our programs?

In this lesson students learn how to use variables to label a number. Students begin the lesson with a very basic description of the purpose of a variable within the context of the storage component of the input-output-storage-processing model. Students then complete a level progression that reinforces the model of a variable as a way to label or name a number.

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 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 random numbers, in which they will see a more powerful use for variables.

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.

Assessment Opportunities

  1. Identify a variable as a way to label and reference a value in a program

    See the reflection prompt in the Wrap Up.

  2. Use variables in a program to store a piece of information that is used multiple times

    See Level 8 in Code Studio.

Agenda

Lesson Modifications

Warm Up (10 min)

Activity (30 min)

Wrap Up (5 min)

View on Code Studio

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

Preparation

  • Review the level progression in Code Studio

Links

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

For the Teachers

For the Students

Vocabulary

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

Introduced Code

Support

Report a Bug

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (10 min)

Input-Output-Storage-Processing

Discussion Goal

Allow students to share out their different ideas, but eventually bring the conversation back to storage to tie into the lesson topic of variables. Students’ answers may include:

  • input: values passed as parameters, typing into the Game Lab workspace
  • output: shapes shown on the Game Lab screen
  • storage: remembering the code
  • processing: the If/then and matching that turn the code into the pictures on the screen

Prompt: At the beginning of the course, we learned that input, output, storage, and processing were common to all computers. Where do you see input, output, storage, and processing in Game Lab?

Share: Allow students to share out their answers.

Remarks

Today we're going to focus on storage. We're going to look at variables, which are a very common way for computers to store information in a program.

Key Vocabulary: variable - a label for a piece of information used in a program

Question of the Day: How can we use variables to store information in our programs?

Activity (30 min)

Programming with Variables

Transition: Send students to Code Studio.

Wrap Up (5 min)

Reflection

Question of the Day: How can we use variables to store information in our programs?

Assessment Opportunity

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 thing they should understand 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.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Predict

Read the code below and make a prediction.

  • Where will the circle be drawn?
  • What will happen if you change the number in Line 1?
  • Video: Introduction to Variables
  • 3
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

Students should understand that variables hold information and an be accessed using their labels. With simple drawings, students may not see the power of variables, so you may want them to think of some different apps that they use and what information needs to be stored for the app to work, or think about a more complex program that they want to use variables for.

Numbers, text, and colors can all go into variables, as well as more complicated data structures that students will see later in the course.

Student Instructions

Questions to Consider

  • What are variables used to do?
  • How do you create a variable and assign it a value?
  • What can go into a variable?
  • Skill Building
  • 4
  • 5
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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

Teaching Tip

If students use variable names that start with numbers, include spaces, or break other rules, the code may be forced into text mode the next time that they go to that level or refresh the page. To get back into block mode, students will first need to fix the problem with the variable names. Use the red error squares to see where the bugs most likely are, and once they are gone, click the "block mode" button at the top right of the workspace.

Student Instructions

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.

::: details [Hint: Click the arrow for a quick review of the rules.]

  • Labels can't have spaces.
  • Labels can't start with a number.
  • Capitalization and spelling must be exactly the same.

:::

View on Code Studio

Student Instructions

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.
View on Code Studio

Student Instructions

Choose from the following activities to practice using variables.


Choose from the following activities:
a
Changing Variable Value

Make the circle so big it fills up the whole screen.

b
Debug: Variable Names

Fix the variable names to make the pink shapes appear.

c
Debug: Unused Variables

Make this code easier to read by using variables.

d
Debug: Bad Naming

Fix the variable names to make the street light appear.

View on Code Studio

Student Instructions

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 fills the entire screen.
View on Code Studio

Student Instructions

Debug: Variable Names

Something is wrong with the program below in which it cannot seem to create the image on the right. Can you fix it?

::: details [Hint: Click the arrow for a quick review of the rules.] Variable names can't have spaces. Variablenames can't start with a number. * Capitalization and spelling in names must be exactly the same. :::

View on Code Studio

Student Instructions

Debug: Unused Variables

In the code below, variables are created but none of them are actually being used. Can you find spots where they can be used?

View on Code Studio

Student Instructions

Debug: Bad Naming

The following variable here can't be used because of bad naming. Fix the name so you can run the program!

::: details [Hint: Click the arrow for a quick review of the rules.] Variable names can't have spaces. Variable names can't start with a number. * Capitalization and spelling in names must be exactly the same. :::

  • Assessment
  • 8
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Use variables to store and update information

Assessment Criteria:
Extensive Evidence

The eyeSize variable is used such that the two eyes have the same size as defined by eyeSize, with no other unexpected changes. The program is free of syntax errors.

Convincing Evidence

The eyeSize variable is used such that the two eyes have the same size as defined by eyeSize. Other changes to the code may have introduced other unexpected behaviors, or there may be minor syntax errors that do not prevent the code from running.

Limited Evidence

The eyeSize variable has been used somewhere in the program, but not such that it runs as instructed.

No Evidence

There are no changes to the code, or the changes appear unrelated to variables, or variables are used in a way that prevents the program from running.

Student Instructions

Using Variables

This program currently draws a face, but the eyes are two different sizes. Change the program to use the variable for the size of both eyes, and run the code to make sure both eyes are drawn at the same size.

Do This

  • Run the program to see how it works.
  • Change the program to use the eyeSize variable.
  • Run the program with different values for eyeSize and choose your favorite size.
View on Code Studio

Student Instructions

Expand your variables skills with these challenges.


Choose from the following activities:
a
Challenge: Draw an Image

Draw a picture using the shapes and drawing tools you have learned so far.

b
Challenge: Updating Variables

Check with your teacher before tackling this challenge level.

c
Challenge: String Variables

Check with your teacher before tackling this challenge level.

d
Free Play

None

View on Code Studio

Student Instructions

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

Student Instructions

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

Student Instructions

What are the possible colors I can use? For a full list of possible colors you can use, go to W3Schools - CSS Colors.

Challenge: String Variables

Check with your teacher before tackling this challenge level.

So far we've only ever assigned a number value to a variable, but did you know you can give a string value to a variable? Read through the example program we've provided and then modify the program create new images with different colors.

View on Code Studio

Student Instructions

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

View full course 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.