一個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），從而方便糾正學生的錯誤。