基于HTML5和JavaScript的信息學(xué)學(xué)習(xí)網(wǎng)站的設(shè)計與實現(xiàn)

楊嘉誠 柯海豐

摘 ?要： 信息學(xué)奧賽的一大特色是涉及的知識量大而且面廣，為了使參賽者盡快地了解并掌握這些知識，使用HTML5和JavaScript語言開發(fā)了一個信息學(xué)在線自主學(xué)習(xí)網(wǎng)站。網(wǎng)站提供在線評測功能，能根據(jù)用戶對每種題型解決數(shù)量的統(tǒng)計來評估學(xué)習(xí)進(jìn)度。

關(guān)鍵詞： HTML5; JavaScript; 信息學(xué); 自主學(xué)習(xí)網(wǎng)站; 在線評測

中圖分類號：TP311 ? ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? 文章編號：1006-8228（2019）11-32-03

Abstract： One of the characteristics of International Olympiad in Informatics is that it involves a large amount of knowledge in a wide range. In order to make the participants understand and master the knowledge as soon as possible， an online self-learning website of informatics was developed using HTML5 and JavaScript language. The website also provides online evaluation function， which can evaluate the learning progress according to the statistics of the number of each type of problem solved by the user.

Key words： HTML5; JavaScript; Informatics; self-learning website; online evaluation

0 引言

隨著信息時代的到來，很多國家都開始重視計算機(jī)的應(yīng)用能力，為了普及計算機(jī)教育，青少年信息學(xué)競賽應(yīng)運(yùn)而生，這項學(xué)科性競賽活動主要是為了推廣計算機(jī)應(yīng)用技術(shù)。國際信息學(xué)奧林匹克（IOI）是每年舉辦的六屆科學(xué)奧林匹克運(yùn)動會之一。IOI最初于1989年在保加利亞進(jìn)行[1]。信息學(xué)奧賽是一個給學(xué)生展示自己的學(xué)科特長技術(shù)或創(chuàng)新潛質(zhì)的大舞臺，不論是通過信息學(xué)奧林匹克競賽獲得獎項， 還是在科技比賽中獲得較好成績，都激發(fā)了學(xué)生獨(dú)特潛質(zhì)的發(fā)揮[2]。如今，信息學(xué)競賽不僅受到學(xué)生的喜歡，也受到了許多家長的歡迎，相應(yīng)的信息學(xué)教學(xué)網(wǎng)站也如雨后春筍般出現(xiàn)。筆者作為信息學(xué)競賽曾經(jīng)的參與者，希望能做出這樣一個信息學(xué)自學(xué)網(wǎng)站組，來幫助剛開始學(xué)習(xí)信息學(xué)的新人們了解并學(xué)習(xí)一些基礎(chǔ)算法。該網(wǎng)站組還為每種類型的算法提供了大量的題目進(jìn)行參考，這些題目都是筆者精心挑選出的具有代表性的經(jīng)典問題，也是希望各位學(xué)生能少走彎路，避免花費(fèi)不必要的時間在做重復(fù)題目上，同樣使得不同層次的學(xué)生都有不同程度的收獲，從而達(dá)到整體水平的提升[3]。

1 關(guān)鍵技術(shù)

隨著網(wǎng)絡(luò)的不斷發(fā)展，遠(yuǎn)程教育實際上已經(jīng)等同于網(wǎng)絡(luò)教育，開發(fā)適用于網(wǎng)絡(luò)教育的高質(zhì)量課程勢必會成為發(fā)展網(wǎng)絡(luò)教育的迫切而重要的課題[4]本次設(shè)計的Web網(wǎng)站開發(fā)，前端使用HTML5+CSS3設(shè)計基礎(chǔ)頁面，響應(yīng)式網(wǎng)站開發(fā)采用Bootstrap前端框架。它為大多數(shù)標(biāo)準(zhǔn)的UI界面設(shè)計提供了用戶友好、跨瀏覽器的解決方案，極大地提高了Web前端的開發(fā)效率[5]。響應(yīng)式設(shè)計的關(guān)鍵技術(shù)主要包含媒體查詢、彈性盒布局及百分比布局等[6]。毫無疑問， 通過技術(shù)優(yōu)化，響應(yīng)式布局賦予用戶舒適的整體美感和良好的閱讀體驗[7]。使用JavaScript來實現(xiàn)動態(tài)網(wǎng)頁的設(shè)計以及與后端的信息交互。后端使用的Node.js的Express應(yīng)用框架來處理前端發(fā)來的請求。在數(shù)據(jù)庫的選擇上選擇了Mysql數(shù)據(jù)庫，來進(jìn)行對數(shù)據(jù)的存儲。

Node的主要作用就是其能夠?qū)⑶岸撕头?wù)器端巧妙結(jié)合起來，通過這種手段， 就能夠以一種簡潔的方式彌補(bǔ)JavaScript技術(shù)存在的一系列不足， 使其能夠更好發(fā)展[8]。

Express是新興的一個Node.Js Web應(yīng)用框架， 它擁有很多強(qiáng)大的特性，使得開發(fā)者創(chuàng)建各種Web應(yīng)用時可以事半功倍。Express作為后端服務(wù)器，其特點(diǎn)是利用路由的方式來接受前端發(fā)來的請求。

2 基本框架

系統(tǒng)主要由以下模塊組成，分別為用戶模塊、題目模塊、評測模塊以及統(tǒng)計模塊，形成一個基本的業(yè)務(wù)框架。用戶模塊支持登陸注冊以及注銷。題目模塊支持題目的添加修改。評測模塊負(fù)責(zé)對用戶上交代碼在后端進(jìn)行評測，并實時返回結(jié)果。統(tǒng)計模塊會統(tǒng)計用戶每種不同類型算法題目的通過數(shù)量，以便用戶對自己學(xué)習(xí)進(jìn)度進(jìn)行評估。

3 部分功能實現(xiàn)

3.1 題目列表加載與界面展示

題目列表界面如圖1所示。題目列表的分頁功能是在后端實現(xiàn)的，每頁最多顯示10題。因為JavaScript異步通信的原因，如果使用單純的循環(huán)，則會因為服務(wù)器響應(yīng)的快慢，最終顯示的順序可能會被打亂，而在設(shè)計中要求題目是按照題目標(biāo)號從小到大排列的。為了防止這種情況的發(fā)生，前端在向服務(wù)器發(fā)起請求的時候使用了遞歸的方式，成功解決了這個問題。

在題目名稱的右側(cè)有一個推薦標(biāo)志，這個標(biāo)志出現(xiàn)與否與用戶當(dāng)前的算法能力相關(guān)。只有在用戶擁有學(xué)習(xí)當(dāng)前題目所屬算法能力的時候才會出現(xiàn)這個標(biāo)志，如果某道題需要的算法用戶目前沒有掌握，則不會出現(xiàn)這個標(biāo)志。所有基礎(chǔ)算法（貪心，搜索等）會全部設(shè)置為默認(rèn)推薦。

3.2 學(xué)習(xí)園界面展示

圖2為學(xué)習(xí)園界面推薦學(xué)習(xí)算法拓?fù)鋱D。

學(xué)習(xí)園的上半部分界面展示了本網(wǎng)站目前支持學(xué)習(xí)的幾種算法，并根據(jù)其難度和學(xué)習(xí)的遞進(jìn)程度繪制了學(xué)習(xí)拓?fù)鋱D。用戶在學(xué)習(xí)完基礎(chǔ)算法之后系統(tǒng)才會推薦高階算法相關(guān)的習(xí)題，提供給了用戶一條循序漸進(jìn)的學(xué)習(xí)路線。

算法總覽如圖3所示。

現(xiàn)在的學(xué)習(xí)園提供了多種基礎(chǔ)算法的學(xué)習(xí)，有搜索算法，貪心算法，字符串算法，數(shù)據(jù)結(jié)構(gòu)相關(guān)，動態(tài)規(guī)劃算法，以及數(shù)學(xué)相關(guān)等。這些算法在信息學(xué)中是最基礎(chǔ)和最實用的算法，該模塊主要是幫助用戶熟悉并掌握這些算法。在這個界面中，用戶可以查看每種算法的簡介，以及自己通過測試的題目和目前該類型題目在題庫中的總數(shù)，可以對自己的學(xué)習(xí)進(jìn)度有一個直觀的感受。

3.3 能力測試界面

用戶進(jìn)入個人界面，點(diǎn)擊能力測試，會彈出模態(tài)框，如圖4所示。

用戶可以在這里對自己的算法能力做一個簡單的評估，每道題都會對應(yīng)高階算法的一些基礎(chǔ)概念，如果用戶答對了大部分相關(guān)的題目，我們會認(rèn)為用戶已經(jīng)掌握了該算法的概念，從而推薦用戶該類算法。

3.4 后臺評測功能的實現(xiàn)

前端發(fā)送評測請求后，后端會接受到用戶提交的代碼和題目編號。然后進(jìn)入評測過程，整個過程分為以下幾步。

⑴ 將用戶上傳的代碼存放在本地評測文件夾。

⑵ 進(jìn)行超時處理，如果整個運(yùn)行過程超過了時間限制，就會返回給客戶端超時信息，并結(jié)束評測過程。

⑶ 將標(biāo)準(zhǔn)輸入輸出數(shù)據(jù)拷貝到評測文件夾。

⑷ 編譯運(yùn)行用戶上傳的代碼。

⑸ 運(yùn)行結(jié)束后比較選手程序輸出與標(biāo)準(zhǔn)輸出中的內(nèi)容，來判斷最終結(jié)果是否正確，如果此時尚未運(yùn)行超時，返回給客戶端相應(yīng)的結(jié)果，否則在到達(dá)題目時限的同時停止進(jìn)程并返回超時信息。

另外，為了提高服務(wù)器端并行評測的效率，最大限度利用多核優(yōu)勢，特此在服務(wù)器端開設(shè)了多個“評測機(jī)”，這些評測機(jī)提供了多個相同的評測環(huán)境，評測機(jī)的當(dāng)前狀態(tài)使用信號量來控制。當(dāng)接受到一個評測請求時，服務(wù)器會先遍歷所有評測機(jī)，找到空閑評測機(jī)進(jìn)行評測，并將其信號量改變，當(dāng)評測完成之后再將信號量還原。這種方法可以最大限度地利用服務(wù)器的資源，減少了用戶等待返回結(jié)果的時間，優(yōu)化了用戶體驗。

4 結(jié)束語

基于HTML5和JavaScript，完成了信息學(xué)自學(xué)的網(wǎng)站組。提供了算法學(xué)習(xí)拓?fù)鋱D，讓學(xué)生的學(xué)習(xí)有一個循序漸進(jìn)的過程，算法的掌握程度可以通過題數(shù)統(tǒng)計來進(jìn)行直觀評估，一定程度上解決了編程“入門難”的問題，有效提高了學(xué)生的自我學(xué)習(xí)效率的同時也減輕了教師的教學(xué)監(jiān)管壓力。

參考文獻(xiàn)（References）：

[1] Mukund M.International Olympiad in Informatics[J]. Resonance，2002.7（1）：102-107

[2] 苗春，魯琦.新高考政策下的信息學(xué)奧賽培養(yǎng)策略[J].中國信息技術(shù)教育，2018.17：82-83

[3] 趙明陽.在線評測平臺在信息學(xué)奧賽輔導(dǎo)中的應(yīng)用[J].中國信息技術(shù)教育，2018.10：26-28

[4] 金志峰.提高初中學(xué)生編程水平的三個著力點(diǎn)[J].科教導(dǎo)刊（下旬），2017.4：93-94

[5] 徐曉.基于Bootstrap技術(shù)的移動端Web開發(fā)研究[J].微型電腦應(yīng)用，2018.34（9）：4-6，43

[6] 戴維.基于Bootstrap的響應(yīng)式網(wǎng)頁設(shè)計[J].電腦編程技巧與維護(hù)，2018（11）：132-133，166

[7] 葉潮流，馬林山.基于HTML 5+CSS3+jQuery的響應(yīng)式布局網(wǎng)頁設(shè)計[J].梧州學(xué)院學(xué)報，2018.28（3）：22-35

[8] 張博，于海洋.服務(wù)器端JavaScript技術(shù)分析[J].信息與電腦（理論版），2018.4：19-20