Advanced Survey/Feedback/Quiz System - SurveyJS

File Size: | 1.39 MB |
---|---|
Views Total: | 4395 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
SurveyJS is a robust, customizable, cross-platform Survey/Feedback/Questionnaire/Quiz JavaScript library designed for jQuery, Angular, React, VueJS, knockout, etc.
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");
Changelog:
2021-01-20
- v1.8.26: Fixed question defaultValueExpression doesn't support async functions
2021-01-15
- v1.8.25: Bug Fixes
2021-01-13
- v1.8.24: Bug Fixes
2020-12-29
- v1.8.23: Update
2020-12-23
- v1.8.22: Update
2020-12-15
- v1.8.21: Bug Fixes
2020-12-09
- v1.8.20: Update
2020-12-08
- v1.8.19: Bug Fixes
2020-12-01
- v1.8.18: Add parentQuestion for question
2020-11-26
- v1.8.17: Bugfixes
2020-11-25
- v1.8.16: Bugfixes
2020-11-19
- v1.8.14: Bugfixes
2020-11-09
- v1.8.13: Bugfixes
2020-10-28
- v1.8.12: Bugfixes
2020-10-23
- v1.8.11: Bugfixes
2020-10-21
- v1.8.10: Update package
2020-10-14
- v1.8.9: Fixed: Locale of progressbar does not change
2020-10-09
- v1.8.8: Added missing translations
2020-10-06
- v1.8.7: Add survey.runTriggers() function
2020-09-29
- v1.8.6: Bug Fixes
2020-09-29
- v1.8.5: Bug Fixes
2020-09-22
- v1.8.4: Bug Fixes
2020-09-16
- v1.8.3: Bug Fixes
2020-09-11
- v1.8.2: Bug Fixes: Pressing markdown link focuses the answer input
2020-09-09
- v1.8.1: Bug Fixes
2020-09-03
- v1.8.0: Bug Fixes
2020-08-25
- v1.7.27: Fixed: Questions doesn't render correctly if there is a locale key in the end of JSON
2020-08-19
- v1.7.27: Fixed: Incorrect detection of the requiredInAllRowsError in matrix question
2020-08-12
- v1.7.26: Bugfixed
2020-08-05
- v1.7.25: Bugfixed
2020-07-28
- v1.7.24: survey.onGetQuestionTitle event has incorrect options.question parameter
2020-07-22
- v1.7.23: Update package
2020-07-15
- v1.7.20: Fixed header attribute value in matrixdynamic cells
2020-07-10
- v1.7.19: Fixed Error box doesn't disappear when other value is entered
2020-07-05
- v1.7.18: Add isCompleteOnTrigger option into onCompleting and onCompleted events
2020-07-01
- v1.7.17: update
2020-07-01
- v1.7.16: update
2020-06-25
- v1.7.15: Bugfixes
2020-06-24
- v1.7.13: Bugfixes
2020-06-16
- v1.7.12: Fixed serialization for the attachOriginalItems property
2020-06-11
- v1.7.11: Rollback the fix: SelectBase has wrong ItemValue instances in markup after question converted to other type
2020-06-03
- v1.7.10: Do not show an error in several rows for matrixdropdown (showInMultipleColumns + columnLayout: 'vertical')
2020-05-28
- v1.7.9: Render TextArea in display as div
2020-05-26
- v1.7.8: Fixed goNextPageAutomatic not triggering validation errors
2020-05-20
- v1.7.7: Updating Navigation button text will not call 'onModified' and 'saveSurveyFunc'
2020-05-13
- v1.7.6: Fixed Checkbox question doesn't keep it's comment value on changing survey.isSinglePage
2020-05-07
- v1.7.5: Maximum call stack size exceeded - matrix dropdown with totals and boolean column
2020-04-30
- v1.7.4: Special fixes for vue
2020-04-22
- v1.7.3: Use calc function for element.renderedWidth if there is pre-setup width on the same line
2020-04-17
- v1.7.2: Bugs fixed
2020-04-15
- v1.7.1: Bugs fixed
2020-04-08
- v1.5.19: Fixed [Modern Theme] Dropdown choices painted in red on error
2020-03-31
- v1.5.18: Fixed question.addConditionObjectsByContext function doesn't use valueName
2020-03-25
- v1.5.17: Update
2020-03-19
- v1.5.16: Update
2020-03-12
- v1.5.15: Update
2020-03-12
- v1.5.14: Removed unused rule
2020-03-05
- v1.5.13: Bug fixed
2020-02-29
- v1.5.12: Bug fixed
2020-02-28
- v1.5.11: Bug fixed
2020-02-19
- v1.5.10: Bug fixed
2020-02-15
- v1.5.9: Add public operator property into BinaryOperand
2020-02-13
- v1.5.8: Fixed onValueChanging bug.
2020-02-12
- v1.5.7: Added CSS class name for comment in the file question type
2020-02-07
- v1.5.6: Bugfix
2020-02-04
- v1.5.5: Bugfix
2020-02-01
- v1.5.4: Bugfix
2020-01-31
- v1.5.3: Fix the bug: clear files for QuestionFile on removing panel in paneldynamic
2020-01-30
- v1.5.2: Bugfix
2020-01-10
- v1.1.31: Bugfixes
2019-12-11
- v1.1.24: Decrease margin-right for inline imagepicker item
2019-12-03
- v1.1.23: Decrease margin-right for inline imagepicker item
2019-11-27
- v1.1.22: Decrease margin-right for inline imagepicker item
2019-11-19
- v1.1.21: Decrease margin-right for inline imagepicker item
2019-11-14
- v1.1.20: Add currencySymbol to cultureInfo
2019-11-07
- v1.1.19: Update & bugfix
2019-10-30
- v1.1.18: Update & bugfix
2019-10-23
- v1.1.17: Update & bugfix
2019-10-17
- v1.1.16: Update & bugfix
2019-10-09
- v1.1.15: Fix react margin collapsing
2019-10-02
- v1.1.14
This awesome jQuery plugin is developed by surveyjs. For more Advanced Usages, please check the demo page or visit the official website.