JS版在线考试程序-示例-表单按钮-点滴吧

JS版在线考试程序-示例

更新时间：2015/6/26 11:49:40 下载：7140次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>公共类-营业类</title>
<style type="text/css">
*{padding:0;margin:0;}

body{
font-size:14px;
background-color:#F9FCFD;
}

.highlight{ background-color:#FCFFD7;}
.selected{background-color:#FFEBD7;}

.div_topic{
padding:10px;
border:#73AFD0 dashed;
border-width: 0 0 1px 0;
background-color:#F9FCFD;
}

.div_topic.odd{background-color: #E0EEF5;}

.div_topic h4{
font-size:16px;
color:#22536A;
display:block;
padding:3px;
}

.div_topic p{
display:block;
padding:3px;
}

.div_topic h4 span{
padding:0 0 0 20px;
color:#FF0000;
display:none;
}

#fixedLayer {
width:100%;
background-color: #A3CBE0;
border:1px solid #73AFD0;
position:fixed;
left:0px;
top:0px;
}

#answer_last {
width:150px;
padding:10px;
background-color:#FFCC00;
border:1px dashed #888313;
position:fixed;
right:0px;
top:42px;
display:none;
}

#fixedLayer div{
padding:10px;
}

#topic_num{
width:30px;
text-align:center;
}

#topic_right{
float:right;
}

#status{
color:#FF0000;
font-size:14;
font-weight:bold;}

/*打印时，背景为白色*/
@media print{
body{
font-size:12px;
background-color:#fff;
}

.div_topic{
padding:5px;
border:#000 dashed;
border-width: 0 0 1px 0;
background-color:#fff;
}

.div_topic h4{
font-size:14px;
color:#000;
}

.div_topic h4 span{ display:none}

#answer_last {
background-color:#eee;
border:1px dashed #333;
color:#000000;
display:block;
position: static;
width:auto;
height:auto;
}

}

</style>

var arr_topic = [
     [
          '南方电网公司的公司生命线是(_____)。',
          [
               ['依法经营','no'],
               ['服务永无止境','no'],
               ['电网安全稳定','yes'],
               ['一切事故都可以预防','no']
          ]
     ],[
          '南方电网公司的核心价值观:是:(_____)。',
          [
               ['对中央负责，为五省区服务','no'],
               ['万家灯火南网情深','yes'],
               ['服务好、管理好、形象好','no'],
               ['服务永无止境','no']
          ]
     ],[
          '公司的工作方针坚持“六个更加注重”，其中，在抓好电网安全的同时，更加(_____)。',
          [
               ['注重树立科学发展观','no'],
               ['注重社会效益','no'],
               ['注重管理出实力','no'],
               ['注重依靠科技进步','yes']
          ]
     ],[
          '公司的工作方针坚持“六个更加注重”，其中，在抓好企业发展的同时，更加(_____)',
          [
               ['注重人的发展','yes'],
               ['注重深化改革','no'],
               ['注重管理出实力','no'],
               ['注重依靠科技进步','no']
          ]
     ],[
          '南方电网公司的发展思路是:(_____)。',
          [
               ['强本、创新、领先','yes'],
               ['服务永无止境','no'],
               ['电网安全稳定','no'],
               ['“两型两化”的国内领先、国际著名企业','no']
          ]
     ],[
          '南网文化中廉洁理念是:(_____)',
          [
               ['服务永无止境','no'],
               ['想尽办法去完成每一项任务','no'],
               ['清白做人干净干事','yes'],
               ['讲原则，重感情，团结和谐有战斗力','no']
          ]
     ],[
          '南网文化中行为理念是:(_____)',
          [
               ['服务永无止境','no'],
               ['想尽办法去完成每一项任务','yes'],
               ['清白做人干净干事','no'],
               ['讲原则，重感情，团结和谐有战斗力','no']
          ]
     ],[
          '通过责任文化、安全文化、(_____)、执行文化和廉洁文化等五个子文化的建设，使南网文化融入中心、进入管理。',
          [
               ['制度文化','no'],
               ['服务文化','yes'],
               ['企业文化','no'],
               ['物质文化','no']
          ]
     ],[
          '南网文化通过理念识别系统、行为识别系统、(_____)三个识别系统内聚人心、外塑形象。',
          [
               ['图像识别系统','no'],
               ['视觉识别系统','yes'],
               ['语音识别系统','no'],
               ['文字识别系统','no']
          ]
     ],[
          '中国南方电网有限责任公司战略体系由(_____)构成。',
          [
               ['发展战略体系、战略支持体系和战略执行体系','yes'],
               ['管控体系、组织体系和制度体系','no'],
               ['发展战略体系、战略支持体系和绩效管理体系','no'],
               ['战略支持体系、战略执行体系和绩效管理体系','no']
          ]
     ],[
          '中国南方电网有限责任公司战略目标是(_____)。',
          [
               ['主动承担社会责任，全力做好电力供应','no'],
               ['创建国际先进水平企业','no'],
               ['成为服务好、管理好、形象好的国际先进电网企业','yes'],
               ['推进“两型两化”，实施“两个转变”','no']
          ]
     ],[
          '中国南方电网有限责任公司中长期发展战略要求着力构建的核心能力是(_____)。',
          [
               ['人才支持能力、技术支撑能力、品牌及文化影响能力、政策影响能力、公共关系能力','no'],
               ['盈利能力、资产管理能力、经营风险管控能力、建设能力、规划能力','no'],
               ['能源高效利用能力、安全风险控制能力、高效管理设备能力、满足客户需求的能力、财务支撑能力','no'],
               ['客户服务能力、电网运营能力、电网发展能力、价值创造能力、发展支持能力','yes']
          ]
     ],[
          '中国南方电网有限责任公司中长期发展战略途径是(_____)。',
          [
               ['推进“两型两化”，实施“两个转变”','yes'],
               ['四提高、一促进','no'],
               ['创先','no'],
               ['合理延伸产业链','no']
          ]
     ],[
          '中国南方电网有限责任公司战略发展的核心是(_____)。',
          [
               ['坚持以客户为中心','no'],
               ['集中精力做强做优主业F','yes'],
               ['加大科技创新力度','no'],
               ['合理延伸产业链','no']
          ]
     ],[
          '中国南方电网有限责任公司发展战略体系明确了公司的使命是:(_____)',
          [
               ['主动承担社会责任，全力做好电力供应','yes'],
               ['主动承担社会责任，为五省区服务','no'],
               ['主动承担社会责任，创建国际先进企业','no'],
               ['主动承担社会责任，创建国内领先企业','no']
          ]
     ],[
          '营业管理既是电力工业企业产品电能的销售环节，也是综合体现电力企业(_____)的所在。',
          [
               ['经营成果','yes'],
               ['经济效益','no'],
               ['市场营销','no'],
               ['销售收入','no']
          ]
     ],[
          '电费(_____)也叫电费出账，是通过电费结算实现电力商品销售收入，同时产生电费应收的过程。',
          [
               ['统计','no'],
               ['发行','yes'],
               ['分析','no'],
               ['结算','no']
          ]
     ],
     ['南方电网公司的经营理念是:社会效益为重，企业效益优先。',
          [
               ['正确','no'],
               ['错误','yes']
          ]
     ],
     ['南方电网公司的使命是:主动承担社会责任，全力做好电力供应。',
          [
               ['正确','yes'],
               ['错误','no']
          ]
     ],
     ['南方电网公司的主题形象语是:万家灯火，和谐南网。',
          [
               ['正确','no'],
               ['错误','yes']
          ]
     ],
     ['账务处理时应遵循账务集中处理的模式。',
          [
               ['正确','yes'],
               ['错误','no']
          ]
     ],
     ['欠收电费是营业部门销售电能产品应收而未收回的电费。',
          [
               ['正确','yes'],
               ['错误','no']
          ]
     ],
     ['收取电费时首先追缴早期欠费。',
          [
               ['正确','no'],
               ['错误','yes']
          ]
     ],
     ['收取电费时首先确保不发生当期欠费。',
          [
               ['正确','yes'],
               ['错误','no']
          ]
     ],
     ['收取电费时在确保不发生当期欠费的前提下，按照发生欠费的先后时间顺序，先追缴早期的欠费。',
          [
               ['正确','yes'],
               ['错误','no']
          ]
    ]	 
];

//元素的隐藏与呈现
function showHide(obj){
    var obj=document.getElementById(obj);
	obj.style.display=obj.style.display=="block"?"none":"block";
}

//初始化事件绑定
function int(){
	$("#status").html("");
	$('.div_topic').removeClass('odd');
	$('.div_topic:even').addClass('odd');
	$('.div_topic p').click(function(){
		if($(this).find('input[type="radio"]').val() != undefined){				
			$(this).find('input[type="radio"]').attr('checked','checked');				
			var name = $(this).find('input[type="radio"]').attr('name');//获得名称
			$('input[type="radio"][name="' + name + '"]').parents("p").removeClass('selected');
			$('input[type="radio"][name="' + name + '"]:checked').parents("p").addClass('selected');
		}
	});
	
	$("#check_answer").click(function(){
		$("#status").html("");
		$("h4").css("color","#22536A");						  
		var answer_this_tip,set_answer,_temp_tip;
		_temp_tip = "yes";
		
		var tall = 0;
		
		$(".div_topic").each(function(i){
			if($(this).find('input[type="radio"]:checked').val() == undefined){
				_temp_tip = "no";
				$(this).find("h4").css("color","green");
			}		
			tall++;
		});
		
		if(_temp_tip == "no"){
			$("#status").html("还有题目没完成！");
			return;
		}
		
		var err = 0;

$(".div_topic").each(function(i){
			answer_this_tip = $(this).find(".answer_this_tip").html();	
			set_answer = $(this).find('input[type="radio"]:checked').val();
			//$(this).find('input[type="radio"]').val() != undefined
			if(answer_this_tip != set_answer){
				$(this).find("h4").css("color","red");
				err++;
			}	
		});
		$("h4 span").show();
		
		$("#status").html("错误：" + err + "个！错误率：" + (err / tall * 100).toFixed(2) + "%");
	});

}

function set_str_len(str,len){
	str = str + "";
	var temp = "";
	for(i = 0; i < (len - str.length); i++){
		temp += "0";
	}
	
	return temp + str;
}

//随即返回一个范围的随机数
function Grandom(m,n){
	return Math.round(Math.random() * (n - m) + m);
}

function get_topic(_arr_topic,_topic_num){
	
	var _all_num, //总题目数
	_this_num, //总题随即一个数
	_topic, //题目
	_topic_temp, //临时题目
	_topic_str, //题目字符串
	i, //当前题目数
	
	_arr_answer,  //答案数组
	_arr_answer_length, //答案长度
	_this_answer_num, //答案随即一个数
	_temp_answer,  //临时答案
	_arr_answer_last, //最终答案数列
	_answer_last_str,//最终答案字符串
	_answer_str, //答案字符串
	_answer_tip, //答案前头的ABCD
	_answer_this_tip,//当前题目的答案
	_arr_answer_type;
	
	_all_num = _arr_topic.length;  //总题目数
	_arr_answer_last = new Array();//最终答案数列
	
	_topic_str = "";
	for(y = 0; y < _topic_num; y++){
		i = y + 1; //当前题目数
	
		_this_num = Grandom(0,(_arr_topic.length - 1)); //随即一个数
		
		_topic_temp = _arr_topic.splice(_this_num,1);
		_topic = _topic_temp[0][0]; //题目

_arr_answer = _topic_temp[0][1];//答案数组

_arr_answer_length = _arr_answer.length; //答案长度
		
		//获得答案字符串 begin  _answer_str  _answer_this_tip
		_answer_str = "";
		if(_arr_answer_length == 4){		
			for(j = 0; j < 4; j++){
				try{
					_this_answer_num = Grandom(0,(_arr_answer.length - 1));
					_temp_answer = _arr_answer.splice(_this_answer_num,1);
		
					switch (j) {
					   case 0 :
						   _answer_tip = "A";break;
					   case 1 :
						   _answer_tip = "B";break;
					   case 2 :
						   _answer_tip = "C";break;
					   case 3 :
						   _answer_tip = "D";break;
					}
					
					if(_temp_answer[0][1] == "yes"){
						_answer_this_tip = _answer_tip;				
					}
		
					_answer_str += '<p><input name="topic' + i + '" type="radio" value="' + _answer_tip + '">' + _answer_tip + '、' + _temp_answer[0][0] + '</p>';
				}catch(e){
					alert(e);
				}
			}
			
		}else{
			try{
				if(_arr_answer[0][1] == "yes"){_answer_this_tip = "A";}
				if(_arr_answer[1][1] == "yes"){_answer_this_tip = "B";}
				
				_answer_str = '<p><input name="topic' + i + '" type="radio" value="A">A、' + _arr_answer[0][0] + '</p><p><input name="topic' + i + '" type="radio" value="B">B、' + _arr_answer[1][0] + '</p>';
	    	}catch(e){
				alert(e);
			}
		}
		
		_arr_answer_last.push(_answer_this_tip);
		//获得答案字符串 end
		
		//组合题目字符串 begin
		_topic_str = '<div id="topic' + i + '" class="div_topic"><h4>' + i + '、' + _topic + '<span>答案：<span class="answer_this_tip">' + _answer_this_tip + '</span></span></h4>' + _answer_str + '</div>';
		
		$(_topic_str).appendTo("#topic_all"); 
		//组合题目字符串 end
	}
	
	//组合last答案字符串 begin _arr_answer_last _answer_last_str
	
	var _answer_last_str = "";
	
	var tap10 = 1;
	
	var _answer_all_num =  _arr_answer_last.length;
	
	for(z = 0; z < _answer_all_num; z++){
		y = z + 1;
		
		if(y == 1){
			if(_answer_all_num == 1){
				_answer_last_str = '<p>001'
				_answer_last_str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>'
			}else{
				_answer_last_str = '<p>001-';
				if(_answer_all_num <= 10){
					_answer_last_str += set_str_len(_answer_all_num,3) + ' <b>';
					
				}else{
					_answer_last_str += '010 <b>';
				}
			}
		}
		
		if(y%10 == 0){
			if(_answer_all_num > 10 && y < _answer_all_num){

_answer_last_str += '</b></p>\n';
				_answer_last_str += '<p>' + set_str_len((tap10 * 10 + 1),3);
			
				if((tap10 * 10 + 1) == _answer_all_num){
					_answer_last_str += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>'
					
				}else if(_answer_all_num < ((tap10 + 1) * 10)){
					_answer_last_str += '-' + set_str_len(_answer_all_num,3) + ' <b>';
					
				}else{
					_answer_last_str += '-' + set_str_len(((tap10 + 1) * 10),3) + ' <b>';
					tap10++;
				}
			}			
			
		}else if(y%5 == 0){
			_answer_last_str += _arr_answer_last[z] + " ";
		}else{
			_answer_last_str += _arr_answer_last[z];
		}

}
	
	_answer_last_str += '</b></p>\n';
	
	$("#answer_last").html("");
	$("#answer_last").hide();
	//组合last答案字符串 end
	$("#answer_last").html(_answer_last_str);

}

$(document).ready(function(){
	$("#topic_all_num").html(arr_topic.length);

$("#get_topic").click(function(){
		$("#status").html("");
		if($("#topic_all").html() != ""){
			if(!confirm("是否要重新出题？")){
				return;
			}else{
				$("#topic_all").html("");
			}
		}
		
		var topic_num = $("#topic_num").val();
		
		if(isNaN(topic_num)){
			$("#topic_num").val("100");
		}else{
			if(topic_num <= 0){
				$("#topic_num").val("100");
			}
			
			if(topic_num > arr_topic.length){
				$("#topic_num").val(arr_topic.length);
			}
		}
		
				
		
		topic_num = $("#topic_num").val();
		
		get_topic(arr_topic,topic_num);
		int();

});
});

</script>
</head>
<body>
<div id="fixedLayer"><div>
	<p><span id="topic_right">
	<input name="show_answer" id="show_answer" type="button" value=" 答案 " onclick='$("#answer_last").toggle();'/> 
	<input name="check_answer" id="check_answer" type="button" value=" 算分 "/></span>
	您的题库一共有<span id="topic_all_num"></span>道题，您要做其中<input name="topic_num" type="text" id="topic_num" value="100" />道。<input name="get_topic" id="get_topic" type="button" value=" 出  题 "/> <span id="status"></span></p>
	
</div>
</div>
<br/>
<br/>
<br/>
<div id="topic_all"></div>
<div id="answer_last"></div>
</body>
</html>

预览效果复制代码保存代码提示：可以先修改部分代码后再运行

JS版在线考试程序-示例，帮老婆单位写的，还不算太完善，不过对学习是相当有用处的，所以分享给大家吧。这仅是一个示例，中间去掉了一些试题，因为文件太大，影响加载，需要试题的话，JS数组是有规律的，自己按规律添加即可。

上一个素材：js实现checkbox全选 下一个素材：点击按钮复制各种内容