Did you know that Riddle’s quiz maker has a powerful CSS quiz editor? You can customize every visual aspect of your Riddle quiz, list, or poll to match your website’s look and feel.
Yup – from button styling to text, colors to borders, you have control over nearly every element of a Riddle – and you don’t have to be a code guru to do it.
Each time you create a quiz, it will feel completely organic to your site – not a 3rd party widget. See how Choice Hotels used our CSS quiz editor for their ‘Where should you go on vacation?’ quiz:
BEFORE: Choice Hotels quiz – no CSS
AFTER: Choice Hotels quiz – with CSS editor
What can you customize with our CSS quiz editor?
For customers on our Team plan, our CSS quiz editor now gives full control over almost every aspect of your Riddle.
This is just the tiniest tip of the iceberg:
- Bullets
- Buttons – round or square?
- Fonts
- Colors of any element
- Background – use colors or background images
CSS quiz editor – live quiz examples
Our CSS quiz editor is part of our Team plan – along with multi-user accounts, uploading your own fonts, and loads more.
Check out how Price Waterhouse Cooper modified the CSS for a series of one question quizzes into this report targeting cognitive bias among C-level executives.
They changed the borders, buttons, uploaded their own font and more – all so that each quiz more closely match their site.
English Premiership champions Chelsea FC are big fans of using Riddle’s quiz maker to engage their fans, both on- and off-season.
They used the creative freedom of our CSS quiz editor in their timed “Arsenal vs. Chelsea” quiz:
Getting started with our CSS quiz editor
Let’s take a look on how to get started with our CSS quiz exditor:
- Go to the ‘Customize’ step > ‘Style’ tab.
- Scroll down to CSS quiz editor.
- Paste in the new CSS code for any elements you’d like to customize.
To modify the CSS code, you can change the CSS property of each part of the Riddle by first investigating the property name and then adding a new CSS property for the respective class.
To investigate the property names, we suggest to use Google Chrome’s developer tools:
- Click on ‘inspect’ then find the element name – typically in this format: h1.title.ng-binding (in this case for the title text)
- To change the parameter, just copy this tag along with the specific color or other characteristic.
In this example, we changed the .riddle-frame element in the following way before pasting into the CSS quiz editor:
.riddle-frame {border-radius: 0px;
border: 0px!important;
box-shadow: 5px 5px 15px #d2d2d2;
padding: 20px;
text-align: center;}
.riddle-frame .content-div .footer-content .start-btn {
width: 100%;
padding: 15px 0;
border-radius: 0px;}
.riddle-frame .content-div .choices .choice {padding: 8px 0;}
.riddle-frame .content-div .page-number {}
Original Riddle (no CSS modifications):
Which Arsenal Invincible Are You?
Thierry Henry
Patrick Viera
Ashley Cole
Dennis Bergkamp
Freddie Ljungberg
Sol Campbell
Jens Lehman
Robert Pires
What’s the key to winning?
Rock-solid defense
Creative attack
Which would you rather be?
Well-liked
Well-respected
Where would you rather work?
In your home country
Overseas
Which do you prefer to rely on?
Creativity and working things out on the go
Strategy, plans and structure
On a scale of 0-5, where 0 is quiet and shy and 5 is the life of the party, you’d be which score?
0-1
2-3
4-5
Who would you least like to see win the Premier League?
Tottenham
Chelsea
Liverpool
Manchester United
When sudden change happens, how do you tend to react?
I adapt quickly
I take a moment to gather myself before adjusting
I get thrown into chaos for a bit, before getting my head around it
When it comes to rules and regulations, policies and plans, you believe:
Sticking to the rules will have a better outcome
Sometimes you have to go outside the rules to do a better job
Which European country would you most like to visit?
France
Sweden
Germany
Italy
Holland
Spain
YES OR NO: You like jobs and tasks that are fast-paced with tight deadlines
YES
NO
New Riddle (with CSS modifications):
Which Arsenal Invincible Are You?
Thierry Henry
Patrick Viera
Ashley Cole
Dennis Bergkamp
Freddie Ljungberg
Sol Campbell
Jens Lehman
Robert Pires
What’s the key to winning?
Rock-solid defense
Creative attack
Which would you rather be?
Well-liked
Well-respected
Where would you rather work?
In your home country
Overseas
Which do you prefer to rely on?
Creativity and working things out on the go
Strategy, plans and structure
On a scale of 0-5, where 0 is quiet and shy and 5 is the life of the party, you’d be which score?
0-1
2-3
4-5
Who would you least like to see win the Premier League?
Tottenham
Chelsea
Liverpool
Manchester United
When sudden change happens, how do you tend to react?
I adapt quickly
I take a moment to gather myself before adjusting
I get thrown into chaos for a bit, before getting my head around it
When it comes to rules and regulations, policies and plans, you believe:
Sticking to the rules will have a better outcome
Sometimes you have to go outside the rules to do a better job
Which European country would you most like to visit?
France
Sweden
Germany
Italy
Holland
Spain
YES OR NO: You like jobs and tasks that are fast-paced with tight deadlines
YES
NO
Want to save time with our CSS quiz editor?
We’ve also created this database of common CSS edits – over 60 tips/tricks on editing/hiding/altering quiz elements and your quiz’s visual styles.
Just click, copy, and paste the CSS into the CSS quiz editor for your account.
Our CEO Boris shows a fraction of what’s possible with Riddle’s CSS quiz editor. He added text overlays, created new placements for sponsors’ logos and more in this burger quiz (in the ‘Enterprise’ section).
Ask us anything @ CSS
CSS might seem a little intimidating if you’re new to coding.
But fear not, we’re happy to create a free CSS ‘recipe’ to blend your Riddle quiz in your site with our CSS quiz editor.
All we need is a bit of guidance from you – such as the URL you’ll be embedding your quiz on, and we’ll get our CSS ninjas on the case.
(This is a free service for all subscribers to our Team plan – so don’t be shy.)
You can also use Riddle’s team style template feature to save any changes you make with our CSS quiz editor.
Apply all your customizations with just a click – or make it a ‘default’ template for any quiz, list, or poll you make going forward.
Any questions @ our CSS quiz editor?
Just give us a shout at hello@riddle.com if you have any questions about CSS (or making a quiz in general).
We love to help – and respond in minutes from 7am to 10pm UK time (2am to 5pm EST).