Javascript Certificate fail..!

Jan 08, 2024

Emily Chorley
By Emily Chorley

Hello everyone and a very happy New Year!

I'm useless at code and just grab chunks here and there and basically use trial and error until something works the way I intended... but I'm stumped on this one!

I'm trying to make a button that you click to download a certificate that contains the date at time of clicking (this part is working fine) and that also adds in the typed variable as the Learners name displayed on the certificate.

I have everything set up but when you click the Download certificate button nothing happens...

Please can someone much cleverer than I am take a little look at my code to see what I'm doing wrong?

Thank you! 😀

Variables set up in my SL course:

  • uName (typed variable for the user to add their own name)
  • todaysDate (todays date)

My code;

  //Retrieve Player Variables
var player = GetPlayer();
learnerName = player.GetVar("uName");
learnerDate = player.GetVar("todaysDate");

Constructpdf();

async function Constructpdf() {
//Dynamically load pdf-lib JavaScript module
  await loadMods();
//Call the fillForm asynch function
  await fillForm();
}
async function loadMods() {
await import("https://unpkg.com/pdf-lib/dist/pdf-lib.js");
}

async function fillForm() {

//Read pdf form
  const { PDFDocument } = PDFLib;
  const formUrl = 'https:urlinkhere.pdf';
  const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(formPdfBytes);
  const form = pdfDoc.getForm();
  
//Get field names
  const nameField = form.getTextField('uName');
  const dateField = form.getTextField('todaysDate');


//Fill in form
  var filename = learnerName + ".pdf"
  
//Flatten form
  form.flatten();
  
//Save form
  const pdfBytes = await pdfDoc.save();
  
//Download the form
await import('https://unpkg.com/tiny-save-as/dist/tiny-save-as.esm.js')
.then(({default: saveAs}) => {
  const blob = new Blob([pdfBytes], {type: 'application/octet-stream'});
  saveAs(blob, filename);
})
.catch((err) => {
  console.log(err);
});
  }
3 Replies
John Cooper
4 months ago01/08/24 at 12:22 pm (UTC)

HI Emily

Without blowing my own trumpet too loudly, I think the code you are using may be based on a post I put up a while back:

Creating downloadable pdf files in Storyline - an update on earlier methods - Articulate Storyline Discussions - E-Learning Heroes

This post goes through the various stages of how to:

  • Load the jspdf Javascript library
  • Get the variables you need from the Storyline code
  • Open your pdf file (in this case your certificate)
//Read pdf form
  const { PDFDocument } = PDFLib;
  const formUrl = 'https://articulateusercontent.com/review/uploads/pexRu_MmMKI4vlqomi0l677hphPje1Yv/U2GBcph3/assets/XXgil2/CertificateTemplate2.pdf';
  const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(formPdfBytes);
  const form = pdfDoc.getForm();
  • Extract the field names from your pdf file and store them in your JavaScript code
//Get field names
  const nameField = form.getTextField('uName');
  const dateField = form.getTextField('todaysDate');
  • Assign your saved Storyline variables to the pdf file variables
  • Create your new pdf file and save it

Having had a quick look at your code I can't see where you assign the saved Storyline variables to the saved form field variables.... i.e you need to fill the form in! So your code should have something like this in it:

//Fill in form
  nameField.setText(learnerName);
  dateField.setText(learnerDate);
  var filename = learnerName + ".pdf"

I'm assuming that your certificate pdf has two fields in it called 'uName' and 'todaysDate' so that your '//Get field names' section of code works OK?

If you need more help - just shout and I can check it out for you...

Best regards

John

John Cooper
4 months ago01/08/24 at 12:41 pm (UTC)

PS - I should add that this bug wouldn't explain why nothing happens when you click your button. The problem is that when Storyline runs the JavaScript code it doesn't pass the error message through to you. You need to open your browser debug tools to find what is going on....

I use Microspft Edge as my browser and F12 opens up the debug tools and if you look at the 'Console' tab you often find the error you are looking for...

Sign In to Reply