Customize anything with Riddle’s CSS quiz editor

Social data giant Kissmetrics knows that quizzes and interactive content are flat-out awesome at boosting engagement. They turn passive readers into viral brand advocates – increasing time on site and social shares. But why disrupt your site’s branding with a clunky 3rd party widget? Check out Riddle’s shiny new CSS quiz editor – it lets you seamlessly blend any quiz you create into your site experience.

Quizzes are the most engaging type of content on Facebook.
– Kissmetrics
Kissmetrics

We know that your site is precious to you – the result of months and years of effort. You’ve patiently labored for the visual look and feel for the perfect user experience – and your readers love you for it.

At Riddle, we’ve been working with top brands such as the BBC, Arsenal FC, and the Huffington Post. They’re big fans of how easy it is to create and embed Riddles, then apply a custom set of fonts and colors to match their sites with our global style sheets.

But they asked us if we could do more.

We’re always up for a challenge – and fuelled by pizza, beer, and the odd ping pong break, our ace dev team delivered.

Introducing Riddle’s CSS quiz editor

For customers on our Enterprise plan, our CSS quiz editor now gives full control over almost every aspect of your Riddle:

  • Bullets
  • Buttons – round or square?
  • Fonts
  • Font colors
  • Background – use colors or background images

This is a bit of a silly example – but you can see that we’ve used the CSS quiz editor to:

  • Move the logo up and added a bit of text to it
  • Show the quiz title and results as a text overlay over the image with a nice transparent background
  • Change the highlight colors for correct and wrong answers are different
  • Style the buttons, remove the embed border, and much more

Use the CSS quiz editor to change any element

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.
CSS Style Override

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):

[CSS Example] 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):

[CSS Example] 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

Need some free help using Riddle’s CSS quiz editor? Ask us!

We know CSS can be tricky – if you’d like us to help tweak your Riddles, just let us know at hello@riddle.com.

If you can give us a description of what you’d like to change (as well as the color codes, fonts, etc.), our crack team of code ninjas will provide a recipe of the code snippets that you can insert yourself into the CSS quiz editor – and you’ll be all set.

And it’s a free service. 🙂

Want to create and customize a Riddle quiz, list, or poll yourself? We’re big believers in trying before you buy – so all of our plans have a 14 day free trial, including full access to features like the CSS quiz editor, as well as a 30 day money-back guarantee.

Any questions? Just give us a shout at hello@riddle.com – we look forward to hearing from you!

By | 2017-03-01T05:26:40+00:00 February 22nd, 2017|

About the Author:

Passionate about ultimate frisbee, photography and travel, I'm an active Californian who 10 years ago fell head over heels in love with living abroad in Europe, and love bringing a healthy dose of American enthusiasm to a string of start-ups and small European companies. History and culture are great and all, but I'm still searching holding out hope for the perfect Manchester hamburger... any tips?

Leave A Comment