Prototyping Javascript in Lectora

ncacace
ncacace Community Member Posts: 6
Add an action at the very beginning of your Lectora Composition



Select the 'Run Javascript' Option and open up the little window to add Javascript



First you need to create your variable - For me I used "_MyBookmarks" (Lectora will store it as Var_MyBookmarks - in fact if you try to access _MyBookmarks with javascript it won't even know what your talking about)



Paste this in:



sayHello = function(myName){

console.log("Hello " + myName);

}



Var_MyBookmarks.set(sayHello);

Var_MyBookmarks.value("Nicolas");

console.log(Var_MyBookmarks);




Run it through you Chrome Browser selecting Ctrl 'I' to open your javascript console window and see the output.



The first line in the window is the output from your function "Hello Nicolas"

The second is a look at what is actually inside a 'Lectora Variable" (I would really love to hear from a Lectora Developer what the other LMS variables are for)



This is really significant I find because it means that you could create a whole Class Library in Javascript and add it to your Lectora projects at the beginning and just copy it across to all your projects - Using the HTML widget you can add all your javascript files via an external txt file - This leverages many possibilities with javascript. Instead of variables you could use Arrays and Data Structures and Objects.



I've added Greensock and jQuery plus a custom javascript file using this method and this is my second day with Lectora.



Someone should write a book - Lectora for Developers/Programmers



Note: DO NOT set the variable like this:

Var_MyBookmarks = sayHello;

as you will lose all the LMS data that Lectora generates from the variable

It's also a big No No in OOP (Object) programming

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    So it's your second day in Lectora? Welcome to the community! That's a neat trick you posted, I never tried using functions as values for Lectora variables.



    Although you don't need to do that to add script libraries to your title. Adding JQuery et al is really easy, requires no development skills and works like this:



    1. Insert External HTML Object, set it to "Meta Tags"

    2. Paste your script and style tags into the object, like this (strip the spaces of course):

    < link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
    < script type="text/javascript" src="jquery-1.7.2.min.js">[/CODE]
    3. Voila. Now you can use JQ/JQUI/GSAP/whatever else you want. No need to even touch variables.

    If you want to execute code, just use Run JavaScript action. I prefer to keep functions in my own external libraries, instead of placing the whole code in there. Makes debugging and hotfixing much easier.

    Finally, speaking of books, go to eProficiency.com by Ben 'Dr. Lectora' Pitman and take a look at the store. There are tons of materials, some are even free. It's a good place to start. And of course, like I said, you are very welcome to share stuff and ask for help on the forums.[CODE]< link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />

    < script type="text/javascript" src="jquery-1.7.2.min.js">[/CODE]

    3. Voila. Now you can use JQ/JQUI/GSAP/whatever else you want. No need to even touch variables.



    If you want to execute code, just use Run JavaScript action. I prefer to keep functions in my own external libraries, instead of placing the whole code in there. Makes debugging and hotfixing much easier.



    Finally, speaking of books, go to eProficiency.com by Ben 'Dr. Lectora' Pitman and take a look at the store. There are tons of materials, some are even free. It's a good place to start. And of course, like I said, you are very welcome to share stuff and ask for help on the forums.
  • ncacace
    ncacace Community Member Posts: 6
    @ssneg 60210 wrote:
    So it's your second day in Lectora? Welcome to the community! That's a neat trick you posted, I never tried using functions as values for Lectora variables.

    ....

    If you want to execute code, just use Run JavaScript action. I prefer to keep functions in my own external libraries, instead of placing the whole code in there. Makes debugging and hotfixing much easier. .


    ...Yes I started with adding my javascript in this fashion however I wanted a way to extend the variables of Lectora so as not to isolate any data I maintain in custom Javascript Data structures from the LMS - I'm hoping that I may be able to possibly work with a JSON array and maintain it between sessions.





    Thanks for the link
  • energetic-pixels
    energetic-pixels Community Member Posts: 3
    @ssneg 60210 wrote:
    So it's your second day in Lectora? Welcome to the community! That's a neat trick you posted, I never tried using functions as values for Lectora variables.



    Although you don't need to do that to add script libraries to your title. Adding JQuery et al is really easy, requires no development skills and works like this:



    1. Insert External HTML Object, set it to "Meta Tags"

    2. Paste your script and style tags into the object, like this (strip the spaces of course):

    < link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />
    < script type="text/javascript" src="jquery-1.7.2.min.js">[/CODE]
    3. Voila. Now you can use JQ/JQUI/GSAP/whatever else you want. No need to even touch variables.

    If you want to execute code, just use Run JavaScript action. I prefer to keep functions in my own external libraries, instead of placing the whole code in there. Makes debugging and hotfixing much easier.

    Finally, speaking of books, go to eProficiency.com by Ben 'Dr. Lectora' Pitman and take a look at the store. There are tons of materials, some are even free. It's a good place to start. And of course, like I said, you are very welcome to share stuff and ask for help on the forums.
    So how do you get jquery or any other 'outside' asset into the proper folder using Lectora Inspire?? I would love to use AngularJS or jQuery in projects.

    Tony[CODE]< link type="text/css" href="jquery-ui-1.8.20.custom.css" rel="stylesheet" />

    < script type="text/javascript" src="jquery-1.7.2.min.js">[/CODE]

    3. Voila. Now you can use JQ/JQUI/GSAP/whatever else you want. No need to even touch variables.



    If you want to execute code, just use Run JavaScript action. I prefer to keep functions in my own external libraries, instead of placing the whole code in there. Makes debugging and hotfixing much easier.



    Finally, speaking of books, go to eProficiency.com by Ben 'Dr. Lectora' Pitman and take a look at the store. There are tons of materials, some are even free. It's a good place to start. And of course, like I said, you are very welcome to share stuff and ask for help on the forums.



    So how do you get jquery or any other 'outside' asset into the proper folder using Lectora Inspire?? I would love to use AngularJS or jQuery in projects.



    Tony
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    @Energetic Pixels 61185 wrote:
    So how do you get jquery or any other 'outside' asset into the proper folder using Lectora Inspire?? I would love to use AngularJS or jQuery in projects.



    Tony


    Quite easy.

    1. Add JQuery.js just as any other attachment to the title (Insert > Files and folders)

    2. Include it in the HTML output with External HTML object (type Meta Tags, text "< script src=jquery.js />"



    I also add my own myfunctions.js in the same manner so that I don't have to use Lectora's built-in code editor too often.



    Quick searching on the forums revealed this thread with a couple of examples:https://lectora.com/forum/showthread.php?t=12443