答题抢红包（答题功能JS部分）

Posted 2021-10-27 去糖不加冰

答题页面

一、题目信息渲染

var data="";//后台传过来的json数据
var index=0;//表示当前渲染题目的下标
 function romance(){
        $('#time-sec').text(20);//页面定时开始数
        $('#time-plan').css('width','0%');//定时进度
        /*
        根据index取出data里面的题目信息并进行拼串
        然后渲染页面
        */
     writer = '';
     var writer = (index + 1) + '/' + data.length + '(';
   
      writer += data[index].type == 1 ? '选择题' : data[index].type == 2 ? '判断题' : data[index].type == 3 ? '多选题' : '类型未知';
      writer += ') : '+data[index].title;
     $('#answer-title').html(writer);
     /*
    渲染题目里面的选项内容 
	*/
     writer = '';
     var arr = data[index].options;
     for(var i = 0; i < arr.length; i++){
          writer += '<div class="' 
          + (data[index].type == 1 || data[index].type == 2 ? 'radio' : 'checkbox')
          + '">';
          writer += '<label "><input type="'
           + (data[index].type == 1 || data[index].type == 2 ? 'radio' : 'checkbox')
          +'" value="'+arr[i].sub_number+'" name="types" ><span>';
          if(data[index].type != 2){
              var fontOption = escapes(arr[i].sub_number);
         
              writer +=  '&nbsp;' + fontOption + '&nbsp;';
          }
          writer += arr[i].question_option;
          writer += '</span></label>';
     }
     
    $('#answer-body').html(writer);
    //定时500秒后开始调用setTime周期循环定时器
    setTimeout(function(){
        setTime();
    },500)
    
 }

主要就是根据当前的index，取出data中的数据然后渲染页面。

二、定义点击下一题按钮

window.onload = function(){
     
     /*
     按钮绑定点击事件
     判断当前状态做下一步操作
     changeFlag是作为一个开关，当用户答错题changeFlag为false;此时是在页面底部显示正确的内容等等
     
     */
     $('#btn-next').click(function(){
      
         if(changeFlag){
             btnNext();
         }else{
              $('#nav-error').css('display','none');//错误弹窗隐藏
               changeFlag = true;
                if(index == data.length - 1 ){//判断当前是否是到最后一页
                 $('#btn-next').html('完成');
                 }else if(index >= data.length){
                    endAnswer();//调用输出用户答对了多少题是否可以抽奖
	            return false;
                }
                 romance();//调用渲染页面方法
         }
         if(index == data.length){//判断是否答完题
             sendAnswer();//ajax将信息发送到后台的方法，此方法根据接口写  
        }
     })
     //判断是否数据题
      if(data.length < 1){
     $('#content-answer').css('display',"none");
     $('#title-val').text('此活动没有题');
     $('.btn-lg').css('display',"none");
     }else{
      romance();
    }
 }
 

此块代码是定义按钮不同情况要执行的内容。

三、对题目信息进行判断（核心部分）

function btnNext(){
     var flag = true;
     var optionNum = new Array();//将用户选择的题添加到数组中
  /*
  jQuery获取input并进行过滤checked然后遍历并将value值push到数组中
  */
    $('input[name*="types"]:checked').each(function(){
        flag = false;
        optionNum.push(this.value);
    })
    if(flag){//如果用户没有选择对用户进行提示
           $('#change-alert').text('请选此题的答案！！！')
	       $('#myModal').modal('show');
	       return false;
    }
       clearInterval(time);//清除周期定时器
    var result = data[index].result.split(',');//取出数据中的正确答案
    var judge = function(){//对用户选择的答案进行判定
        if(result.length !== optionNum.length){//判断数组长度是否相等
            return false;
        }
        //for比对数据如果有不一致的数据返回false
        for(var i = 0; i < result.length; i++){
            flag = false;
            for(var j = 0; j < optionNum.length; j++){
                if(result[i] == optionNum[i]){
                    flag = true;
                    break;
                }
            }
            if(!flag){
                break;
                return false;
            }
        }
        if(i ==  result.length  && flag){//最后进行判断一致返回true
            return true;
        }else{
            return false;
        }
        
    }

     index += index >= data.length  ? 0 : 1;//index加一
  
/*
判断答题情况如果错误执行错误的内容

*/
   if(!judge()){
        $('#change-alert').text('回答错误！！！');//弹窗提示
	   $('#myModal').modal('show');//显示弹窗
	    var  errorStr = '';
	    $('input[name*="types"]').attr('disabled','disabled');//禁止选择输入框
	    //for遍历取出用户选择的内容与正确的内容给用户查看
	   for(var i = 0; i < optionNum.length; i++){
	       errorStr += '<p>&nbsp;&nbsp;<span>';
	      errorStr += (data[i].type != 2 ? escapes(optionNum[i]) : '' + '&nbsp;') +  data[index - 1].options[optionNum[i] - 1].question_option;
	      errorStr += '</span></p>';
	       
	   }
	   $('#you-option').html(errorStr);
	    var  errorStr = '';
	   for(var i = 0; i < result.length; i++){
	      errorStr += '<p>&nbsp;&nbsp;<span>';
	      errorStr += (data[i].type != 2 ? escapes(result[i]) : '' + '&nbsp;') +  data[index - 1].options[result[i] - 1].question_option;
	      errorStr += '</span></p>';
	   }
	   $('#my-option').html(errorStr);
	   $('#nav-error').css('display','block');//显示底部答案信息块
	   changeFlag =  false;
      
    
	       return false;
   }
   /*
   如果答案正确执行下面的代码
   */
   
        number++;//对正确的数量计算
    if(index == data.length - 1){//判断是否是最后一题
      $('#btn-next').html('完成');
    }
 
    if(index >= data.length){
         endAnswer();
	     return false;
    }
  
    romance();//调用页面渲染方法
        
 }

四、页面定时
有兴趣自己研究下，个人感觉还有优化空间不作介绍了

function setTime(){
     var timeNum = 20;
     time = setInterval(function(){
         timeNum--;
         $('#time-sec').text(timeNum);
         var plan = 100 / 20 * (20 - timeNum);
         $('#time-plan').css('width',plan+'%');
         if(timeNum < 0){
             timeNum = 20;
             index++;
             console.log(index);
             if(index == data.length){
             sendAnswer();
             endAnswer();
		       
             }else{
            romance(); 
             }
           
            clearInterval(time);
         }   
     },1000)
 }