<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<style>
	/* 单选框选项之间的距离 */
	.layui-form-radio{
		width:300px;
		margin-bottom:20px;
	}
	/* 单选字体大小 */
	.layui-form-radio *{
		font-size:16px;
	}
	/* 复选框选项之间的距离 */
	.layui-form-checkbox[lay-skin=primary] span{
		width:280px;
		margin-bottom:20px;
		color:#171515
	}
	/* 复选方宽变圆 */
	.layui-form-checkbox[lay-skin=primary] i{
		border-radius: 2px
	}
	/* 复选字体大小 */
	.layui-form-checkbox span{
		font-size:16px;
	}
</style>
<body>
<div>
	<!--用了layui的tpl模板引擎-->
    <div id="view"></div>
    <div style="float:right;margin-right:760px;">
        <!-- <button type="button" class="layui-btn" id="reset"><i class="layui-icon">&#xe666;</i>重置</button> -->
        <button type="submit" class="layui-btn layui-btn-normal layui-btn-lg" id="submit" lay-submit=""><i class="layui-icon layui-btn-normal">&#xe61f;</i>提交 </button>
    </div>
</div>
</body>
<script id="questionInfo" type="text/html">
    <div class="layui-row">
        <form class="layui-form" class="myform">
			  <ul>
                <li class="layui-form-item" style=" text-align: left;margin-left: 20px">
					<!--对后台传过来的json数据进行遍历-->
					<!-- 单选 -->
					<blockquote style=" text-align: left " class="layui-elem-quote">
                        <span style="font-size: 18px;font-weight: bold">单选题</span>
                	</blockquote>
                    {{# layui.each(d.data.single.list, function(index, item){ }}
                    	<label style="font-size: 18px;font-weight: normal"> <span>{{ index+1 }}.&nbsp;&nbsp;{{ item.question }} </span></label>
 						<div class="radioList">
                        	<input type="radio" lay-skin="primary" name="{{ item.id }}" class="{{ item.id }}"
								value="A" title="A&nbsp;&nbsp;{{ item.answer1 }}"/>
                        	<input type="radio" lay-skin="primary" name="{{ item.id }}" class="{{ item.id }}"
                        		value="B" title="B&nbsp;&nbsp;{{ item.answer2 }}"/>
                        	<input type="radio" lay-skin="primary" name="{{ item.id }}" class="{{ item.id }}"
                            	value="C" title="C&nbsp;&nbsp;{{ item.answer3 }}"/>
                        	<input type="radio" lay-skin="primary" name="{{ item.id }}" class="{{ item.id }}"
                        		value="D" title="D&nbsp;&nbsp;{{ item.answer4 }}"/>
                    	</div>
                    {{# }); }}

					<!-- 复选 -->
					<blockquote style=" text-align: left " class="layui-elem-quote">
                        <span style="font-size: 18px;font-weight: bold">多选题</span>
                	</blockquote>	
					{{# layui.each(d.data.multiple.list, function(index, item){ }}
                    	<label style="font-size: 18px;font-weight: normal"> <span>{{ index+1 }}.&nbsp;&nbsp;{{ item.question }} </span></label>
 						<div class="checkboxList">
                        	<input type="checkbox" lay-skin="primary" class="{{ item.id }}"
								value="A" title="A&nbsp;&nbsp;{{ item.answer1 }}"/>
                        	<input type="checkbox" lay-skin="primary" class="{{ item.id }}"
                        		value="B" title="B&nbsp;&nbsp;{{ item.answer2 }}"/>
                        	<input type="checkbox" lay-skin="primary" class="{{ item.id }}"
                            	value="C" title="C&nbsp;&nbsp;{{ item.answer3 }}"/>
                        	<input type="checkbox" lay-skin="primary" class="{{ item.id }}"
                        		value="D" title="D&nbsp;&nbsp;{{ item.answer4 }}"/>
                    	</div>
                    {{# }); }}
					<!-- 填空题 -->
					<blockquote style=" text-align: left " class="layui-elem-quote">
                        <span style="font-size: 18px;font-weight: bold">填空题</span>
                	</blockquote>	
					{{# layui.each(d.data.fill.list, function(index, item){ }}
                    	<div><label style="font-size: 18px;font-weight: normal"> <span>{{ index+1 }}.&nbsp;&nbsp;{{ item.question }} </span></label></div>
						<div class="layui-form-item"></br>
							{{# for (var i = 1; i <= item.ansCount; i++) {  }}
								<label class="layui-form-label">第{{i}}空答案</label>
								<div class="layui-input-inline">
      								<input type="text" style="height:30px" class="{{ item.id }}" placeholder="请输入第{{i}}空答案" autocomplete="off" class="layui-input">
    							</div>
                			{{# } }}
  						</div>
                    {{# }); }}
					<!-- 简答题 -->
					<blockquote style=" text-align: left " class="layui-elem-quote">
                        <span style="font-size: 18px;font-weight: bold">简答题</span>
                	</blockquote>	
                        <span style="font-size: 16px;font-weight: bold">一、客服10大底线</span></br>
						{{# for (var i = 1; i <= 10; i++) {  }}
							</br>
      						<span>{{i}}、</span><input type="text" class="jianda" style="height:30px;width:900px;margin-bottom:15px" autocomplete="off" class="layui-input">
                		{{# } }}
                </li>
            </ul>
        </form>
    </div>
</script>
 
<script>
    layui.use(['form', 'laytpl', 'layer'], function () {
        var  $ = layui.jquery, 
            form = layui.form, 
            layer = layui.layer, 
            laytpl = layui.laytpl;
        form.render();
 
        layer.open({
        	title: '考试须知',
        	skin:'layui-layer-molv',
        	content: '题目类型：单选题、多选题、填空题、简答题；</br></br>评判标准：</br>1.答错【 5 】题，测试未通过;<br><span style="line-height: 22px;color:red;">2.简答题回答错误，直接判定测试未通过！</span>'
        });     
        	  
        
        //把每项问题的Id和其所选值存入map
        var radioMap = new Map();
        var checkboxMap = new Map();
 
        //map转json(map -> object -> json)
        function MapToJson(map) {
            let obj = Object.create(null);
            for (let [k, v] of map) {
                obj[k] = v;
            }
            return obj;
        }
 
        var questionNumber = 0;
        var singleNumber = 0;
        var multipleNumber = 0;
        var fillNumber = 0;
        var singleData ;
        var multipleData ;
        var fillData ;
        var shortAnswerData ;
        //获取后台数据
        $.ajax({
            url: "${pageContext.request.contextPath}/getQuestions",
            datatype: "json",
            type: "GET",
            async: false,//关闭异步，否则popover组件无法渲染出值
            context: document.body,
            success: function (data) {
            	singleData   	= data.data.single.list
            	multipleData 	= data.data.multiple.list
            	fillData     	= data.data.fill.list
            	shortAnswerData = data.data.shortAnswer.list
            	
            	singleNumber   = data.data.single.total;
            	multipleNumber = data.data.multiple.total;
            	fillNumber     = data.data.fill.total;
            	// 题目总数
                questionNumber = singleNumber + multipleNumber + fillNumber + 1;
                var getTpl = document.getElementById('questionInfo').innerHTML,
                    view = document.getElementById('view');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });
                form.render();
            }
        })
 
        var TbQustionTechnologyInfo = {};
        //按钮操作
        TbQustionTechnologyInfo.initButton = function () {
            //提交信息
            $("#submit").click(function () {
            	// 答对总数
            	var yesAnswer = 0;
            	var radioYesAnswer = 0;
            	var checkboxYesAnswer = 0;
            	var fillYesAnswer = 0;
            	var shortYesAnswer = 0;
            	// 答错总数
            	var errorAnswer = 0;
            	var radioErrorAnswer = 0;
            	var checkboxErrorAnswer = 0;
            	var fillErrorAnswer = 0;
            	var shortErrorAnswer = 0;
            	var errorData= []
            	
                // 在提交之前需要遍历一遍所有的radio选项，并把所选对应值存入map，如果有漏选的，则提交不成功
                /* var radioList = $('.radioList').find('input');
                var answer = '';
                // 单选题答对的数目
                for (var b = 0; b < radioList.length; b++) {
                    if ($(radioList[b]).prop('checked')) {
                        if($(radioList[b])[0].name == $(radioList[b])[0].value ){
                        	radioYesAnswer++;
                        }
                    	radioMap.set($(radioList[b])[0].name, $(radioList[b])[0].value );
                    }
                } */
                
                /* ========= 单选题 ========= */
                
                // 错题类型
                errorData.push("一、单选题-")
                //单选题选择题数
                var radioCheckCount = 0;
                // 单选题答对的数目
                for (var i = 0; i < singleData.length; i++) {
                	var answer   = ''
                	$("." + singleData[i].id).each(function (index) {  
                		if($(this)[0].checked){
                			radioCheckCount++
                			answer = $(this)[0].value
                		}
                    })  
                    // 如果选的和答案一致，对的数+1
                    if(answer == singleData[i].answer){
                		radioYesAnswer++
                	}else{
                		// 答错，错题+1，并且存入错题集
                		radioErrorAnswer++
                		errorData.push((i+1) + "、" + singleData[i].question + '-')
                	}
                }
                if(radioCheckCount < singleNumber){
                	layer.msg("单选 -- 请填写完所有选项");
                    return false;
                } 
                
                
             	/* ========= 多选题  ========= */
             	
                // 错题类型
                errorData.push("二、多选题-")
                // 多选题未选题数
                var multipleCheckCount = 0;
                // 多选题答对的数目
                for (var i = 0; i < multipleData.length; i++) {
                	var answer   = ''
                	$("." + multipleData[i].id).each(function (index) {  
                		if($(this)[0].checked){
                			answer += $(this)[0].value
                		}
                    })  
                    // 未选题数
                    if(answer != ''){
                    	multipleCheckCount++
                    }
                    // 如果选的和答案一致，对的数+1
                    if(answer == multipleData[i].answer){
                		checkboxYesAnswer++
                	}else{
                		// 答错，错题+1，并且存入错题集
                		checkboxErrorAnswer++
                		errorData.push((i+1) + "、" + multipleData[i].question + '-')
                	}
                }
                if(multipleCheckCount < multipleNumber){
                	layer.msg("多选 -- 请填写完所有选项");
                    return false;
                } 
                
                
                
                /* ========= 填空题 ========= */
                
                // 错题类型
                errorData.push("三、填空题-")
                // 填空题答对的数目
                for (var i = 0; i < fillData.length; i++) {
                	var answer  = ''
                	$("." + fillData[i].id).each(function (index) {  
                		// 填入的答案
                		if($(this)[0].value != ''){
                			answer += $(this)[0].value
                		}
                    })  
                    // 去除所有的空格
                    answer = answer.replace(/\s/g,"")
                    // 去除所有的符号正则
                    var regex = /[^\u4e00-\u9fa5\w]/g
                    // 用正则去除所有的符号
                    answer = answer.replace(regex,"")
                    // 正确答案去除符号
                    fillData[i].answer = fillData[i].answer.replace(regex,"")
                 	// 如果填的值和答案一致，对的数+1
                    if(answer == fillData[i].answer){
                    	fillYesAnswer++
                	}else{
                		// 答错，错题+1，并且存入错题集
                		fillErrorAnswer++
                		errorData.push((i+1) + "、" + fillData[i].question + '-')
                	}
                }
                
                /* ========= 简答题 ========= */
                
                // 十大底线共10个，答对一个+1，等于10的时候，整题算对
                var yesAnswer = 0;
	            // 去除所有符号的正则
	            var regex = /[^\u4e00-\u9fa5\w]/g
                for (var i = 0; i < shortAnswerData.length; i++) {
                	var jiandaAnswer = '';
                	// 简答题正确答案
    	            var shortAnswer = shortAnswerData[i].content;
    	         	// 用正则去除正确答案中所有的符号
    	            shortAnswer = shortAnswer.replace(regex,"")
	                $(".jianda").each(function (index) { 
	                	jiandaAnswer = $(this)[0].value
	                	// 用正则去除回答的答案中所有的符号
	                    jiandaAnswer = jiandaAnswer.replace(regex,"")
	                    // 循环匹配，如果有对的，+1
	                	if(jiandaAnswer == shortAnswer){
	                		yesAnswer++
	                	}
	                })  
                }
	            // 十大底线全对，简答题回答正确
	            if(yesAnswer == 10){
	            	shortYesAnswer++
	            }else{
	            	shortErrorAnswer++
	            }
                // 答对总数
                yesAnswer   = fillYesAnswer + radioYesAnswer + checkboxYesAnswer + shortYesAnswer
                // 答错总数
                errorAnswer = radioErrorAnswer + checkboxErrorAnswer + fillErrorAnswer + shortErrorAnswer
                
                console.log('答对:'+yesAnswer)    
				console.log('答错:'+errorAnswer) 
				//示范一个公告层
				      layer.open({
				        type: 1
				        ,title: false //不显示标题栏
				        ,closeBtn: false
				        ,area: '300px;'
				        ,shade: 0.8
				        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
				        ,btn: ['查看错题', '关闭']
				        ,btnAlign: 'c'
				        ,moveType: 1 //拖拽模式，0或者1
				        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
				        	'你知道吗？亲！<br><br>本次测试共'+ questionNumber +'题。其中：<br>单选题'+ singleNumber +'题<br>多选题'+ multipleNumber +'题 <br>填空题'+ fillNumber +'题 <br>简答题1题 ^_^<br><br>'+
				        	'你一共答对'+yesAnswer+'题<br>答错'+errorAnswer+'题。其中：<br>单选题'+ radioErrorAnswer +'题<br>多选题'+ checkboxErrorAnswer +'题 <br>填空题'+ fillErrorAnswer +'题 <br>简答题'+ shortErrorAnswer +'题 ^_^<br></div>'
				        ,success: function(layero){
				          var btn = layero.find('.layui-layer-btn');
				        },
				        yes: function (layero,index) {
				        	/* layer.msg("功能开发中。。。");
		                    return false; */
				        	layer.open({
								type : 2,
								title : "错题展示",
								area : [ '50%', '70%' ],
								skin:'layui-layer-molv',
								content : './errorQuestion.jsp',
								success : function(layero, index) {
									var body = layer.getChildFrame('body', index);
									var iframeWin = window[layero.find('iframe')[0]['name']]; // 得到iframe页的窗口对象
									body.find('#errorData').val(errorData);
									// 调用子页面的方法，把数据传过去
									//iframeWin.initErrorDataHandle(errorData)
									iframeWin.layui.form.render();
								}
							});
				        }
				        ,btn2: function(index, layero){
				        	if(shortErrorAnswer > 0){
				        		layer.msg('简答题 回答错误！请重新测试。', {icon : 5,time : 3000},function(){
				                	// 提示后刷新页面，清空选项
				                	window.location.reload();
				                });
				        		return false;
				        	}
				        	// 答错少于5题，改变状态。让使用功能
							if(errorAnswer <= 5){
				                $.ajax({
				                	url:"${pageContext.request.contextPath}/examOverToChangeSysStatus",
				                	contentType : 'application/json;charset=utf-8',
				                    type : 'POST',
				                    success:function (data) {
				                    	if (data.code == 200) {
				                        	//提示框
				                        	layer.msg('恭喜您 ~ 测试通过啦，请重新登录系统使用！', {
												icon : 6,
												offset : "auto",
												time : 2000
											});
											setTimeout("javascript:top.location.href='${pageContext.request.contextPath}/SysUser/logout'", 3000);
				            			}else{
				            				layer.msg('失败！',{icon:5,offset:"auto",time:2000});//提示框
				                    	}
				                    }
				                })
							}else{
				            	//提示框
				                layer.msg('测试未通过！请重新测试', {icon : 5,time : 2000},function(){
				                	// 提示后刷新页面，清空选项
				                	window.location.reload();
				                });
				            }
				          }
				      });      
               /*  for (var b = 0; b < checkboxList.length; b++) {
	                    if ($(checkboxList[b]).prop('checked')) {
	                    	// 获取选中选项的class属性
	                    	var clazz = $($(checkboxList[b])[0]).prop("class")
		                    // answer += $(checkboxList[b])[0].value;
	                    	checkboxMap.set($(checkboxList[b])[0].value,$(checkboxList[b])[0].name);
	                    }
                } */
            });
        }
 
        $(function () {
            TbQustionTechnologyInfo.initButton();   //初始化按钮操作
            form.render();
        });
    });
</script>
</html>