SurveyJS – Learn how to create easy surveys

As background story, I finished university with a graduation project for a company, which you can find it here. The goal was to do something similar to Google Forms integrated with an ISO 9001 document management system, so I needed a good library to build surveys. It had to meet the following requirements:

  • Good Documentation
  • JSON-based library
  • Custom CSS
  • Send data to a server or at least provided a method

After intensive research, I encountered many libraries but they didn’t meet at least one requirement, except for SurveyJS. It has complete documentation with examples and provided helper methods to get data, therefore I decided to use it. After finishing the project, I thought it would nice to post the implementation applied to a production project, so let’s get started!

What is SurveyJS?

SurveyJS is a JSON-based javascript library that allows you to have full control of its use. You can modify the main object with additional functionality, send and receive data to a server at any moment, and the best part is that it is based on JSON! It’s even compatible with different javascript frameworks and libraries like React, Angular, JQuery, and Vue.

How do I use it?

In simple words, we will just need to create a simple structured object the way SurveyJS wants. The implementation I have includes the follow: integration with MongoDB simple methods to manage the data, and using SurveyJS jQuery library.

In the code below, there’s schema we will be using in the project. Most of the variables are self-explanatory and required by my project, but I want to focus on the questions array.

Building a survey

Every field declared is going to be used as it is except for formType. We will just set the field type right after getting data from MongoDB (MongoDB complains saving “type” field). After receiving data from our server, we will build a survey model and send it to SurveyJS method. Let’s create a function called buildSurvey:

The function accepts an object as parameter, which is then processed to match library’s structure. The pages section is optional, you can send the questions array and it will generate a single page full of questions. We will be implementing custom CSS to match the theme used, which is based in Bootstrap. I had to do some tweaks like more spaces between page title and question and fix checkbox, radio group and rating CSS, since it looked bad with Bootstrap Alpha 4 (looked like default browser elements).

Saving a survey

As you may have noticed, there’ a function called “sendDataToServer” that I pass to the survey object with the goal of saving user’s response to the database. This function processes the result and builds up a response object based in the survey response database schema, which follows the idea of how Google Forms saves the data: timestamp column accompanied by all the questions columns with a row of answers. The function concludes with a post request to the node server with the response that does a batch insert to the database.

Conclusions

I hope this guide will be helpful for those who are looking for any implementation of this nice library. Let me know if you have any questions or comments regarding this topic (which I know I can write better code, time was not in my favor at that time). I will be updating this post with images previewing the working survey, also, I am planning to make a guide about the administrator section.