jQuery实现调查问卷功能
Posted hongyafang02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现调查问卷功能相关的知识，希望对你有一定的参考价值。
效果图：
需求：
1.有10道测试题目，单选，选中答案之后，500ms后自动跳转至下一题
2.如果当前题目没有选择答案，将弹窗提示“请选择答案！”
3.点击“上一题”，“下一题”将实现跳转题目，第一题的时候，“上一题”按钮为灰色
4.第10题选择答案之后将选中的题目分数相加，自动出现评测结果，对评测结果不满意的可以点击“重新测评”再测一次
5.单页功能，不实现页面跳转
构思：
1.单选按钮需要替换背景图片，可以通过class来切换，并用另外一个class来标识选中
2.用li来代表每一道题
需要使用的图片
代码实现以及讲解：
html部分：
1.题目：
<section class="risk"> <div class="select"> <ul id="subjectBox"> </ul> </div> <div class="pro-box"> <div class="pro-bg"> <div class="pro-col" id="scroller"></div> </div> <p><span id="current"></span>/<span id="total"></span></p> </div> <div class="btns"> <div id="preBtn">上一题</div> <div id="nextBtn" class="blue">下一题</div> </div> </section>
2.提示弹窗
<section> <div id="choice-tip">请选择答案!</div> </section>
3.评测结果
<section class="result-box"> <p>-您当前的风险承受能力-</p> <div class="result-1"> <img src="" id="result-img"> <div class="result-txt"> <div id="result-type"></div> <div class="result-money"> <p>建议最大投资金额：<span id="max-money"></span></p> <p>您当前已投资金额：<span id="invest-money"></span></p> </div> </div> </div> <div class="ok-btn">确定</div> <div id="reset">重新测评</div> </section>
css部分：
body{font-family: \'Helvetica Neue\', Helvetica, sans-serif,\'微软雅黑\'!important;background: #f5f6fb;} html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} body,div,ul,li,input,a,img{margin:0; padding:0; border:none;font-family: \'Helvetica Neue\', Helvetica, sans-serif,\'微软雅黑\'!important;} .risk{margin-top:1rem;color:#333;font-size:1.3rem;} .risk .select ul li{display: none;} .risk .select ul li.active{display: block;} .risk .select ul li .line{transition:all 0.5s;border-bottom: 1px solid #ccc;padding:1rem 2rem 1rem;position:relative;} .risk .select ul li p.line{font-size:1.4rem;} .risk .select ul li div.line{padding:1rem 3.5rem 1rem 2rem} .risk .select ul li input[type=radio]{position:absolute;top:50%;transform:translate(0,-50%);right:1rem;} .risk .select ul li .check-img{background:url("../img/risk-test/checked-mark.png") no-repeat center;height: 2rem;background-size: 100%;position:absolute;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);right:1rem;width:2rem;} .risk .pro-box{text-align: center;} .risk .select ul li .check-img.uncheck{background:url("../img/risk-test/unchecked-mark.png") no-repeat center;height: 2rem;background-size: 100%;position:absolute;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);right:1rem;width:2rem;} .risk .pro-box{text-align: center;} .risk .pro-box .pro-bg{width: 90%;background: #e4e4ea;height: .6rem;margin: 2rem auto auto;border-radius: 2rem;} .risk .pro-box .pro-bg .pro-col{width: 10%;background: #5175b3;height: 100%;border-radius: 2rem;} .risk .btns{position: fixed;bottom: 0;left: 0;width:100%;text-align: center;box-sizing: border-box;} .risk .btns div{width:49.7%;height:3.5rem;line-height: 3.5rem;float:left;border-top:1px solid #ddd;border-right: 1px solid #ddd;} .risk .btns div:nth-child(2){border-right: 0;} .risk .btns div.blue{color:#5175b3;} #choice-tip{display:none;border-radius:.5rem;font-size:1.5rem;background: #000;color:#fff;padding:1rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);} .result-box{font-size:1.2rem;color:#666;padding-top: 3rem;text-align: center;display: none;position:absolute;top:0;left:0;} .result-box img{width:45%;margin:1.5rem auto;} .result-box .result-txt{padding:0 4rem;text-align: justify;line-height: 1.8rem;} .result-box .result-txt .result-money{color:#5175b3;} .result-box .ok-btn{width:70%;margin:2rem auto 1rem;padding:1rem 0;background: #5175b3;color:#fff;font-size:1.3rem;border-radius: .5rem;} #reset{color:#5175b3;margin-bottom: 2rem;font-size:1.3rem;} @media screen and (max-width:399px) { html{ font-size: 12px!important; } } @media (min-width: 400px) and (max-width: 480px) { html{ font-size: 14px!important; } } @media (min-width: 481px) and (max-width: 640px) { html{ font-size: 20px!important; } } @media (min-width: 641px) and (max-width: 960px) { html{ font-size: 26px!important; } } @media screen and (min-width: 961px) { html{ font-size: 36px!important; } }
jq部分：
1.定义会用到的变量
// 当前题目索引 var currentSubjectIndex = 1; // 总题数 var subjectTotal = subjectArray.length; // 上一题按钮 var $preBtn = $("#preBtn"); // 下一题按钮 var $nextBtn = $("#nextBtn"); // 题目容器 var $subjectBox = $("#subjectBox"); // 总题数容器 var $total = $("#total"); // 进度条 var $scroller = $("#scroller"); //重新测评按钮 var $reset = $("#reset");
2.点击效果
// 选中题目点击 $subjectBox.find("div.line").on("click", function(){ if(currentSubjectIndex >= 1){ $preBtn.addClass("blue"); }
//get为选中的答案标识 $(this).find(".check-img").removeClass("uncheck").addClass("get"); $(this).siblings().find(".check-img").addClass("uncheck"); setTimeout(nextPage,300); }); // 上一题按钮点击 $preBtn.on("click", function(){ prePage(); }); // 下一题按钮点击 $nextBtn.on("click", function(){ nextPage(); });
//重新测评按钮点击 $reset.on("click", function(){ resetTest(); });
3.函数
/** * 初始化题目容器 */ function initSubjectBox(){ var subjectHtml = \'\'; for(var i=0; i<subjectArray.length; i++){ subjectHtml += getSubjectHtml(subjectArray[i], i+1); } $subjectBox.html(subjectHtml); $("#index_" + currentSubjectIndex).addClass("active"); // 改变进度条 changeScroller(); } /** * 获取题目HTML */ function getSubjectHtml(subject, index){ var subjectItemHtml = getSubjectItemHtml(subject[\'answers_items\'], index); var html = \'\' +\'<li id="index_\' + index + \'">\' +\'<p class="line">\' +\'<span>\' + index + \'.</span>\' +\'<span>\' + subject.title +\'</span>\' +\'</p>\' + subjectItemHtml +\'</li>\' return html; } /** * 获取题目选项HTML */ function getSubjectItemHtml(subjectItemArray, index){ var html = \'\'; for(var i=0; i<subjectItemArray.length; i++){ var subjectItem = subjectItemArray[i]; html += \'\' +\'<div class="line" value="\' + subjectItem.point + \'">\' +\'<span>\' + subjectItem.result + \'.</span>\' +\'<span>\' + subjectItem.content + \'</span>\' +\'<div class="check-img uncheck">\'+\'</div>\' +\'</div>\'; } return html; } /** * 改变进度条 */ function changeScroller(){ $scroller.width(currentSubjectIndex/subjectTotal * 100 + "%"); } /** * 获取总分数 */ function getTotalPoint(){ var result = 0; var selectedOptionArray = $subjectBox.find(".get"); $(selectedOptionArray).each(function(){ result += parseInt($(this).parent().attr("value")); }); return result; } /** * 上一题 */ function prePage(){ //console.log(currentSubjectIndex); if(currentSubjectIndex <= 1){return;} if(currentSubjectIndex == 2){$preBtn.removeClass("blue");} currentSubjectIndex--; flipPage(); } /** * 下一题 */ function nextPage(){ //console.log(currentSubjectIndex); if(currentSubjectIndex >= 1){ $preBtn.addClass("blue"); } var nopass = $("#index_" + currentSubjectIndex).find(".get").length == 0 ? true : false; if(nopass){ $("#choice-tip").fadeIn(); setTimeout("$(\'#choice-tip\').fadeOut()",1000); return; } if(currentSubjectIndex == subjectTotal){
//得出结果 var result = getTotalPoint(); //console.log("您的得分是：" + result); var imgSrc = $("#result-img"), resultType = $("#result-type"), maxMoney = $("#max-money"), investMoney = $("#invest-money"); if(result >= 0 && result <= 22){ imgSrc.attr("src","img/risk-test/result1.png"); resultType.html("评测结果：保守型") maxMoney.html("10万元"); investMoney.html("30,000.12元") }else if(result >= 23 && result <= 44){ imgSrc.attr("src","img/risk-test/result2.png"); resultType.html("评测结果：稳健型") maxMoney.html("20万元"); investMoney.html("30,000.12元") }else if(result >= 45 && result <= 66){ imgSrc.attr("src","img/risk-test/result3.png"); resultType.html("评测结果：平衡型") maxMoney.html("30万元"); investMoney.html("30,000.12元") }else if(result >= 67 && result <= 88){ imgSrc.attr("src","img/risk-test/result4.png"); resultType.html("评测结果：积极型") maxMoney.html("40万元"); investMoney.html("30,000.12元") }else{ imgSrc.attr("src","img/risk-test/result5.png"); resultType.html("评测结果：激进型") maxMoney.html("50万元"); investMoney.html("30,000.12元") } $(".risk").fadeOut(); $(".result-box").fadeIn(); return; } currentSubjectIndex++; flipPage() } /** * 翻页 */ function flipPage(){ $subjectBox.find("li").removeClass("active"); $("#index_" + currentSubjectIndex).addClass("active"); $("#current").html(currentSubjectIndex); changeScroller(); } /** * 重新测评 */ function resetTest(){ currentSubjectIndex = 1; $(".risk").fadeIn(); $(".result-box").fadeOut(); $preBtn.removeClass("blue"); $(".check-img").removeClass("get").addClass("uncheck"); flipPage(); }
在得出结果那里，总分的分层范围中，resultType，maxMoney，investMoney实际为后台读取的数据。
json对象：
var object = {
"question_items" : [ {
"title" : "您的年龄是：",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 10,
"content" : "18-30岁"
}, {
"result" : "B",
"point" : 8,
"content" : "31-40岁"
}, {
"result" : "C",
"point" : 5,
"content" : "41-50岁"
}, {
"result" : "D",
"point" : 3,
"content" : "50岁以上"
} ]
}, {
"title" : "您的家庭年收入为（税后折合人民币）？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "10万以下"
}, {
"result" : "B",
"point" : 5,
"content" : "10-30万"
}, {
"result" : "C",
"point" : 8,
"content" : "30-100万"
}, {
"result" : "D",
"point" : 10,
"content" : "100万以上"
} ]
}, {
"title" : "您期望的投资期限是多久？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 4,
"content" : "活期"
}, {
"result" : "B",
"point" : 6,
"content" : "1-3个月"
}, {
"result" : "C",
"point" : 8,
"content" : "4-6个月"
}, {
"result" : "D",
"point" : 10,
"content" : "7-12个月"
} ]
}, {
"title" : "以下金融投资方式，您投资比例最高的在以下哪一类？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "基本没有金融产品相关知识，除存款、国债外，我几乎不投资其他金融产品"
}, {
"result" : "B",
"point" : 5,
"content" : "对金融产品有初步认识，除投资于存款、国债外，偶尔投资于股票、基金等产品"
}, {
"result" : "C",
"point" : 8,
"content" : "对金融产品有一定的理解，投资过存款、国债、银行理财产品、信托产品、股票、基金等产品"
}, {
"result" : "D",
"point" : 10,
"content" : "金融专业人士，长期投资于证券、期货等产品"
} ]
}, {
"title" : "您有多少年投资风险产品的经验（如：股票、P2P、基金、外汇、金融衍生产品等）？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "没有经验"
}, {
"result" : "B",
"point" : 5,
"content" : "2年以下"
}, {
"result" : "C",
"point" : 8,
"content" : "2-5年"
}, {
"result" : "D",
"point" : 10,
"content" : "5年以上"
} ]
}, {
"title" : "您的家庭收入每年可用于金融投资的比例为？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "10%以内"
}, {
"result" : "B",
"point" : 5,
"content" : "10%-25%"
}, {
"result" : "C",
"point" : 8,
"content" : "25%-50%"
}, {
"result" : "D",
"point" : 10,
"content" : "50%以上"
} ]
}, {
"title" : "您对P2P投资希望达到的年收益率水平？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "7%～10%"
}, {
"result" : "B",
"point" : 5,
"content" : "10%～15%"
}, {
"result" : "C",
"point" : 8,
"content" : "15%～20%"
}, {
"result" : "D",
"point" : 10,
"content" : "20%以上"
} ]
}, {
"title" : "您在过去所有的投资理财经历中是否有过亏损或被套的经历？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 10,
"content" : "从未亏损或被套"
}, {
"result" : "B",
"point" : 8,
"content" : "亏损或被套在30%以内"
}, {
"result" : "C",
"point" : 5,
"content" : "亏损或被套在30%—60%"
}, {
"result" : "D",
"point" : 3,
"content" : "亏损或被套在60%以上"
} ]
}, {
"title" : "在您每年的家庭收入中，可用于金融投资（储蓄存款除外）的比例为？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "10%以下"
}, {
"result" : "B",
"point" : 5,
"content" : "10%-25%"
}, {
"result" : "C",
"point" : 8,
"content" : "25%-50%"
}, {
"result" : "D",
"point" : 10,
"content" : "50%以上"
} ]
}, {
"title" : "您目前投资了多少家P2P平台？",
"type" : "TYPE_RADIO",
"answers_items" : [ {
"result" : "A",
"point" : 3,
"content" : "0-3家"
}, {
"result" : "B",
"point" : 5,
"content" : "4-8家"
}, {
"result" : "C",
"point" : 8,
"content" : "8-12家"
}, {
"result" : "D",
"point" : 10,
"content" : "12家以上"
} ]
} ]
}
var subjectArray = object[\'question_items\'];
以上是关于jQuery实现调查问卷功能的主要内容，如果未能解决你的问题，请参考以下文章
vue+webAPI中json相互转换的点滴记录，用于实现按分值的调查问卷功能