August 4, 2017
A better way to create a custom PDF of lesson variables from captivate
Comments
(11)
August 4, 2017
A better way to create a custom PDF of lesson variables from captivate
CEO, eLearningOcean, HealthDecisions
Newbie 6 posts
Followers: 33 people
(11)

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.

11 Comments
2021-04-20 07:20:55
2021-04-20 07:20:55

Still a very helpful post. 1 question: If a user has added returns (line breaks) to the text in the variable, I want to replace them with a br tag, but I can’t get any combo of regex to work. Any thoughts? Thanks!

Like
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
(1)
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)
(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
(1)
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
(5)
>
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
>
Tazzy
's comment
2018-11-20 17:11:24
2018-11-20 17:11:24
>
Tazzy
's comment

Hello!

Thank you in advance for any help you can provide. I am trying to get this to work. Although I can get it to work in Chrome, it does not work in IE. When I use the fix above (with the \, without the \, with the <style> tags, without the <style> tags; it will not work in any of the browsers…

 

Has anyone figured out a work around for IE. I am trying to create a printable certificate and IE is the browser most of our company is using. So, any solutions need to be compatible with IE.

Like
>
Tazzy
's comment
2018-11-20 18:18:05
2018-11-20 18:18:05
>
Tazzy
's comment

Attached is a clean Captivate file with this code in there (the original code from link below). It works in chrome for me very well but not IE of course.

When I try to incorporate the IE fix, it doesn’t work in any of the browsers. I have tried it with and without the / also tried it with and without the <style> tags

Any work arounds to get this to work in IE would be appreciated. I need it to work in IE as that is our corporate main browser. I am trying to output a printable certificate at completion of course.

 

 

Like
>
Tazzy
's comment
2020-04-20 20:03:16
2020-04-20 20:03:16
>
Tazzy
's comment

I am using this code in a course that is being piloted on SCORM Cloud LMS. It works well when I preview the course in HTML5 but I cannot preview in SCORMcloud, and when I test the course on SCORM cloud, I get an error that the PrintVars() function is not defined. Any suggestions?

Like
Add Comment