Reply To: How to make keypress add a CSS class to text

[Larissa_Cury]

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
            )
        )