This download will help you include a printable certificate in your next Storyline 2 project. See a demo and learn all about how it was created and how to customize it in this blog post.
This is perfect Tracy - thank you for sharing! When I publish, I get this error in Chrome (when I click the print button):
This XML file does not appear to have any style information associated with it. The document tree is shown below.
AccessDenied
Access Denied
6AF21A0BA8877006
gWoZNg7t6Bb0tk89UZRGFpyamndNNAVWi3hW7ygcCIxRxkPIzjpihyH4+bkk1sY13T/WaYBSXug=
When I opened your demo, Chrome had no issues with the print execution.
Hi Teri,
Unfortunately, I’m not a programmer, so I don’t really know what is going wrong with your published presentation. I did notice you have plus signs in your url: https://s3-us-west-2.amazonaws.com/samplefilesonly/Freebie_Print_Cert+-+Storyline+output/story.html. I think that can cause a problem–I would remove all plus signs from the web address.
The error I received when trying to print the certificate from your presentation was: “This XML file does not appear to have any style information associated with it. The document tree is shown below…” I googled the error, and saw that it can sometimes occur with Amazon Web Services, which you are using to publish your presentation: https://forums.aws.amazon.com/thread.jspa?messageID=753323&tstart=0
Sorry that I cannot solve the iss... Expand
Hi Teri,
Unfortunately, I’m not a programmer, so I don’t really know what is going wrong with your published presentation. I did notice you have plus signs in your url: https://s3-us-west-2.amazonaws.com/samplefilesonly/Freebie_Print_Cert+-+Storyline+output/story.html. I think that can cause a problem–I would remove all plus signs from the web address.
The error I received when trying to print the certificate from your presentation was: “This XML file does not appear to have any style information associated with it. The document tree is shown below…” I googled the error, and saw that it can sometimes occur with Amazon Web Services, which you are using to publish your presentation: https://forums.aws.amazon.com/thread.jspa?messageID=753323&tstart=0
Sorry that I cannot solve the issue for you definitively!
Best regards,
Tracy
From all the solutions for the certificate I ended up with this one.
I didn’t want to include the date or give the user the option to change his name, so I made the appropriate changes to my story file.
I also wanted to have Greek characters so I modified the code a bit.
In the javascript trigger the code is like this:
var player = GetPlayer();
var theName =(
player.GetVar(“username”)
)
var enName = encodeURIComponent(theName);
var theDate =(
player.GetVar(“DateValue”)
)
var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);
window.open(urlstring,”_blank”,”width=800px,height=600px,menubar=no”);
/*—————————————-*/
And your code in the printCertificate.html is like this (I am including only the line I changed):
document.write(” + de... Expand
From all the solutions for the certificate I ended up with this one.
I didn’t want to include the date or give the user the option to change his name, so I made the appropriate changes to my story file.
I also wanted to have Greek characters so I modified the code a bit.
In the javascript trigger the code is like this:
var player = GetPlayer();
var theName =(
player.GetVar(“username”)
)
var enName = encodeURIComponent(theName);
var theDate =(
player.GetVar(“DateValue”)
)
var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);
window.open(urlstring,”_blank”,”width=800px,height=600px,menubar=no”);
/*—————————————-*/
And your code in the printCertificate.html is like this (I am including only the line I changed):
document.write(” + decodeURIComponent(learner_name) + ”);
/*—————————————-*/
Now I can print the certificate on Firefox, IE, Opera and Chrome.
I used decodeURIComponent cause at first I couldn’t print if I used Greek letters.
Then the problem that came up was that despite printing on Firefox and IE, Chrome and Opera encoded the letters as %20%21 etc.
So all I had to do was to create a variable that would encode the user name before putting it to the url as a parameter. (var enName = encodeURIComponent(theName);)
Hope this helps!
Reply
Leave a Reply
I am printing the actual certificate and I have aligned it to the center of the page with css.
The only thing that you have to be careful about, or inform your clients/users, is that in order to print the certificate they have to change the settings of their browser and select the Print Background graphics option.
Hi all,
This looks like a great addition... thanks for sharing.
I am a total novice when it comes to html or javascript code.
Is there a way to add an image to the printed certificate?
Could someone explain how... possibly with some code I could copy into the existing html file.
Thanks in anticipation.
Mark
Hi Mark,
This tutorial is how I learned to create a printable results page, or certificate, in Storyline. It includes how to add an image to the certificate: 6 Steps on How to Make a Printable Results Page in Articulate Storyline - http://elearningbrothers.com/6-steps-on-how-to-make-a-printable-results-page-in-articulate-storyline/
It includes the javascript & practice files.
Best regards,
Tracy
How might one change the date format that appears on the certificate? Thanks!
Ah, found it in the "Execute JavaScript" slide trigger for the certificate slide:
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear();
var player = GetPlayer();
var newName = month + "/" + day + "/" +year
player.SetVar("DateValue", newName);
I tried it in Storyline 3 but was getting an error messaging when uploading the zip file to Moodle:
"An imsmanifest.xml file was found but it was not in the root of your zip file, please re-package your SCORM" .
Any thoughts? Thank you!
I'm sorry Julia, I'm not a Moodle expert, so I don't know what went wrong. I looked up your issue, and found these threads that do address your concern: https://community.articulate.com/discussions/articulate-storyline/an-imsmanifest-xml-file-was-found-but-it-was-not-in-the-root-of-your-zip-file-please-re-package-your-scorm and https://community.articulate.com/discussions/articulate-storyline/scorm-error
I hope that is helpful!
27 Comments
Hi Teri, Unfortunately, I’m not a programmer, so I don’t really know what is going wrong with your published presentation. I did notice you have plus signs in your url: https://s3-us-west-2.amazonaws.com/samplefilesonly/Freebie_Print_Cert+-+Storyline+output/story.html. I think that can cause a problem–I would remove all plus signs from the web address. The error I received when trying to print the certificate from your presentation was: “This XML file does not appear to have any style information associated with it. The document tree is shown below…” I googled the error, and saw that it can sometimes occur with Amazon Web Services, which you are using to publish your presentation: https://forums.aws.amazon.com/thread.jspa?messageID=753323&tstart=0 Sorry that I cannot solve the iss... Expand
From all the solutions for the certificate I ended up with this one. I didn’t want to include the date or give the user the option to change his name, so I made the appropriate changes to my story file. I also wanted to have Greek characters so I modified the code a bit. In the javascript trigger the code is like this: var player = GetPlayer(); var theName =( player.GetVar(“username”) ) var enName = encodeURIComponent(theName); var theDate =( player.GetVar(“DateValue”) ) var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate); window.open(urlstring,”_blank”,”width=800px,height=600px,menubar=no”); /*—————————————-*/ And your code in the printCertificate.html is like this (I am including only the line I changed): document.write(” + de... Expand