Example files: Generating a certificate from Storyline

Hi,

Asan addition to Steve's solution I have found another one based on the screenerJustin Wilcox recorded for Quizmaker (all credits to Justin). The principle isthe same. I have tested it and it works like a charm in storyline.

Nowthe "report.html" file was modified by somebody else but if you knowhow to write/amend .html files than you can do it yourself. You need to set up instoryline to "Print Results" at the end from the Results screen, thanit will generate a "report.html" file that you can modify.

Pleasefind the steps below on how to do this:

1.      Enable Manualupload from Storyline Options. (select “Enable publishing for manual upload toArticulate Online”)

2.      Enable manualupload from Articulate Online/Settings/Other Settings/Enable manual uploading(follow this link: http://receptionacademy.articulate-online.com/Settings/?Cust=53896)

3.      Download 7zipFile Manager (http://www.7-zip.org/) andinstall to your PC

4.      DownloadNotepad++ (http://notepad-plus-plus.org/)and install to your PC

5.      After the firstfour  steps:

6.      Add to resultpage a button with the trigger set “Print results” and style it to your liking

7.      Publish thecourse to Articulate Online but with the following changes:

          a.      Change URL to

          b.      Specify preferredfolder to publish

          c.      Publish

          d.      This willcreate a folder called “ output” including “.sl1”file

8.      Right click onthe published file (“.sl1” file)  and extract it with 7zip File Manager. Thiswill create a folder called “” including other folders (like story_contentfolder) and other .html files

9.      Go to publishedfolder and find story_content/report.html file.

10.  Modify thisfile to your preference using Notepad++ (or Any other program, I am sure thereare many more) Please keep in mind that we couldn’t figure out how to changethe course name on the certificate automatically, so you will have to do thismanually every time you post.

a.      To change thecourse name in the “report.html” file find this line:

varstrTitle = g_listQuizzes[g_oPrintOptions.strMainQuizId].strQuizName;

b.      And change itto this:

varstrTitle = "Course Name";

c.      If anybodyknows how this can be solved I would be happy to know

11.  Oncereport.html file is modified highlight every file and folder in the folder, right click on it and in 7zip compress it to .zipfile

12.  Once compressedchange the file extension from .zip to .sl1 and

13.  Ta-Daaaaa youhave your file to manually upload to Articulate Online from ArticulateOnline/Content/Manual upload with your very own certificate.

Hope this is helpful andclear. (This is the first time I am doing this.)

To see the originalscreener from Justin Wilcox  https://player.vimeo.com/video/145576223

To see my screener follow this link: https://player.vimeo.com/video/204932053

• Download modified report.html file
• Download .story file
• Download the guide for this
• See it in action

Daniel

Is anyone send me PPP samples for Articulate

Hi Steve:

Great tutorial.

I wonder if you can post some tutorials on how you designed a customized certificate which can be used for this case?

Thank you

Sophia

Hi everyone, is there any way of pulling the variables from the Storyline project eg: Name, result score directly into the certificate without using an LMS? I am developing a flash published Storyline file that runs of a CD and want the user to be able to print a certificate after passing the end assessment reflecting their results & name.

Any suggestions?

Thanks Steve for wonderful certificate generator. 

Is there a way we can add today's date in the certificate?

Thanks.

By using this code:

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd
document.write(today);   

I managed to get the date to appear.  Now the problem is, it's appearing instead of the background. 

I'm very new to scripts, anyone know if there's a way these two things can live in harmony?

This is working for me in the HTML5 output even though it isn't supposed to. Maybe due to the recent update?

Hey, Justin - 

Yeah. Recent updates made the JavaScript player methods work just like the Flash methods. 

Hi Steve,

@Peter Anderson pointed me in your direction to create a Completion Certificate.

Many thanks ... I've got it all up and running and a last have a great looking certificate to offer.

I am not terrific at code but managed to get everything looking perfect.

I was playing around with how I can get something included in the "certificate.html"  that allows me to also place the current date in the correct position on the certificate.  

I know this must be easy as well now.. but I have tried playing around with the header and body etc for a few hours.  I can get the date to show but not formatted or in the correct position.  I've obviously missed something in the script or style.  If you've got any nuggets of info for this one in regards to code that I need to place in the head and body... that would place the finishing touches for me.  

Again, thank you for providing the solution to an issue that has been bugging me for weeks

Cheers

Hi Anthony,

I recently started working on this certificate and stumbled upon a solution to the date position on the certificate. I have limited knowledge of html, but I was able to wrap the script inside a div tag which uses absolute positioning ( .time). I was also able to use the same logic to center the learners name on the certificate. Hopefully you can get some use out of these attachments.

Tom