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")
}
}
});
});