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
Check out this handy video tutorial – and if you have any questions, please just ask us on support chat. We love to help.
Creating a WordPress quiz leaderboard
Step 1: Create a quiz
Our WordPress quiz leaderboard option currently works only with our ‘quiz’. But coming soon – you’ll be able to display rankings for any of our formats with points:
- Auto-quiz
- Tap and find
- Order it
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.
IMPT: Each form must have a field whose field ID is called ‘Email’ (case sensitive)
We also recommend add a field called ‘Nickname’ (case sensitive) – for the displaying each entrant (such as ‘Paris Paul’) vs. their real name.
You can still collect and/or send your 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 ‘Create 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)
- Customize the ‘score message’ (e.g. ‘Your score:’)
- Modify the leaderboard title
- And the leaderboard description
- Add the field IDs from your lead form – that you want to display as leaderboard columns.
- Note: You must have a field named ‘Email’ – case sensitive.
- 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.
- 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!”
- Customize the overall ranking message
- 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.
- Save your leaderboard – then insert the short code into any page or post.
- Publish – then copy 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 ‘advanced’ tab.
- Turn on ‘quiz result landing page’.
- Paste in your URL (e.g. https://www.yoursite.com/quiz-leaderboard)
- 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!
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! 🙂