Get access to premium assets for free. Be the first to hear from Adobe.

A better way to create a custom PDF of lesson variables from captivate

I’ve seen a number of cases where people have tried to use the eLearningBrothers “print.html” technique to create a custom PDF of information gathered during a lesson.   Inevitably it has led to frustration.   In one case,  the administrator forgot to include this custom file in the course module,  and in another,  the amount of text was larger than that allowed in a URL and broke the call.

The following gets past both of these problems

1.  the entire capability is packed into the course source file and will not be inadvertently lost

2. there are no limits on the number or length of variable names

Here’s a simple alternative

1. Add the following code to “On Enter, execute JavaScript”

var printWindow

function writeHeader(txt) {
printWindow.document.write("<H1>"+txt+"</H1> <hr>")

function writeName(txt) {

function writeValue(txt) {

function openPrint() {

function printVars() {"", "_blank");

sty=` <style type="text/css">
        body {
          font-family: Sans-Serif;
          padding-top: 10px;
          padding-left: 10px;
            z-index:: 1;
          font-family: Sans-Serif;
            color: #666666;
            padding-left: 22px;
        h1 {
            font-family: Sans-Serif;
            padding-left: 19px;
            margin-top: 27px;
        h3 {
          font-family: Sans-Serif;
            color: #444444;
          padding-left: 20px;
        p {
            -webkit-margin-before: 0.0em;
            -webkit-margin-after: 0.0em;
          font-family: Sans-Serif;
            color: #666666;
            padding-left: 20px;
        hr {
            display: block;
            -webkit-margin-before: 0.5em;
            -webkit-margin-after: 0.5em;
            -webkit-margin-start: auto;
            -webkit-margin-end: auto;
            border-style: inset;
            border-width: 1px;
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() +1;
var curr_year = d.getFullYear();
printWindow.document.write('<div id="date">'+curr_month+"-"+curr_date+"-"+curr_year+'</div>');

2. On the slide you want to create the PDF, add the following code to “on enter, execute javascript”

function fillWindow() {
  writeHeader("any text for your header")

  writeName("any text here for a name")
  writeValue("any text here for a value")



// add more name/value pairs here
// this is the last line in the function


Just fill in the variable names and values as you need to and create this function


3. On the slide you want to create the PDF, create a button that has an action “on success, execute javascript”

the code for the button is simply:


That’s it.

When you press your “print variables” button,  another window will open with a simple format, already set to print.  you can set the print function to save as PDF and you’re on your way.

Note  – this solution uses a quoting capability only available in the latest versions of Javascript, so if you need to support IE11,  some small changes need to be made.

7 Responses

  1. Thanks Steven for this…hope you can assist further

    I have created a test cptx file of 2 slides.

    Slide 1 has 3 TEBs on it with variables Q1, Q2 and Q3. I created an On Enter Execute JavaScript on Slide 1 using your 1st script

    Slide 2 has 1 SmartShape being used as a button on it. Slide 2 has On Enter Execute JavaScript using your 2nd script (have replaced “variablename1” and “variablename2” with “Q1” “Q2” and “Q3” in the script as suggested) and the button has On Success Execute JavaScript using your 3rd script.

    Have published the file in SWF and HTML5 formats with SCORM 1.2 reporting for our LMS and when I launch the course from the LMS in Chrome all I get is a blank window (in IE11 in compatibility mode, nothing happens).

    Any suggestions ? Appreciate all your help with this !

      • this problem is due to the use of a newer javascript function that doesn’t work with IE11.

        to solve the problem, the variable “sty” is defined using an older javascript method of multiline quote:

        sty=’ \
        body { \
        font-family: Sans-Serif; \
        padding-top: 10px; \
        padding-left: 10px; \
        } \
        #title{overflow:auto;} \
        #logo{float:right;} \
        #date{ \
        float:left; \
        display:inline-block; \
        position:absolute; \
        z-index:: 1; \
        font-family: Sans-Serif; \
        color: #666666; \
        padding-left: 22px; \
        } \
        h1 { \
        font-size:26px; \
        font-family: Sans-Serif; \
        padding-left: 19px; \
        margin-top: 27px; \
        } \
        h3 { \
        font-size:18px; \
        font-family: Sans-Serif; \
        font-weight:600; \
        color: #444444; \
        padding-left: 20px; \
        } \
        p { \
        font-size:14px; \
        -webkit-margin-before: 0.0em; \
        -webkit-margin-after: 0.0em; \
        font-family: Sans-Serif; \
        color: #666666; \
        padding-left: 20px; \
        } \
        hr { \
        display: block; \
        -webkit-margin-before: 0.5em; \
        -webkit-margin-after: 0.5em; \
        -webkit-margin-start: auto; \
        -webkit-margin-end: auto; \
        border-style: inset; \
        border-width: 1px; \
        } \

  2. Hi Steven
    Thank you so much for your solution. I copied and pasted yourJavaScript solution and it works great. Is there any chance you could write some code so I could add a logo jpeg to the top of the PDF?
    Many thanks,

    • Adding an image would be easiest if you already happened to have a website that uses the logo, then it would be possible to just include a reference to it, rather than the file itself.
      If that is true, you simply add the following right before the in the function writeheader :

      The url for the image is remarkably easy to find. If you use the chrome browser, you just right click on the image, and select “open image in new window”

      the image is shown in the new window, and the url for the image is displayed in the address bar.

Leave a reply