基于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