Create a Course Certificate in StoryLine! (with Java and HTML)

Apr 17, 2014

OWEN HOLT
By OWEN HOLT

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
Kayode Arowolo
over 6 years ago07/31/17 at 6:22 pm (UTC)

Hello, I know this post is 3 years old but I am still struggling with creating a certificate for my course. I wondering if anyone can help me please. I have read all the posts and watched the video as well but I'm still struggling with this. Particularly, I cannot locate the java in SL that Owen talked about because I'm using Storyline 360. Any suggestions will be greatly appreciated. Thanks.

OWEN HOLT
over 6 years ago07/31/17 at 6:29 pm (UTC)

Maybe I can simplify?
The certificate is created in HTML. Step one is to focus on designing that and you will need something other than an Articulate product for that. As far as I know, they do not have an HTML program yet (but I am not sure of what is included in 360).  
For the JavaScript, you are essentially using the JavaScript to build your certificate page using the html you've created.  You won't find the JavaScript in StoryLine. What you will find in JavaScript is a trigger that lets you execute it.
I hope that helps. If not, feel free to email me or share your file here.

OWEN HOLT
over 6 years ago07/31/17 at 9:41 pm (UTC)

Currently, your trigger action is set to "Print results" as shown below.

Click the action drop down (where it says 'Print results') and select 'execute action script' in the drop down.
 

Add the JavaScript. Click the button next to script that is labeled '...'
Copy and paste the following based on your html.

myWindow = window.open("","Print","width=1000,height=750,scrollbars=0,resizable=0");

var player=GetPlayer();
var course=player.GetVar("CourseName");
var username=player.GetVar("NewName");

var contents ='<!doctype html>';
contents+='<html><head><meta charset="utf-8"><title>Course Certificate</title>';
contents+='<style type="text/css">';
contents+='@media print {#printPageButton {display: none;}} </style></head>';
contents+='<body><div><button id="printPageButton" onClick="window.print();"><img src="http://icons.iconarchive.com/icons/iconshow/hardware/128/Printer-icon.png" width="64" />Click Here To Print</button></div><div margin="0 auto"> <img src="http://www.northernc.on.ca/leid/wp-content/uploads/2016/08/leidbanner16.jpg" align="middle" alt="Northern College Logo" /></div><h1 style="text-align: center;"><strong>Certificate of Completion</strong></h1><h2 style="text-align: center;">This Acknowledges That</h2><p style="text-align: center;">'+username+' has successfully completed</p> <p style="text-align: center;">'+course+'</p> <p style="text-align: left;"><img src="http://www.northernc.on.ca/leid/wp-content/uploads/2017/07/line-1.jpg" alt="line" />Vice president, academic and student success</p></body></html>';

myWindow.document.write(contents);

Be sure that your .story file has a variable called 'CourseName' that stores the name of your course and another one called NewName that holds your learner's name.


 

Kayode Arowolo
over 6 years ago08/01/17 at 3:39 pm (UTC)

Hi Owen,
Thank you so much for your help. I never thought I could get this certificate done until I came across your post. Thanks also for your detailed instructions. There's a problem with the certificate I generate, I can't get the certificate to pull out the student's name. Please help me on this. What should I do? I already created a var name called NewName but how do fill it with the student's name?
Thanks for your help.
Email: arowolok@northern.on.ca

Ray Guido
over 6 years ago12/19/17 at 6:07 pm (UTC)

Owen,

 

I have a course with multiple paths depending on the functional department.

However, I end up with multiple results, Results.ScorePercent, Results1.ScorePercent...etc.

What is the syntax for accessing the specific ScorePercent variable? When I use GetVar("Results.ScorePercent") or GetVar("Results1.ScorePercent"), I receive an error stating java resolver can't resolve the path for Results or Results1.

FYI - The is my first attempt to write java script.

Thank you in advance.

 

OWEN HOLT
over 6 years ago12/19/17 at 6:24 pm (UTC)

On each of your results slides, I would add a trigger to set a StoryLine variable equal to the appropriate result.score percent. Then, I would pull your custom StoryLine variable into the certificate. This way, no matter which path they go down, the results will be found in your custom variable and available to the certificate.

Ray Guido
over 6 years ago12/20/17 at 1:44 pm (UTC)

Thank you Owen. I did try that, however, my goal is to pass an accurate
value in Results.ScorePercent to the LMS and it appears that I can't
access that variable. I'm going to punt and either break it into multiple
courses or make the quiz more general. If there is anyway to alter the
value in Results.ScorePercent using SetVar() or some other command, that
would be great.

Raymond P. Guido, Jr.
The Aspect Phoenix Group, LLC.
email: raymond.guido@tapgllc.com
Cell: 203 395 5026

OWEN HOLT
over 6 years ago12/20/17 at 3:34 pm (UTC)

Got it, so the issue isn't just the certificate, it is also having one master results slide for the LMS.

You could potentially use a background "ghost quiz" to control this. Essentially, the concept is that the quiz questions the user sees control T/F selections on questions they don't see. The results slide is for the hidden quiz. Thus, one invisible master quiz (controlled by multiple quiz options) which feeds a visible results slide. 
You can learn more about the concept here and here.

Ray Guido
over 6 years ago12/22/17 at 6:23 pm (UTC)

Owen,

Thank you for your help. I was able to successfully create a "ghost"
question that I auto-answer based on variable settings. However, the
"ghost" question slide appears for milliseconds before it moves on to the
results slide. I trigger it to move on using the trigger "Submit
interaction True/False when timeline reaches .05 seconds. Is there a
better way to get it to seamlessly to submit the answer and move to the
results slide?

Also is there a way to clear the radio buttons on faux-quiz slides after
moving to the next slide?

Thanks in advance.

Raymond P. Guido, Jr.
The Aspect Phoenix Group, LLC.
email: raymond.guido@tapgllc.com
Cell: 203 395 5026

OWEN HOLT
over 6 years ago12/22/17 at 6:37 pm (UTC)

Hide the question by adding a border-less box that is the same color as your slide background and that covers the entire slide. This will hide the T/F from showing, even if there is a short delay passing through the slide.

You can't clear the radio buttons after moving from the slide, but you can clear them when revisiting the slide.  Just set the slide property for when revisiting the slide to reset to initial state. 

Apoorv Jain
6 years ago01/29/18 at 6:56 am (UTC)

Hello Lance,

Thanks for your example.

I was trying your example and creating a certificate shared by you. I just want to print a name in the shared certificate. But I am facing a problem in printing a name on it.

Here I am sharing a .story file and as well as the cerificate.html file.

I have created a print button in the failure feedback layer and In the first slide, I have created a name reference field to pull the name from it and print in the certificate.

I request you to please have a look and help me in this.

 

Thanks

Apoorv

O. Michael Adeniran
almost 6 years ago06/04/18 at 5:24 am (UTC)
Owen Holt

Here is a screenr: LINK 

 Published course on Google Drive is here: LINK

And attached is a basic text guide to the java. For the HTML, and graphics, you are on your own.

Top of the day all. Please i have been tryinh to publish my module which is filled with questions banks as i want my students to have access to questions for revision.

 

Planning to add 100 question banks with a minimum of 5000 questions, currently on 1600 questions and i was trying to preview my work by publishing it but i noticed it taking for ever to publish.

It took me three days to publish 400 of the 1600 and still publishing which makes my system not responding to any other thing.

Note: My system is i5 with 8gb RAM.

 

Thanks.

melissa flores
almost 5 years ago05/07/19 at 3:51 pm (UTC)

Non-coder desperately seeking help...  Don't know WHERE/WHAT code to type into HTML file to pull variables from storyline.  First, big thanks to all for posted solutions that have gotten me this far! 

I have a 3-page form users need to "sign" electronically (name, job title, date) and print with variables embedded in the html output, and post results to LMS.  I did this once using a quiz by pasting an image of the form in the background of the results slide with variables positioned accordingly and using some basic "print" javascript I found.

BUT... this one's 3-pages, a simple 1-page certificate and print command won't work.  My original form was in Word, so I saved it as BlankForm.html.  I saved two additional copies of BlankForm.html:

     SignedForm.html - this is identical to BlankForm.html but has placeholders in the document's signature line for my variables:  +LearnerName+, +LearnerJob+ and +LearnerDate+ 

     Print.html - this is identical to SignedForm.html (with the placeholders) but has added code to print on load:  onload="window.print();"

My Build:
I built a 3-question quiz to capture name, job title and date (TextEntryName, TextEntryJob, and TextEntryDate) and created variables (varName, varJob and varDate) and triggers to receive the answers.  The first slide has a web object on the top 80% of the slide to display BlankForm.html, which works great bcuz user can scroll up and down to read the form, and clarity is super clean.  The lower 20% has input fields for name, job title and date.

When users answer the last question and press submit, results get pushed to LMS and the Results slide opens .  Here I have web object - SignedForm.html - I want the form to have the variables embedded in the signature line.  (I don't know WHERE/HOW to add the variables code to the SignedForm.html file.)

But MAINLY I need users to be able to print the "signed" form with the variables embedded in the signature line.  I have a PRINT button on Results slide that jumps to a slide called - PrintExit.  

PrintExit slide (looks identical to the Results slide) but this web object - Print.html - has the added code to print on load.  Works great so far - user clicks PRINT button on Results slide, and Print.html pops right up to print.  (Again...  WHERE/HOW do I add the variables code in the Print.html file?)

Per other posts, I came up with the following but don't know where to add it in the html file and how to correctly code my placeholders:
<script>
var player=top.window.opener.GetPlayer();
var LearnerName=player.GetVar("varName");
var LearnerJob=player.GetVar("varJob");
var LearnerDate=player.GetVar("varDate");
document.write("<P><H2>Variable Name: " + LearnerName + "Variable Job: " + LearnerJob + "Variable Date: " + LearnerDate +"</P");
</script>

I'm exhausted and crawling to the finish line.  Can anyone PLEASE assist?  I added a 'redacted' copy of my Print.html file for your to view.

Many thanks!

Sign In to Reply