jQuery单选题答题源代码下载

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery单选题答题源代码下载的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=utf-8" />
<title>jQuery单选题答题源代码下载</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/questions.js"></script>
<link type="text/css" rel="stylesheet" href="css/questions.css" />
</head>
<body>
<br>
<div class="QBox">
	<div>
		<div class="ques1 ques">
			<p>1.求出35/5*32=?</p>
			<ul class="ops">
				<li><input type="radio" value="1" name="t1"/><label>A.214</label></li>
				<li><input type="radio" value="2" name="t1"/><label>B.224</label></li>
				<li><input type="radio" value="3" name="t1"/><label>C.234</label></li>
				<li><input type="radio" value="4" name="t1"/><label>D.244</label></li>
			</ul> 
		</div>
	
		<div class="ques2 ques">
			<p>2.求出35/5*30=?</p>
			<ul class="ops">
				<li><input type="radio" value="1" name="t2"/><label>A.210</label></li>
				<li><input type="radio" value="2" name="t2"/><label>B.224</label></li>
				<li><input type="radio" value="3" name="t2"/><label>C.234</label></li>
				<li><input type="radio" value="4" name="t2"/><label>D.244</label></li>
			</ul> 
		</div>
	
		<div class="ques3 ques">
			<p>3.求出35/7*32=?</p>
			<ul class="ops">
				<li><input type="radio" value="1" name="t3"/><label>A.214</label></li>
				<li><input type="radio" value="2" name="t3"/><label>B.224</label></li>
				<li><input type="radio" value="3" name="t3"/><label>C.160</label></li>
				<li><input type="radio" value="4" name="t3"/><label>D.244</label></li>
			</ul> 
		</div>
	
		<div class="ques4 ques">
			<p>4.求出30/5*32=?</p>
			<ul class="ops">
				<li><input type="radio" value="1" name="t4"/><label>A.214</label></li>
				<li><input type="radio" value="2" name="t4"/><label>B.224</label></li>
				<li><input type="radio" value="3" name="t4"/><label>C.234</label></li>
				<li><input type="radio" value="4" name="t4"/><label>D.192</label></li>
			</ul>  
		</div>
	</div>
	<a class="nextQues" >下一题</a>
</div>
</body>
</html>

JS代码(questions.js):

// JavaScript Document$(function(){
	var i=0;
	var n=$('.ques').size();
	var lists=$('.ques');
	var myansewr=[];
	var trueanswer=[1,2,3,4];
	lists.hide();
	lists.first().show();
	$('.nextQues').click(function(){
	var flag=0;
	if(i==0){
	var flag=0;
	var obj1=document.getElementsByName('t1');
	for(var k=0;
	k<obj1.length;
	k++){
	if(obj1[k].checked){
	flag=1;
	var a1=obj1[k].value;
	myansewr.push(k+1);
	alert(obj1[k].value);
}
}
if( flag==0){
	i--;
	alert("请选择");
}
}
if(i==1){
	var flag=0;
	var obj2=document.getElementsByName('t2');
	for(var k=0;
	k<obj2.length;
	k++){
	if(obj2[k].checked){
	myansewr.push(k+1);
	var a2=obj2[k].value;
	alert(obj2[k].value);
	flag=1;
}
}
if(flag==0){
	i--;
	alert("请选择");
}
}
if(i==2){
	var flag=0;
	var obj3=document.getElementsByName('t3');
	for(var k=0;
	k<obj3.length;
	k++){
	if(obj3[k].checked){
	flag=1;
	var a2=obj3[k].value;
	myansewr.push(k+1);
	alert(obj3[k].value);
}
}
if(flag==0){
	i--;
	alert("请选择选项");
}
}
if(i==n-1){
	var flag=0;
	var obj4=document.getElementsByName('t4');
	for(var k=0;
	k<obj4.length;
	k++){
	if(obj4[k].checked){
	var a4=obj4[k].value;
	alert(obj4[k].value);
	myansewr.push(k+1);
	flag=1;
}
}
if(flag==0){
	i--;
	alert("请选择选项");
}
$('.nextQues').text("提交");
	if($('.nextQues').text()=="提交"){
	$('.nextQues').click(function(){
	alert("你的答案是："+myansewr);
	if(myansewr.toString()==trueanswer.toString()){
	alert("恭喜全部答对");
}
else{
	alert("Be more careful!");
}
}
)}
}
i++;
	lists.eq(i).show();
	lists.eq(i).siblings().hide();
}
)}
)

CSS代码(questions.css):

@charset "utf-8";/* CSS Document */
*{padding:0px;margin:0px;}
ul,li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;cursor:pointer;}
body{line-height:1.5em;}
/*question*/
.ques{width:300px;margin:0px auto;background:#BFFFFF;padding:10px;height:150px;overflow:hidden;}
.ques p{font-weight:bold;}
.ques .ops{padding:15px;}
.nextQues{background:#9E9E9E;border:#666666;color:#333333;display:block;padding:3px;text-align:center;font-weight:bold;width:310px;margin:0px auto;}

附件:下载该文件资源,减少时间成本(增值服务)