Skip to content

Visualize Python, Java, JavaScript, TypeScript, Ruby, C, and C++ code execution in your Web browser

Notifications You must be signed in to change notification settings

hbb-polinema/OnlinePythonTutor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Online Python Tutor -- http://pythontutor.com/ -- helps people overcome
a fundamental barrier to learning programming: understanding what
happens as the computer executes each line of a program's source code.
Using this tool, you can write Python, Java, JavaScript, TypeScript,
Ruby, C, and C++ programs in your Web browser and visualize what the
computer is doing step-by-step as it executes those programs.

All documentation is viewable online at:
https://github.com/pgbovine/OnlinePythonTutor/tree/master/v3/docs

https://github.com/pgbovine/OnlinePythonTutor/
The v3/ sub-directory contains the latest version of the frontend code.

======

Copyright (C) Philip J. Guo (philip@pgbovine.net)

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

======

Project history:

v1-v2/

  [Project created in December 2009; I first wanted to make a JavaScript
  run-time visualizer for education since it could all be in-browser,
  but then realized that I couldn't easily hook into the JS debugger in
  the browser to do single-stepping without making the user install
  plug-ins; then I switched to a server-side solution and picked Python
  as the target language. That turned out to be a wise choice in
  hindsight since Python was poised to really take off as a CS1 language
  in both traditional courses and MOOCs, starting around 2011.]

  Online Python Tutor version 1 - released on January 19, 2010
  "Release" email to 15 friends:

  Subject: version 0.0000001alpha of my online Python tutor
  Body:
  '''
  hi python fans (and non-fans) ...

  this is what i've been hacking on for the past few days instead of
  doing my research ;)  i'm planning to use it as a platform for
  creating interactive online programming tutorials as part of a
  volunteer project ...

  http://python.pgrind.com/

  it'd be great to get your feedback on what i have so far.  i'd love
  to hear suggestions or complaints.  thanks in advance!

  please don't share this link yet, mostly because my app is still
  buggy and insecure (i definitely don't want random peoples from the
  internet trying to hack it right now!)

  pg
  '''

  [From Jan 2010 until Aug 2011, v1 was deployed online on my personal
  and MIT servers, and it barely had any users. From a technical
  standpoint, it rendered all data structures as HTML tables and had no
  pointers, so aliased data were duplicated. It was a proof-of-concept
  side project that I had fun hacking on and showing off to people.]

  [In Sep-Oct 2011, I majorly brushed up OPT into v2 since a few power
  users started using it more seriously and making feature requests
  (e.g., Brad Miller, Suzanne Rivoire, Peter Wentworth), and
  Python-based MOOCs were also just starting to take off ...]

  Online Python Tutor version 2 - released on October 4, 2011
  "Release" email to 13 friends:

  Subject: Re: version 0.0000001alpha of my online Python tutor
  Body:
  '''
  Dear subset of people who cared about my prior email from almost 2
  years ago ...

  I've recently kicked it up a notch with a "2.0" version and am about
  to do a public release soon.  I'd really appreciate any feedback,
  criticism, and especially bug reports on Internet Explorer ;)

  http://people.csail.mit.edu/pgbovine/opt-prerelease/

  Please don't share the link yet since it will be dead soon when I
  move this app to its permanent home.  I just want to get some early
  feedback to eliminate the obviously embarrassing bugs before launch.

  THANKS!

  pg
  '''

  [From Oct 2011 until Sep 2012, v2 was deployed online and launched as
  www.onlinepythontutor.com. The biggest technical advance over v1 was
  the use of pointers (rather than duplicating objects with identical
  object IDs) to better visualize aliasing. However, pointers could
  point only from names to objects (i.e., from within a frame to the
  heap); heap-to-heap pointers weren't implemented yet. During this time
  period, MOOCs started taking off, and the usage of Python Tutor grew
  organically.]


v3/

  [In July-Sep 2012, I made a giant push to release v3, working closely
  with John DeNero and others at Google and beyond ... awesome times!]

  Online Python Tutor version 3 - Released on September 18, 2012
  to 153,000+ people who followed the official Research@Google Google+
  account: https://plus.google.com/+ResearchatGoogle/posts/cseo9qi7LWq

  "Release" announcement from the Research @ Google G+ account:
  '''
  Online Python Tutor: Web-Based Program Visualization for CS Education

  As part of his CS education work at Google, +Philip Guo has been
  developing an open-source educational tool called Online Python Tutor
  (http://www.pythontutor.com). This tool enables teachers and students
  to write Python programs directly in the web browser and then
  single-step forwards and backwards to visualize what the computer is
  doing as it executes those programs.

  Program visualization for CS education is nothing new -- researchers
  have been developing these sorts of tools for decades. However, most
  of these tools never reach far beyond the confines of the researchers'
  home universities due to the difficulty of installing and configuring
  the visualization software. What makes Online Python Tutor unique and
  effective is that it's the first known tool to adapt time-tested ideas
  from the research literature (e.g., rendering of box-and-pointer
  diagrams) for a web-based environment. Now anyone with a modern
  browser can create, explore, and share their program visualizations by
  simply visiting a web URL.

  This ease of access has been a major contributor to adoption: So far,
  over 100,000 people have used Online Python Tutor to understand and
  debug their programs, often as a supplement to learning from
  textbooks, lecture notes, and online programming tutorials. In
  addition, instructors in over a dozen universities such as MIT, UC
  Berkeley, and the University of Washington have used it for teaching
  introductory computer science courses.

  But this is just the beginning. Philip and his colleagues are now
  building an online authoring environment so that, within the next few
  months, teachers and students will be able to save their code snippets
  and add annotations, discussion threads, lessons, and interactive
  exercises on top of the associated visualizations.

  They are also actively seeking partnerships with educators at all
  grade levels to deploy and improve Online Python Tutor. Please contact
  Philip directly or re-share this post with educators who might be
  interested in working with this tool in any capacity.

  Visit www.pythontutor.com to learn more and to start visualizing your
  Python programs now!
  '''

  [This official publicity provided a big initial PUSH that spurred
  worldwide usage of the tool, and it kept growing organically from
  there thanks to momentum and also MOOCs and other online learning
  resources quickly rising in popularity around 2012-2013.]

  [The biggest advance of v3 over v2 was more sophisticated pointer
  visualizations and layout, including heap-to-heap pointers. Another
  major advance is that each visualizer instance is now encapsulated
  into a self-contained JavaScript object; thus, multiple visualizers
  can now be embedded within a single web page. (in v1 and v2, only a
  single visualizer could be displayed on a given page, since there was
  no encapsulation; all state was global, eek!) Also, all state is
  encapsulated in a simple URL, so that it's easily sharable or
  iframe-embeddable, which is very useful! v3 also marked the launch of
  the crisper pythontutor.com domain rather than the older and more
  clunky www.onlinepythontutor.com domain used for v2. In mid-2014, the
  "shared sessions" feature (a.k.a. Codechella) was launched onto the
  site, which enables multiple users to simultaneously join a shared
  session. During the period of v3, this tool experienced a significant
  growth in user numbers to well beyond 1 million users and 10 million
  visualized pieces of code!]


v4-cokapi/

  2015-01-24 - started a new version (based on v3 code base) to expand
  Online Python Tutor to support multiple languages such as JavaScript
  and Java. Note that this contains only backend code, so we still rely
  on v3/ for the frontend (and the original Python backend)

  [v4 was purely a backend advancement; the v3 code is still used for
  the frontend. By the end of 2015, six new languages had been added:
  Java (from David Pritchard's backend), JavaScript, TypeScript, Ruby,
  C, and C++. In short, 2015 was the year of adding new languages to
  expand this tool's scope beyond just Python and hopefully making it
  into a more generally-useful tool in the coming years.]

---
Contributor acknowledgments:

John DeNero - for helping with the official Python 3 port and LOTS of code patches
Chris Horne - https://github.com/lahwran - for security tips
Joshua Landau - joshua@landau.ws - for security tips
Peter Wentworth and his students - for working on the original Python 3 fork circa 2011
Brad Miller - for adding pop-up question dialogs to visualizations, and other bug fixes
David Pritchard and Will Gwozdz - for the Java frontend and other frontend enhancements
Peter Robinson - for v3/make_visualizations.py
Chris Meyers - for custom visualizations such as v3/matrix.py and v3/htmlFrame.py
Irene Chen - for holistic visualization mode -- v3/js/holistic.js


For advice and feedback from an instructor's perspective:

Jennifer Campbell
John Dalbey
John DeNero
Fredo Durand
Michael Ernst
David Evans
Paul Gries
Adam Hartz
Tomas Lozano-Perez
Bertram Ludaescher
Brad Miller
Rob Miller
Peter Norvig
Andrew Petersen
David Pritchard
Suzanne Rivoire
Peter Wentworth
David Wilkins

... and many, many more!

About

Visualize Python, Java, JavaScript, TypeScript, Ruby, C, and C++ code execution in your Web browser

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 59.1%
  • Java 14.5%
  • Python 7.9%
  • HTML 5.6%
  • C 4.5%
  • C++ 3.9%
  • Other 4.5%