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

楊嘉誠(chéng) 柯海豐

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

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

中圖分類號(hào)：TP311 ? ? ? ? ?文獻(xiàn)標(biāo)志碼：A ? ? 文章編號(hào)：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 引言

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

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

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

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

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

2 基本框架

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

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

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

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

在題目名稱的右側(cè)有一個(gè)推薦標(biāo)志，這個(gè)標(biāo)志出現(xiàn)與否與用戶當(dāng)前的算法能力相關(guān)。只有在用戶擁有學(xué)習(xí)當(dāng)前題目所屬算法能力的時(shí)候才會(huì)出現(xiàn)這個(gè)標(biāo)志，如果某道題需要的算法用戶目前沒有掌握，則不會(huì)出現(xiàn)這個(gè)標(biāo)志。所有基礎(chǔ)算法（貪心，搜索等）會(huì)全部設(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)才會(huì)推薦高階算法相關(guān)的習(xí)題，提供給了用戶一條循序漸進(jìn)的學(xué)習(xí)路線。

算法總覽如圖3所示。

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

3.3 能力測(cè)試界面

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

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

3.4 后臺(tái)評(píng)測(cè)功能的實(shí)現(xiàn)

前端發(fā)送評(píng)測(cè)請(qǐng)求后，后端會(huì)接受到用戶提交的代碼和題目編號(hào)。然后進(jìn)入評(píng)測(cè)過程，整個(gè)過程分為以下幾步。

⑴ 將用戶上傳的代碼存放在本地評(píng)測(cè)文件夾。

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

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

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

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

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

4 結(jié)束語(yǔ)

基于HTML5和JavaScript，完成了信息學(xué)自學(xué)的網(wǎng)站組。提供了算法學(xué)習(xí)拓?fù)鋱D，讓學(xué)生的學(xué)習(xí)有一個(gè)循序漸進(jìn)的過程，算法的掌握程度可以通過題數(shù)統(tǒng)計(jì)來進(jìn)行直觀評(píng)估，一定程度上解決了編程“入門難”的問題，有效提高了學(xué)生的自我學(xué)習(xí)效率的同時(shí)也減輕了教師的教學(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].中國(guó)信息技術(shù)教育，2018.17：82-83

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

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

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

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

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

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