forked from cmattey/OnlinePythonTutor
-
Notifications
You must be signed in to change notification settings - Fork 46
/
Copy pathcommentary-bubbles-demo.html
52 lines (35 loc) · 21.5 KB
/
commentary-bubbles-demo.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
<!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 commentary bubbles demo</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.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" />
<!-- 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="js/jquery.qtip.min.js"></script>
<link type="text/css" href="css/jquery.qtip.css" rel="stylesheet" />
<script type="text/javascript" src="commentary-bubbles-demo.js"></script>
<link rel="stylesheet" href="commentary-bubbles-demo.css"/>
</head>
<body>
<div id="lessonHeader">
<div id="lessonTitle">Linked List Recursion Example</div>
<div id="lessonDescription">This code shows a function that sums up
the elements of a linked list using recursion.</div>
</div>
<div id="curStepNarration">At the current step, the program is about to
return from the base case of the recursion, which returns 0 to its
caller.
</div>
<p><button id="modeToggleBtn">Add/Edit Annotations</button></p>
<!--<div id="listSumDiv"></div>-->
<div id="listSumDiv"><div class="ExecutionVisualizer"><table border="0" class="visualizer"><tbody><tr><td valign="top"><div id="codeDisplayDiv"> <div id="pyCodeOutputDiv"><table id="pyCodeOutput"><tr><td id="gutterTD" valign="top" rowspan="9"><svg id="leftCodeGutterSVG" style="height: 205px;"><polygon id="prevLineArrow" points="0,3 12,3 12,0 18,5 12,10 12,7 0,7" fill="#c9e6ca" style="display: inline;" transform="translate(0, 51.000030517578125)"></polygon><polygon id="curLineArrow" points="0,3 12,3 12,0 18,5 12,10 12,7 0,7" fill="#e93f34" transform="translate(0, 62.000030517578125)" style=""></polygon></svg></td><td class="lineNo" id="lineNo1">1</td><td class="cod" id="v1__cod1" style="">def listSum(numbers):</td></tr><tr><td class="lineNo" id="lineNo2">2</td><td class="cod" id="v1__cod2" style=""> if not numbers:</td></tr><tr><td class="lineNo" id="lineNo3">3</td><td class="cod" id="v1__cod3" style=""> return 0</td></tr><tr><td class="lineNo" id="lineNo4">4</td><td class="cod" id="v1__cod4" style=""> else:</td></tr><tr><td class="lineNo" id="lineNo5">5</td><td class="cod" id="v1__cod5" style=""> (f, rest) = numbers</td></tr><tr><td class="lineNo" id="lineNo6">6</td><td class="cod" id="v1__cod6" style=""> return f + listSum(rest)</td></tr><tr><td class="lineNo" id="lineNo7">7</td><td class="cod" id="v1__cod7" style=""></td></tr><tr><td class="lineNo" id="lineNo8">8</td><td class="cod" id="v1__cod8" style="">myList = (1, (2, (3, None)))</td></tr><tr><td class="lineNo" id="lineNo9">9</td><td class="cod" id="v1__cod9" style="">total = listSum(myList)</td></tr></table></div> <div id="editCodeLinkDiv"><a id="editBtn" href="http://pythontutor.com/visualize.html#code=def+listSum(numbers)%3A%0A++if+not+numbers%3A%0A++++return+0%0A++else%3A%0A++++(f,+rest)+%3D+numbers%0A++++return+f+%2B+listSum(rest)%0A%0AmyList+%3D+(1,+(2,+(3,+None)))%0Atotal+%3D+listSum(myList)">Edit code</a></div> <div id="executionSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="font-size: 0.9em;"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 77.77777777777779%; width: 0.8em; height: 1.4em;"></a></div> <div id="vcrControls"> <button id="jmpFirstInstr" ,="" type="button"><< First</button> <button id="jmpStepBack" ,="" type="button">< Back</button> <span id="curInstr">Step 15 of 18</span> <button id="jmpStepFwd" ,="" type="button">Forward ></button> <button id="jmpLastInstr" ,="" type="button">Last >></button> </div> <div id="errorOutput" style="display: none;"></div> <div id="legendDiv"><svg id="prevLegendArrowSVG"><polygon points="0,3 12,3 12,0 18,5 12,10 12,7 0,7" fill="#c9e6ca"></polygon></svg> line that has just executed<p style="margin-top: 4px"><svg id="curLegendArrowSVG"><polygon points="0,3 12,3 12,0 18,5 12,10 12,7 0,7" fill="#e93f34"></polygon></svg> next line to execute</p></div> <div id="progOutputs"> Program output:<br> <textarea id="pyStdout" cols="50" rows="10" wrap="off" readonly=""></textarea> </div> </div></td><td valign="top"><div id="dataViz"> <table id="stackHeapTable"> <tbody><tr> <td id="stack_td"> <div id="globals_area"> <div id="stackHeader">Frames</div> <div class="stackFrame" id="v1__globals" style="display: block;"><div id="v1__globals_header" class="stackFrameHeader">Global variables</div><table class="stackFrameVarTable" id="v1__global_table"><tr id="v1__global__listSum_tr"><td class="stackFrameVar">listSum</td><td class="stackFrameValue" data-curvalue="object:REF,1"><div class="stack_pointer" id="v1__global__listSum"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 304.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 724.65px; top: 259.54168701171875px; z-index: 0;" width="157.7" height="69.75" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 37.35 48.125 C 68.85 24.875 68.85 24.875 120.35 21.625000000000004" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M120.35,21.625000000000004 L110.59119347905715,25.750008519603746 L114.8609953438376,21.972603056125227 L110.14878958944323,18.764002593578887 L120.35,21.625000000000004" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr><tr id="v1__global__myList_tr"><td class="stackFrameVar">myList</td><td class="stackFrameValue" data-curvalue="object:REF,2"><div class="stack_pointer" id="v1__global__myList"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 329.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 724.65px; top: 315.91668701171875px; z-index: 0;" width="157.7" height="40.5" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 37.35 16.75 C 88.85 10.25 88.85 10.25 120.35 23.75" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M120.35,23.75 L112.53598560726692,16.595198879761902 L115.29431435933272,21.584349358102596 L109.77970297212477,23.02970787697481 L120.35,23.75" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr></table></div></div> <div id="stack"><div class="stackFrame" id="v1__stack0"><div class="stackFrameHeader">listSum</div><table class="stackFrameVarTable"><tr id="v1__listSum_f1__numbers_tr"><td class="stackFrameVar">numbers</td><td class="stackFrameValue" data-curvalue="object:REF,2"><div class="stack_pointer" id="v1__listSum_f1__numbers"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 402.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 724.65px; top: 308.16668701171875px; z-index: 0;" width="157.7" height="128.99999999999997" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 37.35 97.49999999999997 C 68.85 54.499999999999986 68.85 54.499999999999986 120.35 31.49999999999999" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M120.35,31.49999999999999 L112.64826880284079,38.77552998527973 L115.32862656516355,33.74406078971109 L109.79219143411757,32.38469106821516 L120.35,31.49999999999999" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr><tr id="v1__listSum_f1__f_tr"><td class="stackFrameVar">f</td><td class="stackFrameValue" data-curvalue="number:1"><span class="numberObj">1</span></td></tr><tr id="v1__listSum_f1__rest_tr"><td class="stackFrameVar">rest</td><td class="stackFrameValue" data-curvalue="object:REF,3"><div class="stack_pointer" id="v1__listSum_f1__rest"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 452.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 690.45px; top: 287.46668701171876px; z-index: 0;" width="302.09999999999997" height="220.39999999999998" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 71.55 168.2 C 141.04999999999998 100.19999999999999 141.04999999999998 100.19999999999999 230.54999999999995 52.2" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M230.54999999999995,52.2 L223.39214432486432,60.01121643112831 L225.703247408181,54.799805629983936 L220.0833007957939,53.842622223358724 L230.54999999999995,52.2" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr></table></div><div class="stackFrame" id="v1__stack1"><div class="stackFrameHeader">listSum</div><table class="stackFrameVarTable"><tr id="v1__listSum_f2__numbers_tr"><td class="stackFrameVar">numbers</td><td class="stackFrameValue" data-curvalue="object:REF,3"><div class="stack_pointer" id="v1__listSum_f2__numbers"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 525.6666870117188px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 690.45px; top: 254.61668701171874px; z-index: 0;" width="302.09999999999997" height="359.09999999999997" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 71.55 274.04999999999995 C 141.04999999999998 169.54999999999998 141.04999999999998 169.54999999999998 230.54999999999995 85.05" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M230.54999999999995,85.05 L225.68206534877908,94.460271634307 L226.5510322068814,88.82601067127736 L220.87623358533517,89.37067626124703 L230.54999999999995,85.05" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr><tr id="v1__listSum_f2__f_tr"><td class="stackFrameVar">f</td><td class="stackFrameValue" data-curvalue="number:2"><span class="numberObj">2</span></td></tr><tr id="v1__listSum_f2__rest_tr"><td class="stackFrameVar">rest</td><td class="stackFrameValue" data-curvalue="object:REF,4"><div class="stack_pointer" id="v1__listSum_f2__rest"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 575.6666870117188px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position: absolute; left: 656.25px; top: 232.11668701171874px; z-index: 0;" width="446.5" height="454.09999999999997" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 105.75 346.54999999999995 C 213.25 217.04999999999998 213.25 217.04999999999998 340.75 107.55" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M340.75,107.55 L335.4444763961483,116.7206825966758 L336.57771101828195,111.13357428457036 L330.88356367033145,111.41049661994373 L340.75,107.55" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr></table></div><div class="stackFrame" id="v1__stack2"><div class="stackFrameHeader">listSum</div><table class="stackFrameVarTable"><tr id="v1__listSum_f3__numbers_tr"><td class="stackFrameVar">numbers</td><td class="stackFrameValue" data-curvalue="object:REF,4"><div class="stack_pointer" id="v1__listSum_f3__numbers"> </div><div style="position: absolute; height: 6px; width: 6px; left: 759px; top: 648.6666870117188px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#cccccc" stroke="none"></circle></svg></div><svg style="position:absolute;left:656.25px;top:199.26668701171874px" width="446.5" height="592.8" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 105.75 452.4 C 213.25 286.4 213.25 286.4 340.75 140.4" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#cccccc" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M340.75,140.4 L336.8088860240394,150.23451171276378 L337.1323998294117,144.54282138231417 L331.53620426473043,145.6302933138332 L340.75,140.4" class="" stroke="#cccccc" fill="#cccccc"></path></svg></td></tr><tr id="v1__listSum_f3__f_tr"><td class="stackFrameVar">f</td><td class="stackFrameValue" data-curvalue="number:3"><span class="numberObj">3</span></td></tr><tr id="v1__listSum_f3__rest_tr"><td class="stackFrameVar">rest</td><td class="stackFrameValue" data-curvalue="object:null"><span class="nullObj">None</span></td></tr></table></div><div class="stackFrame highlightedStackFrame" id="v1__stack3"><div class="stackFrameHeader">listSum</div><table class="stackFrameVarTable"><tr id="v1__listSum_f4__numbers_tr"><td class="stackFrameVar">numbers</td><td class="stackFrameValue" data-curvalue="object:null"><span class="nullObj">None</span></td></tr><tr id="v1__listSum_f4____return___tr"><td class="stackFrameVar"><span class="retval">Return<br>value</span></td><td class="stackFrameValue" data-curvalue="number:0"><span class="numberObj">0</span></td></tr></table></div></div> </td> <td id="heap_td"> <div id="heap"> <div id="heapHeader">Objects</div> <table class="heapRow"><td class="toplevelHeapObject" id="toplevel_heap_object_1"><div class="heapObject" id="v1__heap_object_1"><div class="funcObj">function listSum(numbers)</div></div></td></table><table class="heapRow"><td class="toplevelHeapObject" id="toplevel_heap_object_2"><div class="heapObject" id="v1__heap_object_2"><div class="typeLabel">tuple</div><table class="tupleTbl"><tbody><tr><td class="tupleHeader">0</td><td class="tupleHeader">1</td></tr><tr><td class="tupleElt"><span class="numberObj">1</span></td><td class="tupleElt"><div id="v1__heap_pointer_src_1"> </div><div style="position: absolute; height: 6px; width: 6px; left: 889px; top: 348.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#005583" stroke="none"></circle></svg></div><svg style="position:absolute;left:878.95px;top:334.2666870117188px" width="55.099999999999994" height="22.799999999999997" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 13.05 17.4 C 27.549999999999997 11.399999999999999 27.549999999999997 11.399999999999999 42.05 5.4" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#005583" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M42.05,5.4 L34.162774805670125,12.474014329496942 L36.97229700195136,7.513511831906296 L31.4728506559712,6.0114832410714065 L42.05,5.4" class="" stroke="#005583" fill="#005583"></path></svg></td></tr></tbody></table></div></td><td class="toplevelHeapObject" id="toplevel_heap_object_3"><div class="heapObject" id="v1__heap_object_3"><div class="typeLabel">tuple</div><table class="tupleTbl"><tbody><tr><td class="tupleHeader">0</td><td class="tupleHeader">1</td></tr><tr><td class="tupleElt"><span class="numberObj">2</span></td><td class="tupleElt"><div id="v1__heap_pointer_src_2"> </div><div style="position: absolute; height: 6px; width: 6px; left: 965px; top: 348.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="#005583" stroke="none"></circle></svg></div><svg style="position:absolute;left:954.95px;top:334.2666870117188px" width="55.099999999999994" height="22.799999999999997" pointer-events="none" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml" class="_jsPlumb_connector "><path d="M 13.05 17.4 C 27.549999999999997 11.399999999999999 27.549999999999997 11.399999999999999 42.05 5.4" pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="#005583" stroke-width="1"></path><path pointer-events="all" version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M42.05,5.4 L34.162774805670125,12.474014329496942 L36.97229700195136,7.513511831906296 L31.4728506559712,6.0114832410714065 L42.05,5.4" class="" stroke="#005583" fill="#005583"></path></svg></td></tr></tbody></table></div><div style="position: absolute; height: 6px; width: 6px; left: 918px; top: 336.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="none"></circle></svg></div></td><td class="toplevelHeapObject" id="toplevel_heap_object_4"><div class="heapObject" id="v1__heap_object_4"><div class="typeLabel">tuple</div><table class="tupleTbl"><tbody><tr><td class="tupleHeader">0</td><td class="tupleHeader">1</td></tr><tr><td class="tupleElt"><span class="numberObj">3</span></td><td class="tupleElt"><span class="nullObj">None</span></td></tr></tbody></table></div><div style="position: absolute; height: 6px; width: 6px; left: 994px; top: 336.66668701171875px;" class="_jsPlumb_endpoint "><svg style="position:absolute;left:0px;top:0px" width="6" height="6" pointer-events="all" position="absolute" version="1.1" xmlns="http://www.w3.org/1999/xhtml"><circle cx="3" cy="3" r="3" version="1.1" xmlns="http://www.w3.org/1999/xhtml" style="" fill="none" stroke="none"></circle></svg></div></td></table></div> </td> </tr> </tbody></table> </div></td></tr></tbody></table></div></div>
</body>
</html>