Creating downloadable pdf files in Storyline - an update on earlier methods

Hi HunterBlake,

There were a few things wrong in your course.

In the Javascript code in the StoryLine course you tell the code that the pdf document is named "Roles_Goals.pdf" but the PDF document you created is named Goals_Actions.pdf. To fix, rename the PDF document "Roles_Goals.pdf"

Next, in the Javascript code in StoryLine you have the following code:

Body = player.GetVar("Body");
Mind = player.GetVar("Mind");
Spirit = player.GetVar("Spirit");
Heart = player.GetVar("Heart");

but you named the variables in StoryLine  Self_Care_Body,Self_Care_Mind, Self_Care_Spirit, and  Self_Care_Heart

The fix here is to rename the variables in StoryLine to Body, Mind, Spirit, and Heart.

Cheers!

Mike G

There was a Chrome security update that stopped this from working at my company. That could by why loading the demo to your LMS doesn't work either.

Replace the following part of the code with the one below. Ensure that const formUrl = ''; exactly matches the name of the PDF file located in the root folder.

var player = GetPlayer();
Role1 = player.GetVar("Role1") ?? "";
Role2 = player.GetVar("Role2") ?? "";
Role3 = player.GetVar("Role3") ?? "";
Role4 = player.GetVar("Role4") ?? "";
Role5 = player.GetVar("Role5") ?? "";
Role6 = player.GetVar("Role6") ?? "";
Role7 = player.GetVar("Role7") ?? "";
Role8 = player.GetVar("Role8") ?? "";

RolePicked1 = player.GetVar("RolePicked1") ?? "";
RolePicked2 = player.GetVar("RolePicked2") ?? "";
RolePicked3 = player.GetVar("RolePicked3") ?? "";

Action1 = player.GetVar("Action1") ?? "";
Action2 = player.GetVar("Action2") ?? "";
Action3 = player.GetVar("Action3") ?? "";

Body = player.GetVar("Body") ?? "";
Mind = player.GetVar("Mind") ?? "";
Spirit = player.GetVar("Spirit") ?? "";
Heart = player.GetVar("Heart") ?? "";

Time1 = player.GetVar("Time1") ?? "";
Time2 = player.GetVar("Time2") ?? "";
Time3 = player.GetVar("Time3") ?? "";

Having originally started this thread 3 years ago - I'm glad to have the opportunity to post this very important update as it may affect anyone using the code I loaded. In my original example, I used an 'import' statement to fetch the necessary JavaScript library modules at runtime from unpkg.com and this code started throwing up CORS-related errors in certain browsers last week.

The root cause lies in unpkg.com not consistently sending an "Access-Control-Allow-Origin: *" CORS header with all its returned files. This header is now a mandatory requirement for ESM imports. As browsers enhance their security protocols, this previously functional code may now encounter failures.

I've posted a fuller discussion of this issue in the JavaScript discussion group - with some simple ways to fix the problem.

Tighter security settings in browsers can impact dynamically loaded JavaScript libraries. | Articulate - Community

In fairness to PhilMayor, I think he did point out, at the time, some potential risks in using dynamic loading of JavaScript libraries - I certainly seem to remember a discussion with a couple of super heroes on that subject 😀 - but it is just so much more convenient to load code in this way if you don't have easy access to modify the published HTML.

Hi Phil, I was able to troubleshoot it finally, it was a local server issue and not the code, it's back up and running. Thank you!

Hi JMorrison 

It's unfortunate the way the discussion thread works. I posted this as a reply to an earlier post - but it then gets obscurred within the thread:

"Having originally started this thread 3 years ago - I'm glad to have the opportunity to post this very important update as it may affect anyone using the code I loaded. In my original example, I used an 'import' statement to fetch the necessary JavaScript library modules at runtime from unpkg.com and this code started throwing up CORS-related errors in certain browsers last week.

The root cause lies in unpkg.com not consistently sending an "Access-Control-Allow-Origin: *" CORS header with all its returned files. This header is now a mandatory requirement for ESM imports. As browsers enhance their security protocols, this previously functional code may now encounter failures.

I've posted a fuller discussion of this issue in the JavaScript discussion group - with some simple ways to fix the problem.

Tighter security settings in browsers can impact dynamically loaded JavaScript libraries. | Articulate - Community"

In answer to your question - can you embed the code rather than loading it dynamically? The answer is yes, you can! Just include the JavaScript in your story.html or index .html - something like:

<script src="https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

(this uses the jsdelivr CDN - which is the repository that works if you use it to load the code dynamically (see the detailed article).

PS - I updated demo5.profilelearning.com from the original post so it now uses jsdelvr.net - it was failing with the same problem as above.