forked from hdoan741/jstutor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisualize.html
130 lines (94 loc) · 4.9 KB
/
visualize.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
<!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
https://github.com/pgbovine/OnlinePythonTutor/
Copyright (C) 2010-2012 Philip J. Guo ([email protected])
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<head>
<title>Online Python Tutor - Visualize program execution</title>
<!-- requirements for pytutor.js -->
<script type="text/javascript" src="js/d3.v2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes -->
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors
DO NOT UPGRADE ABOVE 1.3.10 OR ELSE BREAKAGE WILL OCCUR -->
<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script> <!-- for sliders and other UI elements -->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<!-- for annotation bubbles -->
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
<link type="text/css" href="css/jquery.qtip.css" rel="stylesheet" />
<script type="text/javascript" src="js/pytutor.js"></script>
<link rel="stylesheet" href="css/pytutor.css"/>
<!-- requirements for opt-frontend.js -->
<!-- codemirror.net online code editor -->
<script type="text/javascript" src="js/codemirror/codemirror.js"></script>
<link type="text/css" href="css/codemirror.css" rel="stylesheet" />
<script type="text/javascript" src="js/codemirror/python.js"></script>
<script type="text/javascript" src="js/codemirror/javascript.js"></script>
<script type="text/javascript" src="js/opt-frontend.js"></script>
<link rel="stylesheet" href="css/opt-frontend.css"/>
</head>
<body>
<div>
<h1 style="text-align: center; padding: 40px 0 20px 0; ">Javascript Online Tutor</h1>
</div>
<div id="pyInputPane">
Write your Javascript code here:
<br/>
<div id="codeInputPane"></div> <!-- populate with a CodeMirror instance -->
<p>
<button id="executeBtn" class="bigBtn" type="button">Visualize execution</button>
</p>
<div style="display:none">
<p style="margin-top: 25px;">Basic Examples:<br/>
<a style="display:none" id="aliasExampleLink" href="#">hello</a> |
<a id="happyExampleLink" href="#">happy</a> |
<a id="tutorialExampleLink" href="#">intro</a> |
<a id="filterExampleLink" href="#">filter</a> |
<a id="strtokExampleLink" href="#">tokenize</a> |
<a id="insSortExampleLink" href="#">insertion sort</a> |
<a id="listCompLink" href="#">list comprehension</a>
</p>
</div>
</div>
<div id="pyOutputPane">
</div>
<div id="footer">
<p>
<button id="genUrlBtn" class="smallBtn" type="button">Generate URL</button> <input type="text" id="urlOutput" size="70"/>
</p>
<p>To share this visualization, click the 'Generate URL' button above
and share that URL. To report a bug, paste the URL along with a brief
error description in an email addressed to [email protected]</p>
<div id="embedLinkDiv">
<p>
<button id="genEmbedBtn" class="smallBtn" type="button">Generate embed code</button> <input type="text" id="embedCodeOutput" size="70"/>
</p>
<p>To embed this visualization in your webpage, click the 'Generate
embed code' button above and paste the resulting HTML code into your
webpage. Adjust the height and width parameters as needed.</p>
</div>
<p style="margin-top: 8px;">
Based on <a href="http://www.onlinepythontutor.com">Online Python Tutor</a>, © 2010-2013 <a href="http://www.pgbovine.net/">Philip Guo</a> all rights reserved. Javascript version by <a href="https://github.com/manhhung741/">Hung Doan</a>.
Source code for the <a href="https://github.com/manhhung741/jstutor">backend</a> and <a href="https://github.com/pgbovine/OnlinePythonTutor">front end</a>.
</p>
</div>
</body>
</html>