| 纯前端答题交互（可单选、多选） | 您所在的位置：网站首页 › 抽奖选项 › 纯前端答题交互（可单选、多选） |
纯前端答题交互（可单选、多选）
|
纯前端答题交互（可单选、多选），用户确定选项可及时判断对错及提示功能； 题库可提前使用excel表格录好，在线使用Exel转JSON格式，网址：在线Excel、CSV转JSON格式-BeJSON.com 可以根据需求设置参数，即可达到所需效果： 每轮需要答题数、满多少分可抽奖、是否提交选项后展示提示对错信息及答案、展示提示对错信息及答案的时长（毫秒）、是否需要计时（每轮正计时 / 每题答题限时倒计时 / 每轮答题限时倒计时）、倒计时开始时间（秒）。 注：每题答题限时倒计时 / 每轮答题限时倒计时，倒计时结束前用户有选择选项的，则自动提交当前选择答案，且对错计入最终分值。 excel表格格式如截图：
使用的图片资源：
HTML： 答题 - 可配置每题倒计时自动答错 或 所有题答题结束总计时 *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); tap-highlight-color:rgba(0,0,0,0); cursor:pointer;} html{ max-width:750px; margin:0 auto;} body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:28px; line-height:1.6; color: #666; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none; } li{ list-style:none;} [v-cloak]{ display: none;} .index{ height: 100vh; display: flex; justify-content: center; align-items: center;} .base_btn{ width: 420px; height: 80px; line-height: 80px; margin: 20px auto; text-align: center; color: #fff; border-radius: 40px; background-color: #FB3A1C;} /* 答题页 */ .question_body{ padding: 0 40px;} .question_number{ padding: 20px 0; text-align: center; font-size: 32px; font-weight: bold; position: relative;} .question_title{ max-height: 1000px; line-height: 44px;text-align: justify; word-wrap: break-word;} .question_options{ margin-top: 40px; padding-left: 20px;} .question_options li{ line-height: 42px; padding: 10px 20px 10px 60px; position: relative;} .question_options li:first-child ~ li{ margin-top: 30px;} /* 选中样式 */ .question_options li.cur{ color: #9a1500; font-weight: bold;} /* 选中时-正确样式 */ .question_options li.cur.right{ color: #17941A; font-weight: bold;} /* 选中时-错误样式 */ .question_options li.cur.wrong{ color: #E62225; font-weight: bold;} .question_options li span{ width: 46px; height: 46px; line-height: 44px; text-align: center; border-radius: 50%; border: #666 solid 1px; position: absolute; left: 0; top: 50%; margin-top: -23px;} /* 选中样式 */ .question_options li.cur span{ border: #9a1500 solid 1px;} /* 正确样式 */ .question_options li.right span{ font-size: 0; border-radius: 0; border: none; background: url(1.png) no-repeat center center; background-size: 100% 100%} /* 错误样式 */ .question_options li.wrong span{ font-size: 0; border-radius: 0; border: none; background: url(2.png) no-repeat center center; background-size: 100% 100%} /* 提示正确答案 */ .question_err{ margin: 20px 0; color: #E62225;} .question_err span{ font-weight: bold;} /* 计时显示 */ .question_time{ min-width: 170px; height: 50px; line-height: 45px; text-align: center; color: #fff; font-size: 24px; font-weight: bold; border-radius: 25px 0 0 25px; background-color: #1b855c; position: absolute; right: 0; top: 38px;} .question_time span{ margin: 0 5px; font-size: 30px;} /* 动画展示设置 */ .question.showanimation .question_body{ -webkit-animation: flipToMax .6s ease-out both; animation: flipToMax .6s ease-out both; } .question.showanimation .question_number{ -webkit-animation: flipToMax .6s .2s ease-out both; animation: flipToMax .6s .2s ease-out both; } .question.showanimation .question_title{ -webkit-animation: fadeToTop .6s .2s ease-out both; animation: fadeToTop .6s .2s ease-out both; } .question.showanimation .question_options li:nth-child(1){ -webkit-animation: fadeInMinToMax 1s .4s ease-out both; animation: fadeInMinToMax 1s .4s ease-out both; } .question.showanimation .question_options li:nth-child(2){ -webkit-animation: fadeInMinToMax 1s .6s ease-out both; animation: fadeInMinToMax 1s .6s ease-out both; } .question.showanimation .question_options li:nth-child(3){ -webkit-animation: fadeInMinToMax 1s .8s ease-out both; animation: fadeInMinToMax 1s .8s ease-out both; } .question.showanimation .question_options li:nth-child(4){ -webkit-animation: fadeInMinToMax 1s 1s ease-out both; animation: fadeInMinToMax 1s 1s ease-out both; } .question.showanimation .base_btn{ -webkit-animation: flipToMax .8s 1s ease-out both; animation: flipToMax .8s 1s ease-out both; } @-webkit-keyframes flipToMax{ 0%{ -webkit-transform:scale(0) scaleX(-1); opacity:0;} 100%{ -webkit-transform:scale(1) scaleX(1); opacity:1;} } @keyframes flipToMax{ 0%{ transform:scale(0) scaleX(-1); opacity:0;} 100%{ transform:scale(1) scaleX(1); opacity:1;} } @-webkit-keyframes fadeToTop{ 0%{ -webkit-transform:translateY(100%); opacity:0;} 100%{ -webkit-transform:translateY(0); opacity:1;} } @keyframes fadeToTop{ 0%{ transform:translateY(100%); opacity:0;} 100%{ transform:translateY(0); opacity:1;} } @-webkit-keyframes fadeInMinToMax{ 0%{ -webkit-transform:scale(0); opacity:0;} 100%{ -webkit-transform:scale(1); opacity:1;} } @keyframes fadeInMinToMax{ 0%{ transform:scale(0); opacity:0;} 100%{ transform:scale(1); opacity:1;} } /* 答题结束结果页 */ .pop{ width: 100%; height: 100%; background-color: rgba(0,0,0,.6); position: fixed; left: 0; top: 0; -webkit-animation: fadeIn .5s linear both; animation: fadeIn .5s linear both; } .pop_box{ width: 100%; height: 100%; padding-bottom: 80px; display: flex; justify-content: center; align-items: center; } .pop_body{ text-align: center; color: #fff; position: relative;} .pop_close{ width: 54px; position: absolute; left: 50%; margin-left: -27px; bottom: -85px;} 开始答题 {problemNumber}}题{{problem.tips}} --> {problemType}}题: -->{{problemNumber}}/{{problemAllNum}} {{problemType}}题: {{index}}{{item}} 正确答案：{{problem.right}} 下一题 确定提交 {{ifNeedTime == 1 ? '用时' : '倒计时'}}{{curTime}}s 用时{{curTime}}s 答对{{rightLen}}题，您的成绩 {{parseInt(rightLen * (100 / problemAllNum))}}分 达到可抽奖分数去抽奖 再来一次
function getAjax( url , type , dataJson , callback ){
$.ajax({
url: url,
type: type,
data: dataJson,
dataType: "json",
//dataType: "text",
beforeSend:function(){
},
success: function (data) {
//data = eval('(' + data + ')');
callback(data);
},
error: function (data) {
//getAjax(url , dataJson);
}
});
}
var VM = new Vue({
el:"#app",
data:{
showanimation:false, //显示 答题页动画
showQuestion:false, //显示 答题
showQuestionEnd:false, //显示 答题结束
//
currQuestionData:[], //本轮答题题库
problem:'', //当前题目数据
problemType:'', //当前题 类型：单选、多选
problemNumber:'', //当前题所答第N题
problemAllNum:5, //每轮需要答题数
chooseKey:[], //当前题选择的KEY
rightLen:0, //每轮答对的题数
//
scoreCanLucky:80, //满多少分可抽奖
//
ifShowErr:false, //显示 答错时提示正确答案
showErrTime:1000, //答题错误，时显示提示时间，毫秒
//
ifNeedTime:1, //0：不需要计时； 1：正计时； 2：每题答题限时倒计时（计时结束再进入下一题）； 3：每轮答题限时倒计时（计时结束不再进入下一题即答题结束）；
baseTime:10, //倒计时开始时间，秒
timer:null, //定时器
curTime:0, //当前 用时 或 倒计时
timing:0 ,
rafId:'',
//
codeId:null, //开始答题时获得的ID
},
created() {
},
mounted() {
},
watch:{
},
methods:{
/***************** 答题相关功能 *****************/
// 返回至首页
goIndex(){
this.showQuestion = false;
this.resetQuestionData();
},
// 重置答题数据
resetQuestionData(){
this.problem = '';
this.problemType = '';
this.chooseKey = [];
this.ifShowErr = false;
this.showanimation = true;
// 再来一次时隐藏结果页
this.showQuestionEnd = false;
},
// 初始答题数据（1：每轮开始答题 2：切换下题）
updateInit(type){
if(type === 1){
if(this.ifNeedTime == 1){
this.timing = 0;
// 开始计时
this.changeTime();
}
if(this.ifNeedTime == 3){
this.curTime = this.baseTime;
this.timer ? clearInterval(this.timer) : '';
this.timer = setInterval(this.showTime,1000);
}
// 每轮开始答题
this.problemNumber = 1;
this.rightLen = 0;
this.currQuestionData = [].concat(questionJson).sort(function(a, b){
return 0.5 - Math.random();
});
// console.log(questionData);
// console.log(this.currQuestionData);
}else if(type === 2){
// 切换下题
this.problemNumber++;
}
this.resetQuestionData();
},
// 开始答题 / 进入下一题 载入题库
answerQuestionDo(){
this.problem = this.currQuestionData[this.problemNumber-1];
// console.log(this.problem);
console.log('当前是正确选项:' + this.problem.right);
this.problemType = this.problem.right.length > 1 ? '多选' : '单选'; //当前题 类型：单选、多选
this.showQuestion = true;
if(this.ifNeedTime == 2){
this.curTime = this.baseTime;
this.timer ? clearInterval(this.timer) : '';
this.timer = setInterval(this.showTime,1000);
}
},
// 选择答案
chooseAnswer(key){
this.showanimation = false;
// 答题错误展示错误答案时 或 答题结束后 不给选择及点击下一题
if(this.ifShowErr || this.showQuestionEnd){
return;
}
if(this.problemType == '单选'){
if(this.chooseKey.indexOf(key) == -1){
this.chooseKey.splice(0,1);
this.chooseKey.push(key);
}else{
this.chooseKey.splice(0,1);
}
}else{
if(this.chooseKey.indexOf(key) == -1){
this.chooseKey.push(key);
}else{
this.chooseKey.splice(this.chooseKey.indexOf(key),1);
}
}
// console.log(this.chooseKey);
},
// 提交当前选择答案
submitAnswer(){
if(this.showQuestionEnd == true){
this.submitRightLen();
return;
}
// 答题错误展示错误答案时 或 答题结束后 不给选择及点击下一题
if(this.ifShowErr || this.showQuestionEnd){
return;
}
if(!this.chooseKey.length){
// textToast('请选择答案再提交');
alert('请选择答案再提交');
return false;
}
// console.log(this.chooseKey);
if(this.ifNeedTime == 2){
clearInterval(this.timer);
}
// 正确答案 未用 英文逗号隔开，判断代码，如：ABC
// if(this.chooseKey.join('').length != this.problem.right.length){
// 正确答案 用 英文逗号隔开，判断代码，如：A,B,C
if(this.chooseKey.join(',').length != this.problem.right.length){
// console.log('错误');
this.nextQuestionDo();
}else{
for(var i=0,L=this.chooseKey.length;i {
// 答题结束
this.questionOver();
},this.showErrTime);
}else{
setTimeout(() => {
this.goNextQuestion();
},this.showErrTime);
}
},
// 进入下一题
goNextQuestion(){
if(this.showQuestionEnd == true){
return;
}
// console.log('当前题答题结束,正确数' + this.rightLen);
if(this.problemNumber >= this.problemAllNum){
if(this.ifNeedTime == 3){
clearInterval(this.timer);
}
// 答题结束
this.questionOver();
}else{
// 进入下一题
this.updateInit(2);
this.answerQuestionDo();
}
},
// 答题结束
questionOver(){
// 答题结束
this.showQuestionEnd = true;
// 答题结束提交正确答题数
this.submitRightLen();
},
// 倒计时
showTime(){
this.curTime--;
if(this.curTime == 0){
this.showanimation = false;
clearInterval(this.timer);
if(this.ifNeedTime == 2){
if(!this.chooseKey.length){
// 当前题答题错误
this.nextQuestionDo();
}else{
// 倒计时结束前用户有选择选项的，则自动提交当前选择答案
this.submitAnswer();
}
}
if(this.ifNeedTime == 3){
if(!this.chooseKey.length){
this.ifShowErr = true;
setTimeout(() => {
// 答题结束
this.questionOver();
},this.showErrTime);
}else{
// 倒计时结束前用户有选择选项的，则自动提交当前选择答案
this.submitAnswer();
}
}
}
},
// 计时
changeTime(k){
// console.log(k);
if(!this.timing && k){
this.timing = k
}
this.rafId = requestAnimationFrame(this.changeTime);
this.curTime = ((k - this.timing) / 1000).toFixed(2);
// console.log(this.curTime);
this.$nextTick(()=>{
if(this.showQuestionEnd == true){
cancelAnimationFrame(this.rafId);
}
})
},
/***************** 请求后台数据 相关功能 *****************/
// 开始答题-从后台获取 当前答题ID
startDo(){
// loadingToast('获取题库中...');
/*test*/
var res = {
status:1,
info:784564657486456454654, //答题codeId
// status:0, // 没机会等提示
// info:'没机会等提示',
}
/*test*/
var dataJson = {};
console.log(dataJson);
// getAjax('开始答题-从后台获取 当前答题ID' , 'post' , dataJson , (res) => {
console.log(res);
if(res.status == 1){
this.codeId = res.info; //开始答题时获得的ID
this.updateInit(1);
this.answerQuestionDo();
}else{
// dialog('友情提示',res.info);
}
// $('#loadingToast').fadeOut('fast');
// })
},
// 答题结束提交正确答题数
submitRightLen(){
// loadingToast('统计中...');
/*test*/
var res = {
status:1,
// status:0, // 等提示
info:'等提示',
}
/*test*/
var dataJson = {
codeId : this.codeId, //开始答题时获得的ID
score : this.rightLen * (100 / this.problemAllNum), //正确答题数所得分数
};
console.log(dataJson);
// getAjax('答题结束提交正确答题数' , 'post' , dataJson , (res) => {
console.log(res);
if(res.status == 1){
}else{
// dialog('友情提示',res.info);
}
// $('#loadingToast').fadeOut('fast');
// })
},
}
})
题库数据（Json格式）： var questionJson = [ { "index": 1, "question": "1111当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目业的权利。", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "A,B,C" }, { "index": 2, "question": "2222当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "A,B,C,D" }, { "index": 3, "question": "3333当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "A,D" }, { "index": 4, "question": "4444当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", }, "right": "C" }, { "index": 5, "question": "5555当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "C" }, { "index": 6, "question": "6666当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "A,B,C,D" }, { "index": 7, "question": "7777当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", }, "right": "A" }, { "index": 8, "question": "8888当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "A,B,C,D" }, { "index": 9, "question": "9999当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "D" }, { "index": 10, "question": "10 10 10 当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", }, "right": "B" }, { "index": 11, "question": "11 11 11 当前题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目", "answer": { "A": "选项A", "B": "选项B", "C": "选项C", "D": "选项D", }, "right": "C" }, ]; |
【本文地址】
公司简介
联系我们