Transforming words in a textbox into hotwords

mlapl1 Community Member Posts: 349 ☆ Roadie ☆
Hello. I asked the question about a year ago, so maybe it is time to ask it again :)

Is it possible to EASILY transform words in a textbox into hotwords?

Thanks for any ideas.


  • approg
    approg Community Member Posts: 258 ♪ Opening Act ♪
    I think what you want is demonstrated here: Word click interaction
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thank you - that's a great suggestion, Sergey's code is always great. However, when I first look at the code, it seems to me that whoever produces the lesson will need to code in javascript. Unfortunately, that may not always be possible or even desirable. It needs to be really quite simple.

    I have come up with something that works reasonably well and is easily understood by non-programmers: Turn the "hotwords" into links, remove the underline and blue colour.  This makes them look the same as all the other words. Clicking on the links will trigger an action. Only issue is that the cursor changes shape when it hovers over the links. Two solutions I guess, change the shape of the cursor for links when in the text box. Transform the rest of the text into links which do nothing. I will create another post asking how to change the shape of the cursor, but I do not see a Lectora action which is "on enter" a textbox.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Like this?
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Hello Jennifer.

    Thanks for the message. Don't know if it works as: the zip file you sent seems to be the wrong one as it (a) does not contain an .awt file and (b) It seems to be an advertisement for Lectora OnLine... am I not looking in the right place?



    PS Did you receive my email to you about a previous matter?
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    I sent over the HTML files so you could preview the files.  I'll also attach the working files now as well. I passed your email along to the marketing team but I noticed they haven't followed up with you.  I'll touch base via email or inquiry to the appropriate person to see what's going on.  Thanks!
  • mlapl1
    mlapl1 Community Member Posts: 349 ☆ Roadie ☆
    Thank you ... the reason I said you had sent the wrong files is that I did not see any "hotwords". I will look more carefully - sorry.

    As for the marketing people, no need to worry about it. They will get in touch if/when they want to. I was just concerned that *you* had not received my email. Thanks a lot.


  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Sounds good! Let me know if the example is what you're looking for.  Otherwise, I can suggest edits or your thoughts may warrant a request for a new feature release.  Always exciting!
  • klaatu
    klaatu Community Member Posts: 988
    Using the built in hyperlinks along with CSS is one option. I think the quickest and easiest way to accomplish this would be to build most of the functionality yourself.

    Insert a HTML Extension - Custom Div. Place all the text inside a paragraph <p> tag. Put the word(s) you want to become hot-words inside span <span> tags. Give them a class, like hotword, and an onclick="". Inside the onclick parentheses will be the action HTML name you want to trigger on the click of the hotword. Like this:

    Mary had a little <span class="hotword" onclick="action130()" lamb</span>

    Add a Style sheet using HTML Extension Cascading Style Sheet with:

    .hotword {
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    An added benefit is that you can add a :hover selector to the css to change the effect when the link is moused over.

    For an even stronger effect you can use the :after selector to insert a blank space with a background image (in my example I used a .gif)

    If anyone wants detailed step-by-step instructions, let me know.