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

August 4, 2017
CEO, eLearningOcean, HealthDecisions
Wizard 6 posts
Followers: 13 people
7

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

CEO, eLearningOcean, HealthDecisions
Wizard 6 posts
Followers: 13 people
August 4, 2017

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) {
printWindow.document.write("<h3>"+txt+"</h3>")
}

function writeValue(txt) {
printWindow.document.write("<p>"+txt+"</p>")
}

function openPrint() {
printWindow.print()
}

function printVars() {

printWindow=window.open("", "_blank");

sty=` <style type="text/css">
        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;
        }       
    </style>`
printWindow.document.write(sty);
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>');
fillWindow();
}

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")

  writeName("variablename1")
  writeValue(window.cpAPIInterface.getVariableValue("variablename1"))

  writeName("variablename2")
  writeValue(window.cpAPIInterface.getVariableValue("variablename2"))

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

}

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

finally,

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:

printVars();

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.

Comments(7)
2017-12-21 08:30:22
2017-12-21 08:30:22

For some reason, adobe is stripping all text that looks like html from responses in this forum ,and does not seem to allow editing of responses. Feel free to contact me directly for more information

Like
2017-12-20 20:09:28
2017-12-20 20:09:28

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, Alan

Like
(1)
>
alanr43645665
's comment
2017-12-21 08:16:35
2017-12-21 08:16:35
>
alanr43645665
's comment

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.

Like
2017-08-08 07:58:52
2017-08-08 07:58:52

Steve - Works like a dream !!! Thank you !

Like
2017-08-01 14:32:01
2017-08-01 14:32:01

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 !

Like
(2)
>
Tazzy
's comment
2017-08-01 15:23:45
2017-08-01 15:23:45
>
Tazzy
's comment

I usually start debugging these things by using the 'preview' in captivate, then opening up the browser debugger window to see any messages. you can send me an email if you want me to take a look, info@elearningocean.com

Like
>
sdwarwick
's comment
2017-08-01 17:02:49
2017-08-01 17:02:49
>
sdwarwick
's comment

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; \ } \ '

Like
Add your comment