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?

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. (!)

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

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");

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