Right now, there isn't a way to access a certificate of completion in Rise 360. Our team has a feature request logged for this capability and I'll make sure your voice gets added to the discussion.
If I can help with anything else please reach out!
Thank you so much for your response. My client really wants a certificate and I don't really want to use storyline as I work on Mac computers and it runs really slow on them. Is there any option/alternative I can provide them for the certificates?
Rise is locked down pretty tight. There are javascript solutions but since you have to publish using Review 360 in order to import into rise, it is impossible to add the files necessary to create certificates...
I am keen to learn how you did it, you mentioned that you may provide a tutorial for us Articulate learners. Could you please help all of us in learning how to generate a PDF Certificate like you have done within RISE. Will be grateful. Best Nadia
Hi Nadia and folks! Correct me if I'm wrong, Phil... 😀
It looks like Phil might have used web content created with pdfmake. He inserted the content using the web object option in Storyline 360, and then he would have published the Storyline project to Review 360. He inserted it into Rise 360 using a Storyline block.
I don't have details on exactly how the JS pieces work to pull information like name and date, but it's a great example and will hopefully get the wheels spinning!
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!
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<
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:
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 background background: [ { 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.
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
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?
78 Replies
Hi Naeem,
Right now, there isn't a way to access a certificate of completion in Rise 360. Our team has a feature request logged for this capability and I'll make sure your voice gets added to the discussion.
If I can help with anything else please reach out!
Hi Martika
Thank you so much for your response. My client really wants a certificate and I don't really want to use storyline as I work on Mac computers and it runs really slow on them. Is there any option/alternative I can provide them for the certificates?
Thanks and Regards
Naeem
Hello, I'm looking for the certificate option in Rise too, and would appreciate any info on other workarounds in the meanwhile. Thanks! Prathiba
Me too. It would be very handy indeed!
Thanks for adding your voice, folks. We've got our eyes on this request!
My organization also needs certificates of completion!
Thanks for the feedback Jeni! I'll add your voice to this request.
Hello All! Indeed, it looks like this is a widely spread request. Thanks staffs and all!
This post was removed by the author
This post was removed by the author
Rise is locked down pretty tight. There are javascript solutions but since you have to publish using Review 360 in order to import into rise, it is impossible to add the files necessary to create certificates...
You could add the files into Storyline by adding them as a web object. I did a quick and dirty example here with a PoC I already had.
https://360.articulate.com/review/content/83005bc5-497c-4ec6-9fcb-16b51c4ad2b2/review
Well that's slick. Thanks for sharing...Which Rise block type did you use to upload as a web object?
Could you give a quick non detailed step per step of the process.
1. Publish from Storyline as: web?
2. insert into Rise?
3. Also how did you pass the variable to the pdf? Did you use php or other code?
4. Do you have the files stored on another server or just in Rise?
I see you can use the Embed block to embed iframes but your content would have to live on another server.
thanks...
Hi Phil This is really good. Would you be able to share step by step how you did created this.
Many thanks
This post was removed by the author
Hi, can you show how to do it? Thanks a lot!
Hi Phil,
I am keen to learn how you did it, you mentioned that you may provide a tutorial for us Articulate learners. Could you please help all of us in learning how to generate a PDF Certificate like you have done within RISE. Will be grateful. Best Nadia
Hi Nadia and folks! Correct me if I'm wrong, Phil... 😀
It looks like Phil might have used web content created with pdfmake. He inserted the content using the web object option in Storyline 360, and then he would have published the Storyline project to Review 360. He inserted it into Rise 360 using a Storyline block.
I don't have details on exactly how the JS pieces work to pull information like name and date, but it's a great example and will hopefully get the wheels spinning!
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<
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:
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:
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:
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!
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 :(
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?