AddExternal Javascript Libraries

Saola Animate Support Questions
1

Is there a way to add external javascript libraries? Can you modify the HTMl Head?

2

Update: For version 2.0 and later, see this tutorial:

Hi,

To add external javascript libraries, please do the following steps:

  1. In Document pane, click Event Handlers to open Document Event Handlers window.
  2. In the Document Event Handlers window, select Create event, then add a Run Javascript action:
    function onDocumentCreated(doc, e) {
        // doc.preloader.add(scriptUrls) scriptUrls can be a single url or array of urls
        // example:
        doc.preloader.add('https://code.jquery.com/jquery-3.2.1.min.js');
    }

With the code above, external libraries will be loaded before the document starts playing the first scene.

Regards.

1 Like
3

Thank you toanls! This will help.

4

Hi,

This feature has been implemented in Saola Animate 2.0:

You can modify the HTML template directly inside Saola Animate, or add the JavaScript library to Resources pane.

Regards.

5

Hi Toan,

Is this possible in Active Presenter. I am trying to use jsPDF and need to import this from the CDN:
src=“https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js”

I need to take an image of a specific screen and send it to a php file as a blob and save it as a jpeg. If there is a way to do that with window.print() or something similar please let me know.

Regards
Ali

6

Hi Ali,

Maybe namnt’s answer in this thread will help:

Regards

7

Hi Toan,

Thanks for this. I will try it out. In the meantime, is importing an external is library not supported? I was thinking if the index.html location is known while testing on my localhost environment, I could edit it and add the script tag to the header, then refresh and try again.

Regards
Ali

8

So just and FYI, I studied the examples in the project related to certs and tried the following in the Project Event tab:
$ = AP.$,
window.LoadJSLib = function(el, emailOnly) {
console.log(“Test Function”);
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js”;
document.getElementsByTagName(“head”)[0].appendChild(script);
}

Now I can see that as soon as the project loads the library has been downloaded and can be seen in the Sources tab of the console when In inspect. However, I am unable to call the new jsPDF function. It seems from some research that the library is downloaded but perhaps not linked to the HTML. I call var doc = new jsPDF(); but that does not seem to throw an error.

Ultimately, what I need is that in a project if a student answers 5 questions, then I want to add each slide with an answered question to the PDF with add.page() and then in the end download the whole PDF on the finally summary page. So the student has a record of what they submitted. This approach is to avoid the whole LMS integration as SCORM.

9

This seems to have worked now:
$ = AP.$,
window.LoadJSLib = function(el, emailOnly) {
console.log(“Test Function”);
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js”;
//“https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js”;
document.getElementsByTagName(“head”)[0].appendChild(script);

}

LoadJSLib(this,true);
doc.preloader.add('jspdf.umd.min.js');

In Properties > Event

10

Hi Ali,

Your first script to load jsPDF library is correct.
You can create a new PDF document because in jsPDF 2.3.1 loaded via a script tag, you should call jspdf.jsPDF instead of jsPDF:

window.LoadJSLib = function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js";
    document.getElementsByTagName("head")[0].appendChild(script);
}

LoadJSLib();
var jsPDF = jspdf.jsPDF;
var pdfDoc = new jsPDF;

Regards