Hi,
Until now I’ve been too busy finalizing a print ‘widget’ that works for HTML5. But here you go. Try the demo here: http://pdfdemo.elearnia.dk/index.html
You can design the appearance of the final PDF certificate with styling, images, text and print size (letter, A4, etc.)
The certificate contains a number of text placeholders. These are pulled from Captivate, LMS (if you use such) and also from manually edited HTML files. Furthermore it shows two images rendered/converted from jpeg to base64.
There are two print options in this demo project:
A4 landscape and Letter Portrait.
You need:
A. minified jspdf.min.js library – download it or embed it from here https://parall.ax/products/jspdf or use the identically file also included in the content package you can download from the URL earlier in this post.
B. Two images (Try Google 
) to pimp your layout on your certificate (in this example I used my own logo).
In Captivate you need to create following variables
- Create a variable named SubjectText (The value her is your description of your course)
- Create a variable named SubtitleText (The value here is your sub description of your course)
Images to Base64
Convert your images from jpg to base64/Data URL using this online tool: https://www.cssportal.com/image-to-data/ Save the strings in a text document for later use.
A JavaScript code that is excuted when you enter the first page of your project:
(function(){
var stuName=”;
if (typeof window.GetStudentName===’undefined’){
stuName=’Name Not Found’;
} else {
stuName=GetStudentName();
if(stuName==”){
stuName=’No name defined’;
} else {
}
}
var objCp=document.getElementById(‘Captivate’);
if(objCp && objCp.cpEISetValue){
objCp.cpEISetValue(‘m_VarHandle.navn’, stuName);
}
})();
Create a Print certificate button for Letter format with following JS Code:
var studentname = cp.vm.getVariableValue(‘cpQuizInfoStudentName’);
var subjectname = cp.vm.getVariableValue(‘SubjectText’);
var subtitle = cp.vm.getVariableValue(‘SubtitleText’);
var url = “printLetter.html?studentname=” + studentname + “&subjectname=” + subjectname + “&subtitle=” + subtitle;
window.open(url,”_blank”,”width=800,height=600,menubar=no”);
And a Print certificate button for A4 with:
var studentname = cp.vm.getVariableValue(‘cpQuizInfoStudentName’);
var subjectname = cp.vm.getVariableValue(‘SubjectText’);
var subtitle = cp.vm.getVariableValue(‘SubtitleText’);
var url = “printA4.html?studentname=” + studentname + “&subjectname=” + subjectname + “&subtitle=” + subtitle;
window.open(url,”_blank”,”width=800,height=600,menubar=no”);
Create a HTML document (printA4.html) and put following code in it (remember to insert your own base64 content and text)
<html lang=”en”>
<head>
<title>Certifcate doc eLearnia.dk 2019</title>
<script src=”js/jquery-2.2.4.min.js”></script>
<script src=”js/jspdf.min.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function () {
// Name
var name = getParameterByName(“studentname”);
name = decodeURI(name);
// Subject
var subjectname = getParameterByName(“subjectname”);
subjectname = decodeURI(subjectname);
// Subtitle
var subtitle = getParameterByName(“subtitle”);
subtitle = decodeURI(subtitle);
// Print
printpage(name, subjectname, subtitle);
function printpage(studentname, subjectname, subtitle) {
var doc = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
})
// Logo image x and y and w an l. INSERT YOUR BASE CODE BETWEEN = ‘ ‘
var logo = ‘ ‘;
doc.addImage(logo, ‘JPEG’, 180, -10, 108, 54);
// Footer image or background image x and y. INSERT YOUR BASE CODE BETWEEN = ‘ ‘
var bg = ‘ ‘;
doc.addImage(bg, ‘JPEG’, 26, 134, 250, 64);
doc.setFont(‘Verdana’);
doc.setFontSize(50);
doc.setFontType(“bold”);
doc.text(‘TEXT FIELD ONE. REPLACE STRING WITH YOUR OWN TEXT’, 148, 60, ‘center’)
doc.setFontSize(20);
doc.setFontType(“normal”);
doc.text(‘TEXT FIELD TWO. REPLACE STRING WITH YOUR OWN TEXT’, 148, 80, ‘center’)
doc.text(subtitle, 148, 90, ‘center’)
doc.setFontSize(18);
doc.setFontType(“bold”);
doc.text(studentname, 148, 106, ‘center’)
doc.setFontSize(12);
doc.setFontType(“normal”);
doc.text(subjectname, 148, 122, ‘center’)
doc.setFontSize(14);
doc.setFontType(“bold”);
doc.text(getToday(), 148, 130, ‘center’)
doc.save(‘certificate.pdf’)
}
// Function to get parameters
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[[]]/g, “$&”);
var regex = new RegExp(“[?&]” + name + “(=([^&#]*)|&|#|$)”),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return ”;
return decodeURIComponent(results[2].replace(/+/g, ” “));
}
// Todays date
function getToday() {
// Date and date format
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = ‘0’ + dd;
}
if (mm < 10) {
mm = ‘0’ + mm;
}
today = dd + ‘/’ + mm + ‘/’ + yyyy;
return today;
}
});
</script>
</body>
</html>
Create another HTML document (printLetter.html). You can use save as from the A4 version. In the HTML you can manipulate for example size and positions of the final content on the certificate.
After you have exported your Captivate project – don’t forget to:
- Make a new folder /js where you copy the 3 .js files that I also attached in this tutorial.
- Copy printA4.html and printLetter.html to the root folder in your expored project
That should do it…
___________
Good luck!
/Jacob
Hi Jacob, Many thanks for your work its very useful and I´m using It now, I have a question and I hope anybody can help me, Im trying to print the score of the quiz on my certificate using the sistem variable cpQuizInfoPointsscored the variable works fine on captivate because it show the score obtenined by the user, but when im trying to put on the certificate always display 0 is any other variable to obtain the result of the quiz in captivate?
Hi Christopher
Nice to hear, that you could use my project. I need you to test something.
Test A:
Remove ‘ ‘ from your variable, just to see if’s a string issue.
Test B:
Inside Captivate, make a button on the page just before you reach the result slide or after the slide which contains points.
Make a new variable named testpoints
Using the button, assign the var testpoints with cpQuizInfoPointScored with Advanced Actions.
Make a text caption with $$testpoints$$ to check if the button works.
On your print button replace vvar studentname = cp.vm.getVariableValue(‘cpQuizInfoStudentName’); with var studentname = cp.vm.getVariableValue(‘testpoints’);
Please let me know if it works.
/Jacob
Hi Jacob With Test A Return me Undefined value, but with Test B can catch and print “cpQuizInfopointsscore”. Thanks for your help, Great Job!
Hi Jacob,
I have tried the demo but get the following error (See attachment) when printing to PDF
Thanks
Paul
Attachment 
Thanks for the feedback.
Have you tried it on more than one computer and different browsers?
/Jacob
Many thanks Jakob, for ‘hearing’ my recommendation as well. Hope many users will use your contribution.
You must be logged in to post a comment.
