Print pdf in captivate 8

In January, I wrote a blog on How to make a printable results page in Captivate 8. Arnaud commented: Is it possible to do the same thing for the results in pdf?

Arnaud’s comments caught my eye that I have been thinking about on how to do this since.

Native OS functionality
Have the learners print to PDF. If your Operating System doesn’t have a PDF printer, you can install one. Mine had one already installed. But, if yours doesn’t you can download and install something like CutePDF. There are instructions on how to do that at How-To Geek’s article “How to Print to PDF in Windows: 4 Tips and Tricks”. If your learner is on a Mac, the process is even easier. Digital Trends’ article “How to Print to PDF in Mac OS X” states, “converting your Mac files to PDF is all done with built-in features that come standard.” All you have to do is select Save as PDF and choose your destination.

The downside of having the learners do this for themselves is the added responsibility of not only instructing them on “Print to PDF”, but also teaching them how to install software and printers. Not ideal.

Widgets and using Captivate native tools
Captivate allows you to add on to its native capabilities with Widgets. I found a few different options, such as the one featured on CP Guru’s blog written by Michael, titled “Intelligent Print Widget for Adobe Captivate”.

“The all new Intelligent Print Widget for Adobe Captivate offers you a lot of possibilities to modify and customize your print-out from Adobe Captivate 6.x and Adobe Captivate 7.”

There is no server side, as it is self-contained. It does cost money but is pretty affordable: One license is 20 dollars. There are different options for more licenses.

Use Javascript
Javascript is one of the backbone languages of the internet. It does a lot of the backwork you take for granted. There is a myriad of JS solutions. We used jsPDF as the start of our solution. jsPDF generates PDF documents on the fly with Javascript.

Before we get started on how to use jsPDF to accomplish this particular task, download these files and read and follow along in “How to Make a Printable Results Page in Adobe Captivate 8” for Steps 1 through 3.

We will start here on Step 4: Just add Javascript
On the button you want to execute and create the PDF copy and paste the code from the file called copyAndPasteToAction.js.

This file has a few fields you need to fill out:

• Head down to //TITLE and change “Some title” to your own text.
• Under //QUESTIONS change “Question # heading” to the Question headings for each question.
• Don’t touch //ANSWERS. Unless you need to add more questions.

You will notice userAnswers# in a few places, first as a variable being declared and  second where it gets the text to parse. Let’s dissect the line below:

userAnswers1 = cp.vm.getVariableValue(“Text_Entry_Box_1″);

“Text_Entry_Box_1” is the variable we named in Step 2 of the Printable results blog.
userAnswers1 is a variable that will grab the text above, convert it into a string and then place that string on the PDF document.

This section you may have to edit, expand or shrink to fit your needs.
• The next section //Color Rectangle on top// you can change that color for your needs.
• Under sections QUESTION HEADER and QUESTION you can change the appearance of those questions.
• Last section to worry about. Go to the last line:‘course.pdf’);

And change it to whatever name you want to have it named.

If you need to expand the amount of questions you will need to copy and paste and increment various areas of the javascript. Anything with a number after it will have to be copied and pasted for your needs.
For now we will assume you have 3 questions.
Publish your file.

Step 5: Add these three files to your “Published” folder, and modify index.html edit
a. Copy FileSaver.js, jspdf.js and jspdf.plugin.split_text_to_size.js into the root of the published folder.
b. Copy and paste:

<script src="jspdf.js" type="text/javascript"></script>
<script src="FileSaver.js" type="text/javascript"></script>
<script src="jspdf.plugin.split_text_to_size.js" type="text/javascript"></script>

Into the index.html file. Paste it somewhere between <header> and </header> but not inside any <script></script> text. I placed mine on line 57 which is just above the </head> tag and after the last </script> tag.

Save your file and open up the index.html file inside your browser. Fill out the answers and press Save PDF, and voilà! The file has been created and downloaded.

Special thanks to Dan Frazee for helping me figure out jsPDF.

Editor’s Note 01/22/16: We’ve added a video showing the process starting at Step 4 where you paste in the text from copyAndPasteToAction.js through to the end of Step 5. If you’d like to see the previous steps in the “How to Make a Printable Results Page in Adobe Captivate 8” blog, as noted above.

Pin It on Pinterest