Certificate after finishing questionnaire

You can create a custom message that is shown after a user successfully completes a quiz. Here's an example test certificate.
Here's the custom message content:

 

   

Certificate of Completion

   

University of New Hampshire acknowledges that

   

${q://QID3/ChoiceTextEntryValue}

   

has successfully completed

   

Fork Lift Safety Training

   

on ${date://CurrentDate/FL}

   Cert# ${e://Field/ResponseID}
      ">https://unh.az1.qualtrics.com/CP/Graphic.php?IM=IM_beXuyZvRm6SFNNc">
 

Update: The best way you could do this with CSS and very little JavaScript is just:

1. Create a <style type=”text/css” media=”print”> tag on the page of your certificate via the rich content editor of the certificate Text/Graphics question per se and then inside that, set styles to make what you don’t want to show in the print not show.
2. Make the print button run window.print() when clicked.

After hours of fiddling with the custom CSS, we finally found the answer. 

In the @media print, we used the -300px for the top and -50 for left which brought the certificate image (.centered-background) up to the top of the page. Now we had the certificate on the one page, instead of it splitting two pages. Then setting the @page to landscape brought everything together. Now, it was a matter of getting the name of the person (.content1) to be positioned on the certificate after moving it up and over. The trick was to use !important after the top 3px and left 325px. Without the !important, the name wouldn't move. 

/* Print-specific styles */
  @media print {
    .centered-background {
      width: 800px;
      height: 600px;
      overflow: visible;
      position: absolute;
      top: -300px;
      left: -50px;
    }

@media print {
  .content1 {
  position: absolute;
  top: 3px !important;
  left: 325px !important;
  transform: translate(-50%, -50%);
  z-index: -1; /* Ensure content is on top of the background */
  }
}

/* Targets all the pages */
@page {
size: landscape !important; 
}