Printing Custom HTML5 Certificate of Completion
Using Captivate 9, I have created a slide at the end of a quiz that has a certificate on it with text areas that use customized Advanced Actions to fill in items like student name, the date, and an expiry date of the certificate (date + 3 years). There are two reasons that I created my own as opposed to using the Certificate widget:
- Their templates were not malleable enough to accommodate the customized look I needed (i.e. colors, look, and the date+3years category).
- It is a responsive project that cannot include Flash enabled items - it must all be HTML5
Long story short - I have added a transparent button that sits over the entire certificate (which is an image that fills the entire slide), which when clicked by the student causes the Javascript "window.print()" to be activated. This works fine, and brings up the browser's print screen as it should. When I print in landscape setting from the browser (in Preview Project mode) it prints beautifully - centered on the page and fills the entire page. THE CATCH is that I have to publish the Captivate project as a SCORM package to Moodle. Once I view it in Moodle (using Chrome as a browser) the certificate prints smaller and relegates itself to the top right of the printed page. I have tried all sorts of settings in Moodle (re: how the package is displayed) and have been able to get improvement, but not yet to the level that I need it to be.
Any suggestions would be very appreciated. Please keep in mind, that I know only a minimal amount about Javascript and other coding (I am willing to learn and try anything... you just need to explain it in "For Dummies" terms!). I do run the Moodle site on my own, so I can access the files to edit its settings if that needs to be part of the solution.
Thank you in advance.
Shanna