可视化表示求值的动态求值树

理论计算机科学电子笔记224（2009）41-46www.elsevier.com/locate/entcs可视化表示表达式求值的动态求值树Essi Lahtinen埃西·拉赫蒂宁1，2芬兰坦佩雷科技大学软件系统系Tuukka Ahoniemi3芬兰坦佩雷科技大学软件系统系摘要新手程序员在遵循程序视觉化时，他们的视觉注意策略存在困难。本文介绍了正在进行的工作，改善可视化工具的用户界面，以支持学生的视觉注意力问题。我们介绍了一个用户界面的解决方案，称为动态评估树。基本思想是减少用户界面的单独窗口的数量，从而使视觉注意力更多地集中在屏幕的一部分关键词：新手程序员，程序可视化工具，视觉注意策略，动态评价树。1引言可视化工具的用户界面（UI）通常使用类似的结构构建。许多工具似乎在它们的UI中有相同的组件，并且它们的位置相似。我们认为这部分是因为工具为示例提供了多个不同的视角，并且没有为UI设计应用特定的设计原则。组件在他们的地方只是因为他们总是用来。然而，从教学角度来看，可视化工具的有效性可能来自于多个组件的使用及其在屏幕中的放置。本文引用了Bednarik的眼动追踪研究结果[2]。基于1感谢诺基亚基金会为这项工作提供部分资助。2电子邮件：essi. tut.fi3电邮地址：tuukka. tut.fi1571-0661/© 2008 Elsevier B. V.根据CC BY-NC-ND许可证开放访问。doi：10.1016/j.entcs.2008.12.04742E. Lahtinen，T.Ahoniemi/理论计算机科学电子笔记224（2009）41为此，我们提出了一种新的方法来集成一些UI组件，并提高用户图2可视化工具用户界面的典型布局一个典型的可视化工具在程序或算法执行期间轮流和并行地呈现多种不同类型的动作。不同种类的动作可以是例如：• 控制到达程序代码或算法中的新语句• 存储在计算机内存中的值被引用或更改。• 计算表达式的值• 程序打印输出并读取输入。可视化工具UI的布局通常呈现不同类型的操作 在不同的窗口。不同的工具对窗口有不同的名称。我们列出一些可能性：• “代码”窗口：显示所执行的程序代码或算法。它通常通过突出显示代码或算法行来说明执行过程。它也可以被称为算法窗口。• 内存窗口：通过绘制变量和数据结构的图片并突出显示图片的部分来执行大多数视觉效果。在Jeliot [6]的UI中，这个窗口被命名为剧院。• 求值窗口：每当代码窗口执行表达式时，此窗口即被激活.这里显示了操作数、运算符和整个表达式的值。在图1中用红色圆圈标记了一个示例。• 控制台窗口：打印输入并读取程序的输出。除了上面提到的最常见的窗口之外，还可以有其他可能性，例如注释窗口，它以书面形式解释程序的运行[9]。另外，允许用户交互的可视化工具通常有一个用于控制按钮的窗口。根据可视化的焦点，可能有些窗口是不必要的，因此不存在。例如，算法可视化工具可能根本不需要评估窗口，因为它们在比单个表达式更高的抽象级别上呈现算法。 工具的例子，Malmi等人[5]和Naps等人[7]提出了不需要评估窗口的方法。有时，可视化工具的一个窗口包含多种操作。例如，Jeliot 3 [6]中的剧院实际上包括内存窗口和执行窗口。E. Lahtinen，T.Ahoniemi/理论计算机科学电子笔记224（2009）4143图1.一、在代码窗口中执行的表达式中的变量值将复制到计算窗口中进行计算。3眼动追踪研究的结果Bednarik [2]对分析编程中视觉注意策略的方法进行了研究，部分是通过使用可视化工具Jeliot 3 [6]跟踪程序员的眼球运动来进行的。 这项研究描述了专家和新手程序员的视觉策略。根据这项研究，专家程序员可以更好地遵循可视化工具的不同窗口中并行显示的信息。他们能够在使用可视化工具的会话期间改变他们的视觉注意力策略。在会议开始时，他们通常专注于代码窗口，然后在会议中将代码与其他窗口中的演示相关联。具体来说，专家比新手更全面地遵循可视化工具的代码窗口。相比之下，新手程序员只使用几种视觉注意策略。他们要么在不同的窗口之间反复切换他们的视觉注意力，要么一直专注于其中一个窗口。由于可视化工具的目标受众主要是新手程序员，因此在设计工具的UI时应考虑4动态评估树当教师向学生解释程序代码的执行时，他们倾向于在代码行的上方或下方使用花括号注释程序代码，见图2。 这是标记表达式的值或类型的简单方法。 这种注释可以以许多不同的方式使用。表1给出了一些例子。Kumar [4]在一个小程序中也使用了相同的符号，该小程序生成了与表达式求值相关的问题。由于这已被证明是一个很好的方式来说明学生的执行，我们建议它应该尝试在可视化工具太。计算窗口显示的表达式也显示在代码窗口中，因为它们当然是执行中的语句的一部分。我们建议将计算树集成到代码窗口中，而不是在计算窗口中分离表达式。这将减少切换44E. Lahtinen，T.Ahoniemi/理论计算机科学电子笔记224（2009）41图二、用花括号在白板上解释目的例如1.显示表达式的值2.显示表达式的类型，尤其适用于诸如包含结构3. 解释一些错误情况表1一些使用花括号的例子将视觉注意力集中到屏幕的另一侧，因此对于新手程序员来说应该更容易使用E. Lahtinen，T.Ahoniemi/理论计算机科学电子笔记224（2009）4145在代码窗口中集成表达式计算的一种可能性是使用类似于表1中的花括号的表示。在这种示例中，表达式的求值当然不会一直停留在代码窗口中，而是在执行表达式时逐步出现，并在执行进行到下一行时消失。因此，我们称之为动态评估树。在代码窗口中动态显示数据的另一种方法是当鼠标光标被放置时在工具提示窗口中显示数据代码窗口中的表达式。这可以在任何可视化工具中使用，而不管动态评估树的使用。 但是，如果您希望在用户单击步骤按钮时显示评估，则此解决方案没有帮助。使用花括号的想法只是为了在程序代码中表示表达式的值。除此之外，还需要可视化工具的其他功能来整体呈现程序的执行。 例如在包含函数调用的行上，工具可以首先呈现控件更改为函数的定义，并使用突出显示已执行的线对此在执行函数之后，该工具可以使用花括号来表示函数的返回值计算为函数调用。5讨论和结论函数式编程的一些工具，例如，Pareja-Flores等人的WinHipe [8]和Felleisen等人的DrScheme [3]使用了类似的动态呈现表达式求值的思想。它被称为评价的重写模型。在这些工具中，求值被表示为一系列重写的表达式，这些表达式显示的信息与动态求值树中的花括号相同。实际上，使用花括号的想法与重写完全相同。重写和使用花括号都是呈现演绎的方式重写模型在函数式编程语言中以非常自然的方式工作。它还为命令式编程语言中的函数调用等非平凡求值提供了方便的解决方案。当使用花括号而不是重写时，函数调用可以用其他特性来处理，而不是像前一章所解释的那样包含。WinHipe也进行了评估，学生们体验到，工具很容易使用[1]。这是令人鼓舞的，我们认为使用花括号也值得学生尝试我们在重写时更喜欢使用花括号的原因是，我们希望原始程序代码保持在代码窗口中，并且只在行之间添加注释。因此，与重写模型类似的方式使用的花括号比重写表达式更适合我们的需要如果代码窗口包含动态计算树，它实际上不再仅仅是一个代码窗口，而更像是一个多用途窗口。这不仅可以减少视觉注意力焦点的不断切换，而且还可以将评估直接与代码联系起来。 当评估直接在46E. Lahtinen，T.Ahoniemi/理论计算机科学电子笔记224（2009）41实际的程序代码，用户可能能够在代码和它实际做的事情之间形成更强的心理关联。通过这种方式，用户有望学习如何比使用单独的评估窗口更好地阅读代码由于新手程序员在视觉注意力策略方面有很多问题，动态评估树应该对他们最有帮助。毕竟，可视化工具的最大目标受众是新手程序员。因此，我们认为这个想法值得一试。动态评估树尚未实现，但我们正在绘制将其添加到现有可视化工具VIP的下一版本的可能性[9]的文件。在实现中会有一些技术挑战：代码窗口需要垂直“拉伸”，以便为花括号和它们上面或下面的文本腾出空间。另一种可能性是在代码窗口顶部的工具提示窗口中显示花括号。但是，这会使一些代码变得模糊，从而使工具的使用变得困难。在实现动态计算树时，应该使用 一项眼动追踪研究，以确定视觉注意策略的可能帮助。学生至少还有代码窗口和内存窗口可以遵循。进一步研究的一个有趣的可能性可能是研究是否有可能通过在UI中使用动态评估树和其他类似的解决方案一个窗口适合所有人！引用[1] 安赫尔 维拉兹奎兹-伊图尔维德，C.帕雷哈弗洛雷斯和J.Urquiza-Fuentes，Anapp roache.程序动画的无边界构造，计算机&教育50（2008），pp. 179-192.[2] 贝 德 纳 里 克 河 “Methods to Analyze Visual Attention Strategies: Applications in the Studies ofProgramming,”论文，约恩苏大学，约恩苏，芬兰（2007年）。[3] Felleisen，M.，R. B.芬德勒，M. Flatt和S. Krishnamurthi，DrScheme项目：概述，SIGPLAN Not。33（1998），pp. 十七比二十三[4] 库马尔A. N.，结果从评价的有效性在线导师的表达评价，在：SIGCSE216-220[5] 马 尔 米 湖诉Kar avirta ， A. Korhonen ， J.Ni kander ， O.Seppéaléa 和 P.Sil v asti ，Visualalgorithmsimulation exercise system with automatic assessment ： TRAKLA2 ， Informatics inEducation 3（2004），pp. 267-288.[6] Moreno，A.，N. Myller，E. Sutinen和M. Ben-Ari，使用Jeliot 3可视化程序，高级视觉界面国际工作会议论文集AVI 2004（2004）。[7] 纳普斯，T。L.， J. R. 科兰湖L. Norton，JHAV E“-一个让学生积极参与基于网络的算法可视化的环境，ACM SIGCSE Bulletin，第30届SIGCSE计算机科学教育技术研讨会论文集SIGCSE '00 32 （ 2000 ） ， 第32 页 。109比113[8] Pareja-Flores，C.， J. Urquiza-Fue ntes和J. A'ngelVel'azquez-Iturbide，Winhi pe：一个基于重写和可视化的函数式编程ide，SIGPLAN Not。42（2007），pp. 14-23.[9] Virtanen ， A.T. ， E.Lahtinen 和 H.-M.Jüarvinen ， VIP ， avisualinterpreterforlearningintroductoryprogramming with C++，Proceedings of the Fifth Finnish/Baltic Sea Conferenceon Computer Science Education（2005），pp. 129-134.