JavaScript
  • LilxAPI in Storyline 3

    • LilxAPI in Storyline 3

    xAPILilxAPIStoryline

    You can set up LilxAPI in Storyline 3 by doing the following.

    Step 1: Set JavaScript Variables and a Custom Storage Function

    executing custom javascript in storyline 3

    In your first slide, create a trigger that executes JavaScript when the slide is first loaded. We will use this to define the API Key, the URL, and a custom SendLilxAPIStatement() function as follows:

    // Define the API Key and URL
    window.LilxAPIKey = 'YOURAPIKEYGOESHERE';
    window.LilxAPIURL = 'https://edtechbooks.org/api.v2.php';
    window.LilxAPIStatements = [];
      console.log("LilxAPI variables have been defined.");
    // Define the functions
    window.StoreLilxAPIStatement = function(actor, verb, object, result = null, context = null, language_id = "en") {
      let lilxApiStatement = {
        "actor": actor,
        "verb": verb,
        "object": object,
        "result": result,
        "context": context,
        "language_id": language_id
      };
      LilxAPIStatements.push(lilxApiStatement);
      console.log("The statement was stored locally.");
    }
    window.SendLilxAPIStatements = function() {
    let json = JSON.stringify(LilxAPIStatements);
    console.log(LilxAPIStatements);
    console.log(json);
      const formData = new FormData();
      formData.append('action', 'lilxapi_store');
      formData.append('api_key', LilxAPIKey);
      formData.append('lilxapi_statement', json);
      console.log(formData);
      //JSON.stringify(data)
      fetch(LilxAPIURL, {
          method: 'POST',
          body: formData
        }).then(response => {
          if (!response.ok) {
            console.log(response);
            document.getElementById('result').textContent = "There was a network error.";
          }
          return response.json();
        })
        .then(data => {
          console.log(data);
          if (data.status == 'success') {
            console.log("Stored as " + data.statement_id);
            LilxAPIStatements = [];
          } else {
            console.log("There was an error.");
          }
        });
    }
    window.SendLilxAPIStatement = function(actor, verb, object, result = null, context = null, language_id = "en") {
        LilxAPIStatements = [];
      LilxAPIStatements.push(StoreLilxAPIStatement(actor, verb, object, result, context, language_id));
      SendLilxAPIStatements();
    }

    Be sure to change the LilxAPIKey variable to match your API Key for your project. Also, if you are using a different LRS than EdTech Books, then you will need to change the LilxAPIURL variable also.

    Please note that this JavaScript must be executed before any other custom JavaScript anywhere in the Storyline app. You can check your console when the published app first loads and verify that it was loaded by checking for the statement "LilxAPI variables have been defined."

    Step 2: Create Triggers in Storyline as Desired

    Single Triggers

    a custom lilxapi submission statement on button click

    Create any triggers you would like in your Storyline app, and have them execute a custom JavaScript function like the following:

    SendLilxAPIStatement("Royce","clicked","something");

    When the trigger fires, you should be able to tell in the console that the LilxAPI statement was sent, and it should appear in your LRS.

    Note that the actor, verb, and object variables are required for any statement, but you can also add a result, context, and language_id variable if desired. Here is an example:

    SendLilxAPIStatement("Royce","completed","quiz1",".8","slide3","es");

    In addition, you can also reference Storyline variables to send to LilxAPI by calling the GetPlayer().GetVar() function in your code. For instance, the following will send a variable named StudentName that was defined in Storyline:

    SendLilxAPIStatement(GetPlayer().GetVar("StudentName"),"completed","quiz1",".8","slide3","es");

    Multiple Triggers

    Since each trigger using SendLilxAPIStatement opens a new web page, sending multiple statements at once can be very resource-intensive and can cause latency problems. To prevent this, you can instead store all of your statements locally and send them as a single storage call when you are ready. To do this, first store each statement by using the StoreLilxAPIStatement function as follows:

    StoreLilxAPIStatement("Royce","clicked","something");
    StoreLilxAPIStatement("Royce","clicked","something else");

    This will construct and temporarily store the LilxAPI statements within Storyline. Then, when you are ready, send all of statements with the SendLilxAPIStatement function as follows:

    SendLilxAPIStatements();

    This will send all of the stored statements to the server and will also clear the local storage.

    You can use this in a variety of ways, such as storing all statements for a slide and then sending those to the server when the user leaves the slide or storing all statements for the entire session and then sending them all at once when the session is completed.

    This content is provided to you freely by EdTech Books.

    Access it online or download it at https://edtechbooks.org/elearning_hacker/lilxapi_in_storyline_3.