Skip to content

Commit 9e63c7d

Browse files
author
Philip Guo
committed
refactor action
1 parent d287e7b commit 9e63c7d

3 files changed

Lines changed: 218 additions & 121 deletions

File tree

‎index.html‎

Lines changed: 27 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
2323
-->
2424

25-
2625
<head>
27-
<title>Online Python Tutor: Write Python code online and single-step through its execution</title>
26+
27+
<title>Online Python Tutor: Learn and practice programming from your web browser</title>
2828

2929
<!-- jQuery 1.6.0 -->
3030

@@ -37,153 +37,60 @@
3737
-->
3838

3939

40-
<!-- load these local files only when localTesting == true
41-
42-
<script type="text/javascript" src="mock-data.js"></script>
43-
44-
-->
45-
46-
<script type="text/javascript" src="jquery.textarea.js"></script>
47-
48-
<!-- disable autogrow for simplicity
49-
<script type="text/javascript" src="jquery.autogrow.js"></script>
50-
-->
51-
52-
<!-- jsPlumb library for rendering connectors -->
53-
<script type="text/javascript" src="jquery.jsPlumb-1.3.3-all-min.js "></script>
54-
55-
<!-- my own code -->
56-
<script type="text/javascript" src="edu-python.js"></script>
57-
<script type="text/javascript" src="edu-python-tutor.js"></script>
58-
59-
<link rel="stylesheet" href="edu-python.css"/>
40+
<link rel="stylesheet" href="edu-python-title.css"/>
6041

6142
</head>
6243

6344
<body>
6445

65-
<div id="pyInputPane">
66-
67-
Write your Python code here:
68-
<br/>
69-
70-
<textarea class="codeInputPane" id="pyInput" cols="55" rows="20" wrap="off"></textarea>
71-
72-
<p>
73-
74-
<button id="executeBtn" class="bigBtn" type="button">Visualize execution</button>
75-
76-
</p>
77-
78-
<p style="margin-top: 25px;">Try these small examples:<br/>
79-
80-
<a id="aliasExampleLink" href="#">aliasing</a> |
81-
<a id="tutorialExampleLink" href="#">intro</a> |
82-
<a id="factExampleLink" href="#">factorial</a> |
83-
<a id="fibonacciExampleLink" href="#">fibonacci</a> |
84-
<a id="memoFibExampleLink" href="#">memoized fib</a> |
85-
<a id="newtonExampleLink" href="#">square root</a> |
86-
<a id="insSortExampleLink" href="#">insertion sort</a>
87-
<br/>
88-
<a id="filterExampleLink" href="#">filter</a> |
89-
<a id="strtokExampleLink" href="#">tokenize</a> |
90-
<a id="oopSmallExampleLink" href="#">OOP</a> |
91-
<a id="pwGcdLink" href="#">gcd</a> |
92-
<a id="pwSumListLink" href="#">sumList</a> |
93-
<a id="towersOfHanoiLink" href="#">towers of hanoi</a> |
94-
<a id="pwTryFinallyLink" href="#">exceptions</a>
95-
96-
</p>
97-
98-
<p style="margin-top: 25px;">Examples from the MIT
99-
<a href="http://mit.edu/6.01/">6.01</a> course:<br/>
100-
101-
<a id="mapExampleLink" href="#">list map</a> |
102-
<a id="sumExampleLink" href="#">summation</a> |
103-
<a id="oop1ExampleLink" href="#">OOP 1</a> |
104-
<a id="oop2ExampleLink" href="#">OOP 2</a> |
105-
<a id="inheritanceExampleLink" href="#">inheritance</a>
106-
107-
</p>
46+
<div id="titlePane">
10847

10948
</div>
11049

50+
<div class="activityPane" id="solvePane">
11151

112-
<table border="0" id="pyOutputPane">
113-
<tr>
114-
<td valign="top">
52+
<h1>Learn</h1>
53+
<h2>Python by writing code and visualizing execution</h2>
11554

116-
<center>
117-
118-
<div id="pyCodeOutputDiv">
119-
120-
Use left and right arrow keys to step through this code:
121-
<table id="pyCodeOutput"></table>
55+
<p>lorem ipsum</p>
12256

12357
</div>
12458

125-
<div id="editCodeLinkDiv">
59+
<div class="activityPane" id="solvePane">
12660

127-
<button id="editBtn" class="medBtn" type="button">Edit code</button>
61+
<h1>Solve</h1>
62+
<h2>programming problems by writing Python code</h2>
12863

129-
</div>
64+
<p>lorem ipsum</p>
13065

131-
<div id="vcrControls">
132-
<button id="jmpFirstInstr", type="button">&lt;&lt; First</button>
133-
<button id="jmpStepBack", type="button">&lt; Back</button>
134-
<span id="curInstr">Step ? of ?</span>
135-
<button id="jmpStepFwd", type="button">Forward &gt;</button>
136-
<button id="jmpLastInstr", type="button">Last &gt;&gt;</button>
13766
</div>
13867

139-
<div id="errorOutput"></div>
140-
68+
<div class="activityPane" id="debugPane">
14169

142-
</center>
70+
<h1>Debug</h1>
71+
<h2>existing programs that almost work properly</h2>
14372

144-
Program output:
145-
<br/>
146-
<textarea id="pyStdout" cols="50" rows="13" wrap="off" readonly></textarea>
73+
<p>lorem ipsum</p>
14774

75+
</div>
14876

149-
</td>
150-
<td valign="top">
151-
152-
<div id="dataViz"></div>
153-
154-
</td>
155-
</tr>
156-
</table>
157-
158-
<center>
159-
77+
<div class="activityPane" id="debugPane">
16078

161-
<div id="footer">
79+
<h1>Optimize</h1>
80+
<h2>existing programs to run using fewer instructions</h2>
16281

163-
<input type="checkbox" id="classicModeCheckbox"/> Use low-bandwidth mode (for older browsers)
82+
<p>lorem ipsum</p>
16483

165-
<p/>
166-
This application supports the core <a
167-
href="http://www.python.org/doc/2.5/">Python 2.5</a> language, with no
168-
module imports or file I/O. It's meant to be used as a platform for
169-
creating programming tutorials, not for running or debugging
170-
production code.
84+
</div>
17185

172-
<p style="margin-top: 8px;"/>Official Python 3 support is coming soon;
173-
for now, try the <a
174-
href="http://netserv.ict.ru.ac.za/python3_viz/">Python 3 fork</a> by
175-
Peter Wentworth.
86+
<!-- TODOs
17687
177-
<p style="margin-top: 8px;"/>
178-
Check out the <a
179-
href="https://github.com/pgbovine/OnlinePythonTutor/">GitHub</a>
180-
repository and send bug reports, feedback, and suggestions to philip@pgbovine.net
88+
Include links to original source files of questions for more detailed
89+
info.
18190
182-
<p style="margin-top: 8px;"/>
183-
Copyright &copy; 2010-2011 <a href="http://www.stanford.edu/~pgbovine/">Philip J. Guo</a>
184-
</div>
91+
Also include links to my contact info and GitHub pages.
18592
186-
</center>
93+
-->
18794

18895
</body>
18996
</html>

‎questions/optimize-sum.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ MaxInstructions: 20
1818
Skeleton:
1919

2020
def maxPairSum(lst):
21-
maxSum = None
21+
maxSum = -99999
2222
for i in range(len(lst)):
2323
for j in range(i + 1, len(lst)):
2424
maxSum = max(lst[i] + lst[j], maxSum)

‎tutor.html‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<!--
5+
6+
Online Python Tutor
7+
Copyright (C) 2010 Philip J. Guo (philip@pgbovine.net)
8+
https://github.com/pgbovine/OnlinePythonTutor/
9+
10+
This program is free software: you can redistribute it and/or modify
11+
it under the terms of the GNU General Public License as published by
12+
the Free Software Foundation, either version 3 of the License, or
13+
(at your option) any later version.
14+
15+
This program is distributed in the hope that it will be useful,
16+
but WITHOUT ANY WARRANTY; without even the implied warranty of
17+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
18+
GNU General Public License for more details.
19+
20+
You should have received a copy of the GNU General Public License
21+
along with this program. If not, see <http://www.gnu.org/licenses/>.
22+
23+
-->
24+
25+
26+
<head>
27+
<title>Online Python Tutor: Write Python code online and single-step through its execution</title>
28+
29+
<!-- jQuery 1.6.0 -->
30+
31+
<!-- local version for offline testing -->
32+
<script type="text/javascript" src="jquery.min.js"></script>
33+
34+
<!-- online version hosted by Google -->
35+
<!--
36+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
37+
-->
38+
39+
40+
<!-- load these local files only when localTesting == true
41+
42+
<script type="text/javascript" src="mock-data.js"></script>
43+
44+
-->
45+
46+
<script type="text/javascript" src="jquery.textarea.js"></script>
47+
48+
<!-- disable autogrow for simplicity
49+
<script type="text/javascript" src="jquery.autogrow.js"></script>
50+
-->
51+
52+
<!-- jsPlumb library for rendering connectors -->
53+
<script type="text/javascript" src="jquery.jsPlumb-1.3.3-all-min.js "></script>
54+
55+
<!-- my own code -->
56+
<script type="text/javascript" src="edu-python.js"></script>
57+
<script type="text/javascript" src="edu-python-tutor.js"></script>
58+
59+
<link rel="stylesheet" href="edu-python.css"/>
60+
61+
</head>
62+
63+
<body>
64+
65+
<div id="pyInputPane">
66+
67+
Write your Python code here:
68+
<br/>
69+
70+
<textarea class="codeInputPane" id="pyInput" cols="55" rows="20" wrap="off"></textarea>
71+
72+
<p>
73+
74+
<button id="executeBtn" class="bigBtn" type="button">Visualize execution</button>
75+
76+
</p>
77+
78+
<p style="margin-top: 25px;">Try these small examples:<br/>
79+
80+
<a id="aliasExampleLink" href="#">aliasing</a> |
81+
<a id="tutorialExampleLink" href="#">intro</a> |
82+
<a id="factExampleLink" href="#">factorial</a> |
83+
<a id="fibonacciExampleLink" href="#">fibonacci</a> |
84+
<a id="memoFibExampleLink" href="#">memoized fib</a> |
85+
<a id="newtonExampleLink" href="#">square root</a> |
86+
<a id="insSortExampleLink" href="#">insertion sort</a>
87+
<br/>
88+
<a id="filterExampleLink" href="#">filter</a> |
89+
<a id="strtokExampleLink" href="#">tokenize</a> |
90+
<a id="oopSmallExampleLink" href="#">OOP</a> |
91+
<a id="pwGcdLink" href="#">gcd</a> |
92+
<a id="pwSumListLink" href="#">sumList</a> |
93+
<a id="towersOfHanoiLink" href="#">towers of hanoi</a> |
94+
<a id="pwTryFinallyLink" href="#">exceptions</a>
95+
96+
</p>
97+
98+
<p style="margin-top: 25px;">Examples from the MIT
99+
<a href="http://mit.edu/6.01/">6.01</a> course:<br/>
100+
101+
<a id="mapExampleLink" href="#">list map</a> |
102+
<a id="sumExampleLink" href="#">summation</a> |
103+
<a id="oop1ExampleLink" href="#">OOP 1</a> |
104+
<a id="oop2ExampleLink" href="#">OOP 2</a> |
105+
<a id="inheritanceExampleLink" href="#">inheritance</a>
106+
107+
</p>
108+
109+
</div>
110+
111+
112+
<table border="0" id="pyOutputPane">
113+
<tr>
114+
<td valign="top">
115+
116+
<center>
117+
118+
<div id="pyCodeOutputDiv">
119+
120+
Use left and right arrow keys to step through this code:
121+
<table id="pyCodeOutput"></table>
122+
123+
</div>
124+
125+
<div id="editCodeLinkDiv">
126+
127+
<button id="editBtn" class="medBtn" type="button">Edit code</button>
128+
129+
</div>
130+
131+
<div id="vcrControls">
132+
<button id="jmpFirstInstr", type="button">&lt;&lt; First</button>
133+
<button id="jmpStepBack", type="button">&lt; Back</button>
134+
<span id="curInstr">Step ? of ?</span>
135+
<button id="jmpStepFwd", type="button">Forward &gt;</button>
136+
<button id="jmpLastInstr", type="button">Last &gt;&gt;</button>
137+
</div>
138+
139+
<div id="errorOutput"></div>
140+
141+
142+
</center>
143+
144+
Program output:
145+
<br/>
146+
<textarea id="pyStdout" cols="50" rows="13" wrap="off" readonly></textarea>
147+
148+
149+
</td>
150+
<td valign="top">
151+
152+
<div id="dataViz"></div>
153+
154+
</td>
155+
</tr>
156+
</table>
157+
158+
<center>
159+
160+
161+
<div id="footer">
162+
163+
<input type="checkbox" id="classicModeCheckbox"/> Use low-bandwidth mode (for older browsers)
164+
165+
<p/>
166+
This application supports the core <a
167+
href="http://www.python.org/doc/2.5/">Python 2.5</a> language, with no
168+
module imports or file I/O. It's meant to be used as a platform for
169+
creating programming tutorials, not for running or debugging
170+
production code.
171+
172+
<p style="margin-top: 8px;"/>Official Python 3 support is coming soon;
173+
for now, try the <a
174+
href="http://netserv.ict.ru.ac.za/python3_viz/">Python 3 fork</a> by
175+
Peter Wentworth.
176+
177+
<p style="margin-top: 8px;"/>
178+
Check out the <a
179+
href="https://github.com/pgbovine/OnlinePythonTutor/">GitHub</a>
180+
repository and send bug reports, feedback, and suggestions to philip@pgbovine.net
181+
182+
<p style="margin-top: 8px;"/>
183+
Copyright &copy; 2010-2011 <a href="http://www.stanford.edu/~pgbovine/">Philip J. Guo</a>
184+
</div>
185+
186+
</center>
187+
188+
</body>
189+
</html>
190+

0 commit comments

Comments
 (0)