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

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. 

A few years on and newer users like myself are still finding this an excellent resource - thank you Owen!

I would like to echo earlier sentiments that it's bizarre to me that a more user friendly option for generating a customizable certificate completion is not part of the Articulate offering yet.

All this is great but when is Articulate going to provide a simple object-oriented way to complete the printing of a certificate.  This should be immediately accomplished and added to Storyline 360.

is there a way to make users require activation before making use of storyline output files?

I am really struggling to do correctly execute any of these new methods. Does anyone have a step by step with sample code for triggers and Javascript in the HTML page for printing this? I tried both the Steve and Owen way and am completely lost on how to get the code together.

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!

I would think that you would add it directly to the html file in the Head section of the document.

Hey Owen,

Thank you for sharing this idea for how to create a certificate of completion. I tried your suggestion, but was not successful. Could you look at the JS and see if I missed something? I pretty much used yours with a couple of alterations.

Thanks

Richard Batts

Hi Owen, 

Just wondering if you have an idea on how to combine your fantastic certificate and the print results? 

I'm wanting to have the certificate on the front and the questions answered on the rear of the certificate. 

Hello Owen,

I've been reading this interesting thread, but I'm new to javascript and I didn't found how to reach the next step.

I'm trying to print a course certificate but I have issues with graphics not being printed at all, in Firefox or Chrome. I linked a jpg background image file to an html file. I don't understand why the image appears in the browser, but is not printed.

Could you please help ?

Here is the html code :

<!DOCTYPE html>

<script type="text/javascript">

/*Get string from URL*/
var learner_info = window.location.href.split('?print=')[1];

/*Split string into variables*/
var learner_name = learner_info.split('&')[0];
var cert_date = learner_info.split('&')[1];

/*Send print request to browser if possible*/
window.onload = function() { window.print(); }
</script>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Impression certificat</title>
<style>
body{
margin:0;
padding:0;
}
.contenant{
width:100vw;
height:57vw;
font-family:'Times new roman',serif;
background:url('certificatbackground.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.contenant p:nth-of-type(1){
font-size:36px;
font-weight:bold;
}
.contenant p:nth-of-type(2){
font-size:18px;
}
.contenant p:nth-of-type(3){
font-size:30px;
}
.contenant p:nth-of-type(4){
font-size:25px;
}
.contenant p:nth-of-type(5){
font-size:30px;
}
.contenant p:nth-of-type(6){
font-size:20px;
}
</style>
</head>
<body>
<main class="contenant">
<p>This certificate</p>
<p>certifies that</p>
<p><script type="text/javascript">document.write(unescape(learner_name))</script></p>
<p>has completed</p>
<p>the course"</p>
<p> date <script type="text/javascript">document.write(unescape(cert_date))</script></p>
</main>
</body>
</html>

Thank you.