Help - Calling all Javascript experts!

I hope you can help me with this problem. I need to know the Javascript to insert an action in a PDF form field.

I have a client who wants learners to be able to print a PDF certificate with the user’s name automatically filled in from a Storyline variable.

I know how to create a PDF certificate with a form that the user can type their name into, but this is not what the client wants.

The module will be published for the web, Flash with HTML5 fallback, no LMS.

Attached is the Storyline 360 file, and the output folder with the PDF cert. 

17 Replies
Matthew Bibby

Try using this JavaScript instead Tracy:

var player = GetPlayer();
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}
var lmsAPI = findLMSAPI(this);
var lmsName = lmsAPI.GetStudentName();
var array = lmsName.split(',');
var name = array[1] + ' ' + array[0];
player.SetVar("UserName", name);

You'll need a variable in Storyline called UserName for this to work.

Godwin Vinny Carole

Hi Tracy,

I made a few changes to the JavaScript in your story file and added few files in "pdf_cert" folder.

JavaScript in the story file checks for LMS availability.

If accessed from an LMS, It pulls out the student name from LMS, else the name given by the user in the course will be printed out.

All you need to do is, add "pdf_cert" folder in the publish output.

Here is the demo:
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=d7c8958b-a4f9-4612-a0e5-c39b238d0726

This must work for both Flash and HTML5. 

Download Source, Publish and pdf_ceft.zip below

Tracy Carroll

Hi Matthew! Thanks for responding. My Storyline variable is called UserName, but when I added your JavaScript into the PDF, the variable doesn't show up in the UserName field.

The module is published for the web, Flash with HTML5 fallback--the client does not have an LMS. Is that the issue? Or did I put the JavaScript in the wrong place?

Tracy Carroll

Thank you so much for your help, Godwin!

The client doesn't have an LMS, so I published the Storyline file for the web, and included the "pdf_cert" folder in the published output (attached).

It printed out the Certificate without the background (Certificate.pdf), although the image in the browser (screenshot certificate.png) showed the background perfectly. Is there anyway to get the pdf to show the certificate background, when not using an LMS?

Godwin Vinny Carole

Hi Tracy,

I see that you have tested the publish output from your local drive using chrome browser. As chrome blocks access to local files when a html page does not have a domain, pdf is printed out without the background. 

The course must be hosted on a server, doesn't have to be an LMS to get the expected output.

If you need to test the output locally, you can view the course on Firefox.

Here is a demo link hosted on my server without LMS:
http://godwinvc.com/elearning/stoyline/PDF_Certificate_Example/story_html5.html

Laura Brunning

Hello,

Appreciate this post is quite old, but hope someone is looking and can help!!

I have used this method to create a PDF certificate, however, on the certificate, the name is the wrong way round.  The actual Storyline variable is the correct way around - just not on the PDF.

On the slide:

On the PDF:

 

Code on Slide Master:  

$(".top-ui-bg").css("background-color", "#54565B");
$(".area-primary").css("background-color", "#54565B");
$(".cs-slide-container").css("background-color", "#54565B")
$(".sidebar-contents").css("background-color", "#54565B")
$(".cs-glossary").css("background-color", "#54565B")
$(".panel-content-menu").css("background-color", "#54565B")

var player = GetPlayer();

function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;

else return findLMSAPI(win.parent);
}

var lmsAPI = findLMSAPI(this);
var myName = lmsAPI.GetStudentName();
var array = myName.split(',');
var newName = array[1] + ' ' + array[0];
player.SetVar("newName", newName);

Code on the actual slide:

var player = GetPlayer();
if (typeof GetStudentName == "function") {
var myName = GetStudentName();
localStorage.setItem("g_certificate",myName)}else{
localStorage.setItem("g_certificate", player.GetVar("newName"));
}

Code on Click here for PDF button:

var g = window.open("./pdf_cert/index.html");

I haven't changed anything else to do with the certificate or the pdf_cert folder that you copy into the output file.

Please help!!

Also - As long as it displays firstname lastname (no comma) on the certificate, we don't have to have it on the slide (if it makes it easier).

Cheers, Laura

PS - using 360 and publishing in HTML only

 

Nancy Woinoski

Hi Laura, If I understand correctly you are pulling the user's name from the LMS and the name is displaying correctly in the Storyline variable on your screen but it is not displaying correctly in the PDF.  If this is the case then the issue might be in the code on the index.html file. Can you share the file so that people can take a look at how it is coded?

Laura Brunning

Hi, thanks for the reply - doing it that way round just makes it backwards on the slide AND backwards on the certificate. 

It doesn't seem to matter what I do with the code on the slide, it doesn't change the certificate :(  Also the certificate has the comma, but it doesn't on the slide. 

using var newName = array[0] + ' ' + array[1]; = 

SLIDE:

CERT: