Forum Discussion
Certificates in Rise
Can anyone please advice on how i could print out a certificate of completion on articulate rise?
Many thanks
Naeem
80 Replies
Hey Phil,
Such a great example. I've been trying to get to work and look like yours for a client. Would be great if you could provide details and steps on how to get it working like yours!
Thanks!
I spent some time playing with this, as well as digging in the developer tools and chrome on Phils solution and figured this out.
This can be done in rise by adding a storyline slide into rise. The storyline file just triggers Javascript as a trigger.
Here is the Javascript from Phils example https://codepen.io/khausauer/pen/JjPZKZa I used this as a base to recreate the functionality, changing the code slightly just to clean up and make it easier to read for this example.
To create a PDF you'll need to add the MakePDF CDN to your HTML generated files, You want to add this in the story_html5.html file from your published file. If you added the slide to a rise file this file will be in COURSENAME.zip\content\assets\bt151019uRhOQ0X4\ (The BT151... part is likely different for each slide you add to a rise course.
The the <head> and </head> will already be in there you just need to the the two script lines, just above the </head<
<head>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js" integrity="sha256-bX4TPrIvSJ7o/8O7HiB8WLSA6xz/45oHBHww/ErxGpc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js" integrity="sha256-UsYCHdwExTu9cZB+QgcOkNzUCTweXr5cNfRlAAtIlPY=" crossorigin="anonymous"></script>
</head>There is one more issue you will run into, which is adding images to your PDF. the MakePDF documentation says images need to be base64 encoded, which essentially turns an image into a series of 1000s of characters. it looks something like this:
data:image/jpeg;base64,/9j/4RGJRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAkAAAAcgEyAAIAAAAUAAAAlodpAAQAAAABAAAArAAAANgALcbAAAAnEAAtxsA...
the problem here, is that storyline has a maximum character allowance in the JS panel. so to get around this you need to manually insert your encoded images into the JS file generated after publishing. this file can be found at Storyline output\story_content\user.js or if its a rise output COURSENAME.zip\content\assets\bt151019uRhOQ0X4\story_content\user.js
This file will look something like this:
function ExecuteScript(strId)
{
switch (strId)
{
case "6GIzzLQR94K":
Script1();
break;
}
}
function Script1()
{
// Retrieve storyline player object from parent window
var player = window.parent.GetPlayer();
// Retrieve the learners name from the learnerName variable
var name = player.GetVar("learnerName");
// Retrieve the title of the project from projectTitle variable.
var title = player.GetVar("projectTitle");
var results = player.GetVar("results");
var cpd = player.GetVar("cpd");
var certNo = player.GetVar("vCertificate_text");
// Get todays date in format dd/mm/yyyy
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
date = dd + '/' + mm + '/' + yyyy;
// Define PDF output - See http://pdfmake.org/#/gettingstarted for information on creating a PDF document with pdfmake.
var docDefinition = {
// Set page size
pageSize: 'A4',
// Set document orientation
pageOrientation: 'portrait',
// Set page margins
pageMargins: [0, 0, 0, 0],
// Define main body of document
content: [
// Include logo image (image is encoded as base64 string)
// Include certificate text
{
text: 'THIS CERTIFICATE IS PRESENTED TO:',
fontSize: 16,
alignment: 'center',
margin: [0, 320, 0, 15]
},
... (continued on)You'll need to add your images and background into here.
you'll want to find the line that Says var docDefinition = { And add in your background images right below so it looks like:
var docDefinition = {
// Define document backgroundbackground: [{image: 'data:image/jpeg;base64,/9j/4RGJRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABA ...... (Cut off because it's long)width: 595.28,height: 841.89}],After you save the files you should be good to go, just upload to host, or LMS and give it a test. If you are running into issues, use the Dev tools in chrome (F12) and look at the bottom right for Javascript errors, this will give you an idea of where the problem is.
You can see a live demo of my storyline file here: http://kylehausauer.com/pdftest/story_html5.html
I have also attached the .story i used when testing. If i haven't described something clear enough, let me know i'll try to clarify!
Thanks very much for this explanation, Emiliano.
I've been asked by a client to get a certificate which used this PDFMake technique in Storyline, into Rise.
From your explanation I can see where and how to add the necessary Javascript. I've exported my client's first attempt at the Storyline module from Rise and got access to the HTML and Javascript files I need.I just don't know how to get it back into Rise once I've made the changes. (I'm not very familiar with Rise). Is there any Import or similar functionality?
Hi there, Norman. Was your client's Storyline project already in a Rise 360 course? When you export a Rise 360 course for web or LMS, the Storyline assets are included in the packaged output.
While we can't provide support for modified published output, it sounds like you needed to make changes to the Storyline assets in the Rise export and then save them. There isn't a way to manually add Storyline output back into a Rise 360 course. Any changes you make in the output files would need to be saved in the output files.
I hope that helps answer your question!
Kyle you mention in your post that this could be uploaded to a LMS.
I have worked with a number of different systems over the years, and almost every LMS has the functionality to issue course completion certificates.
Very true. I wasn't sure how the original poster was wanting to use their rise course so i just wanted to ensure i was clear this would work either way.
You could use this example to create other types of PDFs, (maybe a custom takeaway tips or notes sheet, focusing on areas the learner got the quiz questions wrong?) which would work within an LMS. Just would be a matter of changing the layout in the JS
OMG! This is way beyond me. :-(
Me too! I need step-by-step instructions with visual cues :(
Hi Gerry,
Let us know if you need some help in Rise 360! We're here to assist you anytime you need a hand.
Hey Alyssa, any update on this function? There are a lot of people requesting it. Thank you
Hi Sparkle ELearning,
We don't have any updates on this yet. We'll update everyone here once we have something to share.
Eliliano's investigative work is spot on. The storyline file is embedded in Rise using the Storyline block, you must publish to review first
Hey Phil, this all looks great and your example of the SL block collecting the username and saving to a PDF is what I need, however I think I am missing something, looking for some pointers here please.
I have tried all of the suggestions here in this forum and tried each suggestion here but can't get the PDF to download. If I can get it to work, I will assist by posting updated steps here for others.
Here are the latest steps of what I have tried:
- Took SL file (that Eliliano/Kyle posted with your JS in it) that on click of button executes and published to Review.
- Added that SL Review piece to a block in Rise.
- Published Rise to SCORM package.
- Opened the html file for the SL block added, and put in the two lines in the head for and put in the script for links to cloudflare as suggested.
- Repackaged the zip and posted in SCORMCloud.
- Tested however PDF not working.
Any pointers from my steps that I may be getting wrong? I see others have used a webobject, and I tried that as well. I am unclear if using that is part of the solution instead?
Thanks much for any help, I have tried all of the suggestions, just must be missing something.
JeffHi Jeff
The web object needs to be in there as this holds the files needed to generate the Certificate.
I would look at Emeliano’s tutorial that is comprehensive and works.
Look at the javascript console for errors it is typically a misspelled or missing variable.
Thanks everyone. I found the difference between what had worked in Storyline and what works in Rise. In Storyline we'd uploaded the certificate.html file and the PDFmake files to Articulate Online. In Rise, as per Emiliano's instructions, I referenced the PDFmake files on Cloudflare in the header of certificate.html. So there was only one file for the Storyline module to reference. Then recreated the web object. Uploaded to 360 Review then imported into the Rise module and it all works.
Since there are so many people asking for a step by step, I'd like to offer the instructions for what I did for my client. But first please accept this disclaimer:
I'm not an expert in Storyline, Rise or anything, in fact I retired a couple of years ago. Last week my client, for whom I'd long ago created a PDF certificate in Storyline, hosted in Articulate Online, asked me if I could adapt it for Rise. Using Emiliano's instruction in this thread I was able to do so. I was surprised and delighted that it worked. But I can see why people would want a simple step by step. I'm sure when Phil Mayor does it, it'll be better than this, but if it helps until there's a 'native' Rise certificate, I'm happy to offer it. But I'm not offering any support or followup. There are people on this forum far better equipped to do that. I'm going back to my books and guitar! If Crystal or any Articulate Support people find anything wrong with my solution feel free to remove it.
So here you have:
a) a Word doc explaining the process
b) a Storyline quiz with the certificate-printing mechanism, similar to what was shown on this thread
c) a certificate in HTML with some dummy imagesI had a lot of help from people on the Articulate forum when I was an elearning person, so I hope this gives something back.
Thanks, Norman, I can only apologise I will get a tutorial done on this when I get some downtime.
In the meantime, I do think Emiliana and Norman have you covered.
