基于JavaScript和XML的学生课堂练习评价系统的实现

在广东省教育出版社2010年出版的普通高中信息技术教材配套光盘中，提供了丰富的教学素材，内容包括“精讲视频”、“操作示范”、“精练评价”、“作品素材”四个部分。其中“精练评价”提供了各章节课堂练习以及模块测验，并有检测功能。然而研究发现这些评价网页都是把题目、答案、评价程序放在同一个网页里面，非常不便于维护。各个模块的评价网页的程序写得也不一样，没有统一的规范，将来若要更新比较困难。本文介绍使用JavaScript和XML结合来编写具有统一模板的评价模块，网页结构一样的，数据存储在XML文件中，一个新的评价网页只需要构建一个XML数据文件就行了，非常便于维护和更新。

一、XML特性

XML（Extensible Markup Language，可扩展标记语言）是一门创建结构化数据的技术。结构化也就是说存储了数据和关于数据含义的信息。XML文件其实是一个文本文件，可以使用任何文本编辑器（比如Windows的记事本）来读取和编辑XML文件。下面我们来看一下本评价系统中的XML文件的数据定义。

1

单选题

以下工具哪个不属于音频信息采集、加工的工具？

录音机

超级音频解霸

Photoshop

GoldWave

C

在这段XML中，定义了章节名称、题目，以及题目的标号、类型、考题的标题、可选项目和正确答案。如果要插入更多的题目，只需要按照定义的规范添加节点以及其下的子节点就可以了。

虽然都是存储数据，但XML与数据库又有所不同，前者的优点在于简单易用，仅仅是表现数据。正是这个优点使XML很快成为数据交换的唯一公共语言。如今所有操作系统和程序几乎都支持XML语言。

上面XML中的所有标记都是自定义的，不像其他语言有统一的规范。这也正体现了XML语言的可扩展性特点，可以按照自己的需要来定义标记语言。

二、JavaScript特性

JavaScript产生的目的最初是为了服务器端速度的问题，如数据验证等，可以留到客户端浏览器上来验证。后来广泛运用于Internet网页制作上来开发交互式网页，JavaScript的出现使得网页和用户之间实现了一种实时的、动态的、交互性的关系。

如今JavaScript随着Web2.0时代的发展已经在互联网应用中占据重要的地位，时下流行的Ajax无刷新技术就是依托JavaScript对服务器端以XML的形式进行异步读取来实现的。

三、评价系统中用JavaScript解析XML

利用JavaScript解析XML主要是通过XMLDOM来进行的。首先创建XMLDOM对象，加载XML文件到XMLDOM对象中，之后就可以通过XMLDOM一些属性和方法来对XML进行解析。下面是JavaScript读取XML的方法。

1.创建XMLDOM对象

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="false";

2.加载XML文件

xmlDoc.load("Data.xml");

3.获取XML文件的节点信息

比如要读取章节名称，它属于XML文件定义中的父级，方法是：var ChapterName=

xmlDoc.getElementsByTagName("Modules/Chapter")[0].getAttribute('name');

如果要将名字显示到网页里面，那就纯粹是JavaScript的事：document.getElementById

("ChapterName").innerText=ChapterName;

这是将章节名通过JavaScript显示在网页中一个名叫ChapterName的div元素中。

4.利用JavaScript显示XML文件中的数据

每个章节有很多题目，如单选题、多选题、判断题等，这些题目在XML文件里属于节点Chapter Name的子节点，因此可以采用获取XMLDOM子节点集的方法来获取所有子节点，之后循环处理每个节点。方法如下：

获取子节点集

var nodes=xmlDoc.getElementsByTagName("Modules/Chapter")[0].childNodes;

获取子节点个数

var l=nodes.length;

循环处理

for(var i=0; i

{

在网页里创建一个div元素，把题目附加到网页里面。

var divTitle=document.createElement('div');

divTitle.id=nodes(i).selectNodes("ID")(0).text;

把题目序号和题目名称添加到这个div元素里，就可以在网页里显示。

divTitle.innerHTML=nodes(i).selectNodes("ID")(0).text + "." + nodes(i).selectNodes

("Title")(0).text;

根据类别追加到各个类别下，同时把备选答案也追加到题目下，下面仅列出“单选题”的程序段。

if (nodes(i).selectNodes("Type")(0).text == "单选题")

{

将题目标题显示在名为danxuan的页面元素div里。

var itemtype=document.getElementById("danxuan");

itemtype.appendChild(divTitle);

获取答案节点集，再按照循环显示在页面中，方法和上面类似。

var nodeAnswers=nodes(i).selectNodes("Answers")(0).childNodes;

for(var j=0;j

{

var divAnswer=document.createElement("div");

这里用JavaScript函数String.fromCharCode来显示答案选项中的ABCD字母。

divAnswer.innerHTML="" + String.fromCharCode(65+j) + "." + nodeAnswers(j).text;

本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文

itemtype.appendChild(divAnswer);

}

在标题后插入标记，如果答案不正确，就显示在这个标记里。

divTitle.insertAdjacentHTML("beforeEnd","

");

}

}

四、用JavaScript处理评价过程

判断练习结果的方法主要是使用JavaScript来实现。首先也要使用XMLDOM对象来获取每个题目的正确答案，学生提交的答案存放在数组里，再利用JavaScript来循环判断。核心程序如下：

for (var i=0;i

{

var rightAnswer=document.getElementById("rightAnswer"+i);

answer[i]="";

obj=document.getElementsByName("Answer"+i);

把做的答案放在数组answer里

for(var j=0;j

{

if(obj[j].checked)

answer[i]+=obj[j].value;

}

检查答案是否正确

if(nodes(i).selectNodes("RightAnswer")(0).text!=answer[i])

{

hasError=true;

rightAnswer.innerHTML="正确答案是："+nodes(i).selectNodes("RightAnswer")

(0).text;

}

}

if (hasError==false)

var s=alert("恭喜你，全答对了！");

JavaScript不用服务器支持的脚本语言，不用安装服务器组件，它所嵌入的网页可直接在客户端运行。XML是结构化很强的标记语言，也具有很强的扩展性，使用也很简单，在现在网络数据交换中应用很广泛。将二者合理地结合起来制作学生课堂练习评价系统，既能实现客户端的交互性，也能实现数据的迁移，便于数据更新维护。

参考文献

[1]JavaScript百度百科：baike.省略/view/16168.htm?fr=ala0_1_1.

[2]XML百度百科：baike.省略/view/16168.htm?fr=ala0_1_1.

[3][美]Peter G.Aitken著，谢君英译．微软XML技术指南[M].北京：中国电力出版社，2003.

本文为全文原貌 未安装PDF浏览器用户请先下载安装 原版全文