/auto-cert

Automated Certificate Creator (for Ohio University)

Primary LanguageHTML

Automated Certificate Creator

Version 2.0 - Updated: 01/24/2018

This code creates a certificate for students to print out at home or in a computer labs. It replaces the time-consuming tasks that would normally be completed in an office and reduces paper use.

Disclaimer

The code housed on Github is to be used as a backup by the relevant Ohio University employees only (including the Office of Instructional Innovation). The code can also be pieced out if needed in Blackboard elsewhere as long as the signatures and OU branding is not used.

Prerequisite

This was optimized for Blackboard Learn (the version being used as of January 2018 at Ohio University).

Instructions

I. First Steps:

  1. Unzip the Auto-Cert.zip packaged file.
  2. Open certificate-template.html in a text editor (Notepad, Notepad++, Text Wrangler, Komodo, etc.).
  3. Save the file as something related to the program.
  4. Update the name of the program, program director, and their title in the specified areas at the top of the code.
  5. Place a copy of the signature image file in the folder with the certificate code.
  6. Save the file.

II. In Blackboard:

  1. Create the folder in Blackboard where the student will access the certificate.
  2. Add adaptive release settings to the folder.
  3. Add an item to that folder with the copy from certificate-copy.txt and update it however you'd like.
  4. Start creating an item in the folder (Build Content > Item).
  5. Click the "HTML" button on the top-right side of the textbox. It will pop up a blank text box.
  6. Copy the code from certificate-template.html and paste it in the blank HTML textbox.
  7. Click the "Update" button. The certificate will appear in the Blackboard textbox with broken images.
  8. Click on the first broken image to select it.
  9. Click the "Insert/Edit Image" icon at the top of the textbook. This will make a window pop up with an "Image URL" field.
  10. Click the "Browse My Computer" button.
  11. Find the image that has a name that matches what appears in the "Image URL" field and click "open." The image will appear at the bottom.
  12. Click the "Insert" button on the right. The image should now appear in the certificate.
  13. Do steps 8 through 12 with each broken image.
  14. Click the "Submit" button.
  15. Browse and find the images Blackboard asks for and click the "Submit" button. “signature.jpg” is a placeholder, so use the signature image you need, even if the name of the file does not match.

The certificate should now appear with a "Print Your Certificate" button at the top of the item.

THE CERTIFICATE WILL LOOK DIFFERENT IN BLACKBOARD THAN THE PDF PRINT PREVIEW.

Extra Notes

  1. If you need to update the certificate, update the code in a text editor and follow the Blackboard steps 4 through 15 and delete the old item.
  2. Programs and titles with quotes should have a backward slash before the double quotation mark.
  3. Make signature images 250 pixels wide when creating them. It is best to scan them at a larger size and making them smaller.
  4. When a copy is made of the course, you will need to delete and recreate the certificate item.

Built with

  1. HTML
  2. CSS
  3. JavaScript
  4. Komodo Edit
  5. Adobe Photoshop

Credits

Automated Certificate Creator was created by Hope E. Moore and Federica Incerti in December 2016.