7 min readDid 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?
In 2003/2004, magic happened, as the Gunners went unbeaten in the Premier League, something no top flight British side had done for 115 years. As we look back on a dream season, which member of that dream team is most like you?
Thierry Henry
You’re a silky smooth operator who brings creativity, pace, and a cutting edge to any team. Outwardly, you’re calm under pressure, but beneath the surface you have rock solid drive and determination, and won’t take crap from anybody.
Patrick Viera
You’re a natural leader who inspires everyone around you, and are able to bring the best performances out in anyone you work with, regardless of their talent level.
Ashley Cole
You’re a competitive person who doesn’t mind mixing things up to get the job done. Fiery at times, you’re valued by teammates and colleagues, even if you divide others.
Dennis Bergkamp
You’re a creative soul who sometimes gets overlooked because of your cool and calm nature. You have superstar talent and the ability to inspire colleagues to greater things through your example and deeds.
Freddie Ljungberg
You’re a free-spirited adventurer by nature, someone who excels by doing things a little differently from everyone else. You’re willing to go your own way even when you’re part of a particular system, and have the talent to find success by breaking the rules.
Sol Campbell
You’re solid and dependable, if a little conservative in approach at times. You lead by example and are willing to put in the hard yards. Although you consider yourself a loyal person, you are willing to change direction or seek new opportunities if needed.
Jens Lehman
You’re solid and dependable, and have a knack for fixing mistakes and cleaning up other people’s messes. Sometimes you feel like an unsung hero, but many people value you as a cool, calm, and collected trouble-shooter who gets the job done.
Robert Pires
You’re a talented individual who succeeds while looking elegant and unruffled. You make a big difference to any team you’re part of, and are well-liked by many people. You have a fiery personality at times, but it’s just your passion coming through.
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?
In 2003/2004, magic happened, as the Gunners went unbeaten in the Premier League, something no top flight British side had done for 115 years. As we look back on a dream season, which member of that dream team is most like you?
Thierry Henry
You’re a silky smooth operator who brings creativity, pace, and a cutting edge to any team. Outwardly, you’re calm under pressure, but beneath the surface you have rock solid drive and determination, and won’t take crap from anybody.
Patrick Viera
You’re a natural leader who inspires everyone around you, and are able to bring the best performances out in anyone you work with, regardless of their talent level.
Ashley Cole
You’re a competitive person who doesn’t mind mixing things up to get the job done. Fiery at times, you’re valued by teammates and colleagues, even if you divide others.
Dennis Bergkamp
You’re a creative soul who sometimes gets overlooked because of your cool and calm nature. You have superstar talent and the ability to inspire colleagues to greater things through your example and deeds.
Freddie Ljungberg
You’re a free-spirited adventurer by nature, someone who excels by doing things a little differently from everyone else. You’re willing to go your own way even when you’re part of a particular system, and have the talent to find success by breaking the rules.
Sol Campbell
You’re solid and dependable, if a little conservative in approach at times. You lead by example and are willing to put in the hard yards. Although you consider yourself a loyal person, you are willing to change direction or seek new opportunities if needed.
Jens Lehman
You’re solid and dependable, and have a knack for fixing mistakes and cleaning up other people’s messes. Sometimes you feel like an unsung hero, but many people value you as a cool, calm, and collected trouble-shooter who gets the job done.
Robert Pires
You’re a talented individual who succeeds while looking elegant and unruffled. You make a big difference to any team you’re part of, and are well-liked by many people. You have a fiery personality at times, but it’s just your passion coming through.
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).
