基于WEB頁面隨機(jī)點(diǎn)名系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

【摘" 要】 為了提高學(xué)生學(xué)習(xí)的主動性，回答問題的公平性，改善課堂氣氛，提高課堂效率等，筆者設(shè)計(jì)并實(shí)現(xiàn)了基于WEB頁面隨機(jī)點(diǎn)名系統(tǒng)。在技術(shù)設(shè)計(jì)方面，采用HTML+CSS進(jìn)行頁面排版布局，JavaScript腳本對數(shù)據(jù)源Excel中的學(xué)生名單進(jìn)行讀取操作。在功能設(shè)計(jì)方面，教師可以在課前下載系統(tǒng)提供的Excel模板，填寫保存學(xué)生名單，并在點(diǎn)名提問環(huán)節(jié)隨機(jī)抽取學(xué)生進(jìn)行點(diǎn)名。該系統(tǒng)界面簡潔、操作方便、功能友好，可供所有學(xué)科教師使用。

【關(guān)鍵詞】 WEB頁面；隨機(jī)點(diǎn)名系統(tǒng)；WEB前端技術(shù)；Excel模板

一、系統(tǒng)描述與設(shè)計(jì)

（一）技術(shù)設(shè)計(jì)

隨機(jī)點(diǎn)名系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)以基于WEB頁面為主要依托，旨在打造一個(gè)簡單易用且具有普及性的系統(tǒng)。為了實(shí)現(xiàn)這一目標(biāo)，選擇采用HTML+CSS+JavaScript的WEB前端技術(shù)進(jìn)行系統(tǒng)設(shè)計(jì)。

在系統(tǒng)的頁面結(jié)構(gòu)搭建方面，使用HTML來負(fù)責(zé)整個(gè)頁面結(jié)構(gòu)的構(gòu)建。通過合理的布局和標(biāo)簽嵌套，使頁面具有良好的可讀性和可操作性；在頁面樣式的設(shè)計(jì)方面，則運(yùn)用CSS來進(jìn)行樣式美化。通過設(shè)定不同的樣式屬性和選擇器，可以使頁面呈現(xiàn)出各種各樣的視覺效果，提升用戶的交互體驗(yàn)；頁面的交互和功能的實(shí)現(xiàn)，則需要借助JavaScript來完成。通過使用JavaScript腳本，可以實(shí)現(xiàn)頁面的動態(tài)效果和交互行為。例如，在點(diǎn)名時(shí)可以通過隨機(jī)數(shù)生成一個(gè)選取的名字，并將其顯示在頁面上。這樣，使用者無論有無計(jì)算機(jī)基礎(chǔ)都可以很快掌握系統(tǒng)的應(yīng)用。

（二）功能設(shè)計(jì)

教師利用多媒體教學(xué)設(shè)備打開隨機(jī)點(diǎn)名系統(tǒng)，需要先下載系統(tǒng)提供的Excel模板。該模板包含了學(xué)生名單的實(shí)例。教師根據(jù)模板的內(nèi)容，填寫并保存授課班級學(xué)生姓名，完成后，教師將該文件上傳到系統(tǒng)中。

在點(diǎn)名提問環(huán)節(jié)，教師可以通過單擊“開始”按鈕來啟動系統(tǒng)，頁面的姓名區(qū)域會開始隨機(jī)播放閃現(xiàn)所有學(xué)生的姓名。同時(shí)，按鈕上的文本也會變?yōu)椤敖Y(jié)束”。

教師想要停止點(diǎn)名時(shí)，可以單擊“結(jié)束”按鈕。這時(shí)，姓名區(qū)域會隨機(jī)顯示一名學(xué)生的姓名，并停止閃現(xiàn)。同時(shí)，按鈕上的文本也會變?yōu)椤伴_始”，表示教師可以重新開始點(diǎn)名。

通過這樣的功能設(shè)計(jì)，基于WEB頁面的隨機(jī)點(diǎn)名系統(tǒng)可以幫助教師在課堂上方便地進(jìn)行點(diǎn)名。教師只需幾步操作，即可完成學(xué)生名單的錄入和點(diǎn)名過程。系統(tǒng)的隨機(jī)性也增加了點(diǎn)名的公平性。同時(shí)，系統(tǒng)的簡潔界面和直觀操作也提高了教師的使用體驗(yàn)。具體系統(tǒng)功能流程圖如圖1所示。

（三）界面設(shè)計(jì)

系統(tǒng)界面在顏色搭配方面，采用藍(lán)白色彩進(jìn)行搭配，旨在給用戶帶來純凈、舒適的感覺。在確保頁面功能完善的基礎(chǔ)上，優(yōu)先將“下載模板”和“選擇文件”兩個(gè)操作放在第一行，以醒目的位置提醒教師在操作時(shí)的注意事項(xiàng)。教師首先需要下載Excel模板（如圖2所示），然后對該模板進(jìn)行數(shù)據(jù)修改并保存，最后將修改后的文件進(jìn)行導(dǎo)入上傳。為了提升用戶體驗(yàn)，在姓名區(qū)域和按鈕設(shè)計(jì)方面，采用圓角矩形的設(shè)計(jì)風(fēng)格。這樣的設(shè)計(jì)不僅可以引導(dǎo)用戶的視線，流暢地瀏覽界面，還能在視覺上給用戶帶來更加愉悅的體驗(yàn)。系統(tǒng)界面設(shè)計(jì)如圖3所示。

二、系統(tǒng)主要功能實(shí)現(xiàn)

（一）給Input標(biāo)簽綁定Change事件，上傳模板文件

首先，當(dāng)教師在頁面上選擇要上傳的Excel模板后，系統(tǒng)會通過綁定在lt;input type=\"file\" id=\"excel-file\"gt;標(biāo)簽上的Change事件來觸發(fā)相應(yīng)的操作代碼。接下來，系統(tǒng)會以二進(jìn)制流的方式讀取Excel文件的內(nèi)容，并開始對模板的有效性進(jìn)行判斷。這個(gè)有效性判斷的過程包括檢查文件格式、列名是否符合要求等。如果模板不符合要求，系統(tǒng)會提示錯(cuò)誤消息，告知教師需要重新上傳符合要求的Excel模板。若模板文件校驗(yàn)通過，系統(tǒng)會開始循環(huán)遍歷Excel中的每張表，這意味著系統(tǒng)會依次讀取Excel文件中的每個(gè)表格，并以二進(jìn)制的方式打開讀取文件內(nèi)容。通過這樣的處理流程，系統(tǒng)可以確保教師上傳的Excel模板符合要求，并且能夠正確讀取到Excel文件中的數(shù)據(jù)。具體代碼如圖4所示。

（二）將姓名存儲至數(shù)組中，隨機(jī)抽取學(xué)生

在進(jìn)行學(xué)生姓名的抽取和存儲方面，將學(xué)生姓名循環(huán)遍歷將其存儲至一個(gè)事先定義好的數(shù)組中，并統(tǒng)計(jì)出數(shù)組的長度，即學(xué)生姓名的數(shù)量。為了實(shí)現(xiàn)隨機(jī)抽取學(xué)生姓名的功能，利用JavaScript中的Math.random（）函數(shù)。該函數(shù)可以生成一個(gè)0到1之間的隨機(jī)浮點(diǎn)數(shù)。將這個(gè)隨機(jī)數(shù)與學(xué)生姓名數(shù)組的長度相乘，得到一個(gè)位于數(shù)組下標(biāo)范圍內(nèi)的隨機(jī)數(shù)。然后將這個(gè)隨機(jī)數(shù)向上取整（使用Math.ceil（）函數(shù)），以確保它是一個(gè)整數(shù)。這個(gè)整數(shù)就可以作為數(shù)組的下標(biāo)，從而獲取到對應(yīng)的學(xué)生姓名值。具體代碼如圖5所示。

（三）變更按鈕文本及循環(huán)輪播閃現(xiàn)

判斷系統(tǒng)中按鈕的文本內(nèi)容，若為開始，則當(dāng)教師單擊“開始”按鈕時(shí)，把“開始”文本修改為“結(jié)束”，并設(shè)置計(jì)時(shí)器，將隨機(jī)產(chǎn)生的姓名在頁面不斷輪播閃現(xiàn)；若為結(jié)束，則當(dāng)單擊“結(jié)束”按鈕時(shí)，把“結(jié)束”文本修改為“開始”，并清除計(jì)時(shí)器，顯示隨機(jī)抽取的學(xué)生姓名。具體代碼如圖6所示。

三、系統(tǒng)應(yīng)用

第一，打開隨機(jī)點(diǎn)名系統(tǒng)，下載Excel模板，依據(jù)模板內(nèi)容，輸入授課班級的學(xué)生姓名并保存，如圖7所示。

第二，單擊“選擇文件”，將保存好的Excel模板文件上傳，頁面上會顯示該文件的名字，也可將文件名改為不同的授課班級名字，方便下次的直接使用。如圖8所示。

第三，單擊“開始”按鈕，在中間主藍(lán)色區(qū)域開始隨機(jī)輪播閃現(xiàn)學(xué)生姓名，“開始”文本替換為“結(jié)束”，如圖9所示。

第四，單擊“結(jié)束”按鈕，在中間主藍(lán)色區(qū)域閃現(xiàn)結(jié)束，隨機(jī)顯示一位學(xué)生姓名，“結(jié)束”文本替換為“開始”，如圖10所示。

四、結(jié)語與展望

課堂隨機(jī)點(diǎn)名系統(tǒng)可以使教師更好地掌握學(xué)生的學(xué)習(xí)狀態(tài)，豐富了課堂教學(xué)的手段，提高了課堂效率，改善了課堂氣氛和教學(xué)的互動性。同時(shí)，它也促進(jìn)了教師積極探索更多的方式進(jìn)行教學(xué)，為教學(xué)改革提供了豐富的教學(xué)手段，推動了教與學(xué)的良性發(fā)展。

參考文獻(xiàn)：

［1］ 徐碧贏，張松泓. 課堂互動隨機(jī)點(diǎn)名系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］. 軟件工程，2017，20（08）：47-49.

［2］ 石元聆. 課堂隨機(jī)點(diǎn)名系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］. 電腦編程技巧與維護(hù)，2015（17）：20-22.

［3］ 樊繼慧，欒景燁. 信息化技術(shù)與課堂教學(xué)深度融合的案例研究［J］. 電腦知識與技術(shù)，2019，15（32）：116+157.