Skip to content

Commit b14112b

Browse files
pgbovinepgbovine
committed
bam
1 parent 297c0d5 commit b14112b

File tree

7 files changed

+234
-13
lines changed

7 files changed

+234
-13
lines changed

‎v5-unity/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ div.activityPane {
6767
padding: 15px 0px /* make right padding ZERO and just right-pad 'p' */ 5px 20px;
6868
text-align: left;
6969
border: 3px solid #005583;
70+
border-radius: 15px; /* for rounded corners */
7071
}
7172

7273
div.activityPane p {

‎v5-unity/embedding-demo.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@
1010
<head>
1111
<title>Online Python Tutor embedding demo</title>
1212

13-
<!-- let Webpack take care of everything. Use the [hash] feature to
14-
create unique filenames for releases:
15-
https://webpack.github.io/docs/long-term-caching.html -->
13+
<!-- let Webpack take care of everything -->
1614
<script type="text/javascript" src="build/embedding-demo.bundle.js" charset="utf-8"></script>
1715

1816
</head>

‎v5-unity/index.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
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+
Python Tutor: https://github.com/pgbovine/OnlinePythonTutor/
6+
Copyright (C) Philip Guo (philip@pgbovine.net)
7+
LICENSE: https://github.com/pgbovine/OnlinePythonTutor/blob/master/LICENSE.txt
8+
-->
9+
10+
<head>
11+
12+
<title>Python Tutor - Visualize Python, Java, JavaScript, TypeScript, Ruby, C, and C++ code execution</title>
13+
14+
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
15+
16+
<!-- let Webpack take care of everything -->
17+
<script type="text/javascript" src="build/index.bundle.js" charset="utf-8"></script>
18+
19+
</head>
20+
21+
<body>
22+
23+
24+
<div class="mainBodyPane">
25+
26+
<table class='layoutTbl'>
27+
<tr>
28+
<td>
29+
30+
<div class="activityPane" id="learnPane">
31+
32+
<h1><span id="learnHeading">VISUALIZE</span> <span class="smallH1">
33+
<a href="visualize.html#py=2">Python</a>,
34+
<a href="java.html">Java</a>,
35+
<a href="javascript.html">JavaScript</a>,
36+
<a href="typescript.html">TypeScript</a>,
37+
<a href="ruby.html">Ruby</a>,
38+
<a href="c.html">C</a>,
39+
and
40+
<a href="cpp.html">C++</a>
41+
programs
42+
43+
</span></h1>
44+
45+
<p><a id="optLink" href="visualize.html">Python Tutor</a>, created
46+
by <a
47+
href="http://www.pgbovine.net/">Philip Guo</a>,
48+
helps people overcome a fundamental
49+
barrier to learning programming: understanding what happens as the
50+
computer executes each line of a program's source code.</p>
51+
52+
53+
<p>Using this
54+
tool, you can write <b><a href="visualize.html#py=2">Python</a></b>,
55+
<a href="java.html"><b>Java</b></a>,
56+
<a href="javascript.html"><b>JavaScript</b></a>,
57+
<a href="typescript.html"><b>TypeScript</b></a>,
58+
<a href="ruby.html"><b>Ruby</b></a>,
59+
<a href="c.html"><b>C</b></a>,
60+
and
61+
<a href="cpp.html"><b>C++</b></a>
62+
programs in your Web
63+
browser and visualize what the computer is doing step-by-step as it executes those programs.
64+
65+
So far, over <b>1.5 million people in over 180 countries</b> have used
66+
Python Tutor to visualize over 15 million pieces of code, often as a
67+
supplement to textbooks, lecture notes, and online programming
68+
tutorials.</p>
69+
70+
<div id="startLink">
71+
<a href="visualize.html">Start visualizing your code now</a>
72+
(or try <a href="live.html">live programming</a>)
73+
</div>
74+
75+
76+
<p>For example, here is a visualization showing a Python program that <a
77+
href="http://en.wikipedia.org/wiki/Recursion_(computer_science)">recursively</a>
78+
finds the sum of a linked list:</p>
79+
80+
<div id="demoViz"></div>
81+
82+
<p>
83+
<b><a
84+
href="http://pgbovine.net/publications/Online-Python-Tutor-web-based-program-visualization_SIGCSE-2013.pdf">Read</a></b>
85+
the research paper &ndash; Philip J. Guo. Online Python Tutor: Embeddable
86+
Web-Based Program Visualization for CS Education. In <i>Proceedings
87+
of the ACM Technical Symposium on Computer Science Education
88+
(SIGCSE)</i>, March 2013. [<a
89+
href="http://pgbovine.net/publications/Online-Python-Tutor-web-based-program-visualization_SIGCSE-2013.txt">BibTeX</a>]
90+
</p>
91+
92+
93+
</div>
94+
95+
</td>
96+
</tr>
97+
</table>
98+
99+
<table class='layoutTbl'>
100+
<tr>
101+
<td id="embedPaneTd">
102+
103+
<div class="activityPane" id="embedPane">
104+
105+
<h1><span id="embedHeading">SHARE</span> <span class="smallH1">live visualization sessions</span></h1>
106+
107+
<p>Click the &ldquo;Start shared session&rdquo; button to allow an instructor or friend
108+
to join your session. You can chat about your code and navigate
109+
the visualization together to get live, real-time tutoring. Watch this one-minute
110+
<a href="http://youtu.be/Z2TIjNArOK4">video demo</a>:
111+
</p>
112+
113+
<iframe width="480" height="360" src="http://www.youtube.com/embed/Z2TIjNArOK4" frameborder="0" allowfullscreen></iframe>
114+
115+
<p>Also, you can click the &ldquo;Generate
116+
permanent link&rdquo; button (at the bottom of <a href="visualize.html">this
117+
page</a>) and paste that link in an email, social networking
118+
post, or forum question. When recipients click on your link, they will
119+
see the exact visualization you've created.</p>
120+
121+
<p>For example, clicking <a
122+
href="visualize.html#code=%23+find+primes+using+a+for-else+construct%0Afor+n+in+range(2,+10)%3A%0A++++x_range+%3D+range(2,+n)%0A++++for+x+in+x_range%3A%0A++++++++if+n+%25+x+%3D%3D+0%3A%0A++++++++++++break%0A++++else%3A%0A++++++++%23+loop+fell+through+without+finding+a+factor%0A++++++++print(n)&mode=display&cumulative=false&py=2&curInstr=43">this
123+
link</a> brings you directly to step 44 of 57 in a program that finds
124+
prime numbers using the Python <tt>for-else</tt> construct.</p>
125+
126+
</div>
127+
128+
</td>
129+
<td id="sharePaneTd">
130+
131+
<div class="activityPane" id="sharePane">
132+
133+
<h1><span id="shareHeading">EMBED</span> <span class="smallH1"> in any Web page</span></h1>
134+
135+
<p>Using a single line of JavaScript code, you can <a
136+
href="https://github.com/pgbovine/OnlinePythonTutor/blob/master/v3/docs/embedding-HOWTO.md">embed</a> a Python Tutor
137+
visualization within any Web page (as shown in the &ldquo;Learn&rdquo;
138+
box above). The screenshot below shows a visualization
139+
embedded within the online textbook for the introductory CS course at UC
140+
Berkeley (<a href="http://www.composingprograms.com/">CS61A</a>):
141+
142+
</p>
143+
144+
<a href="http://www.composingprograms.com/">
145+
<img id="cp-thumbnail" style="width: 275px; border: 1px solid #aaa; margin-bottom: 10px;"/>
146+
</a>
147+
148+
</div>
149+
150+
151+
<div class="activityPane" id="detailsPane">
152+
153+
<p>
154+
Details:
155+
<ul>
156+
157+
<li/>Free, open-source BSD-licensed code on <a
158+
href="https://github.com/pgbovine/OnlinePythonTutor/">GitHub</a>
159+
160+
<li/>View the <a
161+
href="https://github.com/pgbovine/OnlinePythonTutor/tree/master/v3/docs">project
162+
documentation</a> online.
163+
164+
<li/>Main technologies: Python, CGI, Node.js, and Docker for
165+
run-time tracing backends; HTML/CSS/JavaScript with <a
166+
href="http://www.jquery.org">jQuery</a>, <a
167+
href="http://www.d3js.org/">D3.js</a>, <a
168+
href="http://www.jsplumb.org/">jsPlumb</a>,
169+
<a href="https://togetherjs.com/">TogetherJS</a>,
170+
and <a
171+
href="http://ace.c9.io/">Ace</a> for the frontend
172+
173+
</ul>
174+
</p>
175+
176+
</div>
177+
178+
</td>
179+
180+
</tr>
181+
</table>
182+
183+
</div>
184+
185+
186+
<div id="footer">
187+
188+
<p>Copyright &copy; <a href="http://www.pgbovine.net/">Philip Guo</a>. All rights reserved.</p>
189+
190+
</div>
191+
192+
193+
</body>
194+
</html>

‎v5-unity/js/embedding-demo.ts‎

Lines changed: 12 additions & 10 deletions
Large diffs are not rendered by default.

‎v5-unity/js/images/opt-v3-cs61a-embed-small.png‎

116 KB
Loading

‎v5-unity/js/index.ts‎

Lines changed: 25 additions & 0 deletions
Large diffs are not rendered by default.

‎v5-unity/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ module.exports = {
4141
'opt-live': "./js/opt-live.ts",
4242
'iframe-embed': "./js/iframe-embed.ts",
4343
'embedding-demo': "./js/embedding-demo.ts",
44+
'index': "./js/index.ts",
4445
'composingprograms': "./js/composingprograms.ts",
4546
'csc108h': "./js/csc108h.ts",
4647
},

0 commit comments

Comments
 (0)