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)

  1. Design quiz questions
  2. Set up score attributes
  3. Use Gifs to spice up the quiz
  4. Use Integromat to send scores to Google Sheets via a webhook
  5. Set up a new Integromat scenario
  6. Use the JSON API plugin to pass the attributes via the webhook
  7. Determine the data structure
  8. Add a Google Sheets module in Integromat
  9. Set up your Google Sheet
  10. Align your user attributes for Google Sheets in Integromat
  11. Check that attributes are being passed to Google Sheets
  12. Create Leaderboard with a QUERY formula and publish as web page
  13. Define Rules of the Game
  14. 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!

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.

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.

“CORRECT” Block

In the WRONG block, the quiz score would stay constant, but questions attempted would increase by 1.

“WRONG” Block

Right and wrong answer gifs are included in the CORRECT or WRONG block.

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.

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.

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.

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.

Select Add a Row.

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

Match your user attributes with Google Sheets columns.

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)

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.

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

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.

Head of Digital Transformation | Chatbot Evangelist | Speaker | 21 All Star Twitter | 3X School Builder | Top Medium writer in AI 2018 | Digitaldiscovery.sg