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:
Hi Owen. I know it has been a number of years since you posted this solution to printing a Certificate from Storyline via html.
I am trying to do just that and I have tried to follow a simplified version of your html code. I already have the variables I need in a certificate created in Articulate 360. I am just trying to print this screen so was hoping that the following html code would work but I cannot get a print screen to activate.
Can you help....
myWindow = window.open("","Print","width=900,height=700,scrollbars=0,resizable=0");
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
myWindow.print();
The code looks right to me. Can you share a file so I can peek under the hood?
I have a Rise demo that IF your browser security setting are right, shows you how to pass data between Storyline blocks. At the end of the course, I have an HTML certificate (also generated from a Storyline block).
You can check it out here: https://360.articulate.com/review/content/b56569f8-4679-4c5c-a937-738eb98cc3fa/review
The certificate code I'm using looks like this:// Get variables from StoryLine.
var player=GetPlayer();
var studentName=player.GetVar("StudentName");// Get date from computer and format it for the certificate.
var date = new Date();
var certificateDate = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();// Open a print window
myWindow = window.open("","Print","width=1056,height=816,scrollbars=0,resizable=0");// Create the certificate by loading all the HTML code into a single variable.
var contents ='<html><style> @page {size: landscape;}</style><body><div style="width:900px; height:660px; padding:20px; text-align:center; border: 10px solid #0c4da2"><div style="width:850px; height:610px; padding:20px; text-align:center; border: 5px double #0c4da2"><br/><span style="font-family:Lato; font-size:45px; font-weight:bold">Certificate of Completion</span><br/><br/><br/><br/><span style="font-size:30px"><i>This is to certify that</i></span><br><br><span style="font-size:45px"><b/>';contents+=studentName;
contents+='</span><br/><br/><span style="font-size:30px"><i>has completed the</i></span> <br/><br/><span style="font-size:45px"><b>Passing Variables<br>Between Storyline Blocks in Rise</span> <br/><br/><span style="font-size:30px">course.</span> <br/><br/><br/><br/><span style="font-family:Lato; font-size:30px"><i>Completion date:</i></span><br><span style="font-family:Lato; font-size:30px"><i>';
contents+=certificateDate;
contents+='</i></span></div></div></html>';
// Write the contents to the window and execute the print command.
myWindow.document.write(contents);
myWindow.document.close();
myWindow.focus();
myWindow.print();
Always there when I need ya. I was going to do something similar to this on my portfolio sample. Thanks Owen.
Donations (or work) are accepted.
Hey Owen,
Pretty good way to go
I've started to go exclusively JavaScript for generating certificates. Using a Web Object to hold the background graphic. Grr... attached.
To attach graphics (or pretty much anything) in a Web Object folder that'll publish to a consistent path every time:
1) Make a folder. Add an index.html file to that folder. It can be a blank file. Just needs to be named index.html
2) Add your other files (you can add all that you want to this folder including sub folders)
3) In Storyline, add this folder as a Web Object to one of your slides. Move it off to the side if it's a slide that will be visited.
4) Right click the web object and select WebObject > Open.
5) In the window you'll see a URL open from your local file system. Just before test.html, you'll see a unique ID between two forward slashes. Copy this value. I put it in a text field on the slide above the web object.
Now you're ready to rock referencing your "baggage files".
story_content/WebObjects/youruniqueID/yourfile.ext
It'll be consistent on every publish.
Hi Steve,
I've tried this and it doesn't work for me when exporting as a SCORM 1.2 file. I've attached here a .zip containing the files I use. I'm not sure what I did wrong. Can you please help me?
Nice. This is why you are the master.
When you have a moment, I just posted a javascript question in the thread about pulling the participant's name from the LMS.So I developed my javascript and attached it to a trigger but nothing is happening. Not sure what I did wrong, but if you guys can take a look I would appreciate it.
One thing I noticed is a problem with your quotation marks. You need to look for the opening marks that java will see and make sure that you are not closing it in your html code. For example, here is a line from your current code (with a space added after the
Contents + = '';
The quotation opens before and closes right after. Text/css isn't contained in quotes at all as written. To solve this, use single quotes (') for your javascript and double quotes (") for your html or the other way around. Like this:
Contents + = '';ugh - adding the space didn't work. I've posted the example in the attached text file.
This is a bit above me I have not used Java before has any one a working example that I can look at, including the source story file.
Hopefully I can then get it to work!!!!!!!!
