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;
	}
	</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_DESC}</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>
			<li class="list erro">2(60%)</li>
			<li class="list correct">3(60%)</li>
			<li class="list correct">4(60%)</li>
			<li class="list correct">5(60%)</li>
			<li class="list correct">6(60%)</li>
			<li class="list correct">7(60%)</li>
			<li class="list correct">8(60%)</li>
			<li class="list correct">9(60%)</li>
			<li class="list correct">10(60%)</li>
			<li class="list correct">11(60%)</li>
			<li class="list correct">12(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">第一题【3分】</h4>
      </div>
      <div class="modal-body">
        <p>正确答案：D  得分率：84%</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 class="ans_list" style="height:100px;">	
        		<div class="rel ans_error">
        			<p class="p_num">16人</p>
        		</div>
        		<p class="ans_option">B</p>
        	</div>
        	<div class="ans_list" style="height:200px;">	
        		<div class="rel ans_correct">
        			<p class="p_num">32人</p>
        		</div>
        		<p class="ans_option">C</p>
        	</div>
        	<div class="ans_list" style="height:150px;">	
        		<div class="rel ans_correct">
        			<p class="p_num">24人</p>
        		</div>
        		<p class="ans_option ans_correct_round">D</p>
        	</div>
        </div>
        <div class="student_list cle">
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<li>黄某某</li>
        	<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">
		$(function() {
			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">'+i+'('+ans_arry[i]+')'+'</li>';
					}else{
						_html+='<li class="list erro">'+(i+1)+'('+ans_arry[i]+')'+'</li>';
					}				
				}
				$(".single ul").html(_html);
			}
			
			//日期框
			$('.date-picker').datepicker({
				autoclose : true,
				todayHighlight : true
			});
			//下拉框
			if (!ace.vars['touch']) {
				$('.chosen-select').chosen({
					allow_single_deselect : true
				});
				$(window).off('resize.chosen').on('resize.chosen', function() {
					$('.chosen-select').each(function() {
						var $this = $(this);
						$this.next().css({
							'width' : $this.parent().width()
						});
					});
				}).trigger('resize.chosen');
				$(document).on('settings.ace.chosen',
						function(e, event_name, event_val) {
							if (event_name != 'sidebar_collapsed')
								return;
							$('.chosen-select').each(function() {
								var $this = $(this);
								$this.next().css({
									'width' : $this.parent().width()
								});
							});
						});
				$('#chosen-multiple-style .btn').on(
						'click',
						function(e) {
							var target = $(this).find('input[type=radio]');
							var which = parseInt(target.val());
							if (which == 2)
								$('#form-field-select-4').addClass(
										'tag-input-style');
							else
								$('#form-field-select-4').removeClass(
										'tag-input-style');
						});
			}
			//复选框全选控制
			var active_class = 'active';
			$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on(
					'click',
					function() {
						var th_checked = this.checked;//checkbox inside "TH" table header
						$(this).closest('table').find('tbody > tr').each(
								function() {
									var row = this;
									if (th_checked)
										$(row).addClass(active_class).find(
												'input[type=checkbox]').eq(0)
												.prop('checked', true);
									else
										$(row).removeClass(active_class).find(
												'input[type=checkbox]').eq(0)
												.prop('checked', false);
								});
					});
		});
		
		var role = '${pd.ROLE}';
		
		function precent(avg,total){
			if(total == 0){
				return "0%"
			}
			return Math.round(avg / total * 100)/100 + '%' ;
		}
		
		function homeReport(classId){
			var path = '<%=basePath%>homework/report.do?School_id=${pd.SCHOOL_ID}&CLASS_ID='+classId;
			console.log(path);
			parent.$("#mainFrame").attr('src',path);
			window.top.loading.show();
		}
		
		function tosearch(){
			
			var url = "<%=basePath%>homework/report.do?CLASS_ID=${pd.CLASS_ID}" ;
			var startDate = $("#lastStart").val();
			var endDate =  $("#lastEnd").val();
			//var subject_id =  $("#SUBJECT_ID").val();
			url = url + "&START_DATE=" + startDate ;
			if(endDate != null){
				url = url + "&END_DATE=" + endDate;
			}
			window.location.href = url;
			window.top.loading.show();
			/* $("#Form").sumbit(); */
		}
		function tosearch_week(type){   //上一周 本周 下一周
			console.log('${pd.CLASS_ID}');
			var url = "<%=basePath%>homework/report.do?CLASS_ID=${pd.CLASS_ID}" ;
			url = url + "&CURRENT_WEEK=" + type ;
			
			console.log(url);
			window.location.href = url;
			window.top.loading.show();
			/* $("#Form").sumbit(); */
		}
		
		function student(classid,studentid){
		
			var url = "<%=basePath%>homework/student.do?STUDENT_ID=" + studentid + "&CLASS_ID=" + classid ;
			var startDate = $("#lastStart").val();
			var endDate =  $("#lastEnd").val();
			url = url + "&START_DATE=" + startDate + "&END_DATE=" + endDate ;
			
			window.location.href = url;
			window.top.loading.show();
		}
		
		function paper(class_id,testpaper_id){
			var url = "<%=basePath%>homework/homework_report?HOMEWORK_ID=" + testpaper_id + "&CLASS_ID=" + class_id;
			var startDate = $("#lastStart").val();
			var endDate =  $("#lastEnd").val();
			url = url + "&START_DATE=" + startDate + "&END_DATE=" + endDate ;
			window.self.location.href = url;
			window.top.loading.show();
		}
		
		$(document).ready(function(){
			window.top.loading.remove();
			
			 var sour = "${pd.DATA.HOMEWORKS}";
			
			
			 if(sour != null && sour.length > 3){
				var _width = $('#mainFrame', parent.document).width()-40;
				var _heigh = $('#mainFrame', parent.document).height()-350;
				var options = {
	            width: _width,
	            height: _heigh,
	            pinnedRows: 5,
	            pinnedCols: 4,
	            container: "#scrollableTable",
	            removeOriginal: true
	        	};
				$("#simple-table").tablescroller(options);
		        var name_height = $(".kc").last().parent().height()-18.5;
		        console.log(name_height);
		        $(".th_name").height(name_height);
			} 
			 
			 
			 var data ={};
			 $(document).on("click",".list",function(){
				 $.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.ANSWER);
						 
						 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);
						 for(i=0;i<res.DATA.length;i++){
							 if(String.fromCharCode(65+i)==res.ANSWER){
								 _html += '<div class="ans_list" style="height:'+(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:'+(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);
						 //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>