JavaScript libaries
Mar 20, 2023
Is there a way to implement external or additional JavaScript libraries into storyline?
If so, how?
I require some functionality within storyline not given within the current implementation. To achieve what I require, I need to implement the p5 javascript library. How can this be achieved?
I know there is a limitation of 32ooo chars for a standard javascript trigger, so it's not as simple as including the library in the trigger.
Also, does anyone know why ONLY a limit of 32k chars per trigger has been implemented, please don't state it as a limit of the LMS, as I know that is not the answer?
13 Replies
You can load the javascript library from a trigger and then include it in your published file, or attach as a web object and then load it from a trigger.
The character limit is a storyline limitation for variable.
How?
This should point you in the right direction https://www.youtube.com/watch?v=wlZWbpB2UR8
Here is a clear description on how to add external Javascript libraries and a sample of it.
https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
Wondering why this gets reported immediately after posting.
https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
Adding some extra text after the link... see if this works..
Hi Math,
It appears that your first post was flagged as part of our spam filtering; as you have thought, it's probably because of the hyperlink. Our team monitors flagged posts for false positives and releases them to the community as soon as possible. Your post is now live; feel free to delete the duplicate if you wish.
My apologies for the inconvenience, and you shouldn't run into this issue again.
This post was removed by the author
At the risk of showing my ignorance (which is legendary), can I ask a question on this topic? If the JavaScript library you are wanting to load has an ESM module format version, isn't it simpler to load it via an 'import' statement in the JavaScript code trigger? e.g.
async function loadMods() {
await import("https://unpkg.com/pdf-lib/dist/pdf-lib.js");
}
I appreciate this function may itself have to be called from an async function. but this worked for me when loading the latest pdf-lib,js library into my notetaker demo I posted a few weeks ago.
By dynamically loading the library in this way there is no need to modify the index.html file at all. Which makes it a whole lot simpler if you are thinking of embedding the Storyline into RISE for example.
With my WebObject solution you neither have to change the index.html. All is loaded automatically.
When you are certain online sources will stay and remain available...and donot run into Cors issues on the LMS, then your solution works fine. Benefit from the WebObject solution is, that it is always available, and will not be changed or updated if you donot want to.
I prefer the solution Math describes in six months time when you republish you don’t need to remember to edit a file or drop files into the exported scorm. It is foolproof and avoids embarrassment.
Sent from my iPhone
Hi Math, Phil
Thanks for the responses both you guys have way better JavaScript skills than me - but I'm still not sure why I wouldn't use the method I'm suggesting:
It just seems so much simpler - assuming that there is an ESM version of the library available - obviously not all libraries have converted from cjs to the new standard.
Both have pluses and minuses. Both work. Both have drawbacks. Mostly depends on the scenario and scripts you need. If those are always the same...and repeats course after course ( eg. using jQuery ) you can use either method.
Pluses WebObject method:
Drawbacks
Pluses using online sources
Drawbacks
So i do think this depends on personal preference. But when you work with custom developed scripts ( i do ), the WebObject approach is far better.
Thanks Math - I get it now.
Thank you for all the input.
I think this information would be very useful if it were put on the best practices page.
As it's been said, the methods mentioned in this thread all have their pros and cons. But more than anything, this information would be extremely useful if it was placed in a more central place to access.
It might also be a good idea for a screencast of how all these methods can be accomplished.
Once again, many thanks to you all for the input.