jQuery Plugins › jQuery Form Plugins › SurveyJS

Quiz System - SurveyJS

File Size:	6.54 MB
Views Total:
Last Update:	10/17/2019 00:34:00 UTC
Publish Date:	09/19/2019 02:52:40 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

Main features:

Supported question types: input, radio, checkbox, dropdown, matrix, rating, image picker, comment, custom function, etc.
Share data between questions.
Print to PDF.
Analyze survey results.
Supports condition logic.
Markdown and Text Processing.
Multiple languages.
Form validation.
8 built-in themes.
Supports 3rd plugins: select2, jQuery UI date picker, Nouislider, and much more.

Basic usage (jQuery):

1. Include jQuery library and the SurveyJS library's files on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/survey.jquery.js"></script>
<link href="/path/to/survey.css" type="text/css" rel="stylesheet"/>

2. Define your questions using JSON. You can build your own JSON using the online survey editor.

var json = {
    "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
    "completedHtmlOnCondition": [
        {
            "expression": "{nps_score} > 8",
            "html": "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
        }, {
            "expression": "{nps_score} < 7",
            "html": "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5>\n"
        }
    ],
    "pages": [
        {
            "name": "page1",
            "elements": [
                {
                    "type": "rating",
                    "name": "nps_score",
                    "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                    "isRequired": true,
                    "rateMin": 0,
                    "rateMax": 10,
                    "minRateDescription": "(Most unlikely)",
                    "maxRateDescription": "(Most likely)"
                }, {
                    "type": "checkbox",
                    "name": "promoter_features",
                    "visibleIf": "{nps_score} >= 9",
                    "title": "What features do you value the most?",
                    "isRequired": true,
                    "validators": [
                        {
                            "type": "answercount",
                            "text": "Please select two features maximum.",
                            "maxCount": 2
                        }
                    ],
                    "hasOther": true,
                    "choices": [
                        "Performance", "Stability", "User Interface", "Complete Functionality"
                    ],
                    "otherText": "Other feature:",
                    "colCount": 2
                }, {
                    "type": "comment",
                    "name": "passive_experience",
                    "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
                    "title": "What is the primary reason for your score?"
                }, {
                    "type": "comment",
                    "name": "disappointed_experience",
                    "visibleIf": "{nps_score} notempty",
                    "title": "What do you miss and what was disappointing in your experience with us?"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
};

3. Create a container to place the survey.

<div id="myContainer"></div>

4. Generate a surver form from the JSON you provide.

window.survey = new Survey.Model(json);
$("#myContainer").Survey({
  model: survey,
  onComplete: sendDataToServer
});

5. The example JS that shows how to send the results to your server.

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  // send the resultAsString to the server
}

6. The example JS that shows how to send the results to your server.

function sendDataToServer(survey) {
  var resultAsString = JSON.stringify(survey.data);
  // send the resultAsString to the server
}

7. Set the theme you'd like to use. All themes:

Survey.StylesManager.applyTheme("bootstrap");
Survey.StylesManager.applyTheme("orange");
Survey.StylesManager.applyTheme("darkblue");
Survey.StylesManager.applyTheme("darkrose");
Survey.StylesManager.applyTheme("stone");
Survey.StylesManager.applyTheme("winter");
Survey.StylesManager.applyTheme("winterstone");