Have you ever seen flowcharts or infographics that have multiple choice questions on them with each answer leading to other subsequent questions? I’ve always found them interesting myself, but it always felt a bit too passive, and often when there were lots of questions on the screen all at once, it felt difficult to follow the lines to other questions. How would one solve those issues? Well, what if that experience was interactive? These were some of the questions I pondered before deciding to write a library that would improve on the experience. The result turned out to be a JavaScript library I called FlowQuest JS (combining aspects of flowcharts and questionnaires).

FlowQuest is meant to replace the dull static presentation of flowcharts and questionnaires. FlowQuest is interactive so users participate in more ways than just looking at a screen and tracing lines to subsequent questions. Users click on their choice and the system then presents with their subsequent question. This allows the user to clearly make his way through the questionnaire without having to trace lines or be flooded with all the questions visibly available on the screen all at once.

FlowQuest is a library and is flexible enough to allow for the creation of just about any kind of questionnaire (multiple choice). All you need is to create a configuration file with your questions and answers. It is a low-level library, which among other things, means that it is highly customizable. Developers can add their own custom look and feel and experience. Add question fades, slides. Use it on a small portion of the page or create full page  questionnaires.

FlowQuest Color Demo

The FlowQuest repo (see below) comes with a color demo to demonstrate the use of FlowQuest. Now, the demo is a simple example of what can be accomplished. Your specific use can be as extensive and elaborate as you’d like. FlowQuest takes a specific question and answer flow provided via a JSON file, and creates a unique customized questionnaire. With the initial question being analogous to a root of a tree, subsequent questions are branched off specific answers. In the color demo below (included in repo) the user’s selection of “yellow” as his favorite color hue, leads him to a question about the specific shade of yellow he prefers. The answer leads him to the name of the specific color he prefers.

 

 

In this demo the user answers the top-level question for their favorite color hue and is subsequently asked a question specific to that answer. After the answer to question 2, the user is provided with the specific color he’s chosen along with the name of that color. This FlowQuest is only 2 questions deep. You can have as many questions and have as many levels of questions as you’d like.

For more details, please check out the FlowQuest JS GitHub repo.