Forum Discussion
Generate a PDF from Text Entry in Storyline
Hi Megan
The JavaScript code you copied into your sample screen came from a post and subsequent thread I put up last year. This had an example Storyline file showing how to do exactly what you require and I recognise the code from that example - so, hopefully, I should be able to help!
Firstly, some basics about how this method works:
Most JavaScript apps rely on one or more JavaScript code libraries. These libraries are sets of open source code routines that are created by teams of volunteer programmers. The code libraries can be downloaded (for free) from a repository and can be used by developers under their open source licence.
The method I described in my article uses a JavaScript library called pdf-lib. This is an extremely powerful set of methods for creating and editing pdf files. One of the unique features of this library, and what makes this code so useful here, is that it contains functions that can open, read and fill in a pdf form.
A pdf 'form' is a special type of pdf file that contains named 'fields'. These fields are normally filled out by the user who can do this by tabbing through the document entering the data required. But in this case it is the pdf-lib JavaScript code that can open the form, read the field names and then we can copy the Storyline variables we have collected from the text entry fields in our Storyline module into those fields before we close the completed form as a new file which we then offer to the learner for download.
So what you need to do is:
Step 1 - design and create your pdf output file - sounds like you already have that covered.
Step 2 - Convert your pdf file to a pdf form (I use Adobe Acrobat to do this - there may be other pdf editors you can use - but they MUST be able to create a form!). You insert 'fields' and create names for those fields where you want the learner's input text to appear in the pdf document. Note and list the fieldnames you have used.
Step 3 - In your Storyline module, capture and store the input from your learner in Text Entry blocks and make a note of the Storyline variable names you have used for each field. I use a spreadsheet mapping the Storyline variable names to the pdf form field names.
Step 4 - now pick up the JavaScript code you copied and see if you can work through how it operates
Thank you so much for taking the time to reply to me! And yes-I tried to take your example and make it my own-but clearly did not understand the mechanics of things. I'm going to give your directions a try and will let you know if I have questions. And thank you again-I really appreciate it!
Hi John and many thanks for your really clear explanations on this subject. As someone with literally NO knowledge of Java Script. you've really spelt everything out clearly.
However........
I've tried to use your script, and a tweak from another post, to populate a pdf - and when I try it in published form, nothing happens.
Any chance of sharing my code with you please?
Kev
Hi Kevin_BDLD
Would be happy to help out - just a quick update though:
There has been a change in most browser security settings that can cause my earlier code to fail - please see the article here:
If it is that you are using the unpkg JavaScript repository - there is a quick fix in this post - if that still doesn't work, let me know and I can take a look at your code.
Best regards, John
Thanks for your speedy reply John. My code (I think) follows the guidance that you gave on that link - I'm more inclined to think that mine's a newbie's error. Is it best to paste the code here or via DM?
Kev
Hi JohnCooper-be3c !
Your Javascript for getting a downloadable pdf from storyline has been a lifesaver. I have been able to get all of my text fields going to the form. The question I have now is...how do I get a checkbox to check on the form if it is checked in storyline. I saw another post about it, but wasn't sure how to incorporate it into the code that you pasted before. I have 3 checkboxes on the entry in Storyline, but I don't know how to add the Javascript in to have the checkboxes fill in on the form. Here's what I have for my Javascript right now. Where in this would I put in code (and how) for checkboxes? (if you can't tell, I am a Javascript novice!) I have attached my Java to this message. Any help would be greatly appreciated!
I'm trying to enable my learners to download their responses throughout a Rise module so they can take them after completing the course. I see this was written years ago. Do you know if Articulate has made this easier for those "non-tech savvy" people to do this?
Thanks.
