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:

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

Getting Started (5 mins)

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:

Managing complexity:


Activity (35 mins)

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.

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.

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.

Open a Project: 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.

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

Teaching Tip

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.

Save Modifications for the End: This lesson can be tight on time. Rather than have students modify the code all at once, you can save modifications for the end of the Code Investigation and have students pick a single app they wish to modify.


Wrap Up (5 mins)

Patterns Review: Review the patterns below as a class.

Random List Access Pattern

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.

  1. The user is interested in seeing items in a list, like a list of favorite foods, or a list of reminders.
  2. The app shows the user one item in the list at a time.
  3. 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.

  1. The user is interested in seeing items in a list, like a list of favorite foods, or a list of reminders.
  2. The app shows the user one item in the list at a time.
  3. 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: Use this discussion to identify any points of confusion that will need to be reviewed in coming lessons.


Standards Alignment