Forum Discussion
Example files: Generating a certificate from Storyline
This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5.
To replicate this on your end:
1) Modify the story file to your liking.
2) Extract the add-in zip file above (certificate.html and certificateBG.gif)
3) Copy these two files into your published output directory. You'll need to do this each time you publish.
This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name.
** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.
236 Replies
Hi Leslie,
I was trying to do the same thing, but it seems that the HTML code is less than perfect for this because not all browsers will force the page to print in landscape. In the style section there is a command you can use that looks like this:
@page {
size: landscape; /* auto is the initial value */}It works on some browsers, but not all. There may be a way to get more browsers to respond, but my HTML knowledge is limited. We opted for help files telling people how to print landscape.Hi Jeffrey,
I apologize for the novice questions, but what do you mean by "style section"? Is this in the print dialog box javascript?
Thanks,
Jena
Hi Jena,
The "style section" is in the head section of an HTML file, usually where the styles are found.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body><h1>A heading</h1>
<p>A paragraph.</p></body>
</html>There are several different styles you can apply, but unfortunately most HTML codes/commands for forcing something to print landscape instead of portrait (really anything related to printing) depends on the browser you are using. The ideal solution is to convert to a PDF because that is a standard. While HTML5 is a "standard" Safari, FIrefox, Chrome, and Edge have styles they like and others they ignore.
One of the many reasons the death of Flash is a true tragedy. Hope that helps!
Hi Jeffrey,
Could you please share a sample storyline file with this functionality? I need to download the certificate with the learner's name on it, to print just as it appears in the storyline slide. Please help.
Thanks Jeffrey - it's too bad this can't be fixed universally. A limitation of HTML code I guess!
In newer browsers you could rotate your print elements so that it displayed vertically. You could get a portrait print this way with some careful planning. Again, would depend on the browser
We've gotten away from the portrait certificate expectation. Most folks won't hang these up anyway, so we modeled a certificate that could easily be punched into a binder for safe keeping. Most folks want these for their records.Thanks. This is for a project that is being delivered via CD to users around the country where we have no idea what browser they will be using. Since it is via CD and there is no tracking, they like the idea of a printable, "displayable" certificate, but the portrait orientation will just have to do!
Thanks everyone! I am very new to Storyline and every time I have a question I seem to find the answers on here.
Hopefully when I become proficient I may be able to add some suggestions too.
@Steve, I pulled down your story file and the attachments but can't seem to get this to work for me.
The certificate launches ok, but not of the text you have defined with the document. write command display.
So All I am seeing is the background and nothing else.
I've tried it on all my browsers IE, Firefox, Chrome and Safari and none of them display the text. I even uploaded it to the web just to see if it was some kind of security thing when running locally but that did not make a difference.
Interesting... Can you post your files somewhere I can get to them? Would love to take a look.
Actually Steve, it is the one you posted. It does not work for me. I have not made any changes to it. Can you double check to see if the one you posted works for you.
Neither of these actually work on an LMS - I've tried accessing the course on our LMS in IE and Firefox. I did not modify the pages that were in your documents - just put the pages into an existing course with a quiz - put these after the quiz and put Steve's files in the output. You can type your name but in the first example from Steve, the background never displays and the name is not drawn in. In the second example from Jefferey, again you can type your name, the name is never brought in, but the slide does have a background - but doesn't print.
Interesting. I've uploaded the files with one minor change (the graphic didn't show up on a 'NIX server due to a case issue):
http://www.xpconcept.com/certificate/story.htmlIt pulled the values for me OK. Can you take a look with your browsers to see if this one works?
