Formatting InLine Variables
July 26, 2016 12:00 AM
Hi,
In Lectora 16 we can now use variables inline inside textboxes. I have looked in the manual but it does not actually say how (or whether it is possible) to format variables. For instance, I would like to create the following variable in JS and then pass it for display to Lectora:
My name is undefined
At the moment, all I can get it to do is to write the above text (which is not the desired outcome as you can tell).
I know that I can write the variable directly to the html object using JS, but it means that I need to know the html name of the textbox, whereas if I use a Lectora variable, I do not need to do that - it makes life much simpler.
Any suggestions? Thanks for your help.
Andrew
Discussion (16)
Hi Andrew,
thanks, I didn't know you could format the variable like this.
Interesting is, that if I copy your code directly from this forum (i.e. with the wrong quotes) the text will be green instead of red... Maybe it's a new color scheme ;-)
Tim
What I mean is that the html tags are not interpreted, just displayed as is.
I looked at the other post and I am aware of these issues - that's not where the problem is.
Cheers
Andrew
undefined
Hi Tim
Thanks - yes I know how to set the value of the variable in JS and send it to Lectora. The problem is that I want to include formatting information (e.g. change the font color to red for part of the string variable) but that does not seem to work. I will take a look at the link you sent.
In general you can set the value of a Lectora variable from Javascript:
VarYourLectoraVariable.set(yourJSvariable);
But in detail you may run into the same issues described here:
http://community.trivantis.com/forums/topic/displaying-variables-inline-text/
Tim
Some tricks out of my bag i use a lot to format text, shapes and/or variables after they been set/changed are these:
TweenMax.set(sometextfield,{color:"#cdee00"});
you can both target complete textfields or parts of texts.
And for a Lectora shape i use:
TweenMax.set(someshape,{backgroundColor:"rgba(96,178,63,1)"});
TweenMax.set immediately sets an object to the desired value, whereas TweenMax.to tweens over time.
So sorry. I made sure the awt and ini are in here. This is the tip of the iceberg so to speak. I think a lot more can be done with this idea.
Hope it helps.
Thank you guys that's great!
The solution proposed that seems closest to what I am looking for is Darrel's first zip file. I cannot get the second file to run (at least locally) - no button appears. Also in both cases, there is no .awt file included in the zip file and so I cannot see the technique used. Darrel... would you mind re-sending please?
I am trying to develop a template for others to use. Actually, I can do everything I need using JS and the html name of the textbox. However, that requires tweaking the JS code itself as the html name of the textbox in a page will change each time I copy a page. So ... what I am trying to do is to use JS to create a single Lectora variable which contains formatting information which can then be sent to any textbox by Lectora through the use of online variables.
This one is a little better because I used an external style sheet for styling the variable.
My apologies Darrel, the reason your second file did not work is that I forgot to actually extract the files from the .zip. Ooppss... my excuse is that it is 3.30am here in Thailand. It actually works perfectly. I still could not find the .awt file though...
It seems to me that it is a similar issue than the one described in the other thread. If I modify the variable (incl. a font style) and change the content of the textfield on click of a button the tags are not interpreted. If I then reload the page the new value of the variable in re-inserted inline and the tags are correctly applied. So the tags are used on page load only, any formatting tags added later are made a normal undefined.
Tim
This will work guys. Sort of on the lines of what you were thinking...I think.
Gotta love GSAP. Math, how do you target just the variable in a text block with GSAP?
Thank you very much Math. I will try and digest but from your description it still seems that you have to target a specific element - not very different from renaming in a way.
Thank you Darrel. No problem... I am just soooooo grateful for your help and that of the "team". I will take a good look.
What you can do to prevent having to check for changed html names is not use the html name to target an element but instead use classnames.
First in Lectora give any object you wanna target a css-class.
Then in JS you use
var myHTMLCollection = document.getElementsByClassName("myclass");
to get a HTMLCollection ( that one i learned from Sergey, thought it were arrays for a while ;-)
of that specific class.
Then you can target any element you like:
TweenMax.to(myHTMLCollection[0],3,{autoAlpha:1});
This way you can copy your elements and all still works. Only caveat is that when duplicating elements the HTMLCollection grows...so targeting at a higher index might give you another target then you want. Allthough when getting familiar with this workflow thats no pain either, because the indexing mirrors your title explorer layering. 0 being the upper elements, higher index values lower on the title explorer.
@Darrel , indeed no easy peasy to target just a variable, but i handle that by parsing the text and checking for the variable.
Big difference is no change in Javascript code needed when copying / pasting elements. All will work...whether you use 1 element with specific code or a dozen. All will work. When calling html names you need to check each time you copy an element or page, because the html names are created uniquely.
When creating reusable elements for other developers/designers to use, assuming your fellow developers have less experience with javascript, this is in my view a big improvement on using plain htmlnames. Makes it far easier for them to copy elements, use them..without worrying about the code behind it.
Discussions have been disabled for this post