Pull variable from LMS and insert into text box

rwatkins9162 · March 1, 2019

Hi,

For some time I've been trying to get a code snippet to access our LMS and parse the student's name so I can use it in our eLearnings as the reserved variable for this in our LMS is populated with a number, not a name. With the help of Math Notermans and others on the forum, our IT department came up with this code that access the info, parses it and shows me the first name in a system message window. So I know the code is doing its job. It should also rename the First Name result as icwStudentName.

<SCRIPT type = "text/javascript">

var icwStudentName = getStudentName();
alert(icwStudentName );

function getStudentName()
{
var studentName = "";

if (!LMSIsInitialized()) {
var result = LMSInitialize();
}

studentName = LMSGetValue("cmi.core.student_name");
return getFirstName(studentName);
}

function getFirstName(theFirstName) {
var str = theFirstName.split(",");
var firstName = str[1].trim();

return firstName;
}
</SCRIPT>

My question is, How do I get this value onto the screen in Lectora? The inline variable replacement doesn't seem to be the right approach as this is not a reserved variable. My thought is to create a user-defined variable, but how do I tell it that the value of the user-defined variable is what the code snippet is pulling? It seems like I'm missing a step in my thought processes. Any advice is appreciated.

timk · March 1, 2019

The best way should be to assign the value to a user-defined variable so that you can use it as usual from that point on. Create a variable, e.g. "username".

You need to use it in a Lectora action to initialize it, otherwise it wouldn't exist. Maybe "Set as empty" when the page is loaded, just make sure it's done before the javascript is executed.

The code should be:

Varusername.set(icwStudentName);

Then you can use "username" in any way, e.g. in a Change contents action. Inline variable replacement probably won't work on the page the code is run but should work on all pages that come later.

mnotermans5114 · March 2, 2019

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";

rwatkins9162 · March 4, 2019

Thanks Guys!

That did it. Between Math, Tim and our internal IT department I can now display a learner's name in a Lectora lesson. Y'all have no idea how happy this makes me!!

Thank you, thank you, thank you!

Pull variable from LMS and insert into text box

Comments

Categories