How to Build a Quiz Bot with Leaderboard (free, no coding required)
The Singapore Sailing Federation recently used “Sammy”, it’s Facebook messenger chatbot to run a 10-day, 60 question quiz to educate the public on Sailing at the Asian Games. You can try the quiz here.
This is how we did it (along with instructions on how you can too).
Tools used: Chatfuel (free tier with Chatfuel branding), Janis (free tier), Dialogflow (free), Integromat (free tier), Google Sheets (free)
Here are 14 steps you need to create a free Quiz Bot with Leaderboard
- Design quiz questions
- Set up score attributes
- Use Gifs to spice up the quiz
- Use Integromat to send scores to Google Sheets via a webhook
- Set up a new Integromat scenario
- Use the JSON API plugin to pass the attributes via the webhook
- Determine the data structure
- Add a Google Sheets module in Integromat
- Set up your Google Sheet
- Align your user attributes for Google Sheets in Integromat
- Check that attributes are being passed to Google Sheets
- Create Leaderboard with a QUERY formula and publish as web page
- Define Rules of the Game
- Bonus Tip: Use AI to redirect users to next question if they get lost in flow of the quiz
Ready to start? Let’s go!
1. Design Quiz Questions
Set up the questions for your quiz.
For each question, offer answers with quick reply buttons. Each quick reply button should route to a CORRECT or WRONG block, followed by the next question.
2. Set up Score Attributes
To keep track of the scores, each question should have attributes with Total Score, as well as Questions Attempted. The initial value is zero.
In the CORRECT block, the quiz score and questions attempted would both increase by 1.
In the WRONG block, the quiz score would stay constant, but questions attempted would increase by 1.
3. Use Gifs to spice up the quiz
Right and wrong answer gifs are included in the CORRECT or WRONG block.
4. Use Integromat to send scores to Google Sheets
After each question (in the CORRECT or WRONG block), we used Integromat to send scores to Google Sheets, with a POST request via JSON API.
Integromat is a powerful, code-free, automation tool, that allows you to connect different apps via API.
5. Set up a new Integromat scenario
Select Webhooks and Google Sheets as services you wish to integrate. Hit Continue.
Click on the Clock to select the first module for your scenario. Select Webhook, then Custom Webhook. Add a new Webhook, and name it Quiz.
The webhook at the URL is now ready to listen for incoming data.
6. Use the JSON API plugin to pass the attributes via the webhook
Add a JSON API plugin in Chatfuel in your CORRECT and WRONG blocks to send the quiz score to Google Sheets via Integromat.
Set type to POST, and paste in the webhook given by Integromat in the step above. Add the following user attributes (first name, last name, messenger ID, question score).
Note: On hindsight, we should have passed a {{current_question}} attribute to Google Sheets as well, to help us track which questions were completed by each contestant. This helps to eliminate people who cheated / answered the questions multiple times.
7. Determine the data structure.
Trigger at least one of the quiz questions to pass attributes to Integromat and set up the data structure.
Once you see that the data structure has been successfully determined, you can move on to the next step.
8. Add a Google Sheets module in Integromat
Select Add a Row.
9. Set up your Google Sheet
The worksheet must have column names, and at least one filled row with dummy data. (Note: the first column uses a concatenate formula to join cell B2 and C2. Formula is =concatenate(B2,“ ”, C2))
10. Align your user attributes for Google Sheets in Integromat
Match your user attributes with Google Sheets columns.
11. Check that attributes are being passed to Google Sheets
Run through another question of the quiz, and check that scores are passed to Google Sheets!
Once several people start attempting the quiz, you will see the rows auto-populated with whether they got the question right (1 point) or wrong (0 points)
12. Create Leaderboard with a QUERY formula and publish to web page
To create the leaderboard, go to a new tab and use the QUERY formula to aggregate the results.
The query formula is:
=(query(‘Question Score’!A1:D4000,”select A, sum(D) group by A order by sum(D) desc”,-1))
Create a chart with the data, and publish to web. Place the URL in a Chatfuel button or block.
13. Define Rules of the Game
Every day (for 10 days), we sent a broadcast to our chatbot users at 7pm, with 6 questions to answer. At the end of each day, Sammy would tell you your score for the day, as well as a Leaderboard for all quiz contestants. At the end of 10 days, contestants could win a pair of Oakley sunglasses (worth S$270).
14. Bonus Tip: Use AI to redirect users to next question if they get lost in the flow of the quiz
Sometimes, users don’t click on the quick reply buttons. In those cases, the flow of the quiz is broken. There are several ways to fix that:
- Disable AI
This solution is ok if you have 2–3 questions (max!). With more questions, users could get stuck in a loop, not being able to exit the survey. This would annoy them very quickly.
- Set up a AI rule (or a Dialogflow intent) and use the JSON API to set up a dynamic redirect to the next question. (Note: the Go To Block cannot be used for dynamic redirection. This script allows you to send any user to the next question in the quiz, based on his or her last attempted question).
This requires you to set up a {{next_question}} attribute for each quiz question. The attribute should contain the name of block for the next question.
Set up a JSON API plugin to redirect users to the next question if block is triggered.
You can use this script from Braintrust Interactive. http://braintrustinteractive.com/chatfuel/scripts/gotoblock.php
Set up an AI Rule or a Dialogflow intent that redirects to the Next Question block anytime someone asks to go back to the next question.
Post Quiz Evaluation
The methodology outlined above can also be used to set up a feedback survey in your chatbot.
At the end of the 10 days, we surveyed contestants at the end of the 10 days via the chatbot, and collated responses in Google Sheets.
Feedback was extremely positive.
And there you have it! Here’s how you too can create a Quiz Bot for free with no coding!
Try the 60 questions “Sailing at the Asian Games” quiz here!
Want a quiz bot template?
Remember to bookmark this tutorial for future use, and if this has been helpful, remember to give this article a round of 👏👏👏👏👏.
Other Articles I’ve Written on using Chatbots
About the Author
Deborah Kay is Chatbot Evangelist and Founder of Digital Discovery, a digital advisory firm based in Singapore. You can connect with her on Facebook, Instagram, Twitter, or LinkedIn.
