Lists, Loops, and Traversals - Lesson 1: Lists Explore

Overview

Students will learn the ways that lists are created, accessed, and changed through a teacher-guided activity using plastic baggies and pieces of paper. The lesson begins with a brief reflection on the value of lists. Students then complete the main activity which introduces the syntax to use lists and the ways they can be used. To wrap up students watch two short videos on lists and record the main concepts in their journals.

Goals

Students will be able to:

  • Use appropriate vocabulary to describe lists.
  • Use an index to reference specific elements in a list

Purpose

In the warmup, students brainstorm different lists of information that they encounter on a daily basis. Then in the activity, students return to baggies and sticky notes from the previous unit to build a concrete model of a list before seeing how lists are programmed in Javascript and Quorum. Students are exposed to different ways of interacting with a list like accessing, removing, appending, and inserting elements. The wrap up concludes the lesson with a summary video and a journal vocabulary exercise.

Resources

For the students

Supplemental code.org material

Preparation

If you want to use physical manipulatives for this lesson, you'll need to prepare the following:

  • 7+ sandwich baggies per pair of students
  • 1 gallon-sized baggy per pair of students
  • packs of red and orange stickies
  • pens / pencils
  • 1 dry erase marker per four students (pairs can share)
  • If you are using the slides, review them and click through all animations

Getting Started (5 minutes)

Prompt: With a partner, brainstorm lists of information that you encounter on a daily basis. Why are lists useful?

Discuss: Have students discuss with a partner and then have a few students share out their responses.

Discussion Goal
  • Lists help us group together like information
  • We can go through a list item by item to check off things we have completed
  • Lists help us stay organized

Group: Group students in pairs.

Distribute: Give each pair of students:

  • A small stack of red and orange sticky notes
  • A pen/pencil
  • 7+ snack-sized plastic baggies
  • One gallon-sized plastic baggy
  • A dry erase marker to share with another group
Teaching Tip

Supplies Substitutions: There's no need to use stick 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. The gallon-sized baggie can be replaced with any baggie that is large enough to hold the snack-sized baggies.

Alternatives for Accessibility or Distance Learning: Instead of using the physical materials listed here, you can use alternate physical or digital materials that are more convenient for your class.

Similar to Unit 4 Lesson 1, you can have pairs of students share an online document as their workspace. Students can use numbered lists in the document to represent lists, where each line in the list represents an element of the list. Have students store strings using quotes and numbers without quotes.

Whatever approach you use, the goal is to teach students about the concepts of lists, especially how information can be stored and accessed by using specific "addresses" in the list.

Guided Activity: Today's activity introduces students to the concept of lists. As a visual aid, you can use Code.org's presentation slides for Unit 5, Lesson 1: Lists Explore. These slides include animations. The notes below describe when to move to the next slide or click through an animation -- if you aren't using the slides, you can ignore these prompts.

Discuss: Discuss with the class any questions.

Activity (30 minutes)

Guided Activity

Follow this lesson with the supplemental slides.

Lecture Slides
SlideSpeaker Notes
Activity TitleToday, we are going to explore lists.
var myName = "Jose" We've already learned that variables can help us store one piece of information.
But what if we have a lot of information? But what if we have lots of information? With a partner, discuss the challenges that you'd encounter if you need to store 10, or 100, or 1,000 pieces of information using variables. Lead a short discussion on the challenges they'd encounter. The main challenges are that you'd need to make a variable for each piece of information and it could get difficult to name them all.
Creating and Accessing ListsLet's look at how to use lists.
ListsToday we're going to practice using a new way to store information called a list. Follow the instructions here to make a list of your own: art with a number)
  • Gallon baggie connected to smaller baggies
  • Gallon baggie connected to smaller baggies
  • Gallon baggies are named with the same rules as a variable (no spaces, can't start with a number)
  • Smaller baggies are numbered starting at 0
If you are using alternative materials, you may need to provide different instructions here. Also, if you are using an online document, it's okay to let students start numbering their lists from 1 instead of 0. There will be other opportunities to show how indexing starts at 0 in lists later. Have students create their own lists that holds between 2 and 4 values, then share with another group. Circulate the room to check on how they're doing.
Your list is made up of elements. Your list is made up of elements. Each element has its own index. Indexes are just numbers that count up from zero. The length of the list is how many elements it contains. This list has 3 elements and indexes from 0 to 2.
Books:
0. "Redwall"
1. "Hunger Games"
2. "Wrinkle in Time"
Notice that all the bags can be folded up...Notice that all the bags can be folded up and be placed inside the big variable baggie. Sometimes we want to think about the whole list, sometimes we want to think about individual elements
var myList = ["pizza", 4] Let's create this list using a command.
myList:
0. "pizza"
1. 4
Variable CreationIn JavaScript, we would use this command. It creates a new list and assigns it to a variable. The square brackets indicate we're making a list. Each value is separated by commas.
var myList = ["pizza", 4]
In Quorum, the code looks different. We make an "Array" variable (which is just another name for lists). Then we add the items to it. In Quorum, we use the angled brackets to indicate what type of variables are allowed to stay in the list.
Array<text> myList
myList:Add("pizza")
myList:Add("4")
Have students write the code to make their own list and the list of partner group. By sharing their answers with another group they can check that they're following along.
myList[1]If we want to access the values in our list, in Javascript we use the square brackets next to the name of our list.
myList[1]
In Quorum, we use the "Get" command instead.
myList:Get(1)
Question: What does lunchFood[0] access in Javascript? What does lunchFood:Get(2) access in Quorum?
lunchFood:
0. "nachos"
1. "pizza"
2. "soup"
Have students discuss with other groups. They should see the answers are "nachos" and "soup"
Lists and ExpressionsWe can use list accesses inside of expressions, just like variables. Let's look at a list and some expressions.
myNumbers:
0. 10
1. 20
2. 25
3 + myNumbers:Get(1)
myNumbers:Get(0) + myNumbers:Get(2)
Click for animation. This first expression evaluates to 23 because myNumbers contains 20 at index 1. Click for animation. The second expression evaluates to 35 because myNumbers[0] and myNumbers[2] contain 25 and 10. Have students write three expressions using their own lists. Then have them trade with another group to practice evaluating. Circulate the room to make sure students are following the directions correctly.
myList[1] = "hello"We can assign the index of a list just like a variable. Show students the lines of code on the slide, or present them with the Quorum code below. Have students discuss what the list will contain after the last line runs
Array<integer> myList
myList:Add(10)
myList:Add(20)
myList:Add(25)
myList:Set(0, 5)
myList:Set(2, 30)
Click for animation. This code will assign new values at indexes 0 and 2 in the list.
Do This: Run this program...Have students "run" the program on the slide or the code below.
Array<text> myStuff
myStuff:Add("20")
myStuff:Add("hat")
myStuff:Add("pow")
myStuff:Add("5")
myStuff:Set(1, "cat")
myStuff:Set(2, myStuff:Get(1))
myStuff:Set(0, myStuff:Get(3) + 10)
myStuff:Set(3, myStuff:Get(0) + myStuff:Get(0))
Although the lists in Quorum and Javascript are similar, running each section of code will give different results. The list in Quorum only allows strings, while the Javascript list allows any kind of variable in each position. That means that the integers will be concatenated onto the end of the strings in Quorum, instead of adding integers together. Click for animation. Quickly discuss with the class what the list looks like at the end of the program.
Do This: You can use expressions...You can use expressions in the place of the list index. Run this program and compare your result with another group.
Array<integer> myStuff
myStuff:Add(25)
myStuff:Add(400)
myStuff:Add(3)
myStuff:Add(10)
myStuff:Set(2 - 1, 80)
myStuff:Set(myStuff:Get(2), myStuff:Get(0))
Circulate the room while students run this program. Click for animation. Discuss quickly with the class what the list looks like when the program ends.
Changing Your ListNow let's learn about three different commands that can change your list.
removeItem(list, index)The RemoveAt command will remove an item from an array. The item at the index given is removed, items to the right are shifted over, and the last index is removed. Have students discuss what the list will show after this command.
Array<integer> myNumbers
myNumbers:Add(10)
myNumbers:Add(20)
myNumbers:Add(25)
myNumbers:RemoveAt(1)
myNumbers:RemoveAt(0)
Click for animation. Discuss with the class any questions.
appendItem(list, item)The Add command adds an item to a list. As we've seen, a new index is added to the end of the list and the new item is placed in it. Have students discuss what the list will show after this command
Array<integer> nums
nums:Add(10)
nums:Add(50)
nums:Add(100)
Click for animation. Discuss with the class any questions. If you're using the slides, this slide introduces a new command in Javascript. In Quorum, this is the same command that we have already used to make our lists. You can use this slide to highlight the difference between the standard Add command and the command on the next slide, or you can choose to skip it.
insertItem(list, index, item)We can also use the Add command to add an item to the middle of a list. The item is placed at the index given. The old item at that index, plus all of the items to the right, are moved over one space to make room. A new index is added to the end of the list for the last item. Have students discuss what the list will show after this command.
Array<integer> nums
nums:Add(10)
nums:Add(50)
nums:Add(1, 20)
nums:Add(1, 100)
Click for animation. Discuss with the class any questions.
Do This: Run this program...Have students run this program. Circulate the room to support them with any questions.
Array<text> aList
aList:Add("20")
aList:Add("hat")
aList:Add("pow")
aList:Add("5")
aList:Add("10")
aList:Remove(1)
aList:Add(2, "bang")
Click for animation. Discuss with the class any questions.
Do This: Run this program... (2) Have students run this program. Circulate the room to support them with any questions.
Array<text> bList
bList:Add("to")
bList:Add("5")
bList:Add("po")
bList:Add(bList:Get(2) + "ta" + bList:Get(0))
bList:Add(2-1, "go")
bList:Remove(2)
Discuss with the class any questions.
var myName = "Jose" We've already learned that variables can help us store one piece of information.

Wrap Up (10 minutes)

Remarks

Videos: As a class, watch both videos on lists.

Do This: Review the Key Takeaways below and have students add to their journals: lists, element, and index.

Key Takeaways

  • A List is an ordered collection of elements
  • An Element is an individual value in a list that is assigned a unique index
  • An index a common method for referencing the elements in a list or string using numbers
  • The length of a list is how many elements it contains. Lists can grow or shrink as elements are added or removed.
  • Lists are an example of data abstraction. They allow us to name and program with large collections of information while ignoring the low level details of how the data is stored, organized, etc. These programs are easier to develop and mantain.

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

Match the index in the following list with the value from the array in the code snippet. For example in the array at the index of 1 is the value 64.

var myNumbers = [32,64,33,0,15,26,3]
  • 0
  • 4
  • 3
  • 6

Standards Alignment

  • CSTA K-12 Computer Science Standards (2017): 3A-AP-14
  • CSP2021: AAP-1.C.1, AAP-1.C.2, AAP-1.C.3
  • CSP2021: AAP-2.N.2
  • CSP2021: AAP-2.O.3, AAP-2.0.4

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 5 Lesson 2, which describes Investigating lists in apps.

Next Tutorial