Have you created a quiz with Riddle’s quiz maker, and want to show users how their scores compare with other users? You should try our WordPress quiz leaderboard feature – no coding required.
You’ll need our free WordPress quiz maker plug-in to start.
(Are you using a different site builder than WordPress? Try our PHP quiz leaderboard option – super flexible, with some easy modifications of our sample code.)
Video walkthrough – creating a WordPress quiz leaderboard
Check out this handy video tutorial – and if you have any questions, please just ask us on support chat. We love to help.
Step 1: Create a quiz
Our WordPress quiz leaderboard option currently works only with our ‘quiz’.
- Create a ‘Quiz’ on riddle.com
But (coming soon) you’ll be able to display rankings for any of our formats with points for right/wrong answers such as:
- Auto-quiz
- Tap and find
- Order it
In our quiz leaderboard example, I created this “How well do you know your Rams history?” quiz:
Step 2: Add a lead generation form
You’ll need to add a lead generation form for each quiz taker to register and to have their scores appear on your leaderboard.
Add any fields you like – like ‘first name’, ‘last name’, and a ‘checkbox’ for terms and conditions.
In our example, I’ve asked for first and last name, email, as well as how often they go to Rams’ football games.
Best pratice: We also recommend add a field called ‘Nickname’ (case sensitive) – for the displaying each entrant (such as ‘Paris Paul’) vs. their real name.
IMPORTANT: when naming the form fields, avoid spaces or special characters in the form field names. While these work fine, when using our standard connectors like MailChimp, spaces in field names break the PHP Code that powers the leaderboard and you will not be able to select fields for display if the field name is not properly formatted.
And don’t worry, you can still use Riddle for lead generation – and collect and/or send your quiz leads to your marketing software like MailChimp, Google Sheets, etc. in addition to using our leaderboards.
Step 3: Create a leaderboard in WordPress
- Now let’s go back to your Riddle plug-in on WordPress.
- (New to Riddle? Here’s how to get started with our plug-in.)
- Click on ‘My Riddles’
- Then ‘Add leaderboard’ by your quiz
Step 4: Setting up the quiz leaderboard
- Add a leaderboard image (optional). 16:9 ratio works best (ex. 960×540 pixels)
- In the ‘Edit’ tab, customize the ‘score message’ (e.g. ‘Your score:’)
- Modify the leaderboard title
- And the leaderboard description
- Next click on the ‘Leaderboard’ section – and select which fields you would like to display as leaderboard columns.
- You can rename any field as well.
- We recommend add a field called ‘Nickname’ (case sensitive) – for the displaying each entrant (such as ‘Paris Paul’) vs. their real name.
- We also add ‘index’ – which will put a ranking # by each contestant’s place (e.g. 1, 2, 3 for the top 3 contestants), and ‘percentage’ to show their score.
- Click ‘Update’
Additional leaderboard options:
- You can also set your result text – the comparison message users will see (use the %%PERCENTAGE%% variable)
- Want to avoid embarrassed users? Set the absolute lowest value they will see – ie. even if they got a ranking of 5%, they’d see “You scored better than 20% of all quiz takers!”
- Change how entries are ranked – default is by the % answered correctly, but you can also use the time taken.
- Score % & time taken: In the event of ties, the fastest quiz taker wins.
- Score sums & time taken: Add up multiple entries from same quiz taker – then uses time as a tie breaker.
- Score % only: Just the score matters – time isn’t counted.
- Score sums: Reward repeat quiz takers – count up all the entries from the same quiz taker
In this example, Michelle and John got the same score – but Michelle was faster, so she ranked higher.
- Tweak the message people will see if they arrive on the page before anyone has taken the quiz.
- Motivate your users – show them close they were to the top X places… we recommend this to encourage more engagement through repeat entries.
Okay – you’re almost set.
- Save your leaderboard – click ‘update’.
- Publish to WordPress – then copy the short code.
- Paste to your page/post’s URL.
Step 5: Activate quiz result landing page
Almost there – now you need to go back to Riddle and activate your quiz result landing page.
This will send each quiz taker’s score and details to your leaderboard.
- Go to our ‘Publish’ step > ‘Extras’ section.
- Paste in your URL (e.g. https://www.yoursite.com/quiz-leaderboard) and click ‘test URL’. Close the small pop that appears.
- Activate quiz result landing page – and turn on ‘open outside Riddle iFrame’.
- Make sure that ‘Do not send Riddle data via POST method’ is OFF.
Last – just press ‘publish’ to push these changes live, and you’re all set!
You can take this quiz – and see your results appear.
Got questions?
And of course, if we can help in any way with your WordPress quiz leaderboard, please ask away – on support chat, or at hello@riddle.com.
We’re big customer support geeks – and race each other to answer questions in under two minutes. That’s super fast! 🙂