How to create a quiz bot and leaderboard

In this tutorial we are going to build a quiz bot that creates a leaderboard and allows the user to look up the top five and then see where they are currently ranked.
Uses for this could include:

  • Fantasy football league
  • Staff quiz
  • Staff training
  • Gamification of any training or learning

This bot uses The Bot Platform, Integromat and Google Sheets. 

Step 1 - Creating a quiz bot

The first step is to create our quiz bot. This part is really simple and requires you to use text bots for your questions and quick replies for your possible answers. 

You need two flows for right and wrong answers. For a right answer, you need to select a send message and increment attribute as shown below:

 

When a wrong answer is selected, you send a message only and do not include the increment score. 

Your final score message can then display the $score attribute which will show how many points they scored through the quiz and can link off to your leaderboard. 

When they click on the view leaderboard message, it should take you to a new message. Your leaderboard message needs to include a webhook that links off to a new integromat scenario. 

In our quiz, we have also included a further message that is delayed to ensure it appears after the top five have been displayed. It allows the user to see where they currently rank on the scoreboard. This button goes to another message called My Score, which contains another webhook. 

 

Our quiz bot is now complete so we need to set up the scenarios on Integromat and set up our Google Sheet. 

Step 2 - Our Google Sheet

For this bot, we only really need a simple Google Sheet, with two columns, name and score. 

Step 3 - Our Leaderboard Scenario

This scenario takes in the user’s quiz score, adds that person to the Google Sheet. It then searches the sheet for all of the current participants and finds the top five high scorers and creates an array of these users. It then turns that array into a message format and finally a webhook response sends that message back to the user in a multipart format. 

First create your new webhook and paste it into your leaderboard message. Now run your scenario and complete your quiz. It will pull through your user details and the score you achieve in the quiz. 

We now want to use a Google Sheets, Add a row module. Add a row to your spreadsheet that stores the Firstname and Lastname of the user and the score achieved. 

In the next step, we want to look up the top five scores in our quiz. Add a Search Rows module. You want to add a filter in this step to ensure it only searches the rows where a score exists. You want to sort by the score and in a descending order so it provides the highest to lowest scores in order. You want to limit the search to 5 rows, this will give you your top five. This module set up will look like the following:

Now we need to add an array aggregator step to collect our searched rows into an array. 

You want to set your target structure type as the multipart message. You can then add your text in for your messages, using the information pulled from your search rows step. For example:

Now we need to add a Create JSON module. First you need to add a data structure. Use the generator and paste in the example multipart message from The Bot Platform’s github documentation. 

{

 "recipient": {

  "id": "USER_ID"

 },

 "message": {

  "raw": {

   "multipart": [{

    "text": "one"

   }, { 

    "text": "two"

   }, {

    "text": "three"

   }]

  }

 }

}

This will generate the leaderboard message structure you will need. In the recipient Id field, use the FBID pulled through from your webhook. In the message part you want to click the map slider and then use the array from the previous step. Ultimately it will look as follows:

Finally you need a webhook response module and in the body of this message, you want to use the JSON you created in the previous step. 

Now you have a bot that pulls back the top five from your quiz. 

Please let us know if this article was helpful and click one of the emoji's below.
Thank you!

Did this answer your question?