Advanced Survey/Feedback/Quiz System - SurveyJS
| File Size: | 1.17 MB |
|---|---|
| Views Total: | 2274 |
| 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:
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.
