Forum Discussion
Create single PDF document from Storyline text-entry responses
Hello,
I am creating an interaction where the students in a class fill in some 10-15 text-entry fields with their notes. And then I would like to have all the notes compiled in one PDF for the students to take at the end.
I found a few great discussions:
But I'm having trouble getting it to work that way. Also, I'm not advanced enough in Javascript.
This one solves the same issue I have except it's for just Print or Email, and I want to send to PDF. I may end up going with the Print or Email option, but I just wonder: Has anyone figured out a way to convert multiple responses in Storyline to a single PDF?
Hello,
I wanted to share this. I created this workbook for a client. When clicking on the print button, a pdf is created and downloaded. I used a javascript library called jsPDF.
Hi Russell,
I tried out your interaction and wow, that's very cool!
Thank you so much for sharing it with me. I am a complete novice with Javascript, but I'm learning.
I will look at your source files in some depth.
Thanks again!
Russell,
Thanks for this example. Unfortunately, running the javascript returns a cross-site error, since modern browsers block scripts that try to access a frame with a different origin. This can be turned off on individual browsers, but that's not a feasible solution for most end-users. Also, the only js included in this doesn't make it clear how someone is laying out their js using AS3's variables. This is what I see in the js button:window.frames[0].frameElement.contentWindow.CreateBook();
Do you have an example of this project working with hosted content in the same domain and a clear example of where the "CreateBook()" method is defined?
Hello Peter,
I don't know why you would be getting any cross-site errors. This uses a Javascript Library called jsPDF that is available from here: https://mrrio.github.io/
The Code: window.frames[0].frameElement.contentWindow.CreateBook(); executes a the function called CreateBook() that is inside of the WebObject.
If you extract the provided example there is a folder called PDFBook. This folder is the WebObject. Inside of the folder there are 3 files. An index.html file, createbook.js file and the jspdf.min.js file.
The main file that you want to look at is createbook.js This is where the CreateBook function is.
You can open the createbook.js file in a text editor like notepad. However, I like to use a program called Sublime Text. https://www.sublimetext.com/
This is exactly what we have been looking for, however, I don't quite understand how to implement it. I can see how to update the JS with my variables from SL, however, I can't figure it out from there.
How do you set up the PDF with Header/Footer information?
What is the jspdf.min? Do I need to edit that with anything?
Again, so excited to find this. Any help is appreciated.
Hello Sue,
I'm sorry for the extremely late reply. I didn't see your post until today.
The jspdf.min is a library of code that does the heavy work of creating the pdf.
The only code that you should be editing is in the createbook.js file.
Below is a partial screen shot of the code inside of createbook.js
The header is comprised of a png image. This image was converted into Base64 code so it can be included inside of the javascript.
To convert my png image to Base64, I used this website: https://www.base64-image.de/
I copied the generated code from that website into Line 4 inside of CreateBook.js
Now the image is stored inside of a variable called imgData.Line 6 of the code creates a blank pdf.
Line 8 gets my Storyline Variable called Page1 and stores it in a variable called p1.
Line 9 is code that adds in line breaks after every 530 pt.
Line 10 is the header image. The 60, 30 is the x and y position to place the image. The 500, 93 is the width and height of the image.
Line 11 adds our text with Line breaks to the pdf. The 40, 160 are the x and y position.
Line 12 and 13 are for the footer.
Line 12 adds a line. It is passed four numbers. The X and Y start position and the X and Y end position. The line is drawn between the start and end points.
LIne 13 adds in the page number. Again it has an X and Y position and is set to align right.
Now page 1 is done.
Line 15 starts a blank page 2.
You keep repeating lines of code 8 -13 for each page.
Finally at line 88 is the code that saves and downloads the pdf.
Thank you Matthew. I had a look at the other thread. I have spent a few days working on this and my research indicates that a lot of people have been trying to figure out how to do this with varying degrees of success.
I really appreciate your time and help.
Thanks again.
Hi Matthew,
I'm on such a tight deadline right now that I think I should just go with the Email/Print option from this thread. https://community.articulate.com/discussions/building-better-courses/user-notes-that-they-can-print-and-email
My idea is to have some 15 text entry fields and, at this point, just have them all appear in a printable format and also allow the student to email it to him/herself. But I have stripped down the attached project so it only shows 3 fields. And I put the final slide together quickly so I could get it out to you.
I'm having trouble with the Javascript. I have worked in SL a long time, but Javascript is completely new to me. I wonder if you might look at the Javascript in the attached SL2 presentation and let me know where it's wrong. I modeled it after the Javascript from the thread above.
There are two buttons at the bottom of the final slide. One says PRINT and the other says EMAIL. They are both purple and my script is from those two purple buttons. Do you mind taking a look?
I'm sure my Javascript is pretty messed up and silly. I also attached here the zip file from the link above. That's what I used to model my own script.
Any help that you can provide would be greatly appreciated.
Matthew,
Just quick update. UPDATE: My team just wants the PRINT option. Can you please help me with just the Javascript for just the PRINT item?
Amit
Hi Matthew,
Thank you for the response and link. Unfortunately, that's not quite what I'm looking for. That is for printing just what is on an individual page. I'd like to give my users a single button where they can have all of their responses compiled into one output to print or save.
Really, this link (and her source files) showed what I need, but I just can't get the Javascript to work for the Print option: https://community.articulate.com/discussions/building-better-courses/user-notes-that-they-can-print-and-email
Stephanie (the author) had a single button at the end of her project that the user could press and it would send all the responses given by that user into one document for printing or saving.
Attached here is a Word doc with the Javascript she used and then below that in the same document is the Javascript I wrote. In hers, she indicated what fields might be different for another user with highlight and bold. In the attachment, I included comments on how I adjusted her Javascript to create mine. I just can't figure out why hers is working and mine isn't. (For simplicity, I only used three variables ( with references) in my project, but I would eventually like to have 15).
I also attached my sample project again (SL2). The JS doesn't look too complex so I'm sure I'm doing something simple wrong.
Any thoughts?
Matthew,
Thank you SO much. It's working with your code.
I am slowly learning Javascript, but I will make sure to use a proper code editor in the future. I had thought simply using the code from the existing interaction would work, but I won't make that mistake again.
I need to make the code much longer now to put in all the extra fields, but with what you've shown me, I have a good start.
Thanks again.
Hi Peter,
I'm not sure if Russell is still subscribed to the conversation here as it's a bit dated, but I know he's still active in the forums.
You are welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
Russell, Hello. I liked your decision very much and now I need it for one of my projects. The fact is that I downloaded your source code, tried to publish it on my computer and view it through the browser, but the download button does not respond to the download. Why is this possible? I will have more than 10 text blocks in my course, which must be downloaded in Pdf format at the end of the course. Perhaps now there is an even simpler solution to this question? Please help me.
Make sure that you are viewing your published content online instead of locally on your computer.
Russel, tried to look not locally, so I have a suspicion that the file is index.html doesn't work correctly for some reason. The only thing that happens is when I try to insert an index file through the index.html my computer does not see this file.
When inserting your WebObject, you only point to the WebObject folder. Storyline will include all files inside that folder and will automatically link to the index.html file.
Make sure that your WebObject folder has only those 3 files.
createbook.js
index.html
jspdf.min.js
Russell, thank you, I managed to do as you showed, but for some reason nothing works. I tried to make a separate link to the course, tried to load it into the system, tried to look through the web folder after publication, the button does not work. What could be wrong? Creak on the button put as you have in the example was. If you can help, I would be very grateful.
Here's a how to video...
Russell, it worked, thank you very much. The only thing is that there is a new problem. This file doesn't recognize my native language. And instead of letters, unknown characters appear(
