AskedPlugin是一个易于使用的jQuery插件,使您能够动态生成调查、民意调查、问卷调查和测验的表格。
它与最新的Bootstrap框架完全兼容,允许您在五种问题类型之间进行选择:单选按钮、文本、输入字段、文本区域和复选框。
1.创建一个空的DIV来保存表单。
<div class="asked" id="asked"> <!-- form will be placed here --> </div>
2.创建包含一个或多个问题的JSON对象,如下所示。
var quizJSON = { "quiz": [{ "id": 1, // optional "title": "Examples Questions", // optional "required": 0, // optional "route": "https://www.jqueryscript.net", // optional "questions": [{ "id": 1, // optional "title": "Which of the names below belong to marvel?", // required "type": "checkbox", // required "order": 1, // optional "rule": "", // optional "required": 1, // optional "answered": false, // optional "value_answer": "", // optional "items": [{ "id": 3, "value": "Falcon", // required "selected": false // optional }, { "id": 4, "value": "The Flash", "selected": false }, { "id": 5, "value": "Iron Man", "selected": true }, { "id": 6, "value": "Wolverine", "selected": false }, { "id": 7, "value": "Batman", "selected": false }, { "id": 8, "value": "Spider-Man", "selected": false } ], }, { "id": 2, "title": "What is your favorite book to read?", "type": "text", "order": 2, "rule": "", "required": 1, "answered": true, "value_answer": "The Age of A.I., Clear Code, Kubernetes Security and Observability ", "items": [], }, { "id": 3, "title": "What is the tallest building in the world?", "type": "radio", "order": 3, "required": 1, "answered": true, "value_answer": "Burj Khalifa", "items": [{ "id": 9, "value": "Burj Khalifa", "selected": true }, { "id": 10, "value": "Warisan Merdeka Tower", "selected": false }, { "id": 11, "value": "Goldin Finance 117", "selected": false }, { "id": 12, "value": "Ping An Finance Center", "selected": false }, ], }, { "id": 4, "title": "What's your favorite holiday?", "type": "textarea", "order": 4, "required": 1, "answered": false, "value_answer": "", "items": [], }, ] }] }
3.下载并加载AskedPlugin jQuery插件。
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/asked.js"></script>
4.初始化插件,根据您提供的数据生成一个表单。
$(function () { $('.asked').asked({ data: quizJSON.quiz, events: { onCompleteQuiz: function (option) { console.log(option); alert("finish") } } }); });