Copy link to clipboard
Copied
Until now I've been too busy finalizing a print widget that works for HTML5. But here you go.
You can design the appearance of the final PDF with colors, images, text and print size (letter, A4, etc.)
This widget contains text strings that are pulled from Captivate/LMS variables
It also shows two images rendered/converted from jpeg to base64
You need:
In Captivate you need to do following
Make a variable named SubjectText (The value her is your description of your course)
Make a variable named SubtitleText (The value here is your sub description of your course)
Make a variable named TransTestTitle (A Course Title - NOT from your LMS)
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);
}
})();
__________________
A Print certificate button with a JavaScript
__________________
var studentname = cp.vm.getVariableValue('cpQuizInfoStudentName');
var subjectname = cp.vm.getVariableValue('SubjectText');
var subtitle = cp.vm.getVariableValue('SubtitleText');
var url = "print.html?studentname=" + studentname + "&subjectname=" + subjectname + "&subtitle=" + subtitle;
window.open(url,"_blank","width=800,height=600,menubar=no");
__________________
Print.html
Place the HTML file in the root folder in your exported SCORM package
The code for the print.html is (the base64 js are excluded so you need to insert them yourself after you converted the images):
__________________
<!DOCTYPE html>
<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>
_______________
Good luck!
/Jacob
Copy link to clipboard
Copied
Thanks a lot! Did you think about publishing this to the eLearning community as well?
Copy link to clipboard
Copied
I thought it was only the chosen ones that can do that.
Copy link to clipboard
Copied
Why?? Everyone can post a solution on the eLearning community. There are no 'chosen ones' at all. In this forum I work a little bit as moderator because I am an ACP. In the elearning community I do not hae any status, have to wait for moderation on everything like all users. Do not imagine situations before checking them out.
Copy link to clipboard
Copied
I looked into tons of different solutions and spend hours googleing for ideas on how to get this to work until I found this!
Copy link to clipboard
Copied
Jacob,
I'm unable to get this to work in my project. Cp 2019 11.5.1.499
I have the UserName variable entered by the user at the beginning, so I am not including your stuname statement. Besides that, I am following your steps.
When I execute the project (using Chrome or Edge) and click the print button, I get an error in the console on CPM.js, which is one of Captivate's files. The error is:
SyntaxError: Invalid or unexpected token
at eval (<anonymous>)
at Function.a.runJavascript (CPM.js:656)
at eval (eval at executeAction (CPM.js:978), <anonymous>:1:4)
at cp.Movie.executeAction (CPM.js:978)
at Function.b.clickSuccessHandler (CPM.js:903)
at Function.b.clickHandler (CPM.js:902)
at b.ch (CPM.js:902)
at f (CPM.js:269)
at Function.a.handleClickExternal (CPM.js:272)
at HTMLDivElement.a.handleClick (CPM.js:273)
Any idea what could be going on here? If it helps, my certificate only needs to have 2 dynamically generated items: the user's name and today's date. And I only need 1 image on my certificate.
Thanks in advance!
Copy link to clipboard
Copied
Could you send me a stripped version of your project?
Then I will take a look.
/Jacob
Copy link to clipboard
Copied
Afternoon,
I was wondering if you could advise. We use this on a Captivate project and generally it works well. Just had a customer who has a machine saying when they click the pdf button a window pops up, but no pdf is created. I've done some testing on a new box and when it allows it a window pops up (Internet Explorer) and asking for running ActiveX control. Select Yes and nothing happens. After trial and error I can remove the need to allow for ActiveX control, but it still won't run the process.
Would you know if there is a min requirement or any specific software that needs to be installed to get the converter working?
Both PCs are Windows 10 Pro
Thanks
Copy link to clipboard
Copied
Sorry I forgot to mention the both PCs have not been connected to the internet.
Copy link to clipboard
Copied
If you cannot get Jacob's solution to work as you expect, you might be interested in this alternative:
https://www.infosemantics.com.au/custom-captivate-certificates/
However, please note that this is a custom certificate created for your company using your specific criteria. So it's not free.
Copy link to clipboard
Copied
Thanks - think we are ok.
Copy link to clipboard
Copied
As bit more information I've installed Chrome and it works fine. Makes me wonder if there is a specific issue with Internet Explorer 11.
Copy link to clipboard
Copied
hey can someone share an example project with me to compare? i cant get jsPDF to work and cant share my project 😄