Building a Quiz with Gravity Forms

  1. Create new form
  2. To populate with questions, use “Quiz” field type within the “Advanced Fields” menu
  3. Provide question; description generally isn’t used; provide answers and check the answer that is correct
  4. Leave Quiz Field Type as “Radio buttons” for the traditional one-answer-per-question checkbox format
  5. If you’d like, you can randomize the order of the answer choices
  6. Check “Enable answer explanation” if relevant for the quiz
  7. Repeat steps 2-6 for all questions in quiz
  8. Within Settings -> Form Settings, you can provide the quiz’s display title and introduction/description paragraph
  9. Insert ‘quiz stacked’ within the “CSS Class Name” field
  10. Change “Button Text” to appropriate CTA text for quiz
  11. All other settings can remain set to their default value
  12. Make sure you click “Update Form Settings” at bottom of page
  13. Go to Settings -> Confirmations -> Default Confirmation to populate content on the results page
  14. A variety of merge tags are available to dynamically populate content such as a user’s quiz score; merge tags can be inserted using the button just to the right of the content editor; alternatively, you can redirect a user to another page on your site or another URL for their results page
  15. To include a Facebook sharing button, use the code below; update the <a> tag to have the quiz post’s URL; ensure you encode the post’s URL before putting into the href
  16. If you are using the answer explanation option, you will likely want to check “Instant feedback” in Settings -> Quiz
  17. We leave the grading option set to “None” on the Settings -> Quiz page
  18. You will need to create a post to house the quiz; select “Quiz” as the post template type
  19. Upload an image to go on the quiz post
  20. Click “Add Form” above the content editor to add the form to the post; select the form/quiz you just created; check “Display form description, “ and “Enable AJAX”
  21. Insert the form

Facebook Sharing Button

[button]<a href="http://www.facebook.com/sharer/sharer.php/?u=https%3A%2F%2Fsciences.ncsu.edu%2Fnews%2Fsummer-heat-quiz%2F"> <span class="glyphicon glyphicon-fb share-button"></span> Share Quiz</a>[/button]

NOTE: Beware of “curly” quotation marks when copying and pasting code. Curly quotation marks don’t work with code.