forked from hcientist/OnlinePythonTutor
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlive.html
More file actions
132 lines (106 loc) · 4.9 KB
/
live.html
File metadata and controls
132 lines (106 loc) · 4.9 KB
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
<!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">
<!--
Python Tutor: https://github.com/pgbovine/OnlinePythonTutor/
Copyright (C) Philip Guo (philip@pgbovine.net)
LICENSE: https://github.com/pgbovine/OnlinePythonTutor/blob/master/LICENSE.txt
-->
<!-- OPT live programming prototype started on 2016-05-30 -->
<head>
<title>Live Programming Mode - Python Tutor - Visualize Python and JavaScript code</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<!-- let Webpack take care of everything. Use the [hash] feature to
create unique filenames for releases:
https://webpack.github.io/docs/long-term-caching.html -->
<script type="text/javascript" src="build/opt-live.bundle.js?d758b709d4" charset="utf-8"></script>
<!-- insert google-analytics.txt contents here -->
</head>
<body>
<div id="liveModeHeader">
This mode is experimental. Use the <a href="visualize.html" target="_blank">regular Python Tutor</a> to <span style="font-weight: bold;">get live help</span> and use more features.
<span id="surveyPane"></span>
<!-- taken down on 2016-12-06
<p>Help us improve this live programming mode by filling out this <a
target="_blank"
href="https://docs.google.com/forms/d/1XT-rPaWxDRNOPAfBxIqzCXs7nYGUgOjNofmUnuQZYV8/viewform">two-question
survey</a>.</p>
-->
</div>
<table id="experimentalHeader">
<tr>
<td valign="top" id="headerTdLeft"></td>
<td valign="top" id="headerTdRight"></td>
</tr>
</table>
<table>
<tr>
<td valign="top">
<div id="pyInputPane">
<div id="codeInputWarnings">Write code in
<select id="pythonVersionSelector">
<option value="2">Python 2.7</option>
<option value="3" selected>Python 3.6</option>
<option value="js">JavaScript ES6</option>
</select>
<span id="liveModeExtraWarning" style="color: #888; font-size: 8pt; float: right;">(drag lower right corner to resize code editor)</span>
</div>
<div id="someoneIsTypingDiv" style="color: #e93f34; font-weight: bold; display: none;">Someone is typing ...</div>
<div id="codeInputPane"></div>
<div id="legendDiv"></div>
<div id="executionSlider" style="margin-top: 10px;"></div>
<!-- copied and pasted from pytutor.js
TODO: integrate all this together and modularize -->
<div id="vcrControls" style="display: none;">
<button id="jmpFirstInstr", type="button"><< First</button>
<button id="jmpStepBack", type="button">< Prev</button>
<button id="jmpStepFwd", type="button">Next ></button>
<button id="jmpLastInstr", type="button">Last >></button>
</div>
<div id="curInstr" style="display: none;"></div>
<div id="rawUserInputDiv" style="display: none;">
<span id="userInputPromptStr"></span>
<input type="text" id="raw_input_textbox" size="30"/>
<button id="raw_input_submit_btn">Submit</button>
</div>
<div id="frontendErrorOutput"></div>
</div>
<div id="eurekaSurveyPane"></div>
</td>
<td valign="top">
<div id="pyOutputPane"/>
</td>
</tr>
</table>
<div id="footer">
<div id="optionsPane">
<select id="cumulativeModeSelector">
<option value="false">hide exited frames [default]</option>
<option value="true">show exited frames (Python)</option>
<!-- <option value="holistic">holistic mode (experimental)</option> -->
</select>
<select id="heapPrimitivesSelector">
<option value="false">inline primitives and try to nest objects</option>
<option value="nevernest" selected>inline primitives but don't nest objects [default]</option>
<option value="true">render all objects on the heap (Python)</option>
</select>
<select id="textualMemoryLabelsSelector">
<option value="false">draw pointers as arrows [default]</option>
<option value="true">use text labels for pointers</option>
</select>
</div>
<p>
<button id="genUrlBtn" class="smallBtn" type="button">Generate permanent link</button> <input type="text" id="urlOutput" size="65"/> (<a href="https://www.youtube.com/watch?v=h4q3UKdEFKE" target="_blank">video demo</a>)
</p>
<p style="margin-top: 35px;">
This live programming mode of
<a href="http://pythontutor.com/">Python Tutor</a> (<a href="https://github.com/pgbovine/OnlinePythonTutor">code on GitHub</a>) supports three
languages: Python <a href="https://docs.python.org/2.7/">2.7</a> and <a
href="https://docs.python.org/3.6/">3.6</a> with limited module
imports, and
JavaScript running in Node.js v6.0.0 with limited support for ES6.
Try the regular
<a href="http://pythontutor.com/visualize.html">Python Tutor</a>
visualizer for additional language support.</p>
</div>
</body>
</html>