高级调查/反馈/测验系统 SurveyJS

  • 源码大小:766.57KB
  • 所需积分:1积分
  • 源码编号:19JP-3056
  • 浏览次数:373次
  • 最后更新:2023年04月30日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

SurveyJS是一个强大的、可定制的跨平台调查/反馈/问卷调查/测验JavaScript库,专为jQuery、Angular、React、VueJS、knocket等设计。

主要特点:

  • 支持的问题类型:输入、单选、复选框、下拉列表、矩阵、评分、图像选取器、评论、自定义功能等。

  • 在问题之间共享数据。

  • 打印为PDF。

  • 分析调查结果。

  • 支持条件逻辑。

  • 标记和文本处理。

  • 多种语言。

  • 表单验证。

  • 8个内置主题。

  • 支持第三个插件:select2、jQuery UI日期选择器、Nouislider等等。

基本用法(jQuery):

1.在页面上包含jQuery库和SurveyJS库的文件。

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

2.使用JSON定义您的问题。您可以使用在线调查编辑器构建自己的JSON。

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

3.创建一个容器来放置调查。

<div id="myContainer"></div>&#13;

4.根据您提供的JSON生成一个Surveer表单。

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

5.示例JS显示了如何将结果发送到您的服务器。

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

6.示例JS显示了如何将结果发送到您的服务器。

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

7.设置你想要使用的主题。所有主题:

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

更新日志:

v1.9.85 (2023-04-26)

  • 更新和修复错误

v1.9.84 (2023-04-19)

  • 更新和修复错误

v1.9.83 (2023-04-13)

  • 更新和修复错误

v1.9.82 (2023-04-12)

  • 更新和修复错误

v1.9.81 (2023-04-06)

  • 更新和修复错误

v1.9.80 (2023-03-30)

  • 更新和修复错误

v1.9.79 (2023-03-21)

  • 更新和修复错误

v1.9.78 (2023-03-15)

  • 更新和修复错误

v1.9.77 (2023-03-07)

  • 使现代化

v1.9.69 (2023-02-21)

  • 错误修复

v1.9.59 (2022-11-22)

  • 错误修复