2012-11-09 来源:网络
【实例名称】
JS代码编写在线考试(二)
【实例描述】
在线考试有很多种方法实现,本例通过一个包含正确答案的数组判断用户选择的答案与数组内容是否匹配,实现最终的考试效果。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="JavaScript"> var Total_Question = 4 // 考题的数量 var msg = "" // 正确答案-保存在数组中 var Answer = new Array(Total_Question) Answer[0] = "TCP/IP" Answer[1] = "网关" Answer[2] = "Microsoft" Answer[3] = "网络信息服务" function GetSelectedButton(ButtonGroup)//获取用户的选择 { for (var x=0; x < ButtonGroup.length; x++) if (ButtonGroup[x].checked) return x return 0 }
function ReportScore(correct) //显示最终的考试结果 { var SecWin = window.open("","scorewin","scrollbars,width=300,height=220") var MustHave1 = "<HTML><HEAD><TITLE>测验成绩报告-学无忧(www.xue51.com) </title></HEAD><BODY>" var Percent = "<H2>测验成绩 : "+Math.round(correct/Total_Question*100) + "</H2><HR>" lastscore=Math.round(correct/Total_Question*100) if (lastscore == "100"){ msg = MustHave1 +Percent + "<font color='red'>恭喜,全部答对了!</font> <p>" + msg + "<input type='button' value='close' onclick=javascript:window.close()></BODY></HTML>"} else { msg = MustHave1 +Percent + "<font color='red'>正确答案:</font> <p>" + msg + "<input type='button' value='close' onclick=javascript:window.close()></BODY></HTML>" } SecWin.document.write(msg) //输出提示信息 msg = "" //清空信息提示 }
function Score() { var correct = 0 var wrong = 0 for (number=0; number < Total_Question; number++) { var form = document.forms[number] // 循环获取每一个问题 var i = GetSelectedButton(form.q1) //获取问题中的选择项 if (form.q1[i].value == "1") //如果选择1,表示选择正确 { correct++ } else { wrong++ //错误的变量+1 msg += "Question "+(number+1)+"." +Answer[number]+"<BR>" } } ReportScore(correct) //输出最终结果
} </script>
</head> <body> <table width="75%" border="0" align="center"> <tr> <td> <form> 三个非常简单的问题:<p> (1)Internet上使用的网络协议是:__________ <br> <input type="radio" name="q1" value="0" checked>FTP <input type="radio" name="q1" value="1">TCP/IP <input type="radio" name="q1" value="0">HTTP <br><br> </form>
<form> (2)GateWay是指:__________ <br> <input type="radio" name="q1" value="0" checked>网桥 <input type="radio" name="q1" value="0">集线器 <input type="radio" name="q1" value="1">网关 <input type="radio" name="q1" value="0">路由器 <br><Br> </form>
<form> (3)ASP.NET是哪个公司的产品:__________ <br> <input type="radio" name="q1" value="0" checked>IBM <input type="radio" name="q1" value="1">Microsoft <input type="radio" name="q1" value="0">SUN <br><Br> </form>
<form> (4)IIS(Internet Information Server)的中文是:__________ <br> <input type="radio" name="q1" value="0" checked>在线网站管理 <input type="radio" name="q1" value="1">网络信息服务 <input type="radio" name="q1" value="0">网络虚拟路由器 <br><Br> </form>
<form> <div align="center"> <input type="button" name="Submit" value="看看成绩" onClick="Score()" class="pt9"> </div> </form> </td> </tr> </table> </body> </html>
【运行效果】
【难点剖析】
本例的重点是将考题答案保存在一个数组“Answer”中,其目的是当用户选择错误时给出正确的答案。判断用户选择是否错误,是通过判断单选框的返回值,如果为“1”则表示选择正确。如果选择错误,通过“Answer[索引],,的方式获取正确的答案。
【源码下载】
为了JS代码的准确性,请点击:在线考试JS代码(二) 进行本实例源码下载