Hi Larissa,
Part 1: You got it; we embed each word in a span so that the flex display can render them as distinct elements, as otherwise adding them as simple text nodes wouldn’t work
Part 2: You can read this documentation page to see how PennController elements are rendered in the DOM. cssContainer affects the container element (the one with the .PennController-Text-container class), .css affects the element itself (the one with the .PennController-Text class). The space reserved for each word is the width you set for the .word class
Part 3:
1) If you tested for 0, then you would only run the code in callback once when the index is still 0, ie. when pressing space when the first word is highlighted, and then it wouldn’t run again on later key presses, because the value would be greater than 0. The test is just here to make sure that the code in callback won’t be run with an index that would be out of bounds
3) getVar("listOfWords").set(getVar("highlightedWord")) sets the value of “listOfWords” to the same value as “highlightedWord”, ie. the current index. The next set command uses a function whose parameter represents the current value of the Var element, so we can refer to it in the body of the function: because we just set “listOfWords” to the current index, v in the body of the function refers to the current index, and ${i==v?'highlighted':''} will therefore include the highlighted class only for the word at the current index
The CSS rule on .word will apply to each individual span inside the Text element’s DOM node; using the .css command on the Text element affects the whole node containing all the span elements, it doesn’t affect each span individually; using the .cssContainer command would be even worse, so to speak, because it would apply yet another level up the DOM hierarchy
Re. the heights and widths, I refer to the ones where I commented “3 times”: just calculate 4 times instead
Jeremy