Adobe Captivate 8

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

step2_small

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.”

step3

step3b

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.

step4

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.

step5

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.

 

 

 

Pin It on Pinterest