Javascript in Lectora Lesson 09

Rollover and click the properties image on the left to see what to click and the bigger window.

Clicking the  2 buttons above runs a Javascript function that colors a textblock

HTMLName = text8613

In this lesson we focus on how to interact with text inside Lectora. Basically there are a few options to change the look and feel and the content of a textblock inside Lectora.

As you can see, Lectora splits texts in spans when using returns in the text. Thus not all the text will be colored by the standard script on button 1 and 2. To ensure all text in a textfield gets colored we need to get to ALL the spans in a Html element.


To make sure you get all spans in a textblock check out how its done in the function on button 3.

Basically this function uses the selector querySelectorAll to get all the spans in a given textbox.


Then with a simple loop it loops through all spans in the textelement and changes them. Check the external Javascript file how its done.


Offcourse we can do much more with text in Lectora with Javascript. This is the basics of targeting a Lectora textfield overcoming the spans in it.


In next lessons i will show some quite cool texteffects that are possible with Javascript in both Lectora and Storyline.

Offcourse we are doing all with Javascript.

HTMLName = text9278

HTMLName = text10276

The function run by this button will color all spans in a textblock