Unit5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Lesson 10: Traversals Investigate

App Lab

Overview

In this lesson students work with partners to investigate three different apps that use traversal to access items in a 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 traversals.

Purpose

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

Agenda

Lesson Modifications

Warm Up (0 mins)

Activity (35 mins)

Wrap Up (5 mins)

View on Code Studio

Objectives

Students will be able to:

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

Links

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

For the Teachers

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.

Warm Up (0 mins)

Discussion Goal

Goal: The Traversal Machine let us visualize how a for loop is used to traverse a list and interact with each element in the list one by one.

Prompt: Let's review the Traversal Machine. How did it work?

Activity (35 mins)

Mile Tracker

Teaching Tip

Prepping for Investigate Lessons: The best way to prepare for this lesson is to go through the experience yourself. Check out the three apps in Code Studio to get a sense for how they work. Then move on to the Code Investigation and actually try to answer all the questions for each app. These questions are intended to help students read and make sense of the code. It is not about getting the “right answer” as much as it is about building skills in your students to read, test, and make sense of code that they haven’t seen before. Finally, you will notice that for the levels where the directions ask students to “Modify” the code, you will find “Example Solutions” in the “Teacher Panel” of that level.

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.

Group: Group students into groups of four.

Level 2: Students read the entire code, and then students focuses their attention on a single function. Student should re-read the code for their function.

  • Student A - average() (lines 32-38)
  • Student B - slow() (lines 40-48)
  • Student C - fast() (lines 50-58)
  • Student D - numberedListDisplay() (lines 60-66)

Discuss: Students discuss in their groups how each of their functions work, specifically referencing the list it uses and how it is traversed using a for loop. Then as a class address any confusion over how the app works.

Modify: Students work with a partner to create a function that adds together the total time of every element in the list. Console.log the result. Call this function in the updateScreen() function.

Data Tab Investigate

Level 3 (5 mins): Students read the code, and then investigate the data tab.

  • Discuss: Encourage students to share out what they found in the data tab, and how they can interact with it with code.

  • Modify: Students choose a new dataset to import to the project. Then students modify the code to print out a column of data from the chosen dataset. Point out to students that when they pull out a column, they are creating a list.

Random Dog Picker

Discussion Goal

Discussion Goal: Make sure students arrive at the following answers.

  • What are the names of the five lists in this program?
    • dogNames, dogHeight, dogImages, filteredDogNames, filteredDogImages
  • On what lines of code are the lists created?
    • dogNames: 2
    • dogHeight: 3
    • dogImages: 4
    • filteredDogNames: 7
    • filteredDogImages: 8
  • *On what line's of code are the lists filled?
    • dogNames: 2
    • dogHeight: 3
    • dogImages: 4
    • filteredDogNames: 32-43
    • filteredDogImages: 32-43
  • How are these lists filled?
    • dogNames, dogHeight, and dogImages are filled by pulling a column of data from the dataset
    • For filteredDogNames and filteredDogImages, the dogHeight list is traversed. If dogHeight and dogSize meet the given conditions the names and images at the same index position in the dogNames and dogImages lists are added to the filtered lists.
  • Open up the data tab and click to view the dogs table. What columns does this app use?
    • "Name", "Maximum Height", "Image"
  • Look at the filter function. On what lines are the filtered lists reset to blank lists?
    • Lines 23 & 24
  • What condition is being checked to determine if an element belongs in a filtered list?
    • If a dog height is above or below a certain number

Level 4: Instruct students to run the app and then carefully read it. There is a lot of information in the comments in this app. Students work through all of the questions on the screen.

Teaching Tip

Traversals can be tricky! In this case, we are filtering a list by information that is in another list.

There are three lists to start: dogNames, dogHeights, and dogImages. We want to sort out the dogs so that when the user picks a size from the dropdown, only dogs of that size show up in the display.

To do this, we traverse using a filter pattern. Using a loop to go through each item in the dogHeights list, if a dog's height matches up to the requirements, we pull the dog's image and name from those original lists (all the indexes will match) and put those in the new filtered lists.

Once this is done, we have filtered lists that we can pull from to display a random dog's name and image.

Discuss: Go through the questions one by one and answer as a class. Afterwards, go line by line with the class explaining how the app works.

Levels 5-6: Review the patterns in these levels as a class.

  • Have students add any relevant notes about the patterns to their journals.
  • Discuss which patterns were used in the apps today.

Wrap Up (5 mins)

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

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.

Question: Explain how you would filter the dog dataset using traversal to have a filtered list of dogs who live long lives.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 3A-AP-14 - Use lists to simplify solutions, generalizing computational problems instead of repeated use of simple variables.
  • 3B-AP-10 - Use and adapt classic algorithms to solve computational problems.
  • 3B-AP-23 - Evaluate key qualities of a program through a process such as a code review.

CSP2021

AAP-3 - Programmers break down problems into smaller and more manageable pieces
AAP-3.F - For simulations: a. Explain how computers can be used to represent real-world phenomena or outcomes. b. Compare the use of simulations with real-world contexts.
  • AAP-3.F.1 - Simulations are abstractions of more complex objects or phenomena for a specific purpose.
  • AAP-3.F.2 - A simulation is a representation that uses varying sets of values to reflect the changing state of a phenomenon.
  • AAP-3.F.3 - Simulations often mimic real-world events with the purpose of drawing inferences, allowing investigation of a phenomenon without the constraints of the real world.
  • AAP-3.F.4 - The process of developing an abstract simulation involves removing specific details or simplifying functionality.
  • AAP-3.F.5 - Simulations can contain bias derived from the choices of real-world elements that were included or excluded.
  • AAP-3.F.6 - Simulations are most useful when real-world events are impractical for experiments (e.g., too big, too small, too fast, too slow, too expensive, or too dangerous).
  • AAP-3.F.7 - Simulations facilitate the formulation and refinement of hypotheses related to the objects or phenomena under consideration.