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:
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();">';
I want to be able to do what Owen, did but I don't know how to do it, no JS or HTML experience.
Can someone help me with the detailed steps.
hi, I'm hoping someone can help.
I have create a certificate and, added it to my zip file and loaded it up to my LMS. When the certificate prints I get the learner's name, the date, but the course show null. Any ideas on how I can fix this? Not a java or HTML person. Thanks
Thanks a bunch, worked great!
I welcome the student on the first slide, so I put the code to execute at timeline start and displayed the welcome text half a second after. Is this necessary or can I just put the code and the text at the same moment in time?
Best regards,
Hey, Dan -
For the Chrome issue, I think it's got something to do with the timing of events. The print is executed before the graphics have a chance to load in. It's been awhile but I seem to recall needing to put in a slight delay or callback to wait for everything to come in before triggering the print.
For the Citrix item. Not sure but it could be something similar with an order of operations or timing problem. Are you able to see anything return in the dev console? If a dependency wasn't loading, this would likely show up there.
Hi, Steve, Matt and Daniel
I'm sorry to jump into this thread/conversation.
I've been working my way through the excellent source files provided by Owen for the certificate and it works in every other browser aside from Chrome.
I'm having the exact same issue as Matt and Daniel, within Chrome the printer doesn't print any of the graphics within the certificate - and the print window opens before it's loaded.
I've tried looking at other online sources for guidance on Javascript - but I'm a total 'newb' to coding in this language. I know the problem is with print window opening before its loaded, but I don't know how to solve this issue.
I've attached the Storyline file I've been working on with this message.
Any help would be greatly appreciated.
Many thanks,
Greg
I have the issue of getting a blank page when I use the window print script
Hi Steve,
Thank you for responding to my request. Regarding the chrome timing issue, I will try a version where the print command is called by a second trigger and see if it will fix the problem.
As for the citrix issue, because the trigger only open a blank html page when accessed via IE-11, it doesn't show any error on the dev console.
I also replicated the jsPDF method for Saving Storyline Variables to a PDF as a possible solution, (https://community.articulate.com/discussions/articulate-storyline/saving-storyline-variables-to-a-pdf), once again accessing the SL output using IE-11 on citrix proved to be problematic. In this case the trigger doesn't do anything when clicked. On Chrome, the trigger worked as designed. My SL file using the jsPDF method is attached. I find this really perplexing because if it's a security protocol than it should fail in the same way regardless of which browser is used.
I see the jsPDF method as a possible certificate solution, but the draw back is having to add the <script></script> codes to the storyline.html after publishing. I also used your webobjects embedding technique with this method to store the js files.
In the Saving Storyline Variables to PDF post, you offered an alternate solution to changing the storyline.html after publishing, please see your comments below. I did not fully understand your method for loading the script dynamically, could you elaborate on this and maybe apply it to my attached storyline file.
I will try your Generating a certificate from Storyline method next, perhaps, it will work in the citrix environment as well as direct network logon.
Thank you for your time. I'm very grateful for any assistance you are able to provide.
Dan
Text from Saving Storyline Variables to a PDF follows:
You might have some luck embedding your dependencies in a Web object and dynamically writing them into the head of your document to save having to add them after each publish. Here's the function I use to rewrite headers at run time. This doesn't work well for everything but for PDF generation it should be fine.
//where is our carry-on baggage? Find this by right-clicking the web object and choosing open. Grab the object ID from the address bar.
this.oLocation="story_content/WebObjects/66vjsN26Fjn/";
//load the scripts dynamically
function add_script(scriptURL,oID) {
var scriptEl = document.createElement("script");
var head=document.getElementsByTagName('head')[0];
scriptEl.type = "text/javascript";
scriptEl.src = scriptURL;
scriptEl.id=oID;
head.appendChild(scriptEl);
}
//only want to add these once! Check to see if the ID exists first.
if(document.getElementById('soundman')==null){
//first parameter is the script reference to add to the header, second is the object ID
add_script(oLocation+"script/soundmanager2-jsmin.js","soundman");
}Hello Owen,
Thank you for sharing your method for creating course certificate. Your sample files were very helpful and enabled me to implement in my course.
However, I am experiencing an issue that perhaps you may have some insight on. When I tested this method from my personal computer, it worked as designed on IE-11. However, the same file tested with Chrome appears to have some timing issue where the graphics does not appear (see attached file chrome result.png). If I choose to cancel the print job, the graphics will appear and I can right-mouse click to print.
I also tested the SL output from a government's (my client) network and computers using both IE and Chrome. I got the same result using Chrome. But worse result using IE. In the case of IE, I get a blank screen, see attached file IE result.png).
Do you have any insight into what might be causing these problems, and more importantly, how I might go about resolving them.
Thank you for your time,
Dan
Owen, this is awesome! I owe you beer! :D
