一个HTML模板搞定连线题演示

钟倩

对于中小学生来说，连线题是一种很常见的题目类型。在课堂上，如果老师能够根据所教内容，给学生出几道连线题，以调动他们的学习积极性，那绝对可以取得良好的教学效果。当然，使用Flash、PowerPoint等工具制作连线题，步骤繁琐不说，增减题目也不方便。其实，只需一个HTML连线题模板，就能搞定这个问题。接下来，笔者就给大家介绍一下如何来实现。

模板的获取和分析

先从http：//pan.baidu.com/s/1kVF04Dp下载“连线题。RAR”，然后将该压缩包解压到硬盘的任意位置（如D盘根目录下），再双击运行D：＼canvasline目录下的Index.html，即可看到网页模板的效果（图1）。选中左边的某个问题选项（如“甘肃敦煌”），拖到右边某个答案（如“麦积山石窟”），在这两者之间，就会有一条线段相连。当然，如果觉得某个问题与答案连错的话，可单击其中的“撤消”按钮，撤消这一步的连线，然后重新连线即可。

替换成自己的题目

通过上面的演示，相信大家对这个HTML连线题模板已经很熟悉了吧。下面，我们就可以恨据自己的需求来编辑题目了，具体操作步骤如下。

1.已有题目修改

用记事本打开D：＼canvasline目录下的Index.html，其中可以找到“甘肃敦煌”、“云冈石窟”这样的语句。

通过和图1所示界面中的文字进行对比，可以发现“<！--左侧-->”下边的四个“”语句对应的是连线题左边的问题，“<！--右侧-->”下边的四个“”语句对应的是连线题右边的答案。在修改连线题目时，我们只需将图2“”八个语句中的汉字内容替换为其他所要添加的连线题的问题与答案就可以。

2.增加自定义新题

通过观察页面及源代码，大家可以发现该连线模板包含四个题目，当然我们也可以根据自己的需要来增加题目。下面，以增加变成6个小题为例来进行说明。

小提示

在图2中，数组变量“leftPai r[0]=0：”……“leftPair[3]=3”分别对应图1左侧的四个问题。修改后，包含六个问题，所以要在“leftPair[3]=3”的末尾添加“leftPair[4]=4：”、“leftPair[5]=5：”。

复制源代码中的语句“甘肃天水”，接着在该语句的末尾回车，执行一次粘贴操作，再在光标所处的位置回车，并再执行一次粘贴操作。仿照上述操作，复制图中的“莫高窟”语句，然后分别执行两次回车和粘贴操作即可。

接下來将粘贴的两个“甘肃天水

”语句中的“L4”分别修改为“L5”、“L6”，将粘贴的两个“莫高窟”语句中的“R4”分别修改为“R5”、“R6”。完成这两步的操作之后，再将连线题目中的相关汉字，修改为自己所要的添加连线题的问题与答案就可以了。

匹配正确的答案

完成连线题题目的添加之后，必须将问题与答案进行逐一匹配。只有这样，在课堂上演示时，才能够对学生的回答作出相应的判断。连线题问题与答案的匹配，其操作步骤如下。

首先用记事本打开D：＼canvasline＼is目录下的JS脚本文件onLine.is（图2），接着查找唯一的字符串“leftPair[3]=3；”，然后在其末尾按下回车键并添加以下语句：

leftPair[4]=4；

leftPair[5]=5；

仿照上一步的操作，在JS脚本文件onLine.is中查找唯一的字符串“rightPair[3]=0；”，在其末尾回车并粘贴以下语句：

rightPair[4]=0；

rightPair[5]=0；

这样一来，连线题的每个答案，也都有一个变量“rightPair[0]”、……“rightPair[5]”了。

观察图3，因为左边第一个问题“运算器”对应的英文缩写是左边第三个答案“AU”，且第一个问题对应变量“leftPair[0]”的变量值是0，所以第三个答案对应的变量“rightPair[2]”等号右边的变量值就应该修改为0。同样的道理，第二个问题，“非对称数字用户线路”对应的英文缩写是“ADSL”，所以第五个答案对应的变量“rightPair[4]”等号右边的变量值就应该修改为1。其他依此类推（图3）。

完成答案的匹配操作之后，双击运行D：＼canvasline目录下的Index.html，就可以进行连线题的演示操作了。连线完毕后，单击“答案”按钮，还可以看到最终的答案（图4），从而方便纠正学生的错误。