Want to award every quiz taker a personalized PDF certificate?
We know that sometimes – a simple quiz results page just isn’t enough.
Now you have two options to send quiz results as a PDF certificate (with name, score, and other quiz info):
- Riddle: Read on about how to use our PDF certificate feature to automatically send your quiz takers a personalized PDF document
- Zapier: You can also use our Zapier app to connect PDF generator tools like PDF.co – with zero coding.
Zapier is easier – with no coding required. But it does require you to have a Zapier subscription.
You can do this with Riddle as part of any subscription but you’ll need to know a bit of PHP to modify our sample code.
Auto-generate your own PDF certificate
Riddle now offers a way to use the data generated by a quiz to award a custom PDF certificate to users who excel at a quiz. Using our sample code and by following the instructions in this post, you can easily turn the custom results page into a PDF certificate to be awarded based on a predetermined passing score.
(Please note: You’ll need a Riddle Pro or Team plan is required for this feature to work)
Sample quiz – passing scores get a PDF certificate
We’ve included this handy example quiz – so you can see how the whole process works.
You’ll see that we only give a PDF certificate to people who ‘pass’ our quiz – in this case, answering both questions correctly.
Take the quiz now to see this in action.
Quiz Maker – powered by Riddle
You can see an example of the PDF certificate here:
Technical requirements
Before you get started, please ensure that you have:
- FTP access to your web server as you will need to upload a few files
- the ability to make some small edits to HTML and PHP code (we will explain the details below)
NOTE: This PDF certificate is an experimental feature that extends the core Riddle quiz builder.
Please let us know if you like it – you can always reach us on support chat. If enough Riddle users like it, we’ll add this to our core builder, with no coding required.
Riddle 2 is coming – and one of the big advantages of our new quiz maker is that adding new features like a PDF quiz certificate will be much easier. So let us know if you’d like this added!
Add a PDF certificate to your quiz or other Riddle content
Right – let’s dive in. Just follow the steps below to create a custom PDF certificate for your quiz.
- Create a quiz on riddle.com. For this example, the Riddle type must be a quiz. Personality tests or other Riddle types will not work with the sample code below.
- Add a form to the “Collect Emails” step and add at minimum a “first name” and a “last name” field.
To get started with the sample code we provide, please name these fields as follows:- First name field: FIRST_NAME
- Last name field: LAST_NAME
- The screenshot below highlights where you enter the field name.
- You may add other fields to collect the quiz taker’s email and other details that you might want to print onto the PDF certificate.
- Done with your quiz? Go to the Publish step and hit publish.
Accessing Your Server and Obtaining the PDF Certificate Sample Code
- Now you need to upload the custom result page code to a server. It is essential that you have access to your server via FTP.
- Running your site on a place like wix.com will not work as you need to upload some custom code for the certificate generation.
- If you do not have a server, you can get inexpensive webspace at https://www.ovh.ie/web-hosting/web-hosting-personal.xml or https://www.ionos.com/hosting/linux-hosting/
- These are some of the less expensive hosting plans which offer FTP access. If you go with another hosting company, just make sure to check if they give you FTP access to your webspace.
- Download our sample code from Github (https://github.com/riddle-com/riddle-custom-landingpages).
- Download the code as a ZIP file by clicking on the green Code Button in Github.
- After unzipping the files, open the “Certificate” folder. You can ignore all files outside of that folder.
Creating and Editing the PDF Certificate Sample Code
- Open certificate.php with a code editor. If you do not have a code editor, you can download Microsoft Visual Code Editor for free.
- After you open the “certificate.php” file, you will find an array called “$data” (line 31). In this array, we are setting the variables which define the information that gets printed onto the certificate.
- To personalize or customize the certificate and the results pages, you need to change the data in this list. Most importantly, change the logo link to a URL where you host your own logo to print onto the certificate.
- For example, you can easily change the logo of the certificate by copying the link from an image on the Internet and pasting it into the variable.
- You can also use an image from a local folder on your server. Here is a brief tutorial on how to use images stored on your server: https://www.tutorialrepublic.com/html-tutorial/html-images.php
- The certificate PHP file you edited passes all data to an HTML template, which is then used to generate the certificate. Open the “HTML-template-SUCCEED” file.
- This file is used when the quiz taker answers the required amount of questions correctly to receive a passing score. This percentage is currently set at 60%. You can change this value on line 5 in the certificate.php file.
- If you know your way around HTML, you can change the position of all elements on the PDF certificate in the html-template-SUCEED.php file.
- If a user doesn’t pass the quiz, they will get feedback saying that they didn’t pass the quiz and that they should try again.
- If you want to change this message you can do it in the other HTML file.
- Open the “html-template-FAILED” file to change the failed message.
- In the “style.css” file there are a few classes that are for the elements of the HTML files.
- In these classes, you can change the color, font, font style, and spacing.
- This “style.css” file works for both HTML files.
- (IMPT!) Make sure to have named the fields for first and last names in your Riddle lead form FIRST_NAME and LAST_NAME.
- If you used different names or later on want to collect more info to add to the PDF certificate please change lines 12 and 13 in certificate.php accordingly.
- Upload the files certificate.php and style.css as well as the folders vendor, fonts, and templates to your server and note the URL that points to certificate.php.
- Add the link to certificate.php to your quiz as a custom result page.
- Go to the publish step and select “Extras” in the right navbar.
- Enable the “Result Redirect page” (all results) and enter the URL to certificate.php.
- Make sure that the URL starts with https://. This might require the purchase of an SSL certificate for your server.
- The screenshot below shows the required settings. Replace the URL from the screenshot with the URL of the certificate.php file you uploaded to your server.
- Make sure to activate the result redirect page and make sure you don’t enable the option (Advanced). Do not send any Riddle data to your site via POST method.
- After adding the link to your external results page, Riddle will ignore any results pages you have set up for your quiz and load certificate.php instead.
- Please make sure to test everything by taking your quiz so that you get a score that is higher than the set passing percentage.
- Make sure to test what happens when you fail the quiz as well.
Trouble Shooting
Certificate not showing any data? – If the PDF certificate shows no data at all, either you enabled the option “Do not send POST data…” on Riddle or your server is refusing to process POST data.
In this case, you might have to alter your web security settings. Here is a helpful post on this matter: https://support.plesk.com/hc/en-us/articles/213914625-Login-to-PHP-application-using-POST-request-fails-without-any-error-messages
Any questions – just ask us on support chat!
Our whole team love helping out – you’ll chat with everyone from our developers to our CEO Boris. And we’re fast to reply – our average response time is under two minutes. Boom!