Explore the community Forums Lectora Lectora Questions & Answers Pull variable from LMS and insert into text box Reply To: Pull variable from LMS and insert into text box

#419039 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
129 pts
@mnotermans5114

Tim’s solution for sure is the best, because it doesnot needs any other Javascript libraries. However as i use Greensocks GSAP library intensively in all my projects, there are approaches with GSAP’s TweenMax that are perfect.
It uses TweenMax and the GSAP Textplugin.

Another option i use quite a lot recently is using Lectora’s shape elements for text. Using shapes for some text like that for me has several bonuses. I can easily animate them and alignment of text is better…

I have a genericJavascript HTMLExtension (MetaTags) in the top of my Lectora file…so functions inthere are available for every page in my title and because most of the functions i use often, its easy to copy to new titles.

Inthere one function is this:

function changeMyShape(_target,_color,_duration,_percentage,_string){
var displayText = $(“.”+_target, getDisplayDocument());// using JQuery as selector and adding the scope
TweenMax.to(displayText, _duration, {text:_string,color:_color,fontSize:”14pt”,fontFamily:’pragmataflash12regular’, textAlign:’left’,yPercent:_percentage});
}

This function changes the text of a Lectora shape in a specified time, color and font. One benefit is you can animate text easily.

You need to define a CSS-class for your text-shape. Then you can target it easily. On a click you can then add a Javascript to call the function like this:
changeMyShape(“myShapeCSSClassname”,”#fff999″,0,0,”Some text that will show in the shape”);

Do remember this approach needs GSAP and jQuery. If you dont want that, Tim’s approach is better.
But still you can get this done without GSAP and jQuery in Vanilla Javascript.

The function and approach below dont use any extra libraries and still change the text of any given textfield:
Make sure you add a CSSclass to your textfield…
function changeText(_Msg){
var elem = document.querySelector(“.someTextfield”);// targets a textfield with class someTextfield
var text = elem.textContent; // target the text content
elem.textContent = ‘We can dynamically change the content.’; // changes the text
elem.textContent += _Msg; // adds text at the end of the existing content
elem.textContent = ‘We can add this to the beginning. ‘ + elem.textContent; // Adds text to the beginning
};

changeText(“Hello World”);

Biggest disadvantage when compared to Tim’s approach ( and the GSAP approach ) is you do loose your chosen formatting on the textfield here. Offcourse you can add that after you changed your text dynamically, just like i do with GSAP.

To do that just add the styles wanted in the function. Offcourse you can make those dynamic too..

elem.style.color = “green”;
elem.style.fontSize = “12px”;