理论计算机科学电子笔记178（2007）161-169www.elsevier.com/locate/entcs一个通用的叠加可视化框架Tihomir Piskuliyski1Ramapo College of New Jersey505，Ramapo Valley RoadMahwah，NJ，美国Amruth Kumar2Ramapo College of New Jersey505，Ramapo Valley RoadMahwah，NY，美国摘要如果伴随着叙述的可视化更有效，为什么不把可视化放在叙述中呢？这可能会导致更好的学习转移。我们将提出一个通用的框架，这种叠加可视化，称为叠加可视化。我们框架设计的目标是1)将应用程序与可视化分离; 2）将规范与渲染分离。我们将描述一些覆盖可视化在编程中的应用，并提供我们为软件导师实现的覆盖可视化称为problets。叠加可视化的优点包括：对学习者的认知负荷较小，并且自动支持路径和状态可视化。保留字：叠加可视化、叠加可视化、程序可视化1引言研究人员发现，在解决问题的迁移任务[10]中，带旁白的动画优于仅动画、仅旁白或动画前的旁白。同样，在回忆任务中，视觉呈现的叙述优于视觉呈现之前的叙述[1]。这些结果支持双重编码假说[13]这表明刺激和表征之间有两种类型的联系：刺激和相应表征1 电子邮件地址：tpiskuli@ramapo.edu2电子邮件：amruth@ramapo.edu1571-0661 © 2007 Elsevier B. V.在CC BY-NC-ND许可下开放访问。doi：10.1016/j.entcs.2007.01.046162T. Piskuliyski，A.Kumar/Electronic Notes in Theoretical Computer Science 178（2007）161（口头和视觉），以及口头和视觉表征之间的指称联系如果视觉呈现叠加在叙述上会怎么样？在编程问题中，如果视觉表示叠加在程序代码上会怎么样？我们推测，这将促进视觉和语言表征之间更好的参照联系，并导致更好地从视觉表征转移到正在学习的概念。为了支持这种可视化，我们已经开发了一个框架，我们将在下文中称为叠加可视化。叠加可视化是将图形叠加在要可视化的材料上。在编程的上下文中，它是在代码上叠加图形我们将首先在第2节中描述覆盖可视化的一般框架。接下来，在第3节中，我们将讨论覆盖可视化在程序可视化中的一些应用。我们将用我们为编程导师实现的覆盖可视化的例子来说明，称为problets（www.problets.org） [6]。在第4节，我们将介绍当前的实现。 最后，在第5节中，我们将讨论了叠加可视化的优点，并将其与以前的工作进行了比较。2叠加可视化目标：我们的叠加可视化框架有两个目标：1）将应用程序与可视化分离; 2）将指定与渲染分离。在将应用程序与可视化分离时，我们希望确保两个目标：1）最大化可视化的可扩展性; 2）最小化指定此类可视化的开销。将规范与呈现分离，并为规范使用声明性表示，这增加了框架的可扩展性。指定可以手工编码，由程序自动生成，或由学习者使用鼠标手势指定。在所有这些情况下，将规范转换为可视化的可视化工具都是相同的。我们确定了应用程序和可视化之间的两层分离：一层是视觉原语，另一层是图形原语。Graphical Primitives：到目前为止，我们已经实现的图形原语有：1）Box -绘制/动画一个框，2）Arrow -绘制/动画一个箭头，3）Ellipse-绘制/动画一个椭圆，4）Text-绘制/动画一个文本串视觉基元：到目前为止，我们已经识别和实现的视觉基元是：1）使用箭头指向某些单词或代码行，2）使用框突出显示反馈和/或代码行，3）使用椭圆圈出反馈和/或代码行，4）用箭头连接两个圈出的代码段，以及5）动画给定的文本段。视觉规格：视觉规格由视觉T. Piskuliyski，A.Kumar/Electronic Notes in Theoretical Computer Science 178（2007）161163Fig. 1. 叠加可视化系统基元、需要为其创建视觉基元的代码中的行、视觉基元是否应被绘制或动画化、视觉基元必须被绘制/动画化的顺序以及视觉基元必须被呈现的颜色。由于视觉规范本质上是声明性的，它可以通过几种方式生成，如前所述：•由应用程序自动生成：应用的使用叠加可视化可以自动确定必须可视化的代码行、它们应该被可视化的视觉基元以及它们应该被可视化的顺序，并相应地生成视觉规范。• 由学习者指定：学习者可以使用鼠标手势来指定应该使用的视觉原语，应该使用原语的代码行，以及它们应该呈现的顺序可视化工具：可视化工具（如图1中的黑框所示）获取一个可视化规范的声明性列表作为输入，例如，一个说明for循环、while循环或switch语句执行的规范列表。Visualizer创建与视觉规范相对应的视觉基元视觉基元反过来又创建渲染它们所需的图形基元。在呈现过程中，可视化工具对视觉基元的呈现进行排序，然后委托渲染到它们对应的图形基元。3Overlay可视化覆盖可视化可以用于程序可视化中的各种目的：可视化程序中的控制流，可视化程序中的数据流，按功能聚类代码，设置变量生命周期中缺少的阶段等。在每种情况下，可视化都可以将学习者的注意力集中在直接感兴趣的代码段我们将展示164T. Piskuliyski，A.Kumar/Electronic Notes in Theoretical Computer Science 178（2007）161图二. 控制流可视化示例控制流可视化、数据流可视化和错误突出显示来自我们为编程导师实现的覆盖可视化，称为problets。控制流可视化阐明了程序中代码行的执行顺序。当程序涉及选择语句、重复语句和函数调用时，控件流可视化特别有用。图2显示了由叠加可视化工具生成的控件流可视化示例。提供给可视化工具的规格如下：(i) 第2行至第5(ii) 第5行至第8(iii) 第8行至第15(iv) 第15行至第18我们计划让problets在执行程序时自动生成这个规范，通过跟踪执行的代码行的行号。设置错误：当程序对象没有经过正确的状态转换序列时，它可能会以错误状态结束，例如，一个变量在被引用之前不被赋值，一个指针在被解引用之前不被分配，或者一个循环在它的主体中不被更新。叠加可视化可用于突出显示或设置缺失的状态转换，并澄清错误的来源数据流可视化阐明了应用于程序中一个或多个变量的转换序列。当操作应用于程序的非连续部分中的变量时，数据流可视化特别有用。它补充了Jeliot 3 [2]和problets[7]等系统中提供的数据空间可视化-而数据空间可视化提供了程序中所有变量的最新值的快照，数据流可视化显示了序列T. Piskuliyski，A.Kumar/Electronic Notes in Theoretical Computer Science 178（2007）161165图三. 数据流可视化对一个或多个变量执行的操作，可以解释它们的最新值。图3显示了由叠加可视化工具生成的数据流可视化示例。提供给可视化工具的规格如下：(i) 用红色圈出(ii) 指向蓝色的(iii) 用红色圈出(iv) 指向蓝色的(v) 用红色圈出(vi) 指向红色的我们再次计划让problets在执行程序时自动生成此指定，通过跟踪出现特定变量的代码行。聚类代码：当分析程序的行为时，将逻辑上相关的代码行聚类在一起极大地有助于理解，例如，围绕具有嵌套循环的程序中的每个循环绘制框（例如，见[6]）。覆盖可视化可用于此目的。而代码和数据流可视化将时间映射到空间，即，将程序在离散时间事件上的行为映射到代码的文本上，聚类将空间映射到空间上，即，将离散的代码行映射到相关的集群中。4在Problets中使用Overlay可视化我们现在将描述使用叠加可视化来呈现问题、自动解决问题、输入答案并在问题小程序中评分。考虑下面的C++代码，它由一个关于变量的problet表示void main（）{intindex = 855;166T. Piskuliyski，A.Kumar/Electronic Notes in Theoretical Computer Science 178（2007）161见图4。 学生生成的数据流可视化示例intvolume = -976;index = volume;intcount=volume;<
下载后可阅读完整内容，剩余1页未读，立即下载
