Javascript doesnt print a certificate

Sep 09, 2019

Hello,

I need an expert advice on javascript.

It looks right but when user clicks "print" button, a separate window opens but nothing happens further.

Is it possible to check the javascript please? Any other advice?

var player = GetPlayer();

var theName =(
player.GetVar("NameField")
)

var theDate =(
player.GetVar("DateValue")
)

var urlstring = ("printCertificate.html?print=" + theName + "&" + theDate);

window.open(urlstring,"_blank","width=800,height=600,menubar=no");

 

7 Replies
Jolie Wist

HI Brian,

Thank you for your comments.

When I click a print button, it opens a new window with this path:

https://training.spca.bc.ca/pluginfile.php/209/mod_scorm/content/5/printCertificate.html?print=Tamila&10/9/2019

Does it confirm what you are saying? It can't recognize where to print from?

I feel it should be an easy fix but I struggle to understand this tech language.

If I send a published slide, would you please have a look at it?

Please kindly let me know

Thank you,

Tamila

 

OWEN HOLT

The other responses are accurate. The html file location isn't specified or isn't found in the location specified. Additionally, this code is written to put the name and date in the url and not the actual certificate. I assume you are trying to print a certificate with the name and date in it?
Do you have a .story file you can share so we can see what you are working with and trying to accomplish?

Scott Wiley

Hi Jolie,

After a search on the html file name you mentioned, I'm assuming you were attempting to use the template from the "New Freebie! Storyline Print Certificate template" discussion here.

I've recently been playing around with using JavaScript to generate printable notes in a pop-up HTML window, so I thought I'd apply it to your problem.

I couldn't get your shared file to open as I'm still using Storyline 2, but see the attached file and code shared below to see how it works.

Note: This will produce only a solid black border around your "certificate" instead of the more stylized one from the freebie, but should do the work fine.

var player = GetPlayer();

// COURSE NAME FROM PLAYER
var courseName = player.GetVar("courseName");

// LEARNER NAME FROM LMS (SCORM 1.2 version)
//Your LMS may nest funny. In which case you might need to break out with:
//var lmsAPI = parent;
var myName = lmsAPI.GetStudentName();

// Same as above but for SCORM 2004
//var myName = lmsAPI.SCORM2004_GetStudentName();

// Name comes in as an array - will use features of array to separate
var array = myName.split(',');

// variables for JavaScript
var firstName = array[1];
var lastName = array[0];
var fullName = firstName + ' ' +  lastName;

// DATE TODAY FROM COMPUTER
var SystemDate = new Date();

// set Javascript variables from above
var dateDay = SystemDate.getDate();
var dateMonth = SystemDate.getMonth();
var dateYear = SystemDate.getFullYear();

// format dates to appear as written
dateMonth = dateMonth + 1;
// if you want 2 digit year, uncomment next line
// dateYear = dateYear.toString().substr(2,2);

// convert to double digits if needed
if(dateDay < 10){
     dateDay = "0" + dateDay;
}
if(dateMonth < 10){
     dateMonth = "0" + dateMonth;
}

// combine above to text string
var fullDate = dateMonth + "/" + dateDay + "/" + dateYear;


// PRINT TO NEW WINDOW
var newwindow = window.open();
var newdocument = newwindow.document;

// variable to hold HTML
var html_open = "<HTML><HEAD><STYLE type='text/css'>";
html_open += "body {padding:20px; font-family:arial,sans-serif}";
html_open += "H1 {font-size:36px; font-weight:bold; text-align: center}";
html_open += "H2 {font-size:24px; text-align: center}";
html_open += "table {border: 10px solid black; border-collapse: collapse; padding: 5px;)";
html_open += "</STYLE></HEAD><BODY>";

// Table to outline certificate
var table = "";
table += "<table width = '800' align='center'>";
table += "<tr><td height = '500'><H1>Course Certificate</H1>";
table += "<p align='center'>This certifies that</p>";
table += "<H2>" + fullName + "</H2>";
table += "<p align='center'>Has successfully completed</p>";
table += "<H2>" + courseName + "</H2>";
table += "<p align='center'>"+ fullDate + "</p></td></tr>";
table += "</table>";

//Javascript to write out the HTML in the new window
newdocument.writeln(html_open);
newdocument.writeln(table);
newdocument.writeln('</BODY></HTML>');

This discussion is closed. You can start a new discussion or contact Articulate Support.