forked from hcientist/OnlinePythonTutor
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
223 lines (150 loc) · 6.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Online Python Tutor
Copyright (C) 2010-2011 Philip J. Guo (philip@pgbovine.net)
https://github.com/pgbovine/OnlinePythonTutor/
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
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
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 <http://www.gnu.org/licenses/>.
-->
<head>
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
-->
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// for rounded corners
$(".activityPane").corner('15px');
});
</script>
<link rel="stylesheet" href="edu-python-title.css"/>
</head>
<body>
<center>
<div class="titlePane">
<h1>Online Python Tutor</h1>
<h2>Learn and practice Python programming in your web browser</h2>
</div>
<div class="mainBodyPane">
<div class="activityPane" id="learnPane">
<h1>Learn</h1>
<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>
<pre>
x = ["Alice", "Bob", "Charlie"]
y = x
z = ["Alice", "Bob", "Charlie"]
</pre>
<p>will be visualized as the following HTML diagram, which properly shows
aliasing relationships:</p>
<center>
<img src="alias-screenshot.png"/>
<h3><a href="tutor.html">Go play with the Online Python Tutor!</a></h3>
</center>
</div>
<div class="activityPane" id="solvePane">
<h1>Solve</h1>
<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>
<center>
<img src="grading-375.png"/>
</center>
<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>
<ul>
<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>
</ul>
</div>
<div class="activityPane" id="debugPane">
<h1>Debug</h1>
<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>
<ul>
<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>
</ul>
</div>
<div class="activityPane" id="optimizePane">
<h1>Optimize</h1>
<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>
<ul>
<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>
</ul>
</div>
<div class="activityPane" id="createPane">
<h1>Create</h1>
<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>
</div>
<div id="footer">
<p>This application was created by <a
href="http://www.stanford.edu/~pgbovine/">Philip Guo</a>, a
Stanford Computer Science Ph.D. student and Python enthusiast.</p>
<p>
Check out its <a
href="https://github.com/pgbovine/OnlinePythonTutor/">GitHub
repository</a> and send all bug reports, feedback, and suggestions to
philip@pgbovine.net
</p>
<p>
Copyright © 2010-2011 <a href="http://www.stanford.edu/~pgbovine/">Philip Guo</a>. All rights reserved.
</p>
</div>
</center>
</body>
</html>