WebRoot/WEB-INF/jsp/sunvote/homework/homework_report.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="myelfun" uri="/WEB-INF/tld/elfun.tld"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>${info.CLASS_NAME}成绩报表</title>
<base href="<%=basePath%>">
<!-- 下拉框 -->
<link rel="stylesheet" href="static/ace/css/chosen.css" />
  <link type="text/css" href="static/css/tablescroller.css" rel="stylesheet" />
<!-- <link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet"> -->
	<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<!-- 日期框 -->
<link rel="stylesheet" href="static/ace/css/datepicker.css" />
<link rel="stylesheet" href="static/css/teach.css" />
<style>
	.font span{    font-size: 12px;
    font-weight: initial;color:#000;}
    .search_btn{width:30px;}
    .btn{margin:0 5px;}
    .center{height:39px;}
    .box_header{position:fixed;top:0;left:0;width:100%;}
    .clear{clear:both}
    ul{
    	padding:0;
    }
	.list{
		width:120px;
		height:40px;
		line-height:40px;
		font-weight:bold;
		text-align:center;
		margin-right:10px;
		margin-top:10px;
		float:left;
		list-style:none;
		border:1px solid #ddd;
		cursor: pointer;
	}
	.correct{
		color:#28be56;
	}
	.erro{
		color:#ff5353;
	}
	.overall h3,.single h3{
		font-size:16px;
		font-weight:bold;
	}
	.single{
		margin-top:50px;
	}
	.q_charts{
		width:100%;
		height:240px;
		postion:relative;
		margin-top:20px;
		text-align:center;
	}
	.rel{
		width:40px;
		height:100%;
		position:relative;
	}
	.ans_correct{
		background:#28be56;
	}
	.ans_error{
		background:#ff5353;
	}
	.ans_list{
		display:inline-block;
		
		margin:0 10px;
	}
	.ans_list p{
		margin:auto;
		margin-bottom:0;
		margin-top:5px;
		line-height:20px;
		text-align:center;
		
	}
	.ans_option{
		cursor: pointer;
	}
	.p_num{
		position:absolute;
		top:-20px;
	}
	.ans_error_round{
		width:20px;
		height:20px;
		margin:0 auto;
		background:#ff5353;
		color:#fff;
		border-radius:10px;
	}
	.ans_correct_round{
		width:20px;
		height:20px;
		margin:0 auto;
		background:#28be56;
		color:#fff;
		border-radius:10px;
	}
	.student_list{
		width:100%;
		padding:10px;
		background:#f3f3f3;
		box-sizing:border-box;
	}
	.cle:after{
		visibility:hidden; 
		display:block; 
		font-size:0; 
		content:'\20'; 
		clear:both; 
		height:0;
		}
	.student_list li{
		width:120px;
		height:20px;
		list-style:none;
		text-align:center;
		line-height:20px;
		float:left;
	}
	#right_ans{
		margin-right:30px;
	}
	</style>
</head>
<body style="background:#fff;height:auto;">
<div class="box_header">
	<div class="head_box_l">
		<p>
			<span class="right_b"></span>练习报表
		</p>
	</div>						
	<div class="clear"></div>
</div>
<div style="padding:0 20px;padding-top:3%;padding-bottom:3%;margin-top:102px;">
	<div class="overall">
		<h3>作业总体情况：</h3>
		<table class="table table-bordered ">
			<col style="width: 20%" />
			<col style="width: 20%" />
			<col style="width: 20%" />
			<col style="width: 20%" />
			<col style="width: 20%" />
			<tbody>
				<tr>
					<td>提交情况：${page_data.COMPLETE_PERSENT}</td>
					<td>题量：${page_data.QUESTION_COUNT}</td>
					<td>最高得分率：<fmt:formatNumber type="number"
											value="${page_data.ALL_SCORE == 0 ? 0: (page_data.GET_MAX_SCORE*100 / page_data.ALL_SCORE )}"
											maxFractionDigits="2" />%</td>
					<td>最低得分率：<fmt:formatNumber type="number"
											value="${page_data.ALL_SCORE == 0 ? 0: (page_data.GET_MIN_SCORE*100 / page_data.ALL_SCORE )}"
											maxFractionDigits="2" />%</td>
					<td>平均得分率：${page_data.GET_SCORE_PERSENT}</td>
				</tr>
				<tr>
					<td colspan="5">未提交人：${data[0].STUDENT_NAME }
						<c:forEach items="${data}" begin="1" var="var" varStatus="vs">
							、${var.STUDENT_NAME}							
						</c:forEach>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="single">
		<h3>单题正确率详情：</h3>
		<ul>
		<!-- 
			<li class="list correct">1(60%)</li>
 		-->
		</ul>
		<div class="clear"></div>
	</div>
</div>
	<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="z-index:1041">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">第<span id="index">1</span>题【<span id="score">0</span>分】</h4>
      </div>
      <div class="modal-body">
        <p>正确答案：<span id="right_ans">D</span>  得分率：<span id="dfl">84%</span></p>
        <div class="q_charts">
        <!-- 
        	<div class="ans_list" style="height:50px;">
        		<div class="rel ans_correct">
        			<p class="p_num">8人</p>
        		</div>
        		<p class="ans_option">A</p>
        	</div>
         -->
        </div>
        <div class="student_list cle">
        
        	<!-- <li>黄某某</li> -->
        	
        </div>
      </div>
    </div>
  </div>
</div>	
		
	
	<%@ include file="../../system/index/foot.jsp"%>
	<script src="static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="static/ace/js/ace/ace.js"></script>
	<!-- 下拉框 -->
	<script src="static/ace/js/chosen.jquery.js"></script>
	<!-- 日期框 -->
	<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
 	<script language="javascript" src="static/js/tablescroller.js"></script>
    <script language="javascript" src="static/js/tablescroller.jquery.js"></script>
    
  
    
	<script type="text/javascript">			
		$(document).ready(function(){
			window.top.loading.remove();
			
			
			var ans_details = '${page_data.ANSWER_PERSENT}';
			
			if(ans_details != ''){
				var _html="";
				var ans_arry = ans_details.split(",");
				for(i = 0;i<ans_arry.length;i++){
					temp = parseInt(ans_arry[i].replace("%",""));
					if(temp>=80){
						_html+='<li class="list correct" data-dfl="'+ans_arry[i]+'">'+i+'('+ans_arry[i]+')'+'</li>';
					}else{
						_html+='<li class="list erro" data-dfl="'+ans_arry[i]+'">'+(i+1)+'('+ans_arry[i]+')'+'</li>';
					}				
				}
				$(".single ul").html(_html);
			}
			 
			 var data ={};
			 $(document).on("click",".list",function(){
				 
				 $("#index").text($(this).index()+1);
				 $("#dfl").text($(this).attr("data-dfl"));
				 
				 $.ajax({
					 url:"<%=basePath%>homework/homeworkindex",
					 type:"post",
					 data:{HOMEWORK_ID:'${page_data.HOMEWORK_ID}',INDEX:($(this).index()+1)},
					 success:function(res){
						 res = JSON.parse(res);
						 data=res.DATA;
						 console.log(res);
						 
						 $("#right_ans").text(res.ANSWER);
						 $("#score").text(res.SCORE);
						 
						 var stundent_num=[];
						 var _html='';
						 for(j=0;j<res.DATA.length;j++){
							 stundent_num[j]=res.DATA[j].length;
						 }
						 max_num=Math.max.apply(null,stundent_num);
						 if(max_num==0){
							 _html='<div style="height:200px;"></div>';
						 }
						 for(i=0;i<res.DATA.length;i++){
							 if(res.ANSWER.indexOf(String.fromCharCode(65+i))>-1){
								 _html += '<div class="ans_list" style="height:'+(max_num==0?0:(stundent_num[i]*200/max_num).toFixed(2))+'px;"><div class="rel ans_correct"><p class="p_num">'+res.DATA[i].length+'人</p></div><p class="ans_option">'+String.fromCharCode(65+i)+'</p></div>'
							 }else{
								 _html += '<div class="ans_list" style="height:'+(max_num==0?0:(stundent_num[i]*200/max_num).toFixed(2))+'px;"><div class="rel ans_error"><p class="p_num">'+res.DATA[i].length+'人</p></div><p class="ans_option">'+String.fromCharCode(65+i)+'</p></div>';
							 }
						 }
						 var student_option_list='';
						 for(i=1;i<data[0].length;i++){
							 student_option_list+='<li>'+data[0][i]+'</li>';
						 }
						 $(".student_list").html(student_option_list);
						 
						 $(".q_charts").html(_html);
						 
						 var className=$(".ans_option").eq(0).siblings(".rel").attr("class");
						 if(className.indexOf("ans_error")>0){
							 $(".ans_option").eq(0).addClass("ans_error_round");
						 }else{
							 $(".ans_option").eq(0).addClass("ans_correct_round");
						 }
						 //console.log(max_num);
						 $('#myModal').modal('toggle')
					 }
				 })
				 
			 });
			 
			 $(document).on("click",".ans_option",function(){
				 var className = $(this).siblings(".rel").attr("class");
				 
				 
				 $(".ans_option").attr("class","ans_option");
				 if(className.indexOf("ans_error")>0){
					 if($(this).hasClass("ans_error_round")){
						 return;
					 }else{
						 $(this).addClass("ans_error_round");
					 }
					 
				 }else{
					 if($(this).hasClass("ans_correct_round")){
						 return;
					 }else{
						 $(this).addClass("ans_correct_round");
					 }
				 }
				 
				 //显示答题名单
				 var _index = $(this).closest(".ans_list").index();
				 console.log(data[_index].length);
				 var student_option_list='';
				 for(i=1;i<data[_index].length;i++){
					 student_option_list+='<li>'+data[_index][i]+'</li>';
				 }
				 $(".student_list").html(student_option_list);
				 
			 })
				
		});
		
	</script>
</body>
</html>