Capturing a name and a quiz score to generate a certificate

You need to answer all questions correctly to print a certificate.

Storing the entry and passing it to a PDF generator

Important:

On the 'Publish' -> 'Tracking' step in the Riddle creator, you need to enable 'Custom tracking'.Then also select 'Custom even configuration' and enable 'Send form data (User Inputs)'.

Then add the event listener script below into the custom tracking box in Riddle to replace our default script, which merely logs all events to the browser console.

(riddleEvent) => {
  // Create a message object with the event data
  const message = {
    type: "riddleEvent",
    data: riddleEvent
  };
  
  // Send the message to the parent page
  window.parent.postMessage(message, "*");
};

The screenshot below shows where to add this code to your Riddle:

Add your own tracking script to a Riddle

The code to save Riddle events to a session cookie

Place the code below on the page where you embedded your Riddle.

Most PDF generators use PHP. It is therefore easier to store the value from the form in a session cookie, which PHP can access. Normally we suggest storing Riddle event data in local storage, but to access local storage with PHP, you need to retrieve the values with JavaScript and pass them to PHP using POST. As many webservers have security in place to prevent POST data being passed to a page, using a session cookie is simpler as long as you limit the storage volume in the cookie to the allowed limit of 4KB (which is only about 1024 characters of Riddle data).

To use the data to print a PDF certificate, you need to create a second page, which you will use as an external result page in your Riddle. If you click through the Riddle on this page, it will take you to a custom result page. The code needed on that page is also pasted below, so please come back here later to read on.

<script>
<script>
// Clear the session cookie on page load
document.cookie = "Participant_Name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

window.addEventListener("message", function(event) {
  // event.data is already a JavaScript object, no need to parse it
  var eventData = event.data;

  // Check if it is the 'Form_Submit' action - if it is, retrieve the name field
  if (eventData.action === "Form_Submit") {
    // Extract the answer value. Note this code only works if there is just one form field, if you have more form fields, you need to slice the answers after each ::: - reach out to Riddle Support for help if needed.
    var answerParts = eventData.answer.split(':::');
    var nameValue = answerParts[1].startsWith(':') ? answerParts[1].slice(1) : answerParts[1];

    // Store the answer value in a session cookie
    document.cookie = "Participant_Name=" + nameValue + "; path=/;";

    // Write the value to the console for verification
    console.log("Participant_Name stored: ", nameValue);
  }
});
</script>

Download

Code for the result page

Once you have gone through the Riddle and answered 100% of the questions correctly, you will be presented with a PDF certificate. Unfortunately, I cannot show code examples on that page as the PDF generator I am using does not allow any additional HTML to be placed on the generation page.

YYou can use any PDF generator to create your PDF. For this example we are using the free and very simple to use PDF generator from fpdf.org along with a plugin to place text above a PDF template. This is totally optional, as you can use FPDF to create your own PDF including logo placements and more. The Plugin we are using is called FPDI and you can find out more about them here.

When using FPDF, the most crucial part is to remember to not place any code or even an empty space before the opening PHP tag. Anything you place before that tag will cause FPDF to crash. This is also why you find the explanation on how to use it here rather than on the result page.

If you struggle setting up FPDF on your own servers, reach out to us via support chat or via hello@riddle.com and we can discuss our custom pricing to host landing pages and certificate generators for you.

For the code below to work, you need to have FPDF and FDPI on your server and adjust the file paths of the code below accordingly.

Source Code on the result page


<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Check if the cookie exists
if(isset($_COOKIE["Participant_Name"])) {
    // Assign the cookie value to a variable
    $Participant_name = $_COOKIE["Participant_Name"];
} else {
    $Participant_name = 'Participant Name Not Found'; // Default message
}

require_once('fpdf.php');
require_once('src/autoload.php');

$pdf = new \setasign\Fpdi\Fpdi();
$pageCount = $pdf->setSourceFile('riddle_certificate.pdf');
$tplIdx = $pdf->importPage(1, \setasign\Fpdi\PdfReader\PageBoundaries::MEDIA_BOX);

$pdf->addPage();
$pdf->useTemplate($tplIdx, ['adjustPageSize' => true]);
$pdf->SetFont('Arial','B',36);
$pdf->SetTextColor(19, 100, 123); // Set the color to ch green.
$pdf->SetY(145); // adjust this value to your preference
$pdf->Cell($pdf->GetPageWidth()-20,10,$Participant_name,0,1,'C'); //change the 0 to 1 to force a line break, since you don't call Ln() after this line.

$pdf->Output('I', 'generated.pdf');
?>