Lists, Loops, and Traversals

Lists, Loops, and Traversals - Lesson 2: Lists Investigate

Overview

In this lesson students work with partners to investigate three different apps that use lists. Students first explore all three apps without seeing the code to notice similarities and predict how they will work. Then they explore the code itself and make additions and modifications to the apps. To conclude the lesson, students review and discuss common programming patterns with conditionals.

Goals

Students will be able to:

Identify common programming patterns using lists
Explain the purpose of programming patterns with lists both in terms of how they work and what they accomplish
Modify apps that make use of common programming patterns with lists to adjust their functionality

Purpose

After building a conceptual model for list and list operations in the previous lesson, this lesson allows students to see how they are actually implemented in code. This lesson also introduces common programming patterns when using lists. Students will have some opportunities to modify working code in this lesson, but the most significant practice with lists will come in the following lesson.

Resources

For the students

Getting Started (5 minutes)

Prompt: What are some similarities and differences between variables and lists? How does a list manage complexity in a program?

Discussion Goal

Students may bring up the following points:

Both are used to store information
Lists store multiple items, but variables only store one
When written in Javascript, both start with the keyword var
In Quorum, lists are declared differently than variables
In Quorum, both variables and lists have types, and can only hold that specific type of information

Managing complexity:

You don't need to know how a list is created in order to use it - all you need is the name. There is a separation between the abstract properties of the data type (list) and the concrete details of its representation.
Programs that use lists are easier to read and manage - separate variables are not needed for each individual element

Activity (35 minutes)

Accessing Lists (20 minutes)

Teaching Tip

Finding Target Responses: With a verified teacher account you should be able to see target responses to each question posed on each level.

Prepping for Investigate Lessons:The best way to prepare for this lesson is to go through the experience yourself. Check out both apps to get a sense for how they work. Then watch the videos. Then move on to the Code Investigation and actually try to answer all the questions for each app.

Show Videos at the Front: Show videos at the front of the room rather than having students watch them individually. It will be a good opportunity to bring the room back together.

Display Code at the Front: If your room allows it, display the code during the Code Investigation at the front of the room. When students mentions specific lines of code actually scroll to that line and read through it together.

Level 1 - Video: Show Introduction to Lists - Part 4 (Video). This video explains how to determine the length of a list in Javascript. In Quorum, the concepts are the same, but the code looks slightly different. Instead of using myList.length, the code in Quorum would be myList:GetSize().

Group: Place students in pairs.

Level 2 - Open a Project: Direct students to open Lesson2_App1 and investigate the Outfit Picker app. Each pair should read the app carefully and prepare answers to the questions for their app.

Discuss: Have pairs match up with another pair, forming a group of four. Each pair should spend ~5 minutes walking them through the way that the app works and what they learned specifically from answering each question. Afterwards discuss any open questions that they couldn't answer with the room.

Discussion Goal

Use this paired-group discussion to push students on using new vocabulary associated with lists and referring/pointing to specific lines when explaining their answers to the questions. Both programs use .length in ways that might be challenging for students to understand. Demonstrating the difference between using .length and .length-1 to the class could be useful.

Modify: Have pairs modify the app the investigated based on the instructions for the particular app.

Chaning Lists

Level 4 - Video: Show Introduction to Lists - Part 3 (Video). This video explains how inserting and removing elements in a list in Javascript works. Once again, the concepts are the same in Quorum, but the code is different. Inserting and removing elements in Quorum is done using the Add(index, element) and RemoveAt(index) commands, respectively.

Level 5 - Pair Maker: Have all pairs investigate Lesson2_App2 on their own, answering the questions listed in the code of the Pair Maker app.

Discuss: Have pairs match up with another pair forming a group of four. The group should spend ~5 minutes discussing their responses to each of the questions. Bubble up confusion points or open questions to the room.

Discussion Goal

Make sure students understand how the properties of the dropdown and the lists are working together in this program. Demonstrating how to find these properties and play around with them in design mode might help your students better understand the connection.

Modify Apps: If there is time remaining, have pairs return to one or more of the apps and make the suggested modifications.

Wrap up (5 Minutes)

Levels 6-7 Patterns Review: Review the patterns below as a class.

Have students add any relevant notes about the patterns to their journals.
Discuss which of the three apps you think were using which pattern.

Random List Access Patterns

integer index = 0
Array<text> fruitList
Label fruitLabel = undefined

action Start
    fruitList:Add("banana")
    fruitList:Add("apple")
    fruitList:Add("pear")

    // Other code here for setting up an app...
end

action ButtonActivated(Button button)
    index = RandomNumber(0, fruitList:GetSize() - 1)
    UpdateScreen()
end

action UpdateScreen
    fruitLabel:SetText(fruitList:Get(index))
end

How does it work?

Many projects run in the following way.

The user is interested in seeing items in a list, like a list of favorite foods, or a list of reminders.
The app shows the user one item in the list at a time.
By clicking buttons (or otherwise interacting with the app) a new random item in the list is shown to the user.

This pattern allows a user to see random elements in a list. In order to make it work, create an index variable and a list. Then generate a random number between 0 and the length of the list minus one and set the index to that value. Then update the screen.

List Scrolling Pattern

integer index = 0
Array<text> fruitList
Label fruitLabel = undefined
Button leftButton = undefined
Button rightButton = undefined

action Start
    fruitList:Add("banana")
    fruitList:Add("apple")
    fruitList:Add("pear")

    // Other code here for setting up an app...
end

action ButtonActivated(Button button)
    if button = leftButton
        if index > 0
            index = index - 1
        end
    elseif button = rightButton
        if index < fruitList:GetSize() - 1
            index = index + 1
        end
    end
    UpdateScreen()
end

action UpdateScreen
    fruitLabel:SetText(fruitList:Get(index))
end

How does it work?

Many projects run in the following way.

The user is interested in seeing items in a list, like a list of favorite foods, or a list of reminders.
The app shows the user one item in the list at a time.
By clicking buttons (or otherwise interacting with the app) the user can move back and forth through the list, one item at a time, to see every item.

This pattern allows a user to "scroll" through all the items in the list. In order to make it work, create an index variable and a list. Then use the "Counter Pattern with Boundary" pattern to create event handlers to change the value of the index.

This pattern makes sense to use with the UpdateScreen pattern since you will need at least two buttons for scrolling left and right through the list but afterwards will use the same code to update the screen.

Synthesis

Prompt: What aspects of using lists do you feel you already understand? What questions do you want to dig into more tomorrow during the practice lesson?

Discuss: Have students write in their journals, then share with a neighbor, then finally discuss as a class.

Discussion Goal

Discussion Goal: Use this discussion to identify any points of confusion that will need to be reviewed in coming lessons.

Standards Alignment

CSTA K-12 Computer Science Standards (2017): 3A-AP-14, 3A-AP-23
CSP2021: AAP-1.A.3, AAP-1.A.4
CSP2021: AAP-1.D.1, AAP-1.D.2, AAP-1.D.3, AAP-1.D.4, AAP-1.D.5, AAP-1.D.6

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 5 Lesson 3, which describes Practice using lists.

Go Back Next Tutorial