Add a Wordpress quiz leaderboard to your site
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.
And don’t worry, you can use Riddle for lead generation – and collect and/or send your quiz leads to your marketing software like MailChimp, Google Sheets, etc.
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!
Example quiz leaderboard in action
Take a look at this quiz leaderboard – embedded in our sample site!
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! 🙂