用html做一个选择题考试系统

十个选择题,五个单选,五个多选!点击交卷后可以提交显示所选答案~~~ 求大神帮忙~~~~

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>多项选择题</title>
<style type="text/css">
label{background:#ccffff;}
</style>
</head>
<body>
<h1>测试题</h1><hr>
<h2>一、单项选择题</h2>
<div id="dan1">
<p>1.世界上谁最帅?</p>
<p><input type="radio" id="dA1" name="dan1"><label for="dA1">A.李小龙</p>
<p><input type="radio" id="dB1" name="dan1"><label for="dB1">B.李连杰</p>
<p><input type="radio" id="dC1" name="dan1"><label for="dC1">C.陈小春</p>
<p><input type="radio" id="dD1" name="dan1"><label for="dD1">D.刘德华</p>
<input type="button" value="提交答案" onclick="dan1_answer()"><hr>
<span id="d1_tetion"></span>
</div>
<div id="dan2">
<p>2.世界上谁最帅?</p>
<p><input type="radio" id="dA2" name="dan2"><label for="dA2">A.李小龙</p>
<p><input type="radio" id="dB2" name="dan2"><label for="dB2">B.李连杰</p>
<p><input type="radio" id="dC2" name="dan2"><label for="dC2">C.陈小春</p>
<p><input type="radio" id="dD2" name="dan2"><label for="dD2">D.刘德华</p>
<input type="button" value="提交答案" onclick="dan2_answer()"><hr>
<span id="d2_tetion"></span>
</div>
<div id="dan3">
<p>3.世界上谁最帅?</p>
<p><input type="radio" id="dA3" name="dan3"><label for="dA3">A.李小龙</p>
<p><input type="radio" id="dB3" name="dan3"><label for="dB3">B.李连杰</p>
<p><input type="radio" id="dC3" name="dan3"><label for="dC3">C.陈小春</p>
<p><input type="radio" id="dD3" name="dan3"><label for="dD3">D.刘德华</p>
<input type="button" value="提交答案" onclick="dan3_answer()"><hr>
<span id="d3_tetion"></span>
</div>
<div id="dan4">
<p>4.世界上谁最帅?</p>
<p><input type="radio" id="dA4" name="dan4"><label for="dA4">A.李小龙</p>
<p><input type="radio" id="dB4" name="dan4"><label for="dB4">B.李连杰</p>
<p><input type="radio" id="dC4" name="dan4"><label for="dC4">C.陈小春</p>
<p><input type="radio" id="dD4" name="dan4"><label for="dD4">D.刘德华</p>
<input type="button" value="提交答案" onclick="dan4_answer()"><hr>
<span id="d4_tetion"></span>
</div>
<div id="dan5">
<p>5.世界上谁最帅?</p>
<p><input type="radio" id="dA5" name="dan5"><label for="dA5">A.李小龙</p>
<p><input type="radio" id="dB5" name="dan5"><label for="dB5">B.李连杰</p>
<p><input type="radio" id="dC5" name="dan5"><label for="dC5">C.陈小春</p>
<p><input type="radio" id="dD5" name="dan5"><label for="dD5">D.刘德华</p>
<input type="button" value="提交答案" onclick="dan5_answer()"><hr>
<span id="d5_tetion"></span>
</div>
<h2>二、多项选择题</h2>
<div id="box">
<p>1.一栋房子由哪几部分组成?</p>
<p><input type="checkbox" id="A"><label for="A">A.地基与基础,主体结构,屋面工程</label></p>
<p><input type="checkbox" id="B"><label for="B">B.装饰装修、给排水及采暖工程</label></p>
<p><input type="checkbox" id="C"><label for="C">C.空调与通风工程</label></p>
<p><input type="checkbox" id="D"><label for="D">D.智能化建筑工程</label></p>
<p><input type="checkbox" id="E"><label for="E">E.电梯工程、电气工程、节能工程</label></p>
<input type="button" value="提交答案" onclick="answer()"><hr>
<span id="tetion"></span>
</div>
<div id="box2">
<p>2.一栋房子由哪几部分组成?</p>
<p><input type="checkbox" id="A2"><label for="A2">A.地基与基础,主体结构,屋面工程</label></p>
<p><input type="checkbox" id="B2"><label for="B2">B.装饰装修、给排水及采暖工程</label></p>
<p><input type="checkbox" id="C2"><label for="C2">C.空调与通风工程</label></p>
<p><input type="checkbox" id="D2"><label for="D2">D.智能化建筑工程</label></p>
<p><input type="checkbox" id="E2"><label for="E2">E.电梯工程、电气工程、节能工程</label></p>
<input type="button" value="提交答案" onclick="answer2()"><hr>
<span id="tetion2"></span>
</div>
<div id="box3">
<p>3.一栋房子由哪几部分组成?</p>
<p><input type="checkbox" id="A3"><label for="A3">A.地基与基础,主体结构,屋面工程</label></p>
<p><input type="checkbox" id="B3"><label for="B3">B.装饰装修、给排水及采暖工程</label></p>
<p><input type="checkbox" id="C3"><label for="C3">C.空调与通风工程</label></p>
<p><input type="checkbox" id="D3"><label for="D3">D.智能化建筑工程</label></p>
<p><input type="checkbox" id="E3"><label for="E3">E.电梯工程、电气工程、节能工程</label></p>
<input type="button" value="提交答案" onclick="answer3()"><hr>
<span id="tetion3"></span>
</div>
<div id="box4">
<p>4.一栋房子由哪几部分组成?</p>
<p><input type="checkbox" id="A4"><label for="A4">A.地基与基础,主体结构,屋面工程</label></p>
<p><input type="checkbox" id="B4"><label for="B4">B.装饰装修、给排水及采暖工程</label></p>
<p><input type="checkbox" id="C4"><label for="C4">C.空调与通风工程</label></p>
<p><input type="checkbox" id="D4"><label for="D4">D.智能化建筑工程</label></p>
<p><input type="checkbox" id="E4"><label for="E4">E.电梯工程、电气工程、节能工程</label></p>
<input type="button" value="提交答案" onclick="answer4()"><hr>
<span id="tetion4"></span>
</div>
<div id="box5">
<p>5.一栋房子由哪几部分组成?</p>
<p><input type="checkbox" id="A5"><label for="A5">A.地基与基础,主体结构,屋面工程</label></p>
<p><input type="checkbox" id="B5"><label for="B5">B.装饰装修、给排水及采暖工程</label></p>
<p><input type="checkbox" id="C5"><label for="C5">C.空调与通风工程</label></p>
<p><input type="checkbox" id="D5"><label for="D5">D.智能化建筑工程</label></p>
<p><input type="checkbox" id="E5"><label for="E5">E.电梯工程、电气工程、节能工程</label></p>
<input type="button" value="提交答案" onclick="answer5()"><hr>
<span id="tetion5"></span>
</div>
<script type="text/javascript">
function dan1_answer(){dan_answer("dA1","dB1","dC1","dD1","dan1","d1_tetion","A")}
function dan2_answer(){dan_answer("dA2","dB2","dC2","dD2","dan2","d2_tetion","B")}
function dan3_answer(){dan_answer("dA3","dB3","dC3","dD3","dan3","d3_tetion","B")}
function dan4_answer(){dan_answer("dA4","dB4","dC4","dD4","dan4","d4_tetion","C")}
function dan5_answer(){dan_answer("dA5","dB5","dC5","dD5","dan5","d5_tetion","C")}
function dan_answer(da,db,dc,dd,dan,d_tetion,pd){
var A=document.getElementById(da).checked;//alert(A);
var B=document.getElementById(db).checked;
var C=document.getElementById(dc).checked;
var D=document.getElementById(dd).checked;
var d_Rightanswer=pd;
var passW=saot(d_Rightanswer);//alert(passW);
var youW=saot([A,B,C,D]);//alert(youW);
var youD=transABCDE([A,B,C,D]);//你的答案
if(passW==youW){
document.getElementById(dan).innerHTML+="<style> #"+d_tetion+"{color:yellow;background:red;}</style>"
document.getElementById(d_tetion).innerHTML="你的答案:"+youD+"<br>---恭喜您,答对了!"; }else{
document.getElementById(dan).innerHTML+="<style> #"+d_tetion+"{color:red;background:#ccc;}</style>"
document.getElementById(d_tetion).innerHTML="你的答案:"+youD+"<br>---回答错误!正确答案是:"+d_Rightanswer
}
}
function answer(){answerALL("A","B","C","D","E","box","tetion","ABCDE")}
function answer2(){answerALL("A2","B2","C2","D2","E2","box2","tetion2","ABCDE")}
function answer3(){answerALL("A3","B3","C3","D3","E3","box3","tetion3","ABCDE")}
function answer4(){answerALL("A4","B4","C4","D4","E4","box4","tetion4","ABCDE")}
function answer5(){answerALL("A5","B5","C5","D5","E5","box5","tetion5","ABCDE")}
function answerALL(a,b,c,d,e,box,tetion,RT){
var A=document.getElementById(a).checked;
var B=document.getElementById(b).checked;
var C=document.getElementById(c).checked;
var D=document.getElementById(d).checked;
var E=document.getElementById(e).checked;
var arr=[A,B,C,D,E];
var youD=transABCDE(arr);//你的答案
var numA=saot(arr);
var Rightanswer=RT;//将正确答案填在这里
var numB=saot(Rightanswer);
if(numA==numB){
document.getElementById(box).innerHTML+="<style> #"+tetion+"{color:yellow;background:red;}</style>"
document.getElementById(tetion).innerHTML="你的答案:"+youD+"<br>---恭喜您,答对了!";
}else{
document.getElementById(box).innerHTML+="<style> #"+tetion+"{color:red;background:#ccc;}</style>"
document.getElementById(tetion).innerHTML="你的答案:"+youD+"<br>---回答错误!正确答案是:"+Rightanswer
}
}
function transAtoN(answer){//将正确答案字母组成的字符串转换成一串0和1的数字
var arr=answer;
var c=arr.split("");//分割字符串变成数组
//alert(c)
var num=0;
for(var i in c){
if(c[i]=="A" || c[i]=="a"){num+=10000;}
if(c[i]=="B" || c[i]=="b"){num+=1000;}
if(c[i]=="C" || c[i]=="c"){num+=100;}
if(c[i]=="D" || c[i]=="d"){num+=10;}
if(c[i]=="E" || c[i]=="e"){num+=1;}
}
return num;
}
function transBER(arr){//将在多项选择中获得的选择布尔值转换成一串0和1的数字
var num=0;
if(arr[0]){num+=10000}
if(arr[1]){num+=1000}
if(arr[2]){num+=100}
if(arr[3]){num+=10}
if(arr[4]){num+=1}
return num;
}

function saot(t){//合并布尔值和字符串转成数字,自动选择适应程序!
if(typeof t=="string"){
var geta=transAtoN(t);
return geta;
}else{
var getb=transBER(t);
return getb;
}
}
function transABCDE(arr){
var chara="";
if(arr[0]){chara+="A"}
if(arr[1]){chara+="B"}
if(arr[2]){chara+="C"}
if(arr[3]){chara+="D"}
if(arr[4]){chara+="E"}
return chara;
}
//alert(transABCDE([true,false,true]))
</script>
</body>
</html>
温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-09-24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<table>
<tr>
<td>
1.第2题...................
<input type="radio" value="a" name="t1"/>A
<input type="radio" value="b" name="t1"/>B
<input type="radio" value="c" name="t1"/>C
<input type="radio" value="d" name="t1"/>D
</td>
</tr>
<tr>
<td>
1.第2题...................
<input type="radio" value="a" name="t2"/>A
<input type="radio" value="b" name="t2"/>B
<input type="radio" value="c" name="t2"/>C
<input type="radio" value="d" name="t2"/>D
</td>
</tr>
<tr>
<td>
1.第3题...................
<input type="checkbox" value="a" name="t2"/>A
<input type="checkbox" value="b" name="t2"/>B
<input type="checkbox" value="c" name="t2"/>C
<input type="checkbox" value="d" name="t2"/>D
</td>
</tr>
</table>

</body>
</html>

自己改下就ok了追问

还要可以提交~ 就是所有的十个题目写完后要提交答案,提交后能显示自己所选的答案

追答

不知道你说的提交是提交到哪里?是提交后能看到答案就可以了,还是..

追问

嗯、、、就是做完后和交卷一样有个交卷的按钮!! 点完交卷自己弹出一个对话框或者另一个网页,显示出自己所选的答案。

追答

希望能满足你的要求

本回答被提问者采纳
第2个回答  2013-12-17
有现成的,凯文考试软件,买一个吧。软件不错,服务也很好。
第3个回答  2013-12-10
你去看一下表单的<input>标签文档简简单单分分钟搞定