Online Python Tutor: Embeddable Web-Based Program Visualization for CS Education
Philip J. Guo
Google, Inc.
Mountain View, CA, USA
ABSTRACT
This paper presents Online Python Tutor, a web-based pro- gram visualization tool for Python, which is becoming a pop- ular language for teaching introductory CS courses. Using this tool, teachers and students can write Python programs directly in the web browser (without installing any plugins), step forwards and backwards through execution to view the run-time state of data structures, and share their program visualizations on the web.
In the past three years, over 200,000 people have used On- line Python Tutor to visualize their programs. In addition, instructors in a dozen universities such as UC Berkeley, MIT, the University of Washington, and the University of Water- loo have used it in their CS1 courses. Finally, Online Python Tutor visualizations have been embedded within three web- based digital Python textbook projects, which collectively attract around 16,000 viewers per month and are being used in at least 25 universities. Online Python Tutor is free and open source software, available at pythontutor.com.
Keywords
CS1, Python, Program Visualization
INTRODUCTION
A core challenge in introductory computer science (“CS1”) courses is getting students to understand how a static tex- tual representation (source code) maps to a highly dynamic process (program execution). Instructors typically illustrate program execution using graphical PowerPoint lecture slides, which require a great deal of preparation effort, or by draw- ing diagrams on a whiteboard, which is tedious and error- prone [11]. In the past few decades, many program visual- ization tools have been created to assist instructors in this task. Chapter 11 of Sorvarsquo;s dissertation [15] provides a com- prehensive overview of 40 such tools, which all look similar at first glance: One GUI pane shows source code with the currently-executing line highlighted, another pane shows a visual representation of run-time state (e.g., stack frame con- tents, heap objects), and control widgets allow the user to step forwards and backwards through execution points.
This paper presents a free and open-source project called Online Python Tutor, which follows in the long tradition of program visualization tools for CS education. In spite of the rich history of related work in this field, three characteristics make Online Python Tutor modern, unique, and effective:
Python: In recent years, Python has been gaining traction as a preferred language for CS1 courses across many univer- sities. For example, two of the largest CS departments— MIT and UC Berkeley—both ported their CS1 curricula from Scheme to Python. Michigan State University switched from C to Python and presented empirical evidence that new students were just as prepared for advanced CS courses taught in other languages [7]. Python is also used in free online CS1 courses offered by Udacity, Coursera, and edX, which each enroll tens of thousands of students per term.
Despite the prevalence of Python in teaching, there are al- most no program visualization tools for Python. Aside from Online Python Tutor, UUhistle [16] and Jype [9] are the only other Python visualizers1. (However, the Jype project seems to be inactive [15], and we cannot find its code online.)
Web-Based: Online Python Tutor is the only Python pro- gram visualization tool that runs within a web browser with- out any required software or plugin installation1. UUhistle and Jype are written in Java, so they can be launched from the web on a computer with the proper Java version in- stalled; however, the entire application must first download before launching, which can take a few minutes. In con- trast, opening any visualization in Online Python Tutor is as simple and fast as visiting a URL from a web browser.
We believe that this ease of access is a major contributor to adoption: Online Python Tutor has been used in CS1 courses in a dozen universities including UC Berkeley, MIT, the University of Washington, and the University of Water-loo. Over 30,000 people (unique IP addresses) per month use Online Python Tutor by visiting pythontutor.com.
Embeddable: Finally, Online Python Tutor is the only program visualizer that can be seamlessly embedded within webpages1. So far, three web-based interactive digital CS textbooks [6, 10, 14] have embedded Online Python Tutor into their lessons (by inserting one line of JavaScript code per visualization). Students can read lessons and interact with code visualizations within the same webpage (Figure 7). These three digital textbooks attract around 16,000 unique viewers per month and are being used in at least 25 univer- sities around the world. Alvarado et al. analyzed usage log data from a CS1 course that used one such textbook [10] and found that students who interacted more with the embedded visualizations tended to score higher on midterm exams [2].
Figure 1: Online Python Tutor is a web-based program visualizer where the user can: a.) view the currently- executing line of code, b.) step forwards and backwards through execution using a slider bar and buttons, c.) view stack frames and variables, d.) view heap object contents and pointers, e.) view the programrsquo;s text console output, and f.) generate a sharable URL of the current visualization at an exact execution point.
OVERVIEW
Figure 1 shows the Online Python Tutor webpage loaded in Google Chrome. In this screenshot, the user has previ- ously typed in a 9-line Python program for computing the sum of a linked list and is now visualizing execution step 11 of 21, in the midst of the fourth recursive call to sumList.
We now describe the GUI component
剩余内容已隐藏，支付完成后下载完整资料
在线Python导师:可嵌入的基于web的CS教育程序可视化
菲利普·J·郭
谷歌公司。
山景城，加州，美国
摘要
本文介绍了一种基于web的Python程序图可视化工具——在线Python导师，该工具正在成为计算机科学导论课程的一种流行语言。使用这个工具，教师和学生可以直接在web浏览器中编写Python程序(不需要安装任何插件)，通过执行向前和向后来查看数据结构运行时的状态，并在web上共享他们的程序可视化。
在过去的三年里，超过200,000人使用在线Python导师来可视化他们的程序。此外，加州大学伯克利分校、麻省理工学院、华盛顿大学和水陆大学等十多所大学的教师在他们的CS1课程中使用了这种技术。最后，在线Python导师可视化已经嵌入到三个基于web的数字Python教科书项目中，这些项目每个月总共吸引了大约16,000名观众，并且正在至少25所大学中使用。在线Python导师是免费的开源软件，可以在pythontutor.com上找到。
关键字
CS1, Python，程序可视化
1.介绍
计算机科学入门(CS1)课程的一个核心挑战是让学生理解静态的源代码如何映射到高度动态的过程(程序执行)。讲师通常使用图形化的PowerPoint讲课幻灯片来演示程序的执行，这需要大量的准备工作，或者在白板上绘制图表，这是单调乏味且容易出错的[11]。在过去的几十年里，许多程序可视化工具已经被创造出来，以协助教师在这方面的任务。Sorva的第11章的论文[15]提供了一个com -机体机械论的概述40个这样的工具,乍一看很相似:一个GUI的窗格显示与当前执行源代码行高亮显示,另一个窗格中显示了一个运行时状态的可视化表示(例如,堆叠框架结构、堆对象),和控制部件允许用户一步向前和向后通过执行点。
本文提出了一个免费的开源项目——在线Python导师，它继承了CS教育程序可视化工具的悠久传统。尽管在这一领域的相关工作有着丰富的历史，但有三个特点使得在线Python导师变得现代、独特和有效:
Python:近年来，Python作为CS1课程的首选语言在许多大学中得到了越来越多的关注。例如，两个最大的CS系——麻省理工学院和加州大学伯克利分校——都将他们的CS1课程从Scheme移植到了Python。密歇根州立大学(Michigan State University)从c 转向Python，并提供了经验证据，表明新生对用其他语言[7]教授的高级计算机科学课程也做好了准备。Python也被用于Udacity、Coursera和edX提供的免费在线CS1课程中，这些课程每学期招收数万名学生。
尽管Python在教学中很流行，但是几乎没有针对Python的程序可视化工具。除了在线Python导师，UUhistle[16]和Jype[9]是仅有的其他Python可视化工具。(然而，Jype项目似乎是不活跃的[15]，我们无法在网上找到它的代码。)
基于web的:在线Python导师是唯一的Python pro- gram可视化工具，运行在web浏览器中，不需要任何必要的软件或插件安装。UUhistle和Jype都是用Java编写的，因此它们可以在计算机上从web上启动，并且部分的Java版本已经停止;但是，整个应用程序在启动之前必须先下载，这可能需要几分钟。相反，在在线Python导师中打开任何可视化都像从web浏览器访问URL一样简单和快速。
我们相信这种易用性是采用Python的一个主要因素:在线Python导师已经在包括加州大学伯克利分校、麻省理工学院、华盛顿大学和水厕大学在内的十几所大学的CS1课程中使用。每月有超过30,000人(唯一的IP地址)通过访问pythontutor.com使用在线Python导师。
嵌入式:最后，在线Python Tutor是唯一可以无缝嵌入到webpages1中的程序可视化工具。到目前为止，已有三本基于web的交互式数字CS教科书[6,10,14]将在线Python导师嵌入到他们的课程中(通过在每个可视化中插入一行JavaScript代码)。学生可以在同一个网页上阅读课程，并与代码可视化进行交互(图7)。这三种数字教科书每个月吸引大约1.6万名独立读者，目前在全球至少25所大学使用。Alvarado等人分析了CS1课程中使用课本[10]的使用日志数据，发现与嵌入式可视化交互更多的学生在期中考试中得分更高[2]。
图1:在线Python的导师是一个基于web的程序可视化工具,用户可以:a。)查看目前执行的代码行,b。)一步向前和向后通过使用滚动条和按钮执行,c。)查看堆栈帧和变量,d。)查看堆对象内容和指针,e。)查看程序的文本控制台输出,和f。)在一个精确的执行点生成一个可分享的URL。
2.概述
图1显示了加载在谷歌Chrome中的在线Python导师页面。在这个屏幕截图中，用户已经预先输入了一个用于计算链表和的9行Python程序，现在正在可视化执行第21步中的第11步，这是对sumList的第4次递归调用。
我们现在描述与图1中每个标签对应的GUI组件:
a)源代码显示显示正在可视化的程序。左边空白处的红色箭头指向要执行的下一行(本例中的第7行)。一个淡绿色箭头指向刚刚执行的行，这有助于用户跟踪非连续的控制流(例如，函数调用)。
b)滑块和文本表示当前执行点是可视化的(在本例中，第21步中的第11步)。每个点代表一条执行的线。用户可以单击或拖动滑块上的鼠标，以跳转到一个特定的点，或者使用录像机样式的导航按钮在执行的行上向前和向后单步执行。
c)frames窗格显示当前执行点的全局变量和堆栈帧，堆栈向下增长。每一帧显示函数名和局部变量列表。每个变量的值都是指向堆对象的箭头。当前活动的(最下面的)框架以蓝色突出显示，所有箭头都来自它。为了减少视觉混乱，所有其他帧发出的箭头都呈现为浅灰色。在本例中，节点变量在每次递归调用sumList时，每个点都指向链表中的suc- c元素。最后，尽管Python中的每个对象在技术上都是堆上的，但为了视觉上的简单性，我们选择在每个帧内内联呈现不可变的基本对象(例如，数字、字符串、bools)。
d)“对象”窗格显示Python对象的可视表示及其相互之间的指针引用。在线Python Tutor呈现了教授CS1所需的所有复合数据类型，包括list、tuple、set、dict、class、object instance和closure(参见图2)。
e)程序输出文本框显示程序在当前执行点发出的打印语句的累计输出。
f)单击“生成URL”按钮将创建一个URL，该URL惟一地标识当前可视化程序和当前执行点。在本例中，URL编码了9行Python程序的完整内容，还包括“21中的第11步”。用户可以通过电子邮件发送该URL，也可以将其与注释一起发布到讨论论坛。当有人单击该URL时，将把他们带到发送者指定的确切执行点。
图2:Python的四种主要com- pound数据类型的可视化:list、tuple、set和dict(由于空间限制没有显示类、实例和闭包)
3.设计方法
在线Python导师项目始于2010年1月，当时是研究生的一个业余项目，其动机是通过在白板上绘制杂乱的堆栈和堆图来教授Python。大约在那个时候，web浏览器和技术变得足够复杂，可以构建一个可以在浏览器中运行的教育程序vi- sualization工具。
我们的设计目标是制作一个Python教师和学生更喜欢使用的工具，而不是(或除了)传统的白板和PowerPoint图表。
我们首先从现有的pro- gram可视化工具(本文对[15]进行了研究)中提取一些常见的特性，并有选择地将它们调整到web浏览器环境中。在过去的三年里，Python Tu- tor的在线用户群通过口碑传播的方式有机增长。通过与用户的合作，我们改进了最初的设计并实现了新的功能(例如，嵌套函数和lambda支持)。用户包括了一组不同的计算机科学教学人员——助教、大小大学的教授以及几个免费在线计算机科学课程的教师，这些课程的注册学生总数超过了20万。
- 实现
在线Python导师是一个web应用程序，它的后端使用Python编写，前端使用标准web技术(HTML、CSS和JavaScript)编写。
4.1后端(Python)
在线Python导师后端以Python程序的源代码作为输入，并生成执行跟踪作为输出。后端在标准Python调试器模块(bdb)的监视下执行输入程序，该模块在每执行一行之后停止执行，并记录程序的运行时状态。跟踪是执行点的有序列表，其中每个点都包含即将执行的代码行之前的状态，包括:
- 将要执行的行号，
- 指令类型(普通单步、异常、函数调用或函数返回)，
- 全局变量名与其当前值在执行点的映射，
- 堆栈帧的有序列表，其中每帧包含一个局部变量名到当前值的映射，
- 堆的当前状态，
- 程序输出到这个执行点。
执行结束后，后端以JSON格式[5]编码跟踪，用额外的元数据标记将Python数据类型序列化为原生JSON类型。为了防止无限循环和过长的跟踪，后端在执行了300行之后停止执行。虽然这个限制对于实际程序来说很小，但是对于我们的用户想要可视化的教学代码示例来说已经足够了。注意，跟踪包含大量冗余，因为它在每个执行点存储堆栈和堆的完整快照。从教学代码示例跟踪的大小从10KB到200KB不等。在实践中，我们没有发现后端运行时间或跟踪大小是性能瓶颈，因此还没有尝试进行优化。
后端同时使用Python 2和Python 3，这一点很重要，因为课程都是使用这两种主要语言变体来教授的。
后端可以托管在任何能够运行CGI脚本的web服务器上(使用python2或python3)，也可以托管在谷歌应用程序引擎平台上(python2.7)。当用户的web浏览器向后端发出HTTP GET请求并传入Python程序进行可视化时，后端生成一个跟踪并以JSON格式返回给浏览器。由于后端从web运行不受信任的Python代码，所以它实现了沙箱，以防止执行危险的构造，如eval、exec、文件I/O和大多数模块导入(除了可定制的模块白名单，如math)。此外，许多web服务器将“深度防御”作为额外的保护。然而，我们还没有进行正式的安全审计。
4.2前端(HTML / CSS / JavaScript)
前端是一个位于pythontutor.com的网站，它可以在所有现代web浏览器中呈现，而不需要用户安装任何扩展或插件。我们已经在各种尺寸的计算机显示器甚至平板设备上测试了该网站(参见图3)。
用户首先看到一个文本框，然后可以在其中键入(或粘贴)一个Python程序。当用户点击“Visu- alize执行”按钮时，前端将程序发送到后端;然后，后端发回JSON执行跟踪，前端将其呈现在图1所示的GUI中。
图3:教师和学生使用iPad上的默认Safari web浏览器与在线Python导师进行交互，如图1所示。
从非正式的测试中可以看到，图1(和类似的代码示例)中的代码在家庭宽带Internet连接上的加载速度为sim;0.4秒，在Wi-Fi速度相对较慢的班车上的加载速度为sim;3秒。 初始页面加载后，所有交互都发生在浏览器中，不需要额外的服务器调用;因此，向前和向后步进可以立即刷新显示。 对象布局:前端的主要技术挑战是以清晰和美观的方式呈现对象。由于堆可以是对象的任意图形，所以一个简单的呈现方案可能会导致一堆混乱的框和指针。我们实现了以下布局启发，灵感来自于课本中的图表和CS1讲师的PowerPoint讲座幻灯片:
bull;每个帧变量和堆对象都按程序执行时创建它们的顺序(见图2)垂直堆放，因此，当
用户通过执行逐步前进，新的变量和对象总是附加到显示的底部，而不是插入到中间。
bull;一旦一个对象被渲染，它将保持在相同的位置(相对于其他对象)，直到没有指向它的指针为止。这种启发式使对象在用户执行步骤时不会“摇摆不定”。
bull;如果一个新的复合对象包含指向其他新复合对象的指针，那么将内部对象嵌套在外部对象的内部。例如，图4显示了a
列出四个新的Person对象实例。嵌套既减少了杂乱(而不是呈现更多的指针)，也传递了一种自然的“包容”关系。
bull;由于链表在CS教学中很常见，前端通过水平放置节点对象来可视化它们(见图5).如果对象包含指向相同结构对象的指针(例如，具有相同大小的列表/元组或具有相同属性名称的dict/实例)，则终止该对象很可能是一个链表。注意，这种启发式对于树和图结构的效果很差:它只是将它们“平缩”到一个水平维度。<!--
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[20759]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
