How To Create A Quiz On Wix

5 min read

Riddle's quiz maker makes it easy to embed your quiz on your WIX site.

WIX offers a very easy to use homepage builder that's one of the most popular on the market (used by the global football/soccer powerhouse Manchester City).

They've done a great job making an easy to use website builder – perfect if you're not comfortable using Wordpress or coding it via HTML.

Let's dive in and show you can create a WIX quiz using Riddle.

(Our quiz embed codes work in any CMS – for example, you can see how to embed a quiz in Squarespace, as well as using our Wordpress plug-in.)

Embed your quiz on Wix.com

First, you will need to make some room for the Riddle.

Just clean out a section or create a new empty section to place your Riddle quiz.
Make it large enough to fit your Riddle type.
Quizzes and polls are pretty compact, while a rolled-out top 10 list will need a lot of space.

Don't worry too much about perfect sizing at this point – WIX makes it super easy to resize everything later.

Now that you have some space for your Riddle:

Click 'add' in the lefthand menu.
Then 'more'
And 'HTML iFrame'

This will allow you to place the Riddle embed code into your WIX site.

Once you have your iFrame in your site:

Copy your quiz code from Riddle.com – (edit your quiz: Publish > 'Get Code').
In WIX, click and drag the handlebars of your iFrame at the corner – to make it as wide as your site.
Now select 'enter code'.
Paste in our handy Riddle quiz embed code.

Because Wix doesn't play nicely with our embed codes out of the box, you'll need to make a few minor tweaks:

Change the 'width' to your desired width (500px normally works well for both desktop and mobile – but play around with your own width to see what works best for you.)
Change the 'height' to the height that works best for your quiz – 800px is a good starting point.

(The back story for all these extra steps? Our embedded quizzes normally resize automatically in both height/width on any CMS – such as via our Wordpress plug-in or directly in Squarespace. Unfortunately, Wix has configured their builder so this is not possible.)

Embedding your quiz

Right, so after these small changes, here is how your revised embed code should look:

BEFORE (Riddle standard embed code):

          <div class="riddle_target" style="margin: 0 auto; max-width: 100%; width: 640px;" data-rid-id="144533" data-fg="#1486CD" data-bg="#FFFFFF" data-auto-scroll="true" data-auto-scroll-offset="0"><script src="//www.riddle.com/files/js/embed.js"></script> <iframe style="width: 100%; height: 300px; border: 1px solid #cfcfcf;" title="Pop Quiz - San Francisco: The Locals' Challenge" src="//www.riddle.com/a/144533?"></iframe></div>

AFTER (WIX-friendly tweaks of Riddle embed code):

          <div class="riddle_target" style="margin: 0 auto; max-width: 100%; &lt;strong&gt;&lt;strong&gt;width: 500px;" data-rid-id="144533" data-fg="#1486CD" data-bg="#FFFFFF" data-auto-scroll="true" data-auto-scroll-offset="0"><script src="//www.riddle.com/files/js/embed.js"></script> <iframe style="width: 100%; &lt;strong&gt; &lt;strong&gt;height: 800px; &lt;/strong&gt; &lt;/strong&gt; border: 1px solid #cfcfcf;" title="Pop Quiz - San Francisco: The Locals' Challenge" src="//www.riddle.com/a/144533?"></iframe></div>

Right – the good news? You're almost set – nice work!

You might need to move things around or drag the dividers of your HTML iFrame to give enough space.
Click save > then preview.
Be sure to check mobile view as well – so that your quiz looks good. You might need to adjust things a bit here too.

Video: How to embed your Riddle quiz in WIX

Right – that's a fair number of steps… you may prefer to watch our founder, Boris, as he walks through the various steps.

Congratulations – that's all it takes.

I hope you enjoy your shiny new add-on to your WIX site. From 14 types of interactive formats – including quizzes to lists, polls to personality tests and surveys, your visitors will love your Riddles.

And as always, if you have any questions, just ask us on support chat or email us at hello@www.riddle.com/blog – we love to help, and are super fast to respond to every message!

************

WIX quiz video transcript

(We like to add transcripts for our video walkthroughs – in case folks find it faster to quickly skim read.)

Let me show you how you can add a little privacy to your Web site. Unfortunately, it's not as straightforward as with other content management systems like WordPress as WIX doesn't really allow our Riddle to expand on mobile devices as it should.

So there are some small changes you need to make to the embed code into your site. Just follow along here. Here's our sample site – I got to add the embed code, click on the plus to add from here.

Select more – then select HTML iframe.

Here's my iFrame, so the first thing you want to do is make this as big as your site to get started. And then click on 'enter code' and paste the Riddle embed code, and now there's a few changes you need to make to that embed code. So if you scroll, let's scroll to the top. We want to make the width dynamic, but since it works, that's fine.

You need to set your own width at five hundred pixels; that seems to work well on desktop and on most mobile devices. And then you need to make one more change here.

What's its height? Three hundred pixels again. In all other content management content management systems, the video code will expand and be as high as it needs to be and move other stuff around, but not on WIX. So you need to set the height. And it kind of depends on how many answer options you give to questions in your WIX website quiz.

So you need to play around with this for this one. I already did the playing around. I figured eight hundred pixels is a good height. So you apply that now the embed code is it and you can already see it doesn't really fit in here. The next thing I need to do is I need to move stuff around. So first I'm going to move this down here and create some room and I need to create some more room, probably.

But let's try this first. Maybe this was enough already. I can see the entire riddle here now I switch to the mobile you. And let's see if I have enough room there. And again, I need to make this taller. So I he created the room at the bottom, so I'm going to make this this tall. And actually, there's the headline here, so let's move this down and this fix does not make this easy, by the way.

Because it's really hard to select elements of stuff, it's overlapping, so I'm going to make this really, really small first. Now, I can't move this down. OK, great, so you more. OK, I can pick this back up and move it here. And make it as tall as I need it to make. Next save that and hit preview.

So there's the tests, QuickStart, and you can see it fits – maybe we made too much room, but you can switch to desktop view.

And there we go, probably needs a little more space and move it up on desktop. Yeah, need to move that up on desktop, but you get the hang of it, you know what you need to do.

Again, let's just make this a little taller. We have room here and this was overlapping, so this wasn't good. So let's move this here and we're all good, so play around with it. So the key thing is make this section as tall as your tallest question on the middle and then in the embed code.

Set that height has a fixed height, and that should do the trick. Have fun.