New HTML5 'widget' for a print PDF certificate - As I promised a year ago...
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:
- jspdf.min.js library (download it or embed it from here https://parall.ax/products/jspdf or embed it from here https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js
- Two images (in this example) that you convert to base64/Data URL. You can do use this tool https://www.cssportal.com/image-to-data/
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
AdChoices