Explore the community Forums Lectora Lectora Questions & Answers Change text color in a script … is impossible? Or something?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #384001 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    22 pts
    @CarlFink

    This should be simple, but it isn’t.

    I want to emphasize specific text objects while related audio (voice-over) is playing. That can be circling them, changing the font color, etc.

    I have barely touched JS in Lectora. I used Math’s example code from this question to find out what properties my text object (the question text for a test question) has. Some of them are: x, y, bgColor, hasBorder, hasOutline.

    I used a script of this form to try changing them:

    obj=%HTMLNAME%;
    alert(obj.name);
    obj.hasOutline = true;

    Changing any of the above properties has no effect at all. Changing x and y does not move the object. Changing bgColor to yellow or #00FF00 does nothing. Setting hasOutline and hasBorder to true does nothing at all.

    I’m clearly missing something obvious (to other people). No idea what, though, so any help will be appreciated.

    • This topic was modified 1 year, 7 months ago by Profile photo of CarlFink CarlFink .
    #384033 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    Hi Carl – Based on what you’re trying to accomplish, the “%HTMLNAME%” token selector won’t work. The selector only works when the action is on the object itself.

    Even when using the selector, you may still have to add the value in the tag for the element. Buttons, images, shapes, for example, need “btn” or “anc” respectively in order to change the style:

    document.getElementById(“%HTMLNAME%btn”).style.border=”red”;

    That works if the action is on the button itself. However, if you have an action on a different element triggering the change, you need the exact HTML name of the target. If the above button is “button12345”, you need to use that in place of the %HTMLNAME%.

    Since you’re triggering the changes from events on the audio, you’ll need to get use the exact HTML name from the description in the Properties ribbon.

    I was able to get changes to the background and border of the question texts synced with audio, but am stumped on how to target the font color of a text block. The font color is a style attribute on the span class, and I’m not having any luck with research I’ve done that allow it to change with a synced audio event.

    #384050 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    So I was able to get just the text color to change, but it wasn’t all that intuitive. I’m also pretty sure there’s a cleaner way to do this with jQuery and CSS than the JavaScript solutions in the sample.

    The audio has an event that runs a JavaScript that changes one or more aspects of the text block or font styles. I tried to add some explanatory statements as well. From there, it comes down to knowing CSS style attributes and tweaking as you like.

    #384067 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    22 pts
    @CarlFink

    Hi Carl – Based on what you’re trying to accomplish, the “%HTMLNAME%” token selector won’t work. The selector only works when the action is on the object itself.

    The action is on the object itself. I’m not sure how I gave the impression that it was not. You may notice the “alert(obj.name);” in the code I posted–that was me confirming that obj was a pointer to the right object. It returns “text15256”. That’s the correct HTML name of the object. The action fires, the alert pops up … and nothing else happens. The problems is not what obj points to, though.

    I deeply appreciate your taking the time to make that example project for me. I probably won’t get to try it until Monday, but I’m sure it will solve my problem.

    #384076 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    118 pts
    @mnotermans5114

    Noticing this i checked my Patreon course ( still working on it ) for a applicable lesson. Well this one explains basically how to target and color a textfield in Lectora.

    Coloring text with Javascript

    One thing that doesnt work here is getting a part or word of a textfield. It is possible however. In the final course those will be with some great special effects about text animation.

    #384108 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    118 pts
    @mnotermans5114

    Gone one step further and made a sample showing how to use GSAP SplitText to color/animate single words or even characters in a standard Lectora textfield.

    Color single word or characters

    GSAP SplitText plugin you have to get a Greensock account to use it. You can get this done by Vanilla Javascript, but it quite difficult to get right. And there are so much bonuses with GSAP, i use it daily and love it.

    #384847 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    22 pts
    @CarlFink

    I figured out why %HTMLNAME% was not working, in case someone finds this thread later. I didn’t realize you had to enclose it in quotes. I’m an old school programmer–if something is in quotes, it is left exactly as is, not replaced with a different string. At least in my head.

    Jason, thanks, I stole some code from your sample and it works OK. If I understood you correctly I should be able to turn that into a course-level function (in the HEAD area), and call it from individual objects.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.