Exporting Text Entry into a PDF
Jun 03, 2021
Hi all,
I'm quite new to Storyline (and also Javascript). Following an excellent tutorial of how to code some simple JavaScript and add it as a trigger, I created this simple test to see if I could get what's entered into a text box to populate a pdf, or rather a png image that then downloads as a pdf. Everything seemed to work fine when exporting it to HTML5, as seen in the example here:
https://cmoe.s3-us-west-2.amazonaws.com/Printing+Test+-+Storyline+output/story.html
It automatically adds a date and populates my text box areas.
But I don't get the same functionality when exporting as a scorm file and uploading to Talent LMS. Does anyone know if jsPDF only works in HTML5 exports? Should this function the same way when the scorm is uploaded to an LMS?
I'll attach my Storyline file and Storyline Output also. (For those trying to export straight from Storyline, it won't work until you add in the png source file for the pdf background and also add in an additional line of code to story.html to enable the jsPDF). The png and line of code are present in the output zip file.
I was following an excellent tutorial I found here:
https://www.devlinpeck.com/tutorials/generate-pdf-elearning
Last question (maybe more of a jsPDF question): does anyone know how to make the exported text wrap in the pdf document that is generated?
5 Replies
Hello Stephanie,
Sorry, I don't know why it doesn't work in the lms.
To make the text wrap, use the splitTextToSize function.
var date = new Date();
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0');
var yyyy = date.getFullYear();
date = mm + '/' + dd + '/' + yyyy;
var player = GetPlayer();
var q1 = player.GetVar("question1");
var q2 = player.GetVar("question2");
var q3 = player.GetVar("question3");
var doc = new jsPDF({ });
q1 = doc.splitTextToSize(q1, 134);
q2 = doc.splitTextToSize(q2, 134);
q3 = doc.splitTextToSize(q3, 134);
var img = new Image;
img.onload = function() {
doc.addImage(this, 0, 0, 216, 279);
doc.setFontSize(14);
doc.setTextColor(0, 0, 0);
doc.setFont('Helvetica');
doc.text(q1, 61, 70, null, null, 'left');
doc.text(q2, 61, 133, null, null, 'left');
doc.text(q3, 61, 196, null, null, 'left');
doc.text(date, 170, 42, null, null, 'center');
doc.save("Learning Plan.pdf");
};
img.crossOrigin = "";
img.src = "fillablepdf.png";
Thanks much! I tried the splitText line earlier, but I couldn't get it to work, but what you posted above works great! I also got it to work perfectly in the LMS also. I ended up adding the js line of code to both story.html and index_lms.html, and it works! Thanks!
I'm glad that you got it working. Have a great weekend.
Super! I had exactly the same problem. Works perfectly but not in an LMS. But now it does! So thanks!!!
Hi there,
I saw how Russell got the problem from Stephanie solved. I used almost the exact same code derived from the same link Stephanie mentioned (i.e. https://www.devlinpeck.com/content/generate-pdf-elearning). I exported it to SCORM, to get it to work on our company LMS (i.e. Totara Learn). I also added this line of code* to the story.html and the index_lms.html before I converted it to ZIP, as I read in the link. And the png-image to the file offcourse. In attachment all the relevant files (2nd attachment: storyline-file, 3th attachment: scorm-file).
*<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
Any help is very much appreciated! Thanks in advance!!