Unit 7; Lesson 2 Level 3 Word Program

CS Principles Unit and Lesson Discussion
1

I’ve been teaching the code.org curriculum for several years and with little previous programming background have been able to manage. However, I’m at a loss with Unit 7 Lessons 1-4 because I’ve never seen this material before. I was able to pick up some good advice answering the activity guide questions in this forum for L2, bubble 2 but need help understanding Lesson 2, bubble 3; Word Program. Can someone please help me with these questions?

  1. Lines 1 - 14: Read the code carefully. What is happening here?

  2. Read the function on lines 15-34 carefully. After you are done, explain how the function works, what parameters it takes and what is returned.

  3. How does the Word Game Helper work?
    Thanks.

7

Lines 1-14: Line 1 loads the "Words" database specifically the column "Word".

Line 2 declares a new variable and assigns it an empty array value. The name suggests it will hold a subset of the wordList array.

Lines 6-8 create an event handler in case the length changes. The function filter changes the words being displayed for us. Lines 10-12 are another event handler for when the leading letter changes. It also calls filter.

Going back to line 4 we are calling filter to display an initial subset of words. By default, those are 1 letter long words that begin with a.

Lines 15-34: This crazy filter function takes two parameters len and letter. I am not a big fan of abbreviations, but most don’t care.

Lines 16 and 17 guards against too many clicks too fast. They show the international symbol for “wait you fool” and cover the buttons so you can’t click them.

Line 18 re-initializes the variable filteredWordList to an empty array value. That variable doesn’t need to be initialized in line 2 because we do it here as well.

Line 19 erases any previously displayed words. Clearly, this is written to allow the length and first letter to change on the fly.

Lines 21-25 do the actual filtering based on the length and the first letter. filteredWordList now has a subset of wordList just as we suspected it would.

Lines 27-29 test if there are any words that meet our criteria at all. If not we create a special output value.

Lines 31 and 32 make our program interactive again.

Line 33 takes the filteredWordList and shows those words (or our nothing here message) on the screen.

The filter function actually returns undefined because there is no return statement. It does have a side effect, which is to show a subset of words that meet the criteria set forth by the parameters.

1 Like
8

Hi Margaret!

Let’s take a look and walk through the questions:

  1. The first 14 lines of the code are doing two things:
    a. “Setting up” the app (the variables at the top of the program and a call to filter which pre-populates the text box with the default value of words of length 1 that start with ‘a’).
    b. Creating two events that update the textbox by using the filter function whenever the letter or length drop downs are changed.

  2. On lines 15-34 are the filter function. A few things to note:
    a. This is an opportunity for students to trace code, focusing on the parameters and return statements. The len and letter are parameters that are used on line 22. It is perhaps helpful to have students look not only at the function filter, but where it is being called as well to see what the input values actually are.
    b. Every time filter is called filteredWordList is reset to an empty list, this makes sure that multiple calls don’t get muddied by one another.
    c. This function includes loading images that are shown at the beginning, and removed after the process is over. They don’t show up for very long… but it is interesting to note that any time that they are visible is the processing time for the for lines 21-29.
    d. filteredWordList.join(", ") will create a string which joins all of the elements of the list filteredWordList with a comma in between each value.

  3. The Word Game Helper works by creating a new list of words that meet a particular criteria (a length and a starting letter) based on an event trigger. This list is filtered from from wordList, a global variable that is accessible both inside and outside of the function. Once a new filtered list has been created it is displayed to the user in the textbox.

2 Likes