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">
 

wildcat2001 wrote:

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:

');
 w.document.close(); // necessary for IE >= 10
 w.focus(); // necessary for IE >= 10*/
 w.print();
 return true;
}

 

print certificate

 

 

   

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">
 

 

You will need to change:
1) the user's name variable: (shown as: ${q://QID3/ChoiceTextEntryValue} in custom message above)
2) the course name in the template (is listed as: Fork Lift Safety Training above)
3) Add your organization name and logo

 

 

 

document.write() is a strongly discouraged method for JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/Document/write

I’d recommend looking into other methods of appending to the new window’s document, particularly using jQuery: https://api.jquery.com/append/

I know you could also use the at-media print method to exclude certain elements when printing the document: https://developer.mozilla.org/en-US/docs/Web/CSS/@media

That being said, CSS files uploaded to Qualtrics’ library is recognized as a text/plain instead of a text/css file, leading to errors if you import it unfortunately. And the only ways I’ve found to get around it are not really recommended.

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.

My certificate works fine on Submit but when you try to print it the certificate is split across two pages. (see screenshot). I have tried multiple CSS tags like: background-position: center top; to no avail. I’d appreciated any help on getting this cert to print on one page. 

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; 
}

Here’s the screen shot of how it looks now.

@Buck 

How did you get the image to show up in the email?  I am trying to get the image of the certificate to even show up in the email that the people get when they pass and get the name on the certificate.   

@Linda_charlton

By creating a simple Workflow email that’s kicked off with a Survey Response, you can send the certificate to the Respondent’s email address by putting their piped answer to your email question in the To window of the email form which would look something like this: ${q://QID18/ChoiceTextEntryValue/3}. Then, at the bottom of email form check the box “Include Response Report” which will attach the cert to the email. Hope that helps…!