If you are looking for a fun way to have visitors engage with your site, a quiz may be a great way. Thankfully, this doesn’t have to be too complicated if you use the correct tools. For this example, I’ll show you how to build a quiz using Advanced Custom Fields, which should be no shocker if you’ve been reading some of my other posts.

In order to accomplish this, you’ll either want to have the Pro version of ACF, or have the free version in addition to the Repeater Field addon since that’s what we will be using to create the questions.

Setting Up the Custom Fields

Once you have either of those options installed, the first thing to do is to create the custom fields. First, you’ll want to create a repeater field. You can name this field whatever you want, but make note of it because you will use it in your code. Next, create a subfield inside of the repeater field. This field will be for the question.

Typically, I will set the question field as a “text” field, but you can also set that to a “wysiwyg” or “textarea” field if your questions are fairly lengthy. For this example, we are asking simple yes/no questions, so we don’t need a subfield for answers, but you could add an answer field if you need it.

Again, make note of what you name the subfield as you’ll need that in the code. When you are done, it should look something like this:

quiz custom fields

Another item of note is to make sure you set these fields to show on the proper page/template/post type (or wherever you want the quiz to show). You can do this under the “Location” box. For this example, we will just pick the specific page on which the quiz will appear.

The Code

The code for a repeater field is fairly straightforward. It is basically a while loop that will loop (obviously) through each question group you have entered and output them on the page.

Here’s the code for the repeater field (and the rest of the quiz, really):


<div id="quiz">

   <?php if(have_rows('question_group') ): $i=1; ?>

      <?php while(have_rows('repeater_field_name'): the_row(); ?>

      <div class="question">
         <p><?php the_sub_field('question'); ?></p>
         <input type="radio" name="answer<?php echo $i; ?>" value="Yes" class="yes" />Yes<br />
         <input type="radio" name="answer<?php echo $i; ?>" value="No" class="no" />No
      </div>

      <?php $i++; endwhile; ?>
   
   <?php endif; ?>

   <a id="submit">Submit</a>
</div>

Like I said, this code is pretty straightforward. The only thing I’ll note here is that we are using a variable name $i with a starting value of “1” and we are incrementing it right before the close of the while loop. Also, we are echoing it in the name of the input fields as well. The reason for this is so that the radio buttons will be grouped per question.

Bringing it all together with jQuery

Now that we have custom fields created (and filled out on the page we placed them on) and the code that’s outputting these questions, we need a way of scoring it. That’s where jQuery comes in. Really, there are a number of ways to accomplish this, but what we are going to do in this example is when we click the button element, jQuery will calculate how many of the Yes’s and No’s have been selected based on the class of the input field. It will then store those values in variables that we can compare against each other.

Here is the jQuery script:


var yes = $('input[type=radio].yes:checked').length;
var no = $('input[type=radio].no:checked').length;

if(yes > no) {
   // do something
} else
   // do something else
}

That’s it! It’s up to you what happens based on if there are more yes’s versus no’s or vice versa. You could redirect to a specific page, or show a popup or and alert box, pretty much anything that makes sense to you.