---
title: A mostly Out of the Box Quiz with ExpressionEngine
date: 2012-03-14T20:00:00-04:00
author: cc_admin
canonical_url: "https://caffeinecreations.ca/blog/a-mostly-out-of-the-box-quiz-with-expressionengine/"
section: Blog
---
![Puzzle](https://caffeinecreations.ca/uploads/blog/_1920x660_crop_center-center_none_ns/puzzle.jpg)

- [Web Development](https://caffeinecreations.ca/blog/category/web-development/), [Code](https://caffeinecreations.ca/blog/category/code/), [ExpressionEngine](https://caffeinecreations.ca/blog/category/expressionengine/), [EE Tutorials](https://caffeinecreations.ca/blog/category/expressionengine/ee-tutorials/)

# A mostly Out of the Box Quiz with ExpressionEngine

I'm working for an agency here in Toronto and one of the sites that I'm currently working on has a matchmaker quiz. There are four questions each with three possible answers and when the user clicks submit they are taken to a results page which will list a recommended product for them to purchase. This sounds simple enough on the surface but I was struggling with the best approach to this for a while. In the end though it was actually quite simple to achieve and only required one additional add-on.

I'm working for an agency here in Toronto and one of the sites that I'm currently working on has a matchmaker quiz. There are four questions each with three possible answers and when the user clicks submit they are taken to a results page which will list a recommended product for them to purchase. This sounds simple enough on the surface but I was struggling with the best approach to this for a while. In the end though it was actually quite simple to achieve and only required one additional add-on.

I approached Carl Crawley on skype about what I thought would be a good way to do this, but his suggestion was much simpler and most of what I'm putting here is a result of my conversation with him.

First up, build a channel called quiz results. with five fields. The first for field types need to be drop downs - I called mine {question-one}, {question-two}, {question-three} and {question-four} and populated with the answers a, b, c each on a new line. The last field is a relationship field which will be the product that the results link to, I called this {question-result}. Now start the data entry creating entries for each possible combination of answers.

Next build a basic form with radio buttons for the answer. You'll also need some way to get the $POST data into the quiz results page to pull up the correct answer. I thought about using strait php, but didn't want to enable php on my templates so looked to devot:ee for an add-on and found a few. The one that I chose looked best and is dead simple to use: [EvoPost](http://devot-ee.com/add-ons/evopost).

Next you need to create a new template called evopost (or whatever you want it to be) and set the action="" to point to that template like this **action="{site\_url}/template\_group/evopost"** and then in the evopost template you add the following code where you prefix the name="" value of each field with ep\_ so if your field is name="old" then your post data would be {ep\_old}:

```
<button class="absolute z-10 flex items-center justify-center w-8 h-8 -translate-y-1/2  -right-4 -top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{exp:evopost:getpostdata}
  {redirect="/treat-matchmaker/results/{ep_old}/{ep_big}/{ep_name}/{ep_foobar}"}
{/exp:evopost:getpostdata}" x-data="">
	<svg class="h-5 w-5" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <rect fill="#f3f4f6" height="53" rx="3" width="41" x="7" y="2"></rect>
  <rect fill="#f3f4f6" height="51" rx="3" width="39" x="19" y="11"></rect>
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>
<div class="sr-only">Copy to clipboard</div></button>```html
{exp:evopost:getpostdata}
  {redirect="/treat-matchmaker/results/{ep_old}/{ep_big}/{ep_name}/{ep_foobar}"}
{/exp:evopost:getpostdata}
```
```

This then redirects to the results template where Where your channel entries tag then pulls this information from the url structure like this

```
<button class="absolute z-10 flex items-center justify-center w-8 h-8 -translate-y-1/2  -right-4 -top-4" clipboard="" title="Copy to Clipboard" to="" type="button" x-clipboard.raw="{exp:channel:entries
  channel="matchmaker"
  search:question-one=""
  search:question-two=""
  search:question-three=""
  search:question-four=""
  disable="pagination|member_data"
}" x-data="">
	<svg class="h-5 w-5" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
  <rect fill="#f3f4f6" height="53" rx="3" width="41" x="7" y="2"></rect>
  <rect fill="#f3f4f6" height="51" rx="3" width="39" x="19" y="11"></rect>
  <path d="M53.98 9.143h-3.97c-.082 0-.155.028-.232.047V5.023C49.778 2.253 47.473 0 44.64 0H10.217C7.384 0 5.08 2.253 5.08 5.023v46.843c0 2.77 2.305 5.023 5.138 5.023h6.037v2.268c0 2.67 2.216 4.843 4.941 4.843H53.98c2.725 0 4.942-2.173 4.942-4.843v-45.17c0-2.671-2.217-4.844-4.942-4.844zM7.11 51.866V5.023c0-1.649 1.394-2.991 3.106-2.991H44.64c1.712 0 3.106 1.342 3.106 2.99v46.844c0 1.649-1.394 2.991-3.106 2.991H10.217c-1.712 0-3.106-1.342-3.106-2.99zm49.778 7.29c0 1.551-1.306 2.812-2.91 2.812H21.195c-1.604 0-2.91-1.26-2.91-2.811v-2.268H44.64c2.833 0 5.138-2.253 5.138-5.023V11.128c.077.018.15.047.233.047h3.968c1.604 0 2.91 1.26 2.91 2.811v45.17z"></path>
  <path d="M38.603 13.206H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 21.333H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM38.603 29.46H16.254a1.015 1.015 0 1 0 0 2.032h22.35a1.015 1.015 0 1 0 0-2.032zM28.444 37.587h-12.19a1.015 1.015 0 1 0 0 2.032h12.19a1.015 1.015 0 1 0 0-2.032z"></path>
</svg>
<div class="sr-only">Copy to clipboard</div></button>```html
{exp:channel:entries
  channel="matchmaker"
  search:question-one=""
  search:question-two=""
  search:question-three=""
  search:question-four=""
  disable="pagination|member_data"
}
```
```

And there you have dynamically pulled answers based on a quiz - of course with four questions - each with three answers, there's a fair amount of data entry to ensure that you have results for every possible combination.
