Highlighted

New HTML5 'widget' for a print PDF certificate - As I promised a year ago...

Participant ,
Nov 27, 2019

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

 

 

 

 

TOPICS
Advanced, Advanced actions, Editing

Views

495

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

New HTML5 'widget' for a print PDF certificate - As I promised a year ago...

Participant ,
Nov 27, 2019

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

 

 

 

 

TOPICS
Advanced, Advanced actions, Editing

Views

496

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 27, 2019 4
Most Valuable Participant ,
Dec 01, 2019

Copy link to clipboard

Copied

Thanks a lot! Did you think about publishing this to the eLearning community as well? 

https://elearning.adobe.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 01, 2019 0
Participant ,
Dec 01, 2019

Copy link to clipboard

Copied

I thought it was only the chosen ones that can do that.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 01, 2019 0
Most Valuable Participant ,
May 20, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2020 0
New Here ,
May 20, 2020

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!

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2020 0
Explorer ,
Jul 29, 2020

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2020 0