PennController for IBEX › Forums › Support › How to make keypress add a CSS class to text › Reply To: How to make keypress add a CSS class to text

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