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.

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

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.

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.

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

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

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.

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.