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:

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

Preparation

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

Getting Started (5 mins)

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


Activity (30 mins)

Group: Group students in pairs.

Distribute: Give each pair of students:


Teaching Tip

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. 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.

Guided Activity

Slide: Activity Title

Say: Today, we are going to explore lists.


Slide: var myName = "Jose"

Say: We've already learned that variables can help us store one piece of information.


Slide: But what if we have a lot of information?

Say: But what if we have lots of information?

Do This: 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.

Discuss: 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.


Slide: Creating and Accessing Lists

Say: Let's look at how to use lists.


Slide: Lists

Say: Today 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:

Note: 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.

Do This: 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.


Slide: Your list is made up of elements.

Say: 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"

Slide: Notice that all the bags can be folded up...

Say: 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


Slide: var myList = ["pizza", 4]

Say: Let's create this list using a command.

myList:
0. "pizza"
1. 4

Say: In 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]

Say: 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")

Do This: 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.


Slide: myList[1]

Say: 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]

Say: 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"

Do This: Have students discuss with other groups. They should see the answers are "nachos" and "soup"


Slide: Lists and Expressions

Say: We 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.

Say: This first expression evaluates to 23 because myNumbers contains 20 at index 1.

Click for animation.

Say: The second expression evaluates to 35 because myNumbers[0] and myNumbers[2] contain 25 and 10.

Do This: 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.


Slide: myList[1] = "hello"

Say: We can assign the index of a list just like a variable.

Do This: 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.

Say: This code will assign new values at indexes 0 and 2 in the list.


Slide: Do This: Run this program...

Say: 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))

Note: 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.

Discuss: Quickly discuss with the class what the list looks like at the end of the program.


Slide: Do This: You can use expressions...

Say: 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))

Do This: Circulate the room while students run this program.

Click for animation.

Discuss: Discuss quickly with the class what the list looks like when the program ends.

Note: The last line is tricky. You need to first evaluate myStuff[0] which is 25 to determine the value being assigned. Then evaluate myStuff[2], which is 3. At this point, the command reads myStuff:Set(3, 25). Now it is just a simple set command.


Slide: Changing Your List

Say: Now let's learn about three different commands that can change your list.


Slide: removeItem(list, index)

Say: 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.

Do This: 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: Discuss with the class any questions.


Slide: appendItem(list, item)

Say: 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.

Do This: 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: Discuss with the class any questions.

Note: 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.


Slide: insertItem(list, index, item)

Say: 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.

Do This: 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)

Discuss: Discuss with the class any questions.


Slide: Do This: Run this program...

Do This: 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")

Discuss: Discuss with the class any questions.


Slide: Do This: Run this program... (2)

Do This: 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: Discuss with the class any questions.


Wrap Up (10 mins)

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

Standards Alignment