Change text color in a script ... is impossible? Or something?
January 26, 2018 12:00 AM
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.
Discussion (6)
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.
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.
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.
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.
http://community.trivantis.com/shared-content/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.
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.
http://community.trivantis.com/shared-content/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.
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.
Discussions have been disabled for this post