How to add a quiz to your Drupal Website (Complete Step-by-Step Guide)

If you’re have a Drupal website, here’s exactly what you need to do to add a quiz to your Drupal website in a step-by-step guide!

Create a Quiz for Your Drupal Website for Free

I came across a chart the other day showing the market share percentages of various CMS’s. Not going to lie, I was pretty surprised that Drupal came in third behind just WordPress and Joomla. I had never worked with Drupal before and attempted to set up a domain and install it in order to make a guide on how to add a quiz.

I failed pretty hard, and after a couple of hours gave up and emailed and emailed one of our customers Touchstone Energy Cooperatives. Their senior web developer, Sean, was kind enough to put together a guide on how they managed to put a very nice looking quiz into their Drupal site for an upcoming event.

I’ll let him take it from here.

Drupal Instructions:

1. First, find the page you need to edit/insert the quiz.

2. Do this by accessing the ‘Content’ area of your administrative toolbar in Drupal.

drupal quiz code

3. Next, find the Title of your page in which you want to place the quiz and click on the ‘edit’ link.

drupal quiz code

4. Or you can simply navigate to the page in question and click on the ‘Admin Edit/Content’ link to edit the page you are on.

drupal admin quiz insert

5. Click on the ‘Source’ button in your WYSIWYG editor toolbar to access the direct HTML source of the page.

6. Paste the embed code from interact directly in the Body of your editor.

drupal quiz source code

7. Make sure to save your changes at the very bottom left of your editor page.

drupal insert quiz code

8. With the default settings of 800 pixels wide and 600 pixels tall, the quiz will initially look like this.

quiz in drupal page drupal6

Optional Instructions:

9. If you need the quiz to span the whole width of your page, you can edit the source code little bit to make it wider/taller.

10. Go back into your page editor and adjust the width and height to something more appropriate.

a. In this case, the width of our main container was about 1000 pixels wide, so you can change the width to 1000 without having to generate new embed code on the interact website.

b. In order to compensate for the width adjustment, you may want to increase the height as well to ensure the scrollbars do not show up.

drupal full width quiz


Note: This may make the quiz much larger than you initially wanted.

c. I had to make the height 1000 pixels in order to not see the scrollbars (maybe longer depending on your quiz).

d. In order to make the quiz smaller but still keep the scrollbars inactive, you would have to add or adjust the iframe CSS rules on your site to utilize transform properties.


e. You could potentially make the quiz fit into any container by altering the transform property to any size you like. In this case, I’ve made it only 75% of the 1000×1000 pixel dimensions specified in the iframe, so it has some padding and fills out the page nicely without scrollbars being present.


So that’s how you put a quiz in your drupal site. It’s certainly a bit more involved than some of the other CMS options, but it’s not too bad, especially with this excellent guide that goes step-by-step.

Create a Quiz for Your Drupal Website for Free

Josh Haynam

Josh Haynam is the co-founder of Interact, a place for creating beautiful and engaging quizzes that generate email leads. Outside of Interact Josh is an outdoor enthusiast, is very into health/fitness, and enjoys spending time with his community in San Francisco.

More Posts by Josh Haynam