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:

https://community.articulate.com/discussions/articulate-storyline/saving-storyline-variables-to-a-pdf

But I'm having trouble getting it to work that way.  Also, I'm not advanced enough in Javascript.  

https://community.articulate.com/discussions/building-better-courses/user-notes-that-they-can-print-and-email

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?

 

 

29 Replies
Amit Goel

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.  

 

Amit Goel

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 Bibby

There are a few issues, but the biggest one stems from using Microsoft Word to edit your code.

There are numerous types of quotation marks. Word uses what are called 'curly' quotes. JavaScript uses 'straight' quotes.

If you use this code (where I've fixed the quote marks and added a couple of missing semicolons), your project should work fine:

var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
var player=GetPlayer();
var headline=player.GetVar("PrintTitle");
var exercisenotes1=player.GetVar("Answer1");
var exercisenotes2=player.GetVar("Answer2");
var exercisenotes3=player.GetVar("Answer3");
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents += "<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print My Notes</button></div>";
contents+="<div style='font-size:22px;font-weight:bold;margin-top:20px;margin-bottom:20px;'>"+headline+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>What is Your Topic?</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+exercisenotes1+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>What is Your Thesis Staetment?</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+exercisenotes2+"</div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>What is the specific skill or process you want to demonstrate in the Unit 6 presentation?</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+exercisenotes3+"</div>";
contents+= "</body></html>";
myWindow.document.write(contents);

In the future, grab a code editor such as Sublime Text to use when working with JavaScript. It will help avoid these issues.

Amit Goel

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.  

Peter Rich

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?

Russell Killips

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/

Sue Beck

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.

Yuriy Kantsurak

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.

Russell Killips

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

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.

 

Russell Killips

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

Yuriy Kantsurak

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.