最小测验/调查表单生成器 jQuery AskedPlugin

  • 源码大小:9.29KB
  • 所需积分:1积分
  • 源码编号:19JP-3302
  • 浏览次数:656次
  • 最后更新:2023年05月29日
  • 所属栏目:表单
本站默认解压密码:19jp.com 或 19jp_com

简介

AskedPlugin是一个易于使用的jQuery插件,使您能够动态生成调查、民意调查、问卷调查和测验的表格。

它与最新的Bootstrap框架完全兼容,允许您在五种问题类型之间进行选择:单选按钮、文本、输入字段、文本区域和复选框。

如何使用它:

1.创建一个空的DIV来保存表单。

  1. <div class="asked" id="asked">
  2. <!-- form will be placed here -->
  3. </div>

2.创建包含一个或多个问题的JSON对象,如下所示。

  1. var quizJSON = {
  2. "quiz": [{
  3. "id": 1, // optional
  4. "title": "Examples Questions", // optional
  5. "required": 0, // optional
  6. "route": "https://www.jqueryscript.net", // optional
  7. "questions": [{
  8. "id": 1, // optional
  9. "title": "Which of the names below belong to marvel?", // required
  10. "type": "checkbox", // required
  11. "order": 1, // optional
  12. "rule": "", // optional
  13. "required": 1, // optional
  14. "answered": false, // optional
  15. "value_answer": "", // optional
  16. "items": [{
  17. "id": 3,
  18. "value": "Falcon", // required
  19. "selected": false // optional
  20. },
  21. {
  22. "id": 4,
  23. "value": "The Flash",
  24. "selected": false
  25. },
  26. {
  27. "id": 5,
  28. "value": "Iron Man",
  29. "selected": true
  30. },
  31. {
  32. "id": 6,
  33. "value": "Wolverine",
  34. "selected": false
  35. },
  36. {
  37. "id": 7,
  38. "value": "Batman",
  39. "selected": false
  40. },
  41. {
  42. "id": 8,
  43. "value": "Spider-Man",
  44. "selected": false
  45. }
  46. ],
  47. },
  48. {
  49. "id": 2,
  50. "title": "What is your favorite book to read?",
  51. "type": "text",
  52. "order": 2,
  53. "rule": "",
  54. "required": 1,
  55. "answered": true,
  56. "value_answer": "The Age of A.I., Clear Code, Kubernetes Security and Observability ",
  57. "items": [],
  58. },
  59. {
  60. "id": 3,
  61. "title": "What is the tallest building in the world?",
  62. "type": "radio",
  63. "order": 3,
  64. "required": 1,
  65. "answered": true,
  66. "value_answer": "Burj Khalifa",
  67. "items": [{
  68. "id": 9,
  69. "value": "Burj Khalifa",
  70. "selected": true
  71. },
  72. {
  73. "id": 10,
  74. "value": "Warisan Merdeka Tower",
  75. "selected": false
  76. },
  77. {
  78. "id": 11,
  79. "value": "Goldin Finance 117",
  80. "selected": false
  81. },
  82. {
  83. "id": 12,
  84. "value": "Ping An Finance Center",
  85. "selected": false
  86. },
  87.  
  88. ],
  89. },
  90. {
  91. "id": 4,
  92. "title": "What's your favorite holiday?",
  93. "type": "textarea",
  94. "order": 4,
  95. "required": 1,
  96. "answered": false,
  97. "value_answer": "",
  98. "items": [],
  99. },
  100. ]
  101. }]
  102. }

3.下载并加载AskedPlugin jQuery插件。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/js/asked.js"></script>

4.初始化插件,根据您提供的数据生成一个表单。

  1. $(function () {
  2. $('.asked').asked({
  3. data: quizJSON.quiz,
  4. events: {
  5. onCompleteQuiz: function (option) {
  6. console.log(option);
  7. alert("finish")
  8. }
  9. }
  10. });
  11. });

预览截图