opt_annotations/embedding-demo.html at master · mitchellg/opt_annotations · GitHub

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
<!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">

<head>
  <title>Online Python Tutor Annotations</title>

<!-- dependencies 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.simplemodal.js"></script> <!-- for questions -->
<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" />
<link type="text/css" href="css/basic.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
<link type="text/css" href="css/jquery.qtip.css" rel="stylesheet" />

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.foggy.min.js"></script>

<!-- Python Tutor frontend code and styles -->
<script type="text/javascript" src="js/pytutor.js"></script>
<link rel="stylesheet" href="css/pytutor.css"/>

<script type="text/javascript" src="embedding-demo.js"></script>

</head>

<body>

  <p id="instructions" style="width:60%; font-weight:bold; font-size:11pt; font-family:verdana, arial, helvetica, sans-serif;">Instructions: You have arrived at a random step in this code. Your goal is to help create a tutorial that describes what this code does.
  </br></br>Step forward and backward through execution. Each step of execution has a bubble on the line that is executing. Click on the bubble to add annotations that describe what the code does at the current step. Feel free to add an annotation for any step.</p>

  <div style="margin-top:40px;" id="happyDiv">
  </div>

</body>
</html>