Forum Discussion
Create a Course Certificate in StoryLine! (with Java and HTML)
I noticed in Stephanie Harnett's most excellent post on user notes that can be printed or emailed that much of the java for the printing function was really just filling the print window with content by using html. I thought to myself, why not use this same method for creating a course certificate. So I did just that following the steps below:
1) Design a rough draft in PowerPoint (so I could see what elements I would want on the page and determine or create any graphics I would need.
2) Create graphics and publish them to the web. You will need to reference them using a full URL.
3) Create an HTML based certificate using your favorite html editor. Tables work really well. I discovered this on my 3rd try to get this right. (More on that later.)
4) In StoryLine, create a trigger to execute JavaScript
5) Use the JavaScript to create your print window contents by adding the lines of your html together (see screenr)
Publish and test.
Below is a copy of the certificate created by StoryLine. The blue text represents variables pulled form the course:
108 Replies
Ok this is weird, I press the button to print the certificate, and the print window has no images. The new window is underneath this and HAS images, and when I close it and press the print button again - both work!
It seems to open the print window before the images are loaded, but second time around they load.
It shouldn't need to open two windows. That's strange behavior:)
Have a look at this
Try commenting out the window.print line. Do the graphics load when the print function isn't called?
//myWindow.print();
It works perfectly when the print function is not called. It seems like it opens the print window before it is all loaded.
OK. Looks like Chrome fires off the window print too soon. What does the script look like? Depending on the construction, you could add the window print to the launched page and fire it after the page has been written.
contents+='<scr'+'ipt>'
contents+='window.print();'
contents+='</scr'+'ipt>'
contents+='</body></html>'myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
//myWindow.print(); comment this lineCode is attached.
Adding contents+='window.print();' just before the contents+='</body></html>' line does not seem to print in any browser. Maybe adding a print button in the html would be another option? I would like it to print automatically though.
//Thats work:
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
setTimeout(function(){ myWindow.print(); }, 3000);
//myWindow.print();
Need to surround that window.print() call with a script tag to get it to work. The alternative you might try is adding an onload call to the body tag:
contents+='</style><body onload="window.print();">';
Hi Steve,
Ref: Matt Lynch Post
I used Owen Holt method for creating html certificate via SL JS. I also incorporated your method for making the html graphic files persistent via the webobject feature of SL. Although I'm sure my html/js codes are correct, I'm experiencing the same problem as Matt Lynch when the SL output file is running from Google Chrome.
When the file is published locally and on SL Tempshare, everything works as expected in IE-11 and MS Edge on Windows 10. However, when opened in Chrome the print window will not show the graphic elements. Just as in Matt's case, if you cancel the print job the graphic elements will appear. It seems that there is a delay in loading the graphics in Chrome.
Also, I noticed from your website that you also work for the Fed in the DC Area. I hope you will have insight and perhaps possible solutions to issues related to SL and Federal Gov webserver security conflicts.
Case in point, I tried to open the same storyline output from a Gov network via CITRIX and could not get it to work in IE-11. The print function doesn't work and only opened a blank window. On Chrome I experienced the same issue as described above.
Before attempting this method of creating completion certificate, I used Ryan Lowry's well-documented PDFMake (http://pdfmake.org/#/) method; https://community.articulate.com/discussions/articulate-storyline/storyline-2-example-generating-a-pdf-certificate-for-users-who-successfully-complete-a-quiz-html5 to successfully create pdf certificate. However, when the course was uploaded to the Gov webserver, the PDFMake function would not generate the PDF certificate. I suspect that this method may be blocked by web security protocols.
I appreciate any assistance you can provide on the problems described above. Thank you in advanced for your time,
Dan
Thanks for all of your help Steve, but unfortunately the two methods don't seem to print at all, in either browser.
contents+='<script>window.print();</script>';
or
contents+='</style><body onload="window.print();">';
