Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
224 lines (150 sloc) 6.23 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
Online Python Tutor
Copyright (C) 2010-2012 Philip J. Guo (
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <>.
<title>Online Python Tutor: Learn and practice Python programming in your web browser</title>
<!-- jQuery 1.6.0 -->
<!-- local version for offline testing -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- online version hosted by Google -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// for rounded corners
<link rel="stylesheet" href="edu-python-title.css"/>
<div class="titlePane">
<h1>Online Python Tutor</h1>
<h2>Learn and practice Python programming in your web browser</h2>
<div class="mainBodyPane">
<div class="activityPane" id="learnPane">
<h2>Python by writing code and visualizing execution</h2>
<p>This free educational application allows teachers and students to
write Python scripts directly in the web browser, execute those scripts,
single-step <b>forwards and backwards</b> through execution, and view
the run-time state of all data structures.</p>
<p>Rather than displaying a bland text-based console, the Online Python
Tutor provides a rich visualization of variables, heap objects, and
stack frames. For example, the following code:</p>
x = ["Alice", "Bob", "Charlie"]
y = x
z = ["Alice", "Bob", "Charlie"]
<p>will be visualized as the following HTML diagram, which properly shows
aliasing relationships:</p>
<img src="alias-screenshot.png"/>
<h3><a href="tutor.html">Go play with the Online Python Tutor!</a></h3>
<div class="activityPane" id="solvePane">
<h2>programming problems by writing Python code</h2>
<p>The Online Python Tutor also allows students to practice solving
programming problems like those they would receive for class assignments
or technical job interviews.</p>
<p>It provides web-based interfaces for writing solution and test code,
executing on a series of graded test inputs, and showing what tests
passed and failed.</p>
<img src="grading-375.png"/>
<p>The above screenshot shows passed and failed tests. The user can
click on the "Debug me" button besides one of the sad faces to debug why
the program failed on a particular test.</p>
<p>Here are some sample practice problems:</p>
<li><a href="question.html?two-sum">Two-sum</a></li>
<li><a href="question.html?reverse">Reverse list</a></li>
<li><a href="question.html?remove-dups">Remove duplicate characters</a></li>
<div class="activityPane" id="debugPane">
<h2>existing programs that almost work properly</h2>
<p>Using the Online Python Tutor's bidirectional single-stepping and
data structure visualization capabilities, students can practice
debugging, an important skill which is rarely covered in web-based
programming problems.</p>
<p>They can work on problems like, <i>"Change at most 2 lines of code to
make this almost-correct Python program work properly."</i> Here are
some sample debugging problems:</p>
<li><a href="question.html?debug-ireverse">In-place reverse</a></li>
<li><a href="question.html?debug-bsearch">Binary search</a></li>
<li><a href="question.html?debug-mergesort">Mergesort</a></li>
<div class="activityPane" id="optimizePane">
<h2>existing programs to run using fewer instructions</h2>
<p>Students can practice refactoring already-correct programs to run
faster and execute fewer instructions.</p>
<p>They can work on problems like, <i>"Optimize this program so that it
terminates correctly after running less than 50 lines of Python
code."</i> Here are some sample optimization problems:</p>
<li><a href="question.html?optimize-sum">Greatest sum</a></li>
<li><a href="question.html?optimize-find-dups">Find duplicates</a></li>
<li><a href="question.html?optimize-search">List search</a></li>
<div class="activityPane" id="createPane">
<h2>new practice problems in plain text format</h2>
<p>Teachers can easily create new practice problems by writing them in a
lightweight plain text format. For example, <a
href="questions/reverse.txt">reverse.txt</a> provides the specification
for the <a href="question.html?reverse">Reverse list</a> problem.</p>
<p>The problem specification format allows constraints like <i>"code
diffs must be less than N lines"</i> (used for debugging problems) and
<i>"tests must terminate in at most M executed Python lines"</i> (used
for optimization problems).</p>
<p>I plan to add support for semantic constraints like <i>"don't allow
the program to create any auxiliary data structures"</i>, which could be
used for problems like <i>"merge these two lists in-place without
creating any new temporary lists"</i>.</p>
<div id="footer">
<p>This application was created by <a
href="">Philip Guo</a>, a
Stanford Computer Science Ph.D. student and Python enthusiast.</p>
Check out its <a
repository</a> and send all bug reports, feedback, and suggestions to
Copyright &copy; 2010-2012 <a href="">Philip Guo</a>. All rights reserved.