CN112133146B - 一种算法练习代码执行可视化系统 - Google Patents

Abstract

本发明提供了一种算法练习代码执行可视化系统，包括后台服务器端、学生端和教师端，所述后台服务器端、学生端和教师端均可以通过数据进行连通传输数据，包括：学生根据教师端指示，选择任意后台服务器端存储的算法，所选择得到的算法在学生端执行可视化演示，所述后台服务器端、学生端和教师端共同协同完成算法练习可视化演示。本发明系能监控执行过程的平台，并且将执行过程变成逐帧动画，学生就能通过动画理解代码执行过程，对比不同的解决方案的不同效果，对于计算机类院系学生学习并理解算法有明显帮助。

Description

一种算法练习代码执行可视化系统

技术领域

本发明涉及可视化教育应用技术领域，更具体地说，尤其涉及学生学习使用的一种算法练习代码执行可视化系统。

背景技术

现有技术的学生教育可视化系统中，如在线编程判题网站，核心功能：网站里提供题库，编写代码，将代码上传后在云端执行，执行时输入标准测试数据，等待用户的代码算出答案，将用户代码的答案用来对比标准答案，给用户的代码打分，其利用云端虚拟技术，云端只进行了代码的编译和执行，对比执行结果学生只能看到代码的执行结果，让代码在云端执行时安全可控，不会让云端服务器受恶意代码影响，目的只在意学生代码的执行结果，不在意执行过程，学生无法获得代码执行的过程中，代码在内存中的值；而国外算法可视化网站(如https://www.cs.usfca.edu)，学生只能查看算法执行过程，学生不能自己写代码，同时看到自己代码的执行效果。

发明内容

针对现有技术的上述缺陷和问题，本发明提供一种算法练习代码执行可视化系统。

为了达到上述目的，本发明提供如下技术方案：

一种算法练习代码执行可视化系统，包括后台服务器端、学生端和教师端，所述后台服务器端、学生端和教师端均可以通过数据进行连通传输数据，包括：学生根据教师端指示，选择任意后台服务器端存储的算法，所选择得到的算法在学生端执行可视化演示，所述后台服务器端、学生端和教师端共同协同完成算法练习可视化演示。

所述后台服务器端包括调试控制器，完成执行过程追踪，接收学生提交的代码以及定义要在内存中追踪的变量值，检查学生代码对于系统的威胁，限制学生代码执行占用的内存空间，限制执行时间，以调试的方式控制学生代码的执行过程，收集执行过程中的信息，所述调试控制器，基于代码编译调试软件作为基础，编译学生的代码，然后逐步执行，处理执行过程中的意外，根据调试器返回的信息动态设定调试流程；

所述学生端完成每一个算法题目的模拟数据生成方式、学生自定义数据的检查、代码执行过程追踪计划、每一阶段的执行结果显示方案、结果统计方案都是定制代码可储存到云端数据库，在web端执行的时候提取出来执行，题目定制中的显示方案得到的代码放到echarts里出现结果，代码执行中间状态动画过程。解析代码执行结果，渲染成逐帧数据，在echarts里形成逐帧动画，并能够实现动画的开始、暂停、跳帧，执行过程的控制台输出，与动画过程同步进行文字输出，描述学生代码执行过程；

所述教师端可以自己定制新的算法，并加入数据库，查看学生的提交情况，可以给学生布置作业。

上述技术方案中，在后台服务器端，任务队列接收到学生端发来的任务请求，任务请求里除了学生代码还有任务配置，任务配置包括：代码语言、允许占用的最大内存、允许执行的最多时间、需要跟踪的代码内容和追踪方式、回调链接；守护进程将任务分配给空闲的执行管理器。

上述技术方案中，所述执行管理器根据不同的编程语言，选择不同的编译器、调试器、调试管理器、分析器，执行管理器发送指令，完成学生代码的编译，如果发生编译错误，直接将错误信息发送到通知模块，执行管理器将编译好的内容交给调试管理器。

上述技术方案中，所述调试管理器发起调试命令，根据任务配置中要追踪的代码内容决定程序断点，然后开始执行，执行过程中，调试管理器通过调试器的返回内容识别出程序中断状态，将中断之前调试器反馈的信息提交给分析器。

上述技术方案中，所述分析器参考反馈信息和追踪相关的配置，决定下一步调试指令或者完成调试提交分析结果，结束调试有顺利完成、出错这两种情况，调试管理器将执行结果提交给执行管理器，执行管理器转给通知模块，通知模块将执行结果通过回调链接发送回业务端。

本发明系能监控执行过程的平台，并且将执行过程变成逐帧动画，学生就能通过动画理解代码执行过程，对比不同的解决方案的不同效果，对于计算机类院系学生学习并理解算法有明显帮助。

具体实施方式

下面将结合本发明的实施例，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

以下以具体的具体模拟实施例说明本发明的技术方案：

作为本发明实施例一种算法练习代码执行可视化系统，包括后台服务器端、学生端和教师端，所述后台服务器端、学生端和教师端均可以通过数据进行连通传输数据，包括：学生根据教师端指示，选择任意后台服务器端存储的算法，所选择得到的算法在学生端执行可视化演示，所述后台服务器端、学生端和教师端共同协同完成算法练习可视化演示。

后台服务器端包括调试控制器，完成执行过程追踪，接收学生提交的代码以及定义要在内存中追踪的变量值，检查学生代码对于系统的威胁，限制学生代码执行占用的内存空间，限制执行时间，以调试的方式控制学生代码的执行过程，收集执行过程中的信息，所述调试控制器，基于代码编译调试软件作为基础，编译学生的代码，然后逐步执行，处理执行过程中的意外，根据调试器返回的信息动态设定调试流程；

学生端完成每一个算法题目的模拟数据生成方式、学生自定义数据的检查、代码执行过程追踪计划、每一阶段的执行结果显示方案、结果统计方案都是定制代码可储存到云端数据库，在web端执行的时候提取出来执行，题目定制中的显示方案得到的代码放到echarts里出现结果，代码执行中间状态动画过程。解析代码执行结果，渲染成逐帧数据，在echarts里形成逐帧动画，并能够实现动画的开始、暂停、跳帧，执行过程的控制台输出。与动画过程同步进行文字输出，描述学生代码执行过程；

教师端可以自己定制新的算法，并加入数据库，查看学生的提交情况，可以给学生布置作业。

具体使用为：

学生端：

1.学生选择一个要做实验的问题，打开。

2.打开后学生可以生成测试数据。包含随机生成测试数据，自定义数据等。

3.生成测试数据后，右侧生成部分已经写好的代码，左侧生成了测试数据的图像。

4.学生在写好的代码中插入核心的算法代码，提交执行。

5.等待一段时间，服务器计算好了执行结果，开始生成逐帧动画，每一帧是学生算法的一个关键步骤。学生看到动画细节，同时也能看到对应的文字记录。

6.可以进行动画播放控制，一帧一帧地观察自己的代码的执行效果。

7.学生也可以查看自己的代码执行后的情况，下载统计图放入实验报告。统计图中包含代码执行前和执行后数据的样子，学生代码关键步骤的执行次数，方便老师评估学生代码的质量。

二.学生端程序流程

1.当学生打开一个实验问题，从数据库里得到这个问题的细节设置数据，然后前端通过js进行渲染。

2.当学生生成测试数据，通过给每个问题定制的数据生成代码在前端生成。

3.右侧写好的代码，是根据每个问题定制的规则，结合生成的测试数据得到的。

4.学生补充完代码提交代码，根据每个问题定制的规则确定哪些是关键步骤，并将关键步骤信息和代码一起提交给服务器。

5.服务器备份学生代码到数据库，并将临时任务状态信息放入redis。

6.服务器调用编译器编译学生代码。

7.服务器以调试的方式在关键步骤位置，获取学生代码执行的中间状态，并放入返回结果中。

8.前端收到服务器发来的执行结果，根据每个问题定制的规则渲染成图像，每一步的过程的图像串联起来就是逐帧动画。

9.学生通过前端的控制按钮控制动画，实际上就是控制渲染的图像的出现过程。

10.学生查看统计结果，根据每个问题定制的规则，结合执行结果中的数据，生成统计图。

下面以红黑树教学说明本发明的实施例，红黑树是大学算法教学的难点。

红黑树的关键操作，包含节点间建立关系、节点上色、节点间删除关系等。

在学生端给学生提供模版代码，模版代码里包含这些操作，学生只需要在模版代码中指定的位置写好操作代码，即可完成代码的编写。

学生写好算法操作代码后点击提交，学生端把学生插入的代码和所选模版提交到后台服务器端，后台服务器端结合存在数据库里的模版补全代码，从数据库获取信息，关于这个模版里哪些内容要被追踪在红黑树的模版代码里，如关键点(1)左、右节点建立关系；(2)删除关系；(3)节点上色，这三个操作会被追踪，后台服务器端将要最终的信息、代码以及其它信息打包给代码执行服务端，以及在数据库和redis做记录。

代码执行后台服务器端接受到http请求，将任务放到任务队列，当发现有空闲的执行管理器时，就开始执行。

学生的C++代码执行的第一步，是调用C++编译器编译成二进制程序，如果没有编译错误，就开始调试。

调试管理器调试的方式是：向调试器发送命令加载二进制程序，然后用命令标记好要追踪的内容，然后下命令调试器开始执行。调试器执行到对应的位置会输出一些信息，这些信息包含无用信息、变量信息、错误信息、程序结束通知、程序暂停信息等等。调试器将这些信息给到分析器，分析器判断哪些信息需要记录，要记录的信息是要追踪的内容。然后分析器决定下一步是否结束调试，如果不结束下一步应该发什么指令给调试器。

完成调试任务或发生错误时，调试管理器将记录的内容通过执行管理器发送给通知中心。记录内容包含关键操作的执行情况，比如红黑树中记录的信息包含：值为3的点成为值为5的点的左子节点；将值为6的点变成红色。

通知中心通过http的POST请求，将结果发送回后台服务器端，后台服务器端将结果写入数据库和redis。

学生端通过订阅redis，得到执行过程中的结果，就能渲染动画还原整个红黑树建立、修改的过程，每一个算法的渲染方式都是定制的。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (5)

1.一种算法练习代码执行可视化系统，其特征在于：包括后台服务器端、学生端和教师端，所述后台服务器端、学生端和教师端均可以通过数据进行连通传输数据，包括：学生根据教师端指示，选择任意后台服务器端存储的算法，所选择得到的算法在学生端执行可视化演示，所述后台服务器端、学生端和教师端共同协同完成算法练习可视化演示；

所述后台服务器端包括调试控制器，完成执行过程追踪，接收学生提交的代码以及定义要在内存中追踪的变量值，检查学生代码对于系统的威胁，限制学生代码执行占用的内存空间，限制执行时间，以调试的方式控制学生代码的执行过程，收集执行过程中的信息，所述调试控制器，基于代码编译调试软件作为基础，编译学生的代码，然后逐步执行，处理执行过程中的意外，根据调试器返回的信息动态设定调试流程；

所述学生端完成每一个算法题目的模拟数据生成方式、学生自定义数据的检查、代码执行过程追踪计划、每一阶段的执行结果显示方案、结果统计方案都是定制代码可储存到云端数据库，在web端执行的时候提取出来执行，题目定制中的显示方案得到的代码放到echarts里出现结果，代码执行中间状态动画过程，解析代码执行结果，渲染成逐帧数据，在echarts里形成逐帧动画，并能够实现动画的开始、暂停、跳帧，执行过程的控制台输出，与动画过程同步进行文字输出，描述学生代码执行过程；

所述教师端可以自己定制新的算法，并加入数据库，查看学生的提交情况，可以给学生布置作业。

2.根据权利要求1所述一种算法练习代码执行可视化系统，其特征在于：在后台服务器端，任务队列接收到学生端发来的任务请求，任务请求里除了学生代码还有任务配置，任务配置包括：代码语言、允许占用的最大内存、允许执行的最多时间、需要跟踪的代码内容和追踪方式、回调链接；守护进程将任务分配给空闲的执行管理器。

3.根据权利要求2所述一种算法练习代码执行可视化系统，其特征在于：所述执行管理器根据不同的编程语言，选择不同的编译器、调试器、调试管理器、分析器，执行管理器发送指令，完成学生代码的编译，如果发生编译错误，直接将错误信息发送到通知模块，执行管理器将编译好的内容交给调试管理器。

4.根据权利要求3所述一种算法练习代码执行可视化系统，其特征在于：所述调试管理器发起调试命令，根据任务配置中要追踪的代码内容决定程序断点，然后开始执行，执行过程中，调试管理器通过调试器的返回内容识别出程序中断状态，将中断之前调试器反馈的信息提交给分析器。

5.根据权利要求4所述一种算法练习代码执行可视化系统，其特征在于：所述分析器参考反馈信息和追踪相关的配置，决定下一步调试指令或者完成调试提交分析结果，结束调试有顺利完成、出错这两种情况，调试管理器将执行结果提交给执行管理器，执行管理器转给通知模块，通知模块将执行结果通过回调链接发送回业务端。