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

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

简介

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

主要特点:

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

  • 在问题之间共享数据。

  • 打印为PDF。

  • 分析调查结果。

  • 支持条件逻辑。

  • 标记和文本处理。

  • 多种语言。

  • 表单验证。

  • 8个内置主题。

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

基本用法(jQuery):

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

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

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

  1. var json = {&#13;
  2.     "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",&#13;
  3.     "completedHtmlOnCondition": [&#13;
  4.         {&#13;
  5.             "expression": "{nps_score} > 8",&#13;
  6.             "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;
  7.         }, {&#13;
  8.             "expression": "{nps_score} < 7",&#13;
  9.             "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;
  10.         }&#13;
  11.     ],&#13;
  12.     "pages": [&#13;
  13.         {&#13;
  14.             "name": "page1",&#13;
  15.             "elements": [&#13;
  16.                 {&#13;
  17.                     "type": "rating",&#13;
  18.                     "name": "nps_score",&#13;
  19.                     "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",&#13;
  20.                     "isRequired": true,&#13;
  21.                     "rateMin": 0,&#13;
  22.                     "rateMax": 10,&#13;
  23.                     "minRateDescription": "(Most unlikely)",&#13;
  24.                     "maxRateDescription": "(Most likely)"&#13;
  25.                 }, {&#13;
  26.                     "type": "checkbox",&#13;
  27.                     "name": "promoter_features",&#13;
  28.                     "visibleIf": "{nps_score} >= 9",&#13;
  29.                     "title": "What features do you value the most?",&#13;
  30.                     "isRequired": true,&#13;
  31.                     "validators": [&#13;
  32.                         {&#13;
  33.                             "type": "answercount",&#13;
  34.                             "text": "Please select two features maximum.",&#13;
  35.                             "maxCount": 2&#13;
  36.                         }&#13;
  37.                     ],&#13;
  38.                     "hasOther": true,&#13;
  39.                     "choices": [&#13;
  40.                         "Performance", "Stability", "User Interface", "Complete Functionality"&#13;
  41.                     ],&#13;
  42.                     "otherText": "Other feature:",&#13;
  43.                     "colCount": 2&#13;
  44.                 }, {&#13;
  45.                     "type": "comment",&#13;
  46.                     "name": "passive_experience",&#13;
  47.                     "visibleIf": "{nps_score} > 6  and {nps_score} < 9",&#13;
  48.                     "title": "What is the primary reason for your score?"&#13;
  49.                 }, {&#13;
  50.                     "type": "comment",&#13;
  51.                     "name": "disappointed_experience",&#13;
  52.                     "visibleIf": "{nps_score} notempty",&#13;
  53.                     "title": "What do you miss and what was disappointing in your experience with us?"&#13;
  54.                 }&#13;
  55.             ]&#13;
  56.         }&#13;
  57.     ],&#13;
  58.     "showQuestionNumbers": "off"&#13;
  59. };&#13;

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

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

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

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

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

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

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

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

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

  1. Survey.StylesManager.applyTheme("bootstrap");&#13;
  2. Survey.StylesManager.applyTheme("orange");&#13;
  3. Survey.StylesManager.applyTheme("darkblue");&#13;
  4. Survey.StylesManager.applyTheme("darkrose");&#13;
  5. Survey.StylesManager.applyTheme("stone");&#13;
  6. Survey.StylesManager.applyTheme("winter");&#13;
  7. 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)

  • 错误修复