It's the Olympic Games 🥇! Let's have some fun with flags with this Quizz Chatbot Template written in CSML...

CSML Template Highlight: Create a Dynamic Quizz Chatbot With CSML

Case Study Jul 25, 2021
CSML Studio recently added a chatbot templates library to help you get started with your next project. In this series of posts, we will highlight and analyze some of the best chatbot templates!

This article will focus on a fun little template that is packed with many interesting CSML development tricks: the famous Fun With Flags quizz! In this chatbot, you get asked to name the country of 10 completely random flags of the world, that are generated on demand and are different for each visitor.

CSML Playground by Clevy.io
An advanced online playground for CSML that lets you use all of CSML’s built-in features directly in the browser

Main Features

This template is a fun quizz to send to your friends: go try it and let us know what your score is in the comments! It's really not as simple as it looks. My personal best is 8/10, but I got quite lucky!

The main goal of this template however is to teach you some advanced features of CSML.

The principle is indeed quite straightforward:

  1. generate a list of 10 country flags
  2. iterate over each flag, and ask the user to pick between that country and a few other at random
  3. everytime the user gets a flag right, they get one point. Otherwise, they don't get any point.
  4. at the end of the 10 flags, stop and give the user their score

Native Functions

This template leverages native CSML functions to make the code more readable. There are 4 functions in the methods flow:

  • getCountries(): retrieves a list of all the country names in the world (more or less). This is based on the Olympic Games countries list.
  • getFlagUrl(country_name): each country has its own flag, and we have hosted each flag on a server so that you can easily display the flag based on the country name.
  • getRandomCountry(): returns a random value found in getCountries(). This allows generating a random list of countries for the quizz, then a random list of candidates for each flag you have to guess.
  • getRandomChoices(country): when given a country to guess from, you also need to generate a few other candidates (which are any other possible country but the correct one). Also, you want to Shuffle the list to make it as random as possible.

You can then import these functions at the top of the flow where you want to use them:

import { getFlagUrl, getRandomCountry, getRandomChoices } from methods

Read more about native CSML functions in the documentation:

Native CSML Functions

Dynamic Content

At the start of the Default flow, you can find a single variable, maxRounds, that can be set manually to any positive number. Everything else is generated dynamically from that single variable: the list of flags to identify, the list of candidates for each flag... Every user of the bot will have a different quizz.

You can see that we are using the functions explained above to generate a country and a list of candidates at each round. Then, we generate a question with buttons, and ask the user for their choice. Finally, depending on whether they got it right or wrong, we add a point to their current score, and iterate once again.

Nothing is ever fixed or hardcoded!

An example question from the CSML flags quizz

Keeping Scores

At the end of the rounds (once we reach the value declared in maxRounds), since we already added points each time the user got a flag right, we can simply divide the number of points by the number of rounds and get a percentage score.

This uses the simple mathematical operators that are available by default in CSML:

Keywords

Then, depending on the score, we can display a different encouraging message:

Conditional Logic

Going further

As you can see, this bot is fun, but also interesting if you are just getting started with CSML. I encourage you to go and try it while reading its code, to be able to better understand some fundamental CSML principles.

You can use it as a basis for all sorts of quizzes as well, even as part of a lead generation chatbot, where you would ask the user for their email address first, and if they get a certain score, they would enter a raffle of some sort to win something from your company. Quizzes are fun!

Tags