Help - Calling all Javascript experts!

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

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?

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?

Ah, too bad for me! This is a government client, and they don't have an LMS. They plan to have employees print the certificates and email them to supervisors. (!)

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

AWESOME!  Thank you so much, Godwin!

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

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?

Good plan, please see attached!

Apart from the name of the course on the certificate, I haven't changed anything else inside it, just how it was when I downloaded it from this thread.  

It appears to reference a 'username' that I haven't set anywhere, I'm very confused

Thanks, Laura

I am out right now but will take a look when I get back. 

Hi Laura,

Can you edit the line below from your code as follows:

Edit this line:
var newName = array[1] + ' ' + array[0];

To this:
var newName = array[0] + ' ' + array[1];

-Jesse

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:

It looks like the javascript to send the name to local storage is pulling it directly from the LMS and not reordering the name. 

If think you only need this line in the final function

localStorage.setItem("g_certificate", player.GetVar("newName");

PERFECT, that's worked!!!!!!

Thank you so much :)

Ah good, glad Phil could help you out. I was going to suggest a slightly different solution for reordering the name but Phil’s is much cleaner.

Hello,

even if this post is quite old, I hope someone can help!

I'm creating a PDF certificate, however, on the certificate, I don't know how to add the date in the right place after the text "In Rennes, the ..." in the ultimate line of the document (see the document attached).

I'm having issues setting the right coordinates for the date, which should be more on the right :

var img = new Image;
img.onload = function() {
  doc.addImage(this, 0, 0, 297, 210);
  doc.setFontSize(40); 
  doc.setTextColor(0, 0, 0); 
  doc.setFont('Times-Bold', 'bold');
  doc.text(certName, (doc.internal.pageSize.width / 2), 96, null, null, 'center');  
   doc.setFont('Times-Roman', 'normal');
   doc.setFontSize(16);
   doc.text(date, (doc.internal.pageSize.width /2), 135, null, null, 'center'); 
   doc.save("CertificatRGPD.pdf"); 
  };

Any help is appreciated !!

Thank you