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 conte...
I have created the certificate in HTML using the WordPress html editor. My problem is how to execute the JavaScript. Thanks for your help. Please see my Story file attached.
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.
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
