<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>在线考试</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
</head>
<body>
<input id="qid" type="hidden"/>
<div id="ques"></div>
<div id="ans"></div>
<br/>
</body></html>
<script>
var qest_list = [{"qid":1,"ques":"第1题题目","ans":["a","b","c","d"],"right":"a"},{"qid":2,"ques":"第2题题目","ans":["a","b","c","d"],"right":"b"},{"qid":3,"ques":"第3题题目","ans":["a","b","c","d"],"right":"c"},{"qid":4,"ques":"第4题题目","ans":["a","b","c","d"],"right":"d"}];
var idx = 0, score = 60;
loadQues(idx);
//根据数组下标取得问题信息
function loadQues(idx){
var qid = qest_list[idx].qid;
var ans = qest_list[idx].ans;
var right = qest_list[idx].right;
var ques = qest_list[idx].ques;
$("#qid").val(qid);//问题id
$("#ques").html(ques);
var html = "";
$(ans).each(function(){
html += '<span style="cursor:pointer"><input οnclick="chk()" name="ans" type="radio" value='+this+'><span οnclick="clk(this)">'+this+'</span></span>';
});
//alert(html);
$("#ans").html(html);
}
function clk(obj){
var inp = $(obj).parent().find("input")[0];
var ck = $(inp).prop("checked");
if(ck==true){
$(inp).prop("checked",false);
}else{
$(inp).prop("checked",true);
}
chk();
}
//判断是否正确
function chk(){
var rdoVal = $("input[type=radio]:checked").val();
var qid = $("#qid").val();
if(qest_list[idx].right==rdoVal){
score --;
alert('还差'+score+'分及格');
}else{
alert('正确答案是'+qest_list[idx].right);
}
//进入下一题
if(idx < qest_list.length-1){
idx ++;
loadQues(idx);
}
}
</script>