1、 基于HTML5和JavaScript的信息學學習網(wǎng)站的設計與實現(xiàn) 楊嘉誠 柯海豐摘 要： 信息學奧賽的一大特色是涉及的知識量大而且面廣，為了使參賽者盡快地了解并掌握這些知識，使用HTML5和JavaScript語言開發(fā)了一個信息學在線自主學習網(wǎng)站。網(wǎng)站提供在線評測功能，能根據(jù)用戶對每種題型解決數(shù)量的統(tǒng)計來評估學習進度。Key： HTML5; JavaScript; 信息學; 自主學習網(wǎng)站; 在線評測：TP311 文獻標志碼：A ：1006-8228（2019）11-32-03Abstract： One of the characteristics of International Olymp

2、iad 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 o

3、nline 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 evaluation0 引言隨著信息時代的到來，很多國家都開始重視計算機的應用能力，為了普及計算機教育，青少年信息學競賽應運而生，這項學科性競賽活動

4、主要是為了推廣計算機應用技術。國際信息學奧林匹克（IOI）是每年舉辦的六屆科學奧林匹克運動會之一。IOI最初于1989年在保加利亞進行1。信息學奧賽是一個給學生展示自己的學科特長技術或創(chuàng)新潛質的大舞臺，不論是通過信息學奧林匹克競賽獲得獎項， 還是在科技比賽中獲得較好成績，都激發(fā)了學生獨特潛質的發(fā)揮2。如今，信息學競賽不僅受到學生的喜歡，也受到了許多家長的歡迎，相應的信息學教學網(wǎng)站也如雨后春筍般出現(xiàn)。筆者作為信息學競賽曾經(jīng)的參與者，希望能做出這樣一個信息學自學網(wǎng)站組，來幫助剛開始學習信息學的新人們了解并學習一些基礎算法。該網(wǎng)站組還為每種類型的算法提供了大量的題目進行參考，這些題目都是筆者精心挑選

5、出的具有代表性的經(jīng)典問題，也是希望各位學生能少走彎路，避免花費不必要的時間在做重復題目上，同樣使得不同層次的學生都有不同程度的收獲，從而達到整體水平的提升3。1 關鍵技術隨著網(wǎng)絡的不斷發(fā)展，遠程教育實際上已經(jīng)等同于網(wǎng)絡教育，開發(fā)適用于網(wǎng)絡教育的高質量課程勢必會成為發(fā)展網(wǎng)絡教育的迫切而重要的課題4本次設計的Web網(wǎng)站開發(fā)，前端使用HTML5+CSS3設計基礎頁面，響應式網(wǎng)站開發(fā)采用Bootstrap前端框架。它為大多數(shù)標準的UI界面設計提供了用戶友好、跨瀏覽器的解決方案，極大地提高了Web前端的開發(fā)效率5。響應式設計的關鍵技術主要包含媒體查詢、彈性盒布局及百分比布局等6。毫無疑問， 通過技術優(yōu)化

6、，響應式布局賦予用戶舒適的整體美感和良好的閱讀體驗7。使用JavaScript來實現(xiàn)動態(tài)網(wǎng)頁的設計以及與后端的信息交互。后端使用的Node.js的Express應用框架來處理前端發(fā)來的請求。在數(shù)據(jù)庫的選擇上選擇了Mysql數(shù)據(jù)庫，來進行對數(shù)據(jù)的存儲。Node的主要作用就是其能夠將前端和服務器端巧妙結合起來，通過這種手段， 就能夠以一種簡潔的方式彌補JavaScript技術存在的一系列不足， 使其能夠更好發(fā)展8。Express是新興的一個Node.Js Web應用框架， 它擁有很多強大的特性，使得開發(fā)者創(chuàng)建各種Web應用時可以事半功倍。Express作為后端服務器，其特點是利用路由的方式來接受前

7、端發(fā)來的請求。2 基本框架系統(tǒng)主要由以下模塊組成，分別為用戶模塊、題目模塊、評測模塊以及統(tǒng)計模塊，形成一個基本的業(yè)務框架。用戶模塊支持登陸注冊以及注銷。題目模塊支持題目的添加修改。評測模塊負責對用戶上交代碼在后端進行評測，并實時返回結果。統(tǒng)計模塊會統(tǒng)計用戶每種不同類型算法題目的通過數(shù)量，以便用戶對自己學習進度進行評估。3 部分功能實現(xiàn)3.1 題目列表加載與界面展示題目列表界面如圖1所示。題目列表的分頁功能是在后端實現(xiàn)的，每頁最多顯示10題。因為JavaScript異步通信的原因，如果使用單純的循環(huán)，則會因為服務器響應的快慢，最終顯示的順序可能會被打亂，而在設計中要求題目是按照題目標號從小到大排

8、列的。為了防止這種情況的發(fā)生，前端在向服務器發(fā)起請求的時候使用了遞歸的方式，成功解決了這個問題。在題目名稱的右側有一個推薦標志，這個標志出現(xiàn)與否與用戶當前的算法能力相關。只有在用戶擁有學習當前題目所屬算法能力的時候才會出現(xiàn)這個標志，如果某道題需要的算法用戶目前沒有掌握，則不會出現(xiàn)這個標志。所有基礎算法（貪心，搜索等）會全部設置為默認推薦。3.2 學習園界面展示圖2為學習園界面推薦學習算法拓撲圖。學習園的上半部分界面展示了本網(wǎng)站目前支持學習的幾種算法，并根據(jù)其難度和學習的遞進程度繪制了學習拓撲圖。用戶在學習完基礎算法之后系統(tǒng)才會推薦高階算法相關的習題，提供給了用戶一條循序漸進的學習路線。算法總覽

9、如圖3所示?，F(xiàn)在的學習園提供了多種基礎算法的學習，有搜索算法，貪心算法，字符串算法，數(shù)據(jù)結構相關，動態(tài)規(guī)劃算法，以及數(shù)學相關等。這些算法在信息學中是最基礎和最實用的算法，該模塊主要是幫助用戶熟悉并掌握這些算法。在這個界面中，用戶可以查看每種算法的簡介，以及自己通過測試的題目和目前該類型題目在題庫中的總數(shù)，可以對自己的學習進度有一個直觀的感受。3.3 能力測試界面用戶進入個人界面，點擊能力測試，會彈出模態(tài)框，如圖4所示。用戶可以在這里對自己的算法能力做一個簡單的評估，每道題都會對應高階算法的一些基礎概念，如果用戶答對了大部分相關的題目，我們會認為用戶已經(jīng)掌握了該算法的概念，從而推薦用戶該類算法。

10、3.4 后臺評測功能的實現(xiàn)前端發(fā)送評測請求后，后端會接受到用戶提交的代碼和題目編號。然后進入評測過程，整個過程分為以下幾步。 將用戶上傳的代碼存放在本地評測文件夾。 進行超時處理，如果整個運行過程超過了時間限制，就會返回給客戶端超時信息，并結束評測過程。 將標準輸入輸出數(shù)據(jù)拷貝到評測文件夾。 編譯運行用戶上傳的代碼。 運行結束后比較選手程序輸出與標準輸出中的內容，來判斷最終結果是否正確，如果此時尚未運行超時，返回給客戶端相應的結果，否則在到達題目時限的同時停止進程并返回超時信息。另外，為了提高服務器端并行評測的效率，最大限度利用多核優(yōu)勢，特此在服務器端開設了多個“評測機”，這些評測機提供了多個

11、相同的評測環(huán)境，評測機的當前狀態(tài)使用信號量來控制。當接受到一個評測請求時，服務器會先遍歷所有評測機，找到空閑評測機進行評測，并將其信號量改變，當評測完成之后再將信號量還原。這種方法可以最大限度地利用服務器的資源，減少了用戶等待返回結果的時間，優(yōu)化了用戶體驗。4 結束語基于HTML5和JavaScript，完成了信息學自學的網(wǎng)站組。提供了算法學習拓撲圖，讓學生的學習有一個循序漸進的過程，算法的掌握程度可以通過題數(shù)統(tǒng)計來進行直觀評估，一定程度上解決了編程“入門難”的問題，有效提高了學生的自我學習效率的同時也減輕了教師的教學監(jiān)管壓力。Reference（References）：1 Mukund M.International Olympiad in InformaticsJ. Resonance，2002.7（1）：102-1072 苗春，魯琦.新高考政策下的信息學奧賽培養(yǎng)策略J.中國信息技術教育，2018.17：82-833 趙明陽.在線評測平臺在信息學奧賽輔導中的應用J.中國信息技術教育，2018.10：26-284 金志峰.提高初中學生編程水平的三個著力點J.科教導刊（下旬），2017.4：93-945 徐曉.基于Bootstrap技術的移動端Web開發(fā)研究J.微型電腦應用，2018.34（9