英语四六级自适应学习系统试卷输出的实现
时间：2019-01-14 03:30:00 来源：雅意学习网 本文已影响 人 
【摘要】主要讨论了在基于网络的英语四六级自适应学习系统中，通过 XSLT 转换 XML 格式的学习内容实现试卷的动态 输出，利用 JavaScript 脚本语言和 AJAX 技术改进试卷的交互性和功能，从而使试卷输出更加灵活，使用更加方便。
【关键词】试卷；输出；XSLT；JavaScript；AJAX
【中图分类号】G434 【文献标识码】B 【论文编号】1009―8097（2009）01―0113―03
一 引言
计算机、网络和多媒体等信息技术的发展及其在教育中的应用，促使远程教育在世界范围内展开。随着远程教育的 发展，出现了一些比较突出的问题：如何使学习者正确评价 自己的能力并在浩瀚的学习资源中找到适应自己学习能力和 学习风格的教学内容，如何使学习者在学习过程中得到及时 的反馈并能根据其调整自己的学习策略等[1]。为了解决这些问 题，自适应的学习系统成为流行的趋势，作为一种“以学习 者为主体”的个别化的学习者自我监控自我适应的学习系 统，能很好的解决上述问题。
在自适应学习系统中，“试卷”输出是系统中很重要的 一个功能。这里的“试卷”是指在学习者接受能力测试或者 进行练习时，系统将测试内容或者学习内容以试卷的样式在 浏览器上呈现的网页内容。试卷的输出承担了收集用户学习 信息，优化系统交互性，向用户呈现知识点和反馈学习结果 的功能。目前现有类似系统的试卷输出，有的以固定的网页形 式呈现，有的虽然能动态呈现内容，但交互性较差，不能很好 地提供对学习者学习内容的查询以及学习结果的反馈等。
作者所在课题组在研发大学英语四、六级自适应学习系统时 对试卷输出的改善进行了尝试。本文主要讨论基于 XSLT 语言 将XML 保存的学习内容动态地输出成试卷，以及利用 JavaScript 脚本语言和 AJAX 技术改进交互性和功能的过程和实现。
二 基于 XML 的试卷输出实现
XML 有允许数据再利用，内容与样式分离，以及在应用 程序间传递数据的众多优点，我们选择用 XML 保存学习内容[2]。
XSLT 提供一套规则，用于将一组元素描述的 XML 数据 转换成另一组元素描述的文档，或者甚至是将该数据转换为 一种自定义的文本格式。XSLT 通常用于将 XML 文档转换为 HTML，目的是可以在浏览器中进行显示[3]。图 1 显示了这个 转换过程。
下面将讨论利用 XSLT 将 XML 输出成网页的具体实现过程。
1试卷的 XML 结构
一般的英语试卷总结起来可以分为四个层次，paper，part，section，item。Paper对应试卷，由几个 part 组成，每个 part 由若干 section 组成，每个 section 包括若干的 item。在本学习 系统中，保存在数据库中的是单个的题目，对应 item 层次。 在输出成网页试卷之前，我们要先从数据库中根据试卷策略 选出对应的题目，然后组成一份整个试卷所对应的 XML，试 卷的具体 XML 结构如下：
＜paper name=”papername” ＞
＜part type=”parttype” id=”partid”＞
＜section type=”sectiontype” id=”sectionid”＞
＜item id=”1”＞
…..
＜/item＞
＜item id=”2”＞
…..
＜/item＞
…..
＜/section＞
…..
＜/part＞
……
＜/paper＞
保存在数据库中的 item 也是以 XML 的形式，这样既利 于数据的传输，也利于试卷 XML 的生成。
2试题 XML 结构的一些特殊情况
上面给出的只是 item 的一般的 XML 结构，对于比较复 杂的题型，需要添加一些额外的标记。例如，选词填空这类 题型，要保存给出的词语，我们必须要添加一个节点
＜wordlist＞
＜word＞…＜/word＞
＜word＞…＜/word＞
….
＜/wordlist＞
题目有时候会缺少一些基本的节点，比如 compound listening 这类题型，按照 item 的基本结构就只有 content 节点 有内容，这时候要输出小题号就比较困难，因为一般的方法 是根据 question 节点的 id 来输出的，另外结合一般试卷都有 斜体、粗体以及下划线的需求，我们定义了一组标记，来确 定什么时候需要输出这些内容或者格式。比如标记（#aaa#）， 表示将内容“aaa”加下划线输出。
3 XSLT 样式表的基本结构
＜xsl:stylesheet＞
＜xsl:template match=”/”＞
＜xsl:for-each select=” /paper/part”＞
＜xsl:if test=./@type=’parttype’＞
＜xsl:call-template name=”parttypetemplate”/＞
＜/xsl:if＞
……
＜/xsl:for-each＞
＜/xsl:template＞
整个样式表对应试卷的 XML 结构分为三个层次，最外层 为一个模板，匹配整个 XML 文档，内层每个 part 对应一个模 板。同时 part 内又包含几个 section，每个 section 又对应一个 模板，part 的模板基本结构如下：
＜xsl:template name="parttypetemplate "＞
＜xsl:for-each select="./section"＞
＜xsl:if test="./@type="sectiontype""＞
＜xsl:call-template name=”sectiontypetemplate”/＞
＜/xsl:if＞
……
＜/xsl:for-each＞
＜/xsl:template＞
Section 层次对应基本的题型，所以这种结构可以保证如 果出现新的题型，添加一个新的 section 模板就可以了。
三 利用 JavaScript 和 Ajax 改进交互性和功能
1 part 与 section 的可折叠。
一般来说试卷的内容会很多，如果不分页，将导致一页过长。如果我们可以按照 part， section 的分层将内容进行区 域折叠，用户可以方便的折叠起不相关的内容，从而很容易 找到需要的内容。这个功能主要用到 CSS 的 display 属性，当 display 属性设置为 none 时，页面元素被从页面流中移除，就 像这个元素不存在一样。利用这个特性，我们为每个 part 设 计对应两个 div 元素。div1 用来显示 part 标题，div2 用来显 示 part 的内容，只需在样式表中为 div1 的 onclick 事件赋如下 函数就可以实现 part 内容的折叠了（Section 的处理同 part）：
Function toggle(sDivId){
Var oDiv=document.getElementById(sDivId);
oDiv.style.display=(oDiv.style.display==”none”) ? ”block” : ”none”;}
2试卷字体颜色的自定义
在电脑上作练习这种需要聚精会神，仔细盯着屏幕的事情比较伤害眼睛。实验心理学表明有几种颜色对保护视力较 好，如果我们可以让用户自己选择这些比较适合的颜色，可 以更有益用户的学习效果，这样，只需实现下面的函数即可， 这样的函数虽然很简单，但是作用却是很重要的。
function changeColor(sDivId,sColor){
var oDiv=document.getElementById(sDivId);
oDiv.style.color=sColor;}
3调整试卷内容的显示行距以及文字间隔
可能很多人都有过这种经验：觉得试卷的文字间隔太挤看着不舒服，或者行距又太宽，有时候跳行找错了行。人人 都有自己的阅读习惯，可能我们开发人员习惯的不一定就适 合用户的，而用户千差万别，要统一一种样式也是不实际的， 所以让用户能自己调整适合自己的行距和文字间隔也是不错 的想法，其行距的调整只需如下的函数即可实现：
function changeLineHeight(sDivId，iNum){
var oDiv=document.getElementById(sDivId);
oDiv.style.lineHeight=iNum+"px";}
同样，文字间隔调整可用如下函数实现：
function changeLetterSpace(sDivId, iNum){
var oDiv=document.getElementById(sDivId);
oDiv.style.letterSpacing=iNum+"px";}
4答题时的勾画功能
很多人喜欢在答题时对题目内容做一些勾画，这样在回头找的时候就能很快的发现，如果我们的用户用我们的试卷 做一些定时的练习，这样的功能是很必要的。这个功能实现 比较复杂。首先要实现三个事件处理函数，对应 onmousedown、onmousemove 和 onmouseup三个事件[4]，他 们分别是：
function handleMouseDown()，
function handleMouseMove()，
function handleMouseUp()
在 handleMouseMove()函数里实现勾画的功能。将 div 元 素赋值 background-color，当作网页的“像素点”，然后鼠标每 移动一下，以网页上对应的新旧两个坐标点作为端点，以中 点线算法画直线，这样这些直线连接起来就成为比较平滑的 鼠标移动的轨迹线。对于在网页上画图有一个很好的
JavaScript 库 wz_jsgraphics[5]。里面有我们需要的画直线的函数。 但是鼠标在文字附近滑动会导致选择文字，甚至出现文
字的拖动，造成上述功能的中断，所以需要禁止页面上部分 的文字选择功能：
function document.onselectstart(){
return false; }
将鼠标的样式变为铅笔的形状，功能就更形象了：
＜style type="text/css"＞
#divId{ cursor:url("pencil.ani");}
＜/style＞
5网页划词翻译
网页划词翻译功能非常方便，只需要用鼠标选择你想要查的文字，立即就会出现关于这些文字的解释，对于英语学 习者来说，这是一个非常重要的功能。网页划词翻译功能不 需要我们自己实现，目前有很多现成的，我们只需要在网页 中添加一小段 JavaScript 代码即可。我们选择了谷歌的在线词 典[6]，其需要添加的代码如下：
＜script src=http://www.省略/script/huaci.js type="text/javascript"＞ ＜/script＞
＜script type="text/javascript"＞
dictInit();
＜/script＞
如果需要控制该功能的开启和关闭，只需要在这段代码 的前面添加下面的一段：
＜span id="dict_status"＞＜/span＞
这个功能的默认状态是开启，如果需要一开始是“禁止”， 则需要在 dictInit()的前面添加：
dict_enable=false;
6知识点的即时查询
知识点的即时查询可以避免用户的问题堆积，有效减轻用户的认知负荷，使用户顺利地掌握所学的知识。但是知识 点的内容也相当的多，如果一开始就生成在页面里，会使传 输的数据过多，让用户等待时间过长，而且也没有将所有知 识点集中显示的必要，所以我们使用 Ajax 技术，在用户需要 查询的时候从服务器查询对应题目的知识点，用 XML 返回， 然后通过一段 JavaScript 代码将其解析成网页标记，显示在 item 对应的 div 后面。
四 结束语
XML 是网络上最流行的数据交换方式，XSLT 是一种发 展日趋成熟的转换语言。XML 与 XSLT 结合可以使相同的数 据在不同的 XSLT 样式表下转换成不同的显示输出，也可以 使不同的数据在相同的 XSLT 样式表转换下保持一致的输出 形式，具有相当的灵活性。同时结合功能强大的 JavaScript 以及目前流行的 Ajax 技术，可以使输出的页面具有桌面程序 的使用体验，极大的方便了用户，也能非常好的收集用户的 使用信息，同时能及时的向用户反馈信息。
参考文献
[1]高晓红,张成华.基于网络的自适应学习系统研究[D].上海:上海师范大学,2003.
[2] 何昭青．基于 XML 的分布式试题库系统的设计与实现[J].吉首大学学报(自然科学版),2004,25(1):52-55.
[3][美]ChuckWhite著,王健,王军等译.XSLT从入门到精通[M].北京:电子工业出版社,2003:4-13.
[4] Nicholas C.Zakas著,曹力,张欣等译.JavaScript 高级程序设 计[M].北京:人民邮电出版社,2006:35-351.
[5] JavaScript Vectorgraphics Library. [EB/OL].＜http://www.省略/.＞
[6] 谷词工具使用. [EB/OL].＜http://www.省略/html/help.html.＞
