在线生成AV内容的框架: 一个易于使用的定制化框架

理论计算机科学电子札记178（2007）23-31www.elsevier.com/locate/entcs一种在线生成AV内容的框架GuidoRoßling1德国达姆施塔特大学计算机科学系托比亚斯·阿克曼2德国达姆施塔特大学计算机科学系摘要许多计算机科学教育工作者认为，动态系统的可视化或动画，特别是算法和数据结构，应该帮助学生学习计算机科学的这个核心方面。然而，大多数教育工作者在他们的教学教学其中一个主要原因是寻找或生成“适当”内容所需的时间本文试图弥补这一点，说明了一个易于使用的，但不灵活的框架，用于生成内容上的，但定制的最终用户保留字：算法可视化，生成器，框架，在线1引言大多数教育工作者和学生不使用AV内容来改善他们的教学或学习，尽管许多人认为他们的使用可以帮助学习者。ITiCSE 2002 [3]的AV工作组研究了这一问题的根本原因，并就如何解决这一问题提供了一些指导。在会前调查中，调查参与者提出了以下不采用AV的主要原因• 93%的人提到• 90%的人提到了1 电子邮件地址：roessling@acm.org2电子邮件：TAzzu@gmx.net1571-0661 © 2007 Elsevier B. V.在CC BY-NC-ND许可下开放访问。doi：10.1016/j.entcs.2007.01.03624G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）23• 90%的人抱怨“开发可视化所需的• 83%的人提到• 79%的受访者表示，需要时间来调整AV内容“教学方法/课程内容”。对此我们能做些什么呢？我们可以尝试使工具易于使用-但这可能意味着开发动画的时间将增加。例如，ANUMBERS[6]和JAWAA2[1]包含一个可视化编辑器，用于在GUI前端创建AV内容。这使得内容创建非常容易，如果也很耗时。然而，这种方法通常不能确保所描绘的可视化准确地表示底层算法。像Jeliot[2]这样的系统只需要适当的底层代码。然而，他们往往准备不足，使可视化的内容适应教育者在本文中，我们描述了我们的生成器框架的方法，它提供了一个GUI前端，用于用户定制的内容和实时可视化生成。一个相关的处理，但完全集中在最终用户2从最终用户的角度看生成器框架我们想设计一个组件来轻松生成内容。这个组件的目标是解决上面描述的用户抱怨：学习一个新工具，开发一个可视化，或者使它适应用户的偏好需要太长的时间我们希望通过减少大部分投诉来解决这一问题• 将多个生成器集中在一个地方，最好是已建立的AV内容存储库之一，使搜索示例变得更容易和更快;• The “time to learn” is reduced by using• “开发可视化的时间”通过使用准备好的• 由于生成器应根据用户的设置创建输入• 通过使视觉布局的输入值和所选方面适应用户的愿望，减少了图1概述了发电过程控制的预期流程。在启动框架后，用户将选择一个主题类别和一个具体的算法，调整值和视觉属性。然后，如果框架与支持直接加载和显示生成的内容的系统绑定，则用户可以保存生成的这是怎么回事？一组生成器负责生成AV内容。通常，每个生成器将为一个具体算法生成可视化。例如，QuickSortGenerator类可以生成可视化G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）2325开始选择类别选择算法调整值和属性直接保存运行Fig. 1.拟议框架关于QuickSort然后，在基于GUI的“生成工具”中收集一组这样的生成器图二. 生成器步骤1：选择主题区域最终用户首先启动工具，如图2所示。窗口的顶部告知用户该工具以及下一步可以采取的步骤。用户最初看到一个主题领域列表（在图2中，这是排序、搜索和密码学）。一旦选择了某个区域，右侧将显示相应的图标、标题和说明。在底部，用户被告知可用于该类别的内容生成器的数量。在选择一个类别并单击“Next >“按钮之后右侧的文本区域包含生成器的简要描述，以及示例输出或底层代码的示例。这对于像快速排序这样的算法尤其重要，因为它有很多变体。然而，只有在讲座中使用的变体可能对教育工作者和学生都有帮助。在这些区域下面，显示了输出格式（这里的在按下Next>之后，用户被引导到内容适配步骤，如图4所示。在这里，用户可以编辑输入值和选定的视觉属性。26G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）23图三. 生成器步骤2：选择算法见图4。 生成器步骤3：调整输入值和视觉外观G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）2327一旦用户在这一步中按下Next>按钮，框架将要求用户提供一个文件名，内容将被存储到该文件名中。 之后，发生器被激活并产生适当的输出，例如，用于AVAV系统的AV脚本文件然后，用户可以运行可视化系统以显示新生成的可视化，或者通过返回并修改值来生成附加内容我们还将生成器框架集成到了AV系统中，它可以通过菜单项激活如果用户没有指定文件名，则生成的动画代码将由ANSYS图五. 生成器步骤4：生成的动画因此，最终用户应该像最初承诺的那样轻松地生成他们的因此，在下一节中，我们将研究内容生成器28G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）233AV内容生成器AV内容生成器实现者必须执行以下简单步骤，以在生成器框架中包含新的生成器：(i) 为所需的算法实现一个生成器类，该类位于gener- atorImplementations包中。生成器必须实现generator.Generator接口。这需要实现以下简单的公共方法：• GeneratorType getGeneratorType（）返回由该算法生成的算法的类型。 此信息用于确定图2中主题区域列表的内容。类GeneratorType的 构 造 函 数 期 望 不 同 类 型 算 法 的 预 定 义 常 量 的 组 合 ， 例 如 ，GeneratorType.GENERATOR TYPE SORT，用于对租赁进行排序;• String getName（）返回算法• StringgetDescription（）返回算法• StringgetCodeExample（）返回生成器的输出（或底层算法的代码）的示例• String getFileExtension（）返回生成器输出的文件扩展名，例如，asu表示A numberS脚本，也如图3所示;• 字符串生成（AnimationProperties容器道具，Hashtable prims）必须生成内容并将其作为String对象返回。这两个参数包含一组视觉属性和一组用户定义的int值或数组。最后一个方法实际上是唯一会产生一定工作量的部分。其他方法通常可以在不到一分钟的时间内实现。图6说明了接口方法如何与图形用户前端结合，如图3所示。(ii) 确保算法使用用户指定的值，而不是硬连线设置。这是通过检查固定值，例如Color.black ， 被 替 换 为 对 generate 方 法 的 AnimationPropertyContainer 或Hashtable参数的AnimationPropertyContainer本质上是一个向量，允许轻松访问用户指定的属性。例如，用户在图4中定义的数组可以访问为int[]myArray=（int[]）prims. inti（其中prims是Hashtable参数的名称。同样，亮点相关代码的颜色被访问为Color =（Color）props.get（其中props是传递给generate方法的AnimationPropertyContainer参数。注意，“highlightColor”G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）2329getGeneratorType（）getDescription（）getName（）getCodeExample（）getFileExtension（）见图6。 方法名称如何与生成器GUI是“code”属性集的一个属性的名称(iii) 指定算法使用的属性和基元。可以使用一个简单的GUI前端来实现这一点，如图7所示。这个前端允许作者选择生成器使用的原语和属性集每个原语和属性都有一个默认值，可以根据作者的偏好进行调整。此外，作者可以单独决定每个属性是否应该是用户可编辑的。因此，最终用户将能够适应关于视觉布局的“无”和“一切”之间的任何东西图7显示了属性构建器窗口。第一个框架（图中未显示）允许内容生成作者加载现有规范或创建新规范。每个规范可以包含一组文件夹、基本对象和属性（由带圈的字母P表示）。基元的编辑前端与图4所示的前端相同。如图7所示，作者可以指定给定的条目--这里是“cellHighlight”--是否可以由最终用户编辑。比较图4和图7，可以很快看出作者已经停用了许多属性的用户编辑，例如“array”元素的fillColor、filled、depth、cascaded和vertical编辑过程完成后，设置将存储为XML文件。生成器的实现以及XML规范驱动了本文前三个图中所示的生成过程。根据我们的经验，实现算法生成器所需的时间中，大约有80%-95%与生成方法有关，因此与实际的可视化有关。这只留下5-20%的开销用于将生成器嵌入到框架- 在大多数情况下，第一次尝试可能只有20%，更接近30G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）23图7.第一次会议。 面向内容生成作者的Animation Properties Builder前端5%，其他人。目前，有30多个生成器用于主题领域排序、搜索和密码学，如图2所示。生成器框架是完全国际化的，尽管它目前只支持英语和德语。欢迎志愿者帮助翻译语言资源（GUI的文本少于100行4总结和进一步工作在本文中，我们提出了一个简单而富有表现力的框架，使AV最终用户更容易指定可视化的输入，并使其视觉属性适应用户的偏好或内容设计。使用该组件对于最终用户来说是简单而直接的，对于AV内容生成器来说也是简单而快速的。该组件可以很容易地集成到现有系统中，如示例集成到ANALOG系统中所示。此外，除了生成AV内容之外，它还可以用于不同类型的内容。例如，它可以在一个对于任何类型的数据，请使用LATEX或HTML.com。在这种情况下，通常需要调整文件扩展并确保输出是有效的形式，例如，为LATEX准备。讲习班期间集中讨论了生成器框架。尽管到目前为止，该框架只与ANUMERALS结合使用G. Rößling，T.Ackermann/Electronic Notes in Theoretical Computer Science 178（2007）2331没有理由不能为其他AV系统（如JAWAA2）提供输出。作为进一步的工作，我们计划进一步增加可用生成器的数量，并希望添加其他领域，如树算法和字符串搜索。此外，我们希望其他一些AV系统的作者会考虑采用（或调整）这个框架，以适应他们的个人品味和他们自己的系统。引用[1] Akingbade，A.，T. 芬利，D。Jackson，P.Patel和S.H. Rodger，JAWAA：基于Web的简易动画从CS 0到高级CS课程，收录于：第34届ACM SIGCSE技术研讨会论文集计算机科学教育（SIGCSE2003），里诺，内华达州 （2003），页。162比166[2] Kanusméaki ，O. ， A.Moreno ， N.我 和 E 。Sutinnen ， WhattaNoviceWantts ： StudentsUsingProgramVisualization in Distance Programming Courses ， in： Proceedings of the ThirdProgram Visualization Workshop，Research Report CS-RR-407（2004），pp. 126比133[3] 不，T。 L.， G. Roling ing，V. 很抱歉，W。 丹河 Fleischerr，C. Hundhausen，A. Korhonen，L. 我是米，米。 M cN all y，S. RodgeranddJ. A. Vel'azquez-Iturbide，Ex plo ringheRoleofVisualizationandEngagement in Computer Science Education，ACM SIGCSE Bulletin 35（2003），pp. 131-152.[4] Roling，G. 、T. AckermannandS. Kulessa，VisualisierungonAlgorithmenndDat enstrur nn，in：M. Muhlhauserr，G. RlingandR. Steinmetz，editors，DeLFI2006：4. e-LearningFachtagu ngIngformatik（2006），pp. 231-242.[5] Roli ng，G.和B。从小岛上，一种可扩展的算法脚本语言--NUMSCRIPT动画，第32届计算机科学教育技术研讨会论文集（SIGCSE 2001），夏洛特，北卡罗来纳州（2001），页.70比74[6] R oli ng，G. 和B。 Freislebeben，ANIMAL：ASystemforSup pprtingMultipleRolesin AlgorithmAnimation，Journal of Visual Languages and Computing 13（2002），pp. 341-354.[7] Rolingng，G.， F. Gliesche，T. 是的 ， 我 知道。 Wijaja，En hancedEx presive nes s in Scri ptingUsingA numerals CRIPT V2 ， in ： Proceedings of the Third Program Visualization Workshop ，University of Warwick，UK，2004，pp. 15-19.