Vue实现答题进行判断,并附颜色

Vue实现答题进行判断,并附颜色,第1张

    根据大佬的代码,自行进行改造及实现,但是代码过于繁琐,最近有时间会进行精简。
  <div :class="getClass(optionList.slice(0,4)[index],subjectlist[num].answer,subjectlist[num].questionAnswer)"></div>
   //根据答案进行颜色判断方法(暂时兼容多选)
              getClass:function(thisValue,selectList,realList){ //选项,用户答案,答案
               let  isReal=false
               if(realList.length>1){ //多选题进行判断,并进行颜色赋值
               if(selectList=='' || selectList==null){
                  for(let i=0;i<realList.split("").length;i++){
                     if(thisValue==realList.split("")[i]) 
                     {
                        return isReal="answer0ptin-optque"     
                     }
               }
                    return isReal="answer0ptin-opt"   
               }
               else{
                 //多选进行判断newarr为漏选和错选集合
               var newarr= selectList.split("").filter(function(v){
                return realList.split("").indexOf(v) === -1
              }).concat(realList.split("").filter(function(v){ return selectList.split("").indexOf(v) === -1 }))
                //多选进行判断errarr为错选集合,omarr为漏选集合
              var errarr=selectList.split("").filter((v) => newarr.includes(v))
              var omarr=realList.split("").filter((v) => newarr.includes(v))
                 for(let i=0;i<realList.split("").length;i++){
                     if(thisValue==realList.split("")[i]) 
                     {
                        return isReal="answer0ptin-optcorrect"     
                     }
               }
               for(let i=0;i<errarr.length;i++){
                  if(errarr[i]==thisValue) 
                     {
                        return isReal="answer0ptin-opterr"     
                     } 
               }
                  for(let i=0;i<omarr.length;i++){
                  if(omarr[i]==thisValue){
                     return isReal="answer0ptin-optcorrect"   
                     }
                  }
                      return isReal="answer0ptin-opt"
                      }
               }
               else{
               //单选及判断
               if(thisValue==realList){
                    isReal=true
                }
                if(isReal){
                 return isReal="answer0ptin-optcorrect"
                }
                if(selectList==thisValue&&realList!=selectList){
                return isReal="answer0ptin-opterr"
            }  
                  return isReal="answer0ptin-opt"
               }
      
              },

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/945626.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-18
下一篇2022-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存