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
November 5, 2023 at 10:28 am
#10942

Participant
Hi, @Jeremy ,
I’m trying to adapt this code following the same rationale, but I’m struggling with that, I cannot display 10 words and make the highlight isolate single words.
newText("words", row.Words.split('_').slice(0,10).join("<br>")) // use slice to get the 10 first words
.cssContainer({
'line-height': '1.5',
padding: '0.5em', // 0.5
'text-align': 'center',
"justify-content": 'center',
"align-items": 'center' ,
'font-size': '50px',
'font-family': 'Arial'
})
.print()
,
newVar("listOfWords", ""), // we'll set this Var element to the next list of words
newVar("nextWordStartsAt").set(10) // this is the index where the next 10 words start
,
newKey("NEXT", " ")
.callback(
// first make sure that the index is within bounds
getVar("nextWordStartsAt").test.is(v=>v<row.Words.split('_').length).success(
// set listOfWords to the next words
getVar("listOfWords")
.set(getVar("nextWordStartsAt")) // first look up the index
.set(v=>row.Words.split('_').slice(v,v+10).join("<br>")) // then use the index+slice to get the next 10 words
,
getText("words").text( getVar("listOfWords") ) // update the content of the Text element
,
getVar("nextWordStartsAt").set(v=>v+10) // the next list of 10 words starts 10 words further
)
)