网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Survey是一个强大、可定制、跨平台的调查/反馈/问卷调查/统计JavaScript库。
特点:
支持问题的类型:输入、单选、复选框、下拉列表、矩阵、评分、图像选取器、注释、自定义函数等。
在问题之间共享数据
打印到PDF
分析调查结果
支持条件逻辑
标记和文本处理
多种语言
表单验证
8个内置主题
基本用法(jQuery):
1在页面上包括jQuery库和SurveyJS库的文件。
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/survey.jquery.js"></script>
<link href="/path/to/survey.css" type="text/css" rel="stylesheet"/>
2.JSON定义问题。
var json = {
"completedHtml": "<h3>感谢您的反馈</h3> <h5>您有什么好的建议好想法对应我们的产品!</h5>",
"completedHtmlOnCondition": [
{
"expression": "{nps_score} > 8",
"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>"
}, {
"expression": "{nps_score} < 7",
"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"
}
],
"pages": [
{
"name": "page1",
"elements": [
{
"type": "rating",
"name": "nps_score",
"title": "分享给你你朋友或同事给我们的产品打分?0到10分*",
"isRequired": true,
"rateMin": 0,
"rateMax": 10,
"minRateDescription": "(不太喜欢)",
"maxRateDescription": "(非常喜欢)"
}, {
"type": "checkbox",
"name": "promoter_features",
"visibleIf": "{nps_score} >= 9",
"title": "你最看重什么?",
"isRequired": true,
"validators": [
{
"type": "answercount",
"text": "Please select two features maximum.",
"maxCount": 2
}
],
"hasOther": true,
"choices": [
"性能", "稳定性", "用户体验", "功能齐全"
],
"otherText": "其他理由:",
"colCount": 2
}, {
"type": "comment",
"name": "passive_experience",
"visibleIf": "{nps_score} > 6 and {nps_score} < 9",
"title": "你打分的主要原因是什么?"
}, {
"type": "comment",
"name": "disappointed_experience",
"visibleIf": "{nps_score} notempty",
"title": "失望的原因"
}
]
}
],
"showQuestionNumbers": "off"
};
3. 创建一个容器
<div id="myContainer"></div>
4. 从提供的JSON生成surver表单。
window.survey = new Survey.Model(json);
$("#myContainer").Survey({
model: survey,
onComplete: sendDataToServer
});
5. 如何将结果发送到服务器示例。
function sendDataToServer(survey) {
var resultAsString = JSON.stringify(survey.data);
// send the resultAsString to the server
}
6. 可设置的主题风格:
Survey.StylesManager.applyTheme("bootstrap");
Survey.StylesManager.applyTheme("orange");
Survey.StylesManager.applyTheme("darkblue");
Survey.StylesManager.applyTheme("darkrose");
Survey.StylesManager.applyTheme("stone");
Survey.StylesManager.applyTheme("winter");
Survey.StylesManager.applyTheme("winterstone");
转载请注明来源:Survey问卷调查/反馈评分表单插件
本文永久链接地址:https://www.moyouyouw.cn/code/670.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论