一個(gè)HTML模板搞定連線題演示

鐘倩

對(duì)于中小學(xué)生來說，連線題是一種很常見的題目類型。在課堂上，如果老師能夠根據(jù)所教內(nèi)容，給學(xué)生出幾道連線題，以調(diào)動(dòng)他們的學(xué)習(xí)積極性，那絕對(duì)可以取得良好的教學(xué)效果。當(dāng)然，使用Flash、PowerPoint等工具制作連線題，步驟繁瑣不說，增減題目也不方便。其實(shí)，只需一個(gè)HTML連線題模板，就能搞定這個(gè)問題。接下來，筆者就給大家介紹一下如何來實(shí)現(xiàn)。

模板的獲取和分析

先從http：//pan.baidu.com/s/1kVF04Dp下載“連線題。RAR”，然后將該壓縮包解壓到硬盤的任意位置（如D盤根目錄下），再雙擊運(yùn)行D：＼canvasline目錄下的Index.html，即可看到網(wǎng)頁模板的效果（圖1）。選中左邊的某個(gè)問題選項(xiàng)（如“甘肅敦煌”），拖到右邊某個(gè)答案（如“麥積山石窟”），在這兩者之間，就會(huì)有一條線段相連。當(dāng)然，如果覺得某個(gè)問題與答案連錯(cuò)的話，可單擊其中的“撤消”按鈕，撤消這一步的連線，然后重新連線即可。

替換成自己的題目

通過上面的演示，相信大家對(duì)這個(gè)HTML連線題模板已經(jīng)很熟悉了吧。下面，我們就可以恨據(jù)自己的需求來編輯題目了，具體操作步驟如下。

1.已有題目修改

用記事本打開D：＼canvasline目錄下的Index.html，其中可以找到“甘肅敦煌”、“云岡石窟”這樣的語句。

通過和圖1所示界面中的文字進(jìn)行對(duì)比，可以發(fā)現(xiàn)“<！--左側(cè)-->”下邊的四個(gè)“”語句對(duì)應(yīng)的是連線題左邊的問題，“<！--右側(cè)-->”下邊的四個(gè)“”語句對(duì)應(yīng)的是連線題右邊的答案。在修改連線題目時(shí)，我們只需將圖2“”八個(gè)語句中的漢字內(nèi)容替換為其他所要添加的連線題的問題與答案就可以。

2.增加自定義新題

通過觀察頁面及源代碼，大家可以發(fā)現(xiàn)該連線模板包含四個(gè)題目，當(dāng)然我們也可以根據(jù)自己的需要來增加題目。下面，以增加變成6個(gè)小題為例來進(jìn)行說明。

小提示

在圖2中，數(shù)組變量“l(fā)eftPai r[0]=0：”……“l(fā)eftPair[3]=3”分別對(duì)應(yīng)圖1左側(cè)的四個(gè)問題。修改后，包含六個(gè)問題，所以要在“l(fā)eftPair[3]=3”的末尾添加“l(fā)eftPair[4]=4：”、“l(fā)eftPair[5]=5：”。

復(fù)制源代碼中的語句“甘肅天水”，接著在該語句的末尾回車，執(zhí)行一次粘貼操作，再在光標(biāo)所處的位置回車，并再執(zhí)行一次粘貼操作。仿照上述操作，復(fù)制圖中的“莫高窟”語句，然后分別執(zhí)行兩次回車和粘貼操作即可。

接下來將粘貼的兩個(gè)“甘肅天水

”語句中的“L4”分別修改為“L5”、“L6”，將粘貼的兩個(gè)“莫高窟”語句中的“R4”分別修改為“R5”、“R6”。完成這兩步的操作之后，再將連線題目中的相關(guān)漢字，修改為自己所要的添加連線題的問題與答案就可以了。

匹配正確的答案

完成連線題題目的添加之后，必須將問題與答案進(jìn)行逐一匹配。只有這樣，在課堂上演示時(shí)，才能夠?qū)W(xué)生的回答作出相應(yīng)的判斷。連線題問題與答案的匹配，其操作步驟如下。

首先用記事本打開D：＼canvasline＼is目錄下的JS腳本文件onLine.is（圖2），接著查找唯一的字符串“l(fā)eftPair[3]=3；”，然后在其末尾按下回車鍵并添加以下語句：

leftPair[4]=4；

leftPair[5]=5；

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

rightPair[4]=0；

rightPair[5]=0；

這樣一來，連線題的每個(gè)答案，也都有一個(gè)變量“rightPair[0]”、……“rightPair[5]”了。

觀察圖3，因?yàn)樽筮叺谝粋€(gè)問題“運(yùn)算器”對(duì)應(yīng)的英文縮寫是左邊第三個(gè)答案“AU”，且第一個(gè)問題對(duì)應(yīng)變量“l(fā)eftPair[0]”的變量值是0，所以第三個(gè)答案對(duì)應(yīng)的變量“rightPair[2]”等號(hào)右邊的變量值就應(yīng)該修改為0。同樣的道理，第二個(gè)問題，“非對(duì)稱數(shù)字用戶線路”對(duì)應(yīng)的英文縮寫是“ADSL”，所以第五個(gè)答案對(duì)應(yīng)的變量“rightPair[4]”等號(hào)右邊的變量值就應(yīng)該修改為1。其他依此類推（圖3）。

完成答案的匹配操作之后，雙擊運(yùn)行D：＼canvasline目錄下的Index.html，就可以進(jìn)行連線題的演示操作了。連線完畢后，單擊“答案”按鈕，還可以看到最終的答案（圖4），從而方便糾正學(xué)生的錯(cuò)誤。