计算机的普及以及互联网的飞速发展,让越来越多的人接触到了网络。许多人利用它来学习,因为在网络发展的今天,各种专业的相关资料几乎都能在网上索取到。网络教育已经相当普及了,上网络大学也不是什么新鲜事了。许多人在网上建起了教学网站,网站中除了丰富的教学资料,练习题、模拟题肯定也是必不可少的。利用网络学习方式的开放性、灵活性,网站可以制作出在线测试系统,让学习者能够很方便的了解到自己的学习情况。下面的这个例子,就是通过JavaScript制作出的一个简单的在线测试题(图1),试题答完后,能根据答题者所选答案,给出相应的成绩并公布答错题的正确答案(图2)。
![](http://pubimage.360doc.com/wz/default.gif)
图1
![](http://pubimage.360doc.com/wz/default.gif)
图2
制作方法如下:
第1步、把如下代码加入<head>区域中。
<script language="JavaScript">
var Total_测试题 = 4 // 修改这里与题目数量一致。
var msg = ""
// 正确答案。
var Solution = new Array(Total_测试题)
Solution[0] = "TCP/IP"
Solution[1] = "集线器"
Solution[2] = "SUN"
Solution[3] = "Microsoft"
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>测验成绩报告</TITLE></HEAD><BODY>"
var Percent = "<H2>测验成绩 : "+Math.round(correct/Total_测试题*100)
+ "分</H2><HR>"
lastscore=Math.round(correct/Total_测试题*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 = "" //清空msg
}
function Grade()
{
var correct = 0
var wrong = 0
for (number=0; number < Total_测试题; number++)
{
var form = document.forms[number] // 测试题 #
var i = GetSelectedButton(form.q1)
if (form.q1[i].value == "1")
{ correct++ }
else
{ wrong++
msg += "测试题 "+(number+1)+"."
+Solution[number]+"<BR>"
}
}
ReportScore(correct)
}
</script>
第2步、把如下代码加入<body>区域中。
<table width="75%" border="0" align="center">
<tr>
<td>
<form><center>
网络测试题</center><p>
(1)Internet上使用的网络协议是:__________
<br>
<input type="radio" name="q1" value="0" checked>X.25
<input type="radio" name="q1" value="1">TCP/IP
<input type="radio" name="q1" value="0">NetBEUI
<br><br> </form>
<form>
(2)HUB是指:__________
<br>
<input type="radio" name="q1" value="0" checked>网桥
<input type="radio" name="q1" value="1">集线器
<input type="radio" name="q1" value="0">网关
<input type="radio" name="q1" value="0">路由器
<br><Br> </form>
<form>
(3)JAVA是哪个公司的产品:__________
<br>
<input type="radio" name="q1" value="0" checked>Novell
<input type="radio" name="q1" value="0">Microsoft
<input type="radio" name="q1" value="1">SUN
<br><Br> </form>
<form>
(4)IIS(Internet Information Server)是哪个公司的产品:__________
<br>
<input type="radio" name="q1" value="0" checked>Novell
<input type="radio" name="q1" value="1">Microsoft
<input type="radio" name="q1" value="0">Netscape
<br><Br> </form>
<form>
<div align="center">
<input type="button" name="Submit" value="交答卷"
onClick="Grade()" class="pt9">
</div>
</form>
</td>
</tr>
</table>
下面的这个例子只有4道题目,如果你想增加题目的话,先把第二行的
“var Total_测试题 =4”中的“4”改为你增加题目后题目的总数。然后,从程序
的第六行开始输入各题的正确答案,格式为:
Solution[题目序号值减1] = "在此输入该题的正确答案"
如果是第1题,中括号内就是0,如果是第100题,中括号中就应输入99。添加题目
是从上述第2步第7行程序开始的,格式为:
(在此输入题目序号)在此输入测试题目:__________
<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>
错误选项前的“value”值为0,正确选项前的“value”值为1。