SurveyJS for those standard forms

Written on July 27, 2017

Doing user input forms, e.g. for questionaires or surveys in the browser yourself often means handling a lot of <input>, <textarea>, CSS etc. Those can be quite cumbersome. One wants to concentrate on the actual survey and does not want to count radiobuttons or the pixels of the border of input fields. Therefore usually one uses a library that helps with this process. So far there where mostly jQuery UI and Bootstrap. Alpaca also does the job but I found it a bit difficult to use (although I only tried for one afternoon). Now there is a new option: SurveyJS (or survey.js - both spellings seem to be used).

With SurveyJS one can do these standard forms like for demographics, multiple-choice, or dropdowns. It also enables more complex forms like this matrixdropdown or this rating.

But what makes SurveyJS really useful is that one can easily combine all those different elements to a single survey. E.g. have a look at this feedback questionaire - it even has sub-pages.

The forms in SurveyJS are defined with JavaScript objects - no need to define a <input> yourself, e.g. the following defines a rating selection:

window.survey = new Survey.Model({
    questions: [{
        type: "rating",
        name: "satisfaction",
        title: "How satisfied are you with the Product?",
        mininumRateDescription: "Not Satisfied",
        maximumRateDescription: "Completely satisfied"
    }]
});

And (of course) it’s simple to combine SurveyJS with JATOS. I’d recommend to use their jQuery version. And to submit the survey’s result back to your JATOS server you have to change the survey.onComplete function to something similar to this:

survey.onComplete.add(function (result) {
    $("#demographics").hide(); // Hides the 'Thank you for completing ...' message
    jatos.submitResultData(JSON.stringify(result.data), jatos.startNextComponent);
});

To have a quick look or a good starting point in JATOS download and import the SurveyJS example study.

Edit: I just stumbled over JetBrains Ring UI that also offers some nice UI elements for the browser - although it doesn’t really seems to target survey but application UIs.

Written on July 27, 2017 by Kristian Lange (lange.kristian@gmail.com)