How to Make a Printable Results Page in Adobe Captivate 8

by | Jan 9, 2015 | Adobe Captivate Resources, Developer Resources, eLearning, Resources | 74 comments

More than a year ago Brother Bryce wrote a successful blog on 6 Steps on How to Make a Printable Results Page in Articulate Storyline. I’ve always enjoyed this eLearning tip, so I figured it would be a good idea to do the same thing in Adobe Captivate 8.

Printable Results Page in Adobe Captivate 8

Good news! It took some testing, but making a printable results page in Adobe Captivate 8 does work. I added some code to bring up the print dialogue box as well.

For those of you wondering why you would want to add a print function to your online course, I offer this answer. It adds a unique way for your learners to take something away from the course. Your learners can print off notes for later review, or something to refer to after completing the course.

Alright, here are five steps on how to make your printable results page in Adobe Captivate 8:

Step 1: Download the Zip File

Download the zipped file CaptivatePrintPageBlog.zip.

Within your zipped file, we will use the following files:

printResults.cptx file
The Publish folder
*HTML file print.html
*image logo.png

*Found inside the Publish folder.

Step 2: Incorporate Your Own Variables in Your .cptx File

Create three text entry boxes, and delete the “Submit” button that comes along with them when created. This makes three variables: Text_Entry_Box_1, Text_Entry_Box_2, and Text_Entry_Box_3. Make sure to follow along in my step by step videos.

Step 2 Video

Step 3: Setting Up the Print Button

Next create a simple button by creating a shape and then click “use as a button.”

Step 3 Video

Step 4: Just Add JavaScript

Select the print button you created in step three and change the action from the default to “Execute Advanced Actions.” For the first action, have it Execute Javascript and keep the window it executes in the current window.

Then click Script_Window and paste in the following:

var header = "Title of the Slide~~" var args =( "Question 1~~" + cp.vm.getVariableValue('Text_Entry_Box_1')+ "~~Question 2~~" + cp.vm.getVariableValue('Text_Entry_Box_2')+ "~~Question 3~~" + cp.vm.getVariableValue('Text_Entry_Box_3') ) var url = ("print.html?=" + header + args); window.open(url,"_blank","width=800,height=600,menubar=no");
Bonus Tip: If you are having trouble with the code, make sure to copy and paste the above code into a text editor before using it to strip out the HTML code from this blog post.

Step 4 Video

Step 5: Add Two Files to Your Published Folder

Now publish your project. After you have published your course, take the two files in the zip folder I had you download in Step 1:

HTML document (needs to be named print.html)
A logo (needs to be named logo.png)

Replace the image file named logo.png, with your unique logo and make sure to name it logo.png. Take the logo.png and the print.html files and drag them into the root of your published folder, and then upload to test.

Step 5 Video

Well, there you have it. Now your learners can print out the questions and answers in a print friendly document. I hope you enjoyed this tutorial. Please let me know if you have questions about how to implement this.

Lieve Weymeis on January 10, 2015 at 2:47 am

I really regret that you kept the generic names for the TEB’s associated variables, because personally think this is bad practice. Not only is it very difficult to identify the variables in Captivate (Variables dialog box) but certainly also in the JS-file. And I think there is an important mistake: you indicate the command ‘Execute Advanced Actions’ in the screenshot in Step 4, where it has to be ‘Execute Javascript’.
Brother Shawn on January 12, 2015 at 9:22 am

Hi Lieve, thanks for your comment. You bring up some good points and made that change. So thank you. And… one of the great things about Adobe Captivate is you can do it in different ways. That is why we love Captivate 8. Have a great day.
David Emmett on February 26, 2015 at 6:51 am

Hi – I have downloaded the files and tried to get them to run – but nothing happens when I click on the print button – I am using CP8.1 + Mac + Chrome – I have tried it in MAMP and in Blackboard – I tried to build in my own files using the instructions but print button still won’t work – when I run the print.html on its own it works – I have also tried on windows with chrome and Mac with safari. Any thoughts on what I am doing wrong?
Captivate 7 User on February 28, 2015 at 7:16 pm

I have been looking for a way to create a printable results page in Captivate 7. Will this method also work in Captivate 7? Or will it only work in 8?
Brother Shawn on March 2, 2015 at 8:41 am

Hi Captivate 7 user, this tutorial was specifically built for CP 8. I am sure there is a way, have you tried it out yet? Let us know.
arnaud on March 6, 2015 at 5:21 am

Hi
is it possible to do the same thing for the results in pdf?
Brother Shawn on March 6, 2015 at 8:46 am

Hi Arnaud, thanks for your comment. I am not sure what you mean exactly. Can you explain? Look forward to your response.
arnaud on March 7, 2015 at 4:27 am

I will wish to have a pdf button instead of the print button.
In fact, after doing a quiz if the user can click a button to have their quiz results in pdf
Brother Shawn on March 9, 2015 at 11:06 am

Hi Arnaud, we are doing a blog post on this tips soon. We will let you know when it is posted. Thanks for your comments. Have a good day!
arnaud on March 9, 2015 at 11:54 am

Ok Shawn. Thanks for help with this article. I’ll wait for the new blog.
Al Bruggman on March 10, 2015 at 6:54 am

Hello,

Thank you for the Printable Results Page in Adobe Captivate 8 lesson. I was wondering how do I send more variables to the print page. Say if I want a sub title or an footer?

Thanks in advance,
Al
Brother Shawn on March 10, 2015 at 9:51 am

Hi Al, good question. I will send your question to our support team to have a developer look at your question. They will contact you shortly through the email you provided. Thank you and have a good day!
Nicky on March 11, 2015 at 6:11 am

Hi there, when I found this I thought yippee because its exactly what I’m looking for. Sadly it didn’t work. I’ve tried several times and it still doesn’t. I even tried using the project you supplied and it still didn’t work. Any ideas? This feature would be soooooo useful.
Brother Shawn on March 11, 2015 at 7:43 am

Hi Nicky, sorry this didn’t work for you. It works great on our side. What version of Captivate are you using?
Arnaud on March 12, 2015 at 2:46 am

Hi Brother Shawn

can we display the questions and the answers of a quiz in the print page?
are you an idea how can we do it?

thanks you
Brother Shawn on March 12, 2015 at 9:15 am

Hi Arnaud, I’ll let you know when the post is done. It’s not done yet. But we will let you know. 🙂
arnaud on March 13, 2015 at 2:41 am

Hi brother Shawn.
Ok. We wait and thanks you for your help
Brother Shawn on March 13, 2015 at 8:21 am

Thanks for you patience, Arnaud.
Michael Stephens on March 31, 2015 at 9:19 am

This works great, but I’m running into a URL length limitation of browsers. If the resulting URL of the print.html page is longer than just over 2000 characters, the page won’t appear. I need to have a lot of text entry boxes allowing users to input at least a paragraph of text into, but this means that they’re most likely going to run into the browser character limit.

Is there a way to get this to work sans loading all the input text into the navigation bar?
Brother Shawn on March 31, 2015 at 10:39 am

Hi Michael, good question. I will send your question to our support team to have a developer look at your question. They will contact you shortly through the email you provided. Thank you and have a good day!
Brother Shawn on April 3, 2015 at 9:31 am

Hi Michael, another way is to store your data in a database and writing to that database with PHP. Here is how you can do that:

http://www.w3schools.com/php/php_mysql_insert.asp

Hope you have a great day!
Allison on May 19, 2015 at 1:17 pm

Does this work for responsive projects published to HTML5?
Brother Shawn on May 22, 2015 at 1:52 pm

Hey Allison!

You shouldn’t have an issue doing this in a responsive project published in HTML5.
Rob P on July 20, 2015 at 11:48 am

Is there a way to have the question throughout a module and use the print feature to pull the all together in the one printable document??
Brother Thomas on July 20, 2015 at 2:25 pm

Hi Rob!

In the case of this example, since these are variables it is grabbing from, it shouldn’t matter what page these variables are from. If you’re having some specific troubles getting it to print, let us know!
Michael Stephens on July 22, 2015 at 8:49 am

The code shown for the JavaScript is incorrect. The quotation marks shown are curly quotes but they have to be straight quotes or the JavaScript won’t function correctly.

I couldn’t figure out why the code I copied from the page didn’t work the same as it did in the example file when I first attempted to implement this solution. Looking at the two pieces of code side by side revealed that the curly quotes were the only difference.
Brother Thomas on July 22, 2015 at 11:58 am

That’s a good reminder, Michael! I think WordPress is hijacking our formatting a little (as it looks ok in the post). Thanks for the heads up!
Rob P on July 23, 2015 at 5:35 pm

I’ve been able to get the script to work on my personal web server; but I can’t get the print button to work when published for SCORM on SCORM Cloud or are LMS. Is there a reason why that would happen?? It’s the same project file only difference is one has reporting and the other doesn’t. I’m guess it has to do with the SCORM version will be playing from within a frameset and may need an API call…but that’s just a tip/idea from someone else.
Rob P on July 23, 2015 at 6:04 pm

I got it!! SCORM does need a API callout….window.cpAPIInterface.
getVariableValue(‘Text_Entry_Box_1’)
Stef P on August 19, 2015 at 5:41 am

I can get the example to work fine however when recreating my own responsive project I run in to an error.

I keep getting the following error on the printing page.

” + header + args

Could some one point me in the right direction?
Brother Thomas on August 19, 2015 at 7:51 am

Hi Stef! Seems like you’re having an issue at:

var url = (“print.html?=” + header + args);

Double check to make sure that you stripped out the HTML that WordPress forces on those quotation marks that sometimes carries over in a copy/paste. This can be done by pasting it first into a plain text editor before putting the code into Captivate. If that doesn’t work, let me know!
Jay on October 18, 2015 at 4:32 pm

Thank you for posting this very useful tutorial. I just discovered it, and it works great when using your sample file.
As a JavaScript newbie, I would appreciate at least a brief explanation of each line of the JavaScript code. With a little understanding of the code, I think I would be able to edit it as necessary for my own projects.
Also, if your support team was able to answer Al Bruggman’s question: “how do I send more variables to the print page. Say if I want a sub title or an footer?” I would be interested in knowing that information.
Brother Thomas on October 19, 2015 at 8:10 am

Hi Jay! Thanks for the questions.

Here’s a brief explanation of what’s going on with the code. To start, let me explain that what this project is doing is taking variables from Captivate and turning them into a web page URL. The print.html file then has some code that will interpret the URL into a specific layout. So, to quickly answer your last question first, yes you can change this to add a subtitle or footer. It will require that you edit the print.html file to compensate for it, though. As it stands, the file is much more readily able to handle extra questions than it is extra elements, as it’s set up to keep decoding the URL for more questions but not extra elements. Take some time to open the print.html document in your favorite text editor and you’ll see the annotations telling you which parts of the code do what. That can help you to understand how you might add some additional elements.

Now, back to what the code is doing. Let’s take a look:

var url = ("print.html?=" + header + args); window.open(url,"_blank","width=800,height=600,menubar=no");

I want to start with this last part first as it’s the real meat. To just quickly explain, the last line is essentially opening up the new window (at 800×600) for printing. That second to last line is the meat. It’s forming that URL I was talking about. It’s starting with “print.html?=” and then adding the text of the “header” variable and the “args” variable to the end of that URL. Let’s look at the beginning part of the code now:

var header = "Title of the Slide~~" var args =( "Question 1~~" + cp.vm.getVariableValue('Text_Entry_Box_1')+ "~~Question 2~~" + cp.vm.getVariableValue('Text_Entry_Box_2')+ "~~Question 3~~" + cp.vm.getVariableValue('Text_Entry_Box_3') )

The first line is setting the text of the “header” variable to “Title of the Slide~~” and for clarification’s sake the ~~ is part of what’s getting decoded by the HTML. It basically tells it “this is the end of that variable” so it doesn’t keep checking past that anymore. The next lines make up the “args” variable. This basically contains the question text (“Question 1~~”) followed by the user’s answer as it gets pulled in from Captivate (“cp.vm.getVariableValue(‘Text_Entry_Box_1’)”), repeated for each question. This is the place where you would be able to add additional questions. You basically just need to add:

+ "~~Question 4~~" + cp.vm.getVariableValue('WhateverYourQuestion4VariableNameIs')

Put that inside that parentheses and you’d get an additional question that the HTML file will already decode without having to make any changes.

Hopefully that explains things a bit!
Chris on January 20, 2016 at 11:05 am

Hello – Thanks for putting this together. I am trying something a little different. We have a software simulation assessment that has a result page. Is it possible to add a print button to the results page? It seems to be a locked template that does not allow that…

Thanks!
Brother Thomas on January 20, 2016 at 1:00 pm

Hey Chris!

Talked to one of our devs about this. Are you trying to add a button or a shape acting as a button (as in Step 3 above) to the slide? He says the former won’t work, but the latter should play nice. Give that a shot and let me know if that works for you!
Chris on January 20, 2016 at 1:59 pm

Thanks very much for the reply Thomas. I created the Print button as a shape as button per your Step 3. I then tried to use what I think are the variables on the Results page to the headings using your javascript as a template:

var header = “Knowledge Check Results~~”
var args =(
“You Scored~~” +
cp.vm.getVariableValue(‘cpQuizInfoPointsscored’)+
“~~Maximum Score~~” +
cp.vm.getVariableValue(‘cpQuizInfoTotalQuizPoints’)+
“~~Accuracy~~” +
cp.vm.getVariableValue(‘cpInfoPercentage’)
)
var url = (“print.html?=” + header + args);
window.open(url,”_blank”,”width=800,height=600,menubar=no”);

That resulted in a print dialog box opening, but unfortunately, it just prints a blank page with a header and footer. Any ideas?
Brother Thomas on January 20, 2016 at 4:00 pm

A couple thoughts.

Did you edit this code in a word processor prior to pasting it into Captivate? If you didn’t already know, code is funny in that it always wants straight quotes and will mess up if you use curling quotes (knowingly or unknowingly). We try to help with this by using some code tags in WordPress (which often likes to force curling quotes if not told otherwise), so when you copy/paste into your project it makes sure it goes into straight quotes. Sticking it into a word processor can sometimes break it again. This isn’t always an issue, but it’s often enough of one that I figured I would ask just in case. Plus, since the dialogue box is opening in the first place and not just doing nothing, I’m guessing the problem is elsewhere. Never hurts to know.

On to the other question. The code, as far as I can tell from here, looks ok. When you hit the print button, can you do me a favor and copy/paste the URL of the window that shows up for me? The way this particular project works is that it will stick the text to be printed in the URL itself. Getting a glimpse at that would tell me whether or not your CP quiz variables and preface text are properly passing to the URL. I assume they’re not, given that everything is blank, but the URL might clue me in to where things are breaking down. For instance, the fact that (I assume) it’s not showing the “You Scored” “Maximum Score” and “Accuracy” text as well tells me that something could be broken there. Also, a screenshot of what your print dialog box looks like could be helpful. Always helps to see what things look like when teching through this stuff!
Chris on January 21, 2016 at 9:05 am

Thanks Thomas – You are right about the url – it is not showing the content in it:

C:\Users\SZT6JG\Documents\My Adobe Captivate Projects\SAM_assessment_prototype_Printtest6\print.html

I don’t see an option to upload attachments so not sure how to show a screenshot.

Here’s the thing – last night I actually got it to work, but today it is back to a blank page with the url shown above. I don’t think I changed anything but clearly I did. When it worked, it looked like this:

1-21-2016

Title of the Slide

You Scored

0

Maximum Score

8

Accuracy

0

You Scored and Accuracy should both be values of 8, so I must have the wrong variables in my javascript for those. I used cpQuizInfoPointsscored for You Scored and cpInfoPercentage for Accuracy. Do you know if I need to replace them and if so, with what?
Brother Thomas on January 21, 2016 at 9:59 am

Those should be the right variables. Something in your quiz isn’t properly passing the score to your cpQuizInfoPointsscored, though. I would check your questions/answers to make sure that it’s notifying that variable when a correct answer is selected. Tough to say where that problem may end up being, though. As for your cpInfoPercentage, that seems to be working OK. If you’re returning 0 points scored, you’d be at a 0%. For instance, if you scored 4, you should be seeing a 50% there. So, I imagine that one is functioning fine of the two.

As for uploading a screenshot, you’re right. We don’t have an option for it. (Something I lament often and we’re looking into a solution.) In the meantime, you could use a service like Imgur or Photobucket to host the screenshot and then post the URL here.

One last question, though. What are your publish settings looking like? Ie., what kind of output are you using for the course itself? From the URL you’re getting it looks like you’re just publishing and executing straight to your desktop. Have you attempted loading this onto a web server or an LMS for testing? Sometimes that can make the difference when using Javascript in your course.

I’m also going get one of our developers involved to see if we can get you through this a little faster.
Brother Thomas on January 21, 2016 at 10:23 am

The dev had a similar issue calling the cpQuizInfoPointsscored and cpInfoPercentage variables in the Javascript as well. There’s probably a way to get it working properly, but he just suggested making user variables in those places instead. Then just create an action to assign those user variables with the data of cpQuizInfoPointsscored and cpInfoPercentage. Said it ended up working for him that way. Give that a shot and let me know if that fixes it for you, too.
Chris on January 21, 2016 at 10:34 am

Thanks Thomas – We are probably not going to use our LMS for this project as it has its own set of limitations with what it can report out. The plan is to install onto Learner’s desktops in a classroom. That’s why it would be very helpful for them to print their results. The output is HTML5 only with AICC scoring…

I will check to make sure that it’s notifying that variable when a correct answer is selected and look into your Dev’s suggestions.
Chris on January 21, 2016 at 12:06 pm

So, I have figured out the variables yet, but I can get the print dialog to output the scores again. It seems to only work for me when using Chrome. The same index.html file works fine in Chrome but not in IE11. In IE11, my print dialog url is always just

C:\Users\SZT6JG\Documents\My Adobe Captivate Projects\SAM_assessment_prototype_Printtest6\print.html

Without any answers. Any idea why?

Thanks,

Chris
Brother Thomas on January 21, 2016 at 12:26 pm

At this point, I’m guessing it’s due to some issue related to calling those two system variables, as I mentioned in the previous reply. I’m not surprised to hear that certain browsers aren’t playing as nice, either (especially Internet Explorer). At this point, I would just try setting the user variables to the same values as the system variables as our developer suggested. Let’s see if that works out before jumping onto another solution.
Chris on January 21, 2016 at 12:44 pm

Thanks – I will try that approach. To be clear, the scores are being sent to the results screen correctly – they display as they should on the screen, they just don’t when printed using the JavaScript. I don’t know enough to know if that makes a difference…

I appreciate your help with this!
Brother Thomas on January 21, 2016 at 2:12 pm

It’s no problem, Chris.

The problem, if our dev is correct, is in that the Javascript is having problems pulling out the values of those two variables (perhaps due to the way that Captivate uses its system variables?). So, they should show up fine just getting used normally on a Captivate slide. Pulling those values first into a user variable, which Captivate won’t touch unless you tell it to, is what we’re hoping might fix things 🙂 We’ll keep our fingers crossed for ya!
Chris on January 21, 2016 at 2:40 pm

So, the user variables are almost working correctly (thanks for that) but I am unclear on timing.

There is already an Action when the results slide appears to conditionally show different text based on the user’s score so I can’t add my new action there. I tried adding it when the previous slide exits but that did not work.

The only way I got it to work was to make an existing shape on the results slide a button and add my new action to that. That only works if the user clicks on the shape before hitting the Print button. So close. What’s the best way to add it without any user input? I assume it needs to come before the Print button…

Thanks
Brother Thomas on January 21, 2016 at 2:56 pm

If you use Advanced Actions, you should be able to make a Captivate script (not to be confused with your Javascript code) utilizing multiple single actions for your print button that will both set the user variables and execute the Javascript. Alternatively, you can also use Advanced Actions to set the user variables when the results slide appears. Basically, Advanced Actions works similarly a single action except there’s a whole chain of actions you can create based off a single event. Here’s a link to the Adobe help article on Advanced Actions if you want a brief intro.
Chris on January 21, 2016 at 2:57 pm

OK I figured the timing out. I combined the User variables action with the Print action and it worked as expected. The only issue is that it still does not work at all in IE11…
Brother Thomas on January 21, 2016 at 3:11 pm

That, sadly, is something I can’t speak to very well beyond just knowing that IE is one of the most finicky browsers out there. Some preliminary Googling shows that this isn’t necessarily an unusual thing when trying to run an HTML file locally that has Javascript in it and might be part of the security settings on IE. Take a look at the answer in this Microsoft community thread and see if that fixes it.
Chris on January 21, 2016 at 3:29 pm

Agreed. IE stinks… I just tested on my non-work computer on IE and it works fine. It must be an security setting on work computer. Thanks a lot for your help and patience with this. It was very informative.

Chris
Scott on February 12, 2016 at 9:00 am

Hi,

I’ve built this printable page but I’m running into the same issue Michael Stephens had (31st March 2015) in that I’m running into the character limit.

I’ve read the response about storing the data in a database but it’s a bit over my head if I’m honest. Is there a simpler of producing a printable page that could accommodate a large amount of characters?

Thanks
Brother Thomas on February 12, 2016 at 10:56 am

Hi Scott!

I’m guessing you’re still on the lookout for a possible solution to the SWF/HTML5 issues of the other blog? The suggestion I would normally give to fix the character limit would be to approach that 3 Ways to Print to PDF blog, as it allows for the larger character count. But that’s already been taken off the table, since it will break down in SWF. Sadly, that’s just about the only other simple solution I can come up with for you. Everything else is going to get more complex :/
Scott on February 15, 2016 at 2:04 am

Hi Brother Thomas,

No problem, thanks again for coming back to me!

Scott.
CJ on March 21, 2016 at 3:48 am

I need to have a lot of text entry boxes allowing users to input at least a paragraph of text into, but i need to add carriage return, so i can print paragraphs and line break, but i’m unsure of what code i need to add to my javascript.
I think you ad a line feed code here:
var url = (“print.html?=” + header + args);
window.open(url,”_blank”,”width=800,height=600,menubar=no”);
but i can’t get it to work. can you help.
Brother Thomas on March 21, 2016 at 7:33 am

Hi CJ!

Depending on where you want the carriage return, this could get a little tricky as you’ll likely have to edit the print.html file and not the Javascript code. Given this, plus the fact that you mention needing a lot of entries with lots of text, you might be better suited to follow another solution (this one only allows around 2000 characters TOTAL; anything more than that causes it to break).

I would maybe try implementing the Printable PDF solution I’ve mentioned in the comments above. It has a little more flexibility than this one and might kill two birds with one stone! I have to warn, though. If you need to publish as a SWF, this solution isn’t going to work. The Javascript requires an HTML5 publish.
Erin on August 24, 2016 at 5:29 pm

Hi,

I’m using text entry boxes to allow my users to write free text comments to questions like “What’s the most valuable thing you’ve learned so far?”. I’d love to be able to report on their answers in the text entry boxes, so that their comments throughout the e-learning module can be captured in one report.

Is there any way of doing this within Captivate 9?

Erin
Brother Adam on August 25, 2016 at 8:52 am

Hi Erin,
Since this process is using variables, you can apply those variables to multiple objects throughout the course. And Captivate 9 didn’t change much in the way of Javascript usage, so you can easily apply this process to Captivate 9 as well.

Hope that helps.
Erin on August 27, 2016 at 11:15 pm

Hi Brother Adam,

Thanks so much for your reply 🙂 Although I’m not sure if I understood your answer…I’m still pretty new at Captivate and definitely not great at coding!

Is there a way I can print a report from my Captivate course that captures the questions and free-text comments (I’m assuming the free text comment is a ‘variable’…let me know if I’ve misunderstood). I want to be able to give participants a record of what they answered in the course.

Thanks so much!

Erin
Brother Adam on August 29, 2016 at 8:54 am

Erin,
The great news is that this really requires zero coding experience. The coding is already provided for you in the Javascript snippet that is included in the steps above.

I followed the steps in the blog and just put the Text Entry Boxes on different pages instead of the same page (as set forth in the blog) and it worked like a charm. It created a page with my logo, the question text and the user entry.

Follow the steps in the blog (yes, the free text comment is a “variable”) and let me know how it goes. If you want to add more than 3 text entry fields, you can do that, too (but that’s where the coding would come in).

Let me know how it goes and if there’s more I can do to assist.
Rania B on January 20, 2017 at 10:04 am

Hi,

I’m trying to retrieve answers submitted in multiple TEB from several slides into one result page, and have that printed in a format like the one you presented in this tutorial.
Is there a JS that can retrieve the text and print it? Sorry I am new to JS and I tried recalling the variable using the $$ and it didn’t really work.

Cheers!
Thomas Reyes-Cairo on January 20, 2017 at 11:20 am

Hi Rania!

When you execute the Javascript cp.vm.getVariableValue(‘Text_Entry_Box_1’), you are pulling in the variable string in for printing. That variable can be on any slide, since it’s just retrieving the value. So, basically, just swap Text_Entry_Box_1 for whatever your TEB variable name is and it should be good.
Jason on June 22, 2017 at 9:12 am

I was hoping someone could help me out.
Is it at all possible to create a printable feedback page?

I have an assessment with 20 questions with 5 answers each. Each answer has a feedback text box associated with it. i.e If the user selects answer two for question one then text box Q1A2 is shown. (Q1A1, Q1A3-Q1A5 are hidden)

This results in a final page containing 20 text boxes. Each text box contains too much text to display all the text boxes on one page. I want to “move” the visible text boxes onto a printable document (which will be used as a development tool for staff).

Apologies if this is not the right place to post this, however this blog post seemed to reach close to the solution I need.
Thomas Reyes-Cairo on June 22, 2017 at 10:14 am

Hi Jason!

You could try this blog out for size: http://elearningbrothers.com/3-ways-print-pdf-captivate-8/

It does require that you know your way around JavaScript a little if you’re going to do some editing of the template, but it’s on the beginner side of things if you feel confident enough to get your feet wet. Hope that helps!

EDIT: I should also mention that this project doesn’t have anything putting the feedback into the PDF file. But, so long as your feedback can be shoved into a variable, you should be able to use the code that’s there to produce a PDF as desired.
Tyson Chaplin on August 28, 2017 at 2:58 pm

Does this method still work in Captivate 2017? If not, what can be done to make this work with 2017?
Thomas Reyes-Cairo on August 29, 2017 at 10:03 am

Should work just fine in Captivate 2017. Give it a shot and let us know if you run into issues!
Charlie Mullin on October 11, 2017 at 3:51 pm

Can I specify a variable directly rather than a Text Entry Box? Something like this:

“Question 1~~” +
cp.vm.getVariableValue(‘$$v_G02$$’)+

I have a number of Text Boxes that store variable values that I’d like to print. I tried specifying the Text Box name, but that didn’t work.

In the Print preview, I successfully display my Question labels, but where I expect the variable value to display, it says “Undefined”.

Thoughts?
Adam Cannon on October 12, 2017 at 2:23 pm

Try removing the $$ from before and after your variable name. When I tried it, it seemed to work, but I may not be replicating your steps exactly.
Charlie Mullin on October 16, 2017 at 11:13 am

Hi Adam, thanks, I figured that out.

But I now have a different need. I want to redesign the report slightly, which means messing with the JS code, I think.

Imagine that each “Question” is followed by a line of data that looks like this:

7 Detail information about this response

Where the value “7” is fetched from a variable and formatted in a large font and specified color, and the “Detail…” value is just text formatted in a smaller font and a different color.

I tried creating separate variables in JS and had some success with the formatting but could’t figure out how to get each Q/A pair to appear on separate lines. I tried it another way (more like I described above) but am getting an “Undefined” string instead of the “7” value, but am getting the “Detail…” text.

I suspect that I’m fighting with the print.html code which is expecting certain syntax and structure from the JS file.

Any thoughts?
Would it help if I could submit my code attempts?

Thanks!
James Kingsley on October 18, 2017 at 9:26 am

Hello Charlie,
It sounds like you want to add a third bit of data to each question. We could rewrite the JS that loops through all the data to accommodate that but it may be easier to inject it into the string we are sending to the print.html page.
We will add the new variable and make it bold:
“Question 1~~” +
““+cp.vm.getVariableValue(‘NewVar1’)+”“+cp.vm.getVariableValue(‘Text_Entry_Box_1’)+
“~~Question 2~~” +
etc…
Ray BOehmer on October 24, 2017 at 9:20 am

This looks really promising to solve a problem we are having. Does this method work for Quiz slide variables as well as user variables..?
We need for text entry data to be printable for the learner, but also captured for the faculty in our LMS.
rob stewart on February 7, 2018 at 8:34 am

Worked first time for me in Cp9, I messed a bit with the js & html to output Cp system variables and user variables. Print worked in latest Chrome & Firefox fine, no embedded pic in MS Edge, and diddly nothing in IE11. Thanks, v.useful.
Stephanie Ivec on February 7, 2018 at 12:11 pm

Glad you found it helpful!
Daniel Captivate 2017 on August 30, 2018 at 9:21 am

Hi! i have a question. Have you posted the tip for the pdf print, that also asked arnaud:I will wish to have a pdf button instead of the print button.
In fact, after doing a quiz if the user can click a button to have their quiz results in pdf??

If there is no way to print to pdf can you say me how to make more answers in html page?
Andrea on October 9, 2018 at 11:51 am

Hi I am looking for any help on this code. No matter what I do, it results in a blank output. I am also looking for any help on the header. I am trying to figure out how to use the header tag.

var header = “Title of the Slide~~”
var args =(
“Question 1~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_1’)+
“~~Question 13~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_13’)+
“~~Question 15~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_15’)+
“~~Question 4~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_4’)+
“~~Question 20~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_20’)+
“~~Question 21~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_21’)+
“~~Question 22~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_22’)+
“~~Question 23~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_23’)+
“~~Question 17~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_17’)+
“~~Question 18~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_18’)+
“~~Question 19~~” +
cp.vm.getVariableValue(‘Text_Entry_Box_19’)
)
var url = (“print.html?=” + header + args);
window.open
(url,”_blank”,”width=800,height=600,menubar=no”);