基于HTML5和JavaScript的信息學學習網站的設計與實現

楊嘉誠 柯海豐

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

關鍵詞： HTML5; JavaScript; 信息學; 自主學習網站; 在線評測

中圖分類號：TP311 ? ? ? ? ?文獻標志碼：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 引言

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

1 關鍵技術

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

Node的主要作用就是其能夠將前端和服務器端巧妙結合起來，通過這種手段， 就能夠以一種簡潔的方式彌補JavaScript技術存在的一系列不足， 使其能夠更好發展[8]。

Express是新興的一個Node.Js Web應用框架， 它擁有很多強大的特性，使得開發者創建各種Web應用時可以事半功倍。Express作為后端服務器，其特點是利用路由的方式來接受前端發來的請求。

2 基本框架

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

3 部分功能實現

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

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

在題目名稱的右側有一個推薦標志，這個標志出現與否與用戶當前的算法能力相關。只有在用戶擁有學習當前題目所屬算法能力的時候才會出現這個標志，如果某道題需要的算法用戶目前沒有掌握，則不會出現這個標志。所有基礎算法（貪心，搜索等）會全部設置為默認推薦。

3.2 學習園界面展示

圖2為學習園界面推薦學習算法拓撲圖。

學習園的上半部分界面展示了本網站目前支持學習的幾種算法，并根據其難度和學習的遞進程度繪制了學習拓撲圖。用戶在學習完基礎算法之后系統才會推薦高階算法相關的習題，提供給了用戶一條循序漸進的學習路線。

算法總覽如圖3所示。

現在的學習園提供了多種基礎算法的學習，有搜索算法，貪心算法，字符串算法，數據結構相關，動態規劃算法，以及數學相關等。這些算法在信息學中是最基礎和最實用的算法，該模塊主要是幫助用戶熟悉并掌握這些算法。在這個界面中，用戶可以查看每種算法的簡介，以及自己通過測試的題目和目前該類型題目在題庫中的總數，可以對自己的學習進度有一個直觀的感受。

3.3 能力測試界面

用戶進入個人界面，點擊能力測試，會彈出模態框，如圖4所示。

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

3.4 后臺評測功能的實現

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

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

⑵ 進行超時處理，如果整個運行過程超過了時間限制，就會返回給客戶端超時信息，并結束評測過程。

⑶ 將標準輸入輸出數據拷貝到評測文件夾。

⑷ 編譯運行用戶上傳的代碼。

⑸ 運行結束后比較選手程序輸出與標準輸出中的內容，來判斷最終結果是否正確，如果此時尚未運行超時，返回給客戶端相應的結果，否則在到達題目時限的同時停止進程并返回超時信息。

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

4 結束語

基于HTML5和JavaScript，完成了信息學自學的網站組。提供了算法學習拓撲圖，讓學生的學習有一個循序漸進的過程，算法的掌握程度可以通過題數統計來進行直觀評估，一定程度上解決了編程“入門難”的問題，有效提高了學生的自我學習效率的同時也減輕了教師的教學監管壓力。

參考文獻（References）：

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

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

[3] 趙明陽.在線評測平臺在信息學奧賽輔導中的應用[J].中國信息技術教育，2018.10：26-28

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

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

[6] 戴維.基于Bootstrap的響應式網頁設計[J].電腦編程技巧與維護，2018（11）：132-133，166

[7] 葉潮流，馬林山.基于HTML 5+CSS3+jQuery的響應式布局網頁設計[J].梧州學院學報，2018.28（3）：22-35

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