How To Create a Gravity Forms Quiz With Multiple Outcomes

For a project I’m working on I needed a WordPress quiz solution.

There were some specific requirements:

1. The quiz should have Yes/No answers.
2. The quiz should be split into several pages, with one question per page.
3. The quiz should keep overall score, but not offer instant feedback to users i.e. users should not be told straight away if they got the answer to a particular question “wrong”.
4. An overall score should be displayed on quiz completion.
5. There should be different feedback given for various scores, with 3 possible overall outcomes.

I had a look at some different quiz plugins for WordPress, including Riddle, which I reviewed in an earlier post.

Unfortunately, I couldn’t find one that met my exact needs.

Then I stumbled upon the knowledge that Gravity Forms, a powerful form creation plugin, also had a quiz add-on.

I happened to be using Gravity Forms on the site anyway, so I took a look to see if it met the needs of the project.

Gravity Forms Quiz Add-On

The Gravity Forms Quiz add-on is available to Gravity Forms Developer license holders.

At the time of writing, this costs $199/year, though there is a 50% renewal discount.

Installation

The Gravity Forms plugin comes in a zip file to upload at Plugins > Add New > Upload Plugin.

After adding your license key and configuring settings, the Quiz add-on can be installed from Forms > Add-Ons.

Creating the Gravity Forms Quiz

I created a quiz with 5 questions. The questions and answers came from this list of UK farming facts.

Questions were added using the Quiz field, which is an Advanced type of form field.

Here’s what a single question looked like:

The options I chose for each question were:

Quiz Field Type – Radio Buttons (Dropdown selectors and checkboxes for multiple selections are also available.)

Quiz Answers – Yes or No. (Yes marked as the correct answer.)

Rules – Required checked. Each question must be answered before proceeding to the next.

Note: In the Appearance section, you can set a Custom Validation Message. See the section on form validation below.

I then duplicated the quiz field and just changed the question.

The questions were separated by page breaks using the Page field.

I chose to have some introductory text at the start and an image, inserted into an HTML Block.

Here’s what the opening section of my quiz looked like:

Quiz Settings

The grading for the quiz was set in the form’s Settings > Quiz.

I chose a Pass/Fail grading and set a grading of 80%.

The pass/fail confirmations were set after this.

The defaults are:

Quiz Pass Confirmation

<strong>Quiz Results:</strong> You Passed!
<strong>Score:</strong> {quiz_score}
<strong>Percentage:</strong> {quiz_percent}%/code>

Quiz Fail Confirmation

<strong>Quiz Results:</strong> You Failed!
<strong>Score:</strong> {quiz_score}
<strong>Percentage:</strong> {quiz_percent}%

I changed these by removing the Passed/Failed message and percentage, and adding my own text.

Confirmations

I wanted 3 outcomes, however, not the two that the Quiz Settings offered.

The way around this was to use Gravity Forms built-in Confirmations instead.

This is a really powerful feature that shows the user a different result when the form is completed, depending on their answers.

All forms have a default confirmation – “Thanks for contacting us! We will get in touch with you shortly.”

You should amend this to something like “Thank you for completing the quiz.”

You can then set any number of others. Each new confirmation should have conditional logic which indicates who gets to see it.

You could set logic for getting a particular question right or wrong, or based on the quiz percentage or quiz score total. I used the total.

Confirmations can either be Text (complete the textarea), Page (redirect the user to a page on your site) or Redirect (redirect to an external URL.

I set 3 different score bands with 3 different results:

1. A score of 0 or 1
2. A score of 2-4
3. A score of 5

Here’s an example of a confirmation and its conditional logic:

The confirmation is set to show if the quiz score total is less than 2.

After testing, this seemed to work nicely.

Notifications

One other thing you might want to do is to turn off admin notifications if you don’t want an email every time someone completes the quiz.

All entries are saved in the database, in any case, and can be viewed under Quiz Results for your form.

Inserting the Quiz on a Page

This is done like any other form by using the Add Form button on a page to insert a shortcode. You’ll probably want to hide the title and possibly the description as well.

I put my quiz in a 50% width column, just in case you’re wondering! Otherwise, it will occupy the page width.

Handling Form Validation Errors

Because I required each question to be completed, failing to select an answer before moving to the next question threw an error.

The error messages were not very elegant, and I wanted to change them to something a bit more user-friendly for a quiz.

To change the overall ‘There was a problem with your submission’ message, I used this code:

add_filter( 'gform_validation_message_2', 'quiz_validation', 10, 2 );

function quiz_validation( $message, $form ) {
return "<div class='validation_error'>Oops! You forgot something!</div>";
}

The number 2 following gform_validation_message limits the altered validation message to just the form with ID 2. This means the code won’t affect your other forms.

To change the ‘This field is required’ message, I set the Custom Validation Message for each field on the form to ‘Please select an answer’.

If you’re building the quiz, this is best done before duplicating the quiz fields!

I also added a little custom CSS to add a little padding to the error section:


.gfield_error {
padding: 10px;
}


Much better.

Gravity Forms for Non-Admins

If your quiz was being built for a client, and they wanted to add or edit their quizzes, one issue is that only administrators can make new forms – and by extension, quizzes.

You can, however, get round this by a few methods outlined in Ryan Benhase’s excellent post on giving Editors access to Gravity Forms.

If you do this using the User Role Editor plugin, you’ll need to set some permissions. I suggest the following settings.

The main issue with non-admins creating their own forms is with users entering rich media content or formatted text.

Why? There’s no visual editor in the form builder available to do this easily. The only way to do it is to add an HTML block to the form and enter the relevant code.

I’m not too sure why this is so, because there is a visual editor for the Confirmations.

Until I find a better solution, the best workaround is to:

• Create a new post or a page
• Enter the content you want into the Visual editor
• Switch to Text mode
• Copy and paste the HTML code into a new HTML block

Unfortunately, it’s a bit hacky.

Pros and Cons of Gravity Forms Quiz

Pros

• Display results by score, percentage, letter grading (A-E) or no score at all
• Instant answer feedback (optional)
• Create any number of results pages
• Error messages are customizable
• Control over the quiz look with CSS – most online quiz solutions give you limited control unless you pay
• Results are saved or can be emailed to you

Cons

• Cost – $199/year, $99.50/year thereafter
• Less usable for lay people
• No inbuilt social sharing of the quiz – you would need to add your own social sharing buttons, and likely limit them to the quiz page only.

Have you used Gravity Forms Quiz add-on? Would you? Let me know in the comments.

Category: WordPress Tags: Gravity Forms, quiz