Online Python Tutor - iframe embed page

").append(a.replace(cr,"")).find(e):a)}),this},p.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){p.fn[b]=function(a){return this.on(b,a)}}),p.each(["get","post"],function(a,c){p[c]=function(a,d,e,f){return p.isFunction(d)&&(f=f||e,e=d,d=b),p.ajax({type:c,url:a,data:d,success:e,dataType:f})}}),p.extend({getScript:function(a,c){return p.get(a,b,c,"script")},getJSON:function(a,b,c){return p.get(a,b,c,"json")},ajaxSetup:function(a,b){return b?cB(a,p.ajaxSettings):(b=a,a=p.ajaxSettings),cB(a,b),a},ajaxSettings:{url:ck,isLocal:cn.test(cj[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":cx},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":p.parseJSON,"text xml":p.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:cz(cv),ajaxTransport:cz(cw),ajax:function(a,c){function y(a,c,f,i){var k,s,t,u,w,y=c;if(v===2)return;v=2,h&&clearTimeout(h),g=b,e=i||"",x.readyState=a>0?4:0,f&&(u=cC(l,x,f));if(a>=200&&a<300||a===304)l.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(p.lastModified[d]=w),w=x.getResponseHeader("Etag"),w&&(p.etag[d]=w)),a===304?(y="notmodified",k=!0):(k=cD(l,u),y=k.state,s=k.data,t=k.error,k=!t);else{t=y;if(!y||a)y="error",a<0&&(a=0)}x.status=a,x.statusText=(c||y)+"",k?o.resolveWith(m,[s,y,x]):o.rejectWith(m,[x,y,t]),x.statusCode(r),r=b,j&&n.trigger("ajax"+(k?"Success":"Error"),[x,l,k?s:t]),q.fireWith(m,[x,y]),j&&(n.trigger("ajaxComplete",[x,l]),--p.active||p.event.trigger("ajaxStop"))}typeof a=="object"&&(c=a,a=b),c=c||{};var d,e,f,g,h,i,j,k,l=p.ajaxSetup({},c),m=l.context||l,n=m!==l&&(m.nodeType||m instanceof p)?p(m):p.event,o=p.Deferred(),q=p.Callbacks("once memory"),r=l.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,setRequestHeader:function(a,b){if(!v){var c=a.toLowerCase();a=u[c]=u[c]||a,t[a]=b}return this},getAllResponseHeaders:function(){return v===2?e:null},getResponseHeader:function(a){var c;if(v===2){if(!f){f={};while(c=cm.exec(e))f[c[1].toLowerCase()]=c[2]}c=f[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){return v||(l.mimeType=a),this},abort:function(a){return a=a||w,g&&g.abort(a),y(0,a),this}};o.promise(x),x.success=x.done,x.error=x.fail,x.complete=q.add,x.statusCode=function(a){if(a){var b;if(v<2)for(b in a)r[b]=[r[b],a[b]];else b=a[x.status],x.always(b)}return this},l.url=((a||l.url)+"").replace(cl,"").replace(cp,cj[1]+"//"),l.dataTypes=p.trim(l.dataType||"*").toLowerCase().split(s),l.crossDomain==null&&(i=ct.exec(l.url.toLowerCase())||!1,l.crossDomain=i&&i.join(":")+(i[3]?"":i[1]==="http:"?80:443)!==cj.join(":")+(cj[3]?"":cj[1]==="http:"?80:443)),l.data&&l.processData&&typeof l.data!="string"&&(l.data=p.param(l.data,l.traditional)),cA(cv,l,c,x);if(v===2)return x;j=l.global,l.type=l.type.toUpperCase(),l.hasContent=!co.test(l.type),j&&p.active++===0&&p.event.trigger("ajaxStart");if(!l.hasContent){l.data&&(l.url+=(cq.test(l.url)?"&":"?")+l.data,delete l.data),d=l.url;if(l.cache===!1){var z=p.now(),A=l.url.replace(cs,"$1_="+z);l.url=A+(A===l.url?(cq.test(l.url)?"&":"?")+"_="+z:"")}}(l.data&&l.hasContent&&l.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",l.contentType),l.ifModified&&(d=d||l.url,p.lastModified[d]&&x.setRequestHeader("If-Modified-Since",p.lastModified[d]),p.etag[d]&&x.setRequestHeader("If-None-Match",p.etag[d])),x.setRequestHeader("Accept",l.dataTypes[0]&&l.accepts[l.dataTypes[0]]?l.accepts[l.dataTypes[0]]+(l.dataTypes[0]!=="*"?", "+cx+"; q=0.01":""):l.accepts["*"]);for(k in l.headers)x.setRequestHeader(k,l.headers[k]);if(!l.beforeSend||l.beforeSend.call(m,x,l)!==!1&&v!==2){w="abort";for(k in{success:1,error:1,complete:1})x[k](l[k]);g=cA(cw,l,c,x);if(!g)y(-1,"No Transport");else{x.readyState=1,j&&n.trigger("ajaxSend",[x,l]),l.async&&l.timeout>0&&(h=setTimeout(function(){x.abort("timeout")},l.timeout));try{v=1,g.send(t,y)}catch(B){if(v<2)y(-1,B);else throw B}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var cE=[],cF=/\?/,cG=/(=)\?(?=&|$)|\?\?/,cH=p.now();p.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=cE.pop()||p.expando+"_"+cH++;return this[a]=!0,a}}),p.ajaxPrefilter("json jsonp",function(c,d,e){var f,g,h,i=c.data,j=c.url,k=c.jsonp!==!1,l=k&&cG.test(j),m=k&&!l&&typeof i=="string"&&!(c.contentType||"").indexOf("application/x-www-form-urlencoded")&&cG.test(i);if(c.dataTypes[0]==="jsonp"||l||m)return f=c.jsonpCallback=p.isFunction(c.jsonpCallback)?c.jsonpCallback():c.jsonpCallback,g=a[f],l?c.url=j.replace(cG,"$1"+f):m?c.data=i.replace(cG,"$1"+f):k&&(c.url+=(cF.test(j)?"&":"?")+c.jsonp+"="+f),c.converters["script json"]=function(){return h||p.error(f+" was not called"),h[0]},c.dataTypes[0]="json",a[f]=function(){h=arguments},e.always(function(){a[f]=g,c[f]&&(c.jsonpCallback=d.jsonpCallback,cE.push(f)),h&&p.isFunction(g)&&g(h[0]),h=g=b}),"script"}),p.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){return p.globalEval(a),a}}}),p.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),p.ajaxTransport("script",function(a){if(a.crossDomain){var c,d=e.head||e.getElementsByTagName("head")[0]||e.documentElement;return{send:function(f,g){c=e.createElement("script"),c.async="async",a.scriptCharset&&(c.charset=a.scriptCharset),c.src=a.url,c.onload=c.onreadystatechange=function(a,e){if(e||!c.readyState||/loaded|complete/.test(c.readyState))c.onload=c.onreadystatechange=null,d&&c.parentNode&&d.removeChild(c),c=b,e||g(200,"success")},d.insertBefore(c,d.firstChild)},abort:function(){c&&c.onload(0,1)}}}});var cI,cJ=a.ActiveXObject?function(){for(var a in cI)cI[a](0,1)}:!1,cK=0;p.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&cL()||cM()}:cL,function(a){p.extend(p.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(p.ajaxSettings.xhr()),p.support.ajax&&p.ajaxTransport(function(c){if(!c.crossDomain||p.support.cors){var d;return{send:function(e,f){var g,h,i=c.xhr();c.username?i.open(c.type,c.url,c.async,c.username,c.password):i.open(c.type,c.url,c.async);if(c.xhrFields)for(h in c.xhrFields)i[h]=c.xhrFields[h];c.mimeType&&i.overrideMimeType&&i.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(h in e)i.setRequestHeader(h,e[h])}catch(j){}i.send(c.hasContent&&c.data||null),d=function(a,e){var h,j,k,l,m;try{if(d&&(e||i.readyState===4)){d=b,g&&(i.onreadystatechange=p.noop,cJ&&delete cI[g]);if(e)i.readyState!==4&&i.abort();else{h=i.status,k=i.getAllResponseHeaders(),l={},m=i.responseXML,m&&m.documentElement&&(l.xml=m);try{l.text=i.responseText}catch(a){}try{j=i.statusText}catch(n){j=""}!h&&c.isLocal&&!c.crossDomain?h=l.text?200:404:h===1223&&(h=204)}}}catch(o){e||f(-1,o)}l&&f(h,j,l,k)},c.async?i.readyState===4?setTimeout(d,0):(g=++cK,cJ&&(cI||(cI={},p(a).unload(cJ)),cI[g]=d),i.onreadystatechange=d):d()},abort:function(){d&&d(0,1)}}}});var cN,cO,cP=/^(?:toggle|show|hide)$/,cQ=new RegExp("^(?:([-+])=|)("+q+")([a-z%]*)$","i"),cR=/queueHooks$/,cS=[cY],cT={"*":[function(a,b){var c,d,e=this.createTween(a,b),f=cQ.exec(b),g=e.cur(),h=+g||0,i=1,j=20;if(f){c=+f[2],d=f[3]||(p.cssNumber[a]?"":"px");if(d!=="px"&&h){h=p.css(e.elem,a,!0)||c||1;do i=i||".5",h=h/i,p.style(e.elem,a,h+d);while(i!==(i=e.cur()/g)&&i!==1&&--j)}e.unit=d,e.start=h,e.end=f[1]?h+(f[1]+1)*c:c}return e}]};p.Animation=p.extend(cW,{tweener:function(a,b){p.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");var c,d=0,e=a.length;for(;d-1,j={},k={},l,m;i?(k=e.position(),l=k.top,m=k.left):(l=parseFloat(g)||0,m=parseFloat(h)||0),p.isFunction(b)&&(b=b.call(a,c,f)),b.top!=null&&(j.top=b.top-f.top+l),b.left!=null&&(j.left=b.left-f.left+m),"using"in b?b.using.call(a,j):e.css(j)}},p.fn.extend({position:function(){if(!this[0])return;var a=this[0],b=this.offsetParent(),c=this.offset(),d=c_.test(b[0].nodeName)?{top:0,left:0}:b.offset();return c.top-=parseFloat(p.css(a,"marginTop"))||0,c.left-=parseFloat(p.css(a,"marginLeft"))||0,d.top+=parseFloat(p.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(p.css(b[0],"borderLeftWidth"))||0,{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||e.body;while(a&&!c_.test(a.nodeName)&&p.css(a,"position")==="static")a=a.offsetParent;return a||e.body})}}),p.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,c){var d=/Y/.test(c);p.fn[a]=function(e){return p.access(this,function(a,e,f){var g=da(a);if(f===b)return g?c in g?g[c]:g.document.documentElement[e]:a[e];g?g.scrollTo(d?p(g).scrollLeft():f,d?f:p(g).scrollTop()):a[e]=f},a,e,arguments.length,null)}}),p.each({Height:"height",Width:"width"},function(a,c){p.each({padding:"inner"+a,content:c,"":"outer"+a},function(d,e){p.fn[e]=function(e,f){var g=arguments.length&&(d||typeof e!="boolean"),h=d||(e===!0||f===!0?"margin":"border");return p.access(this,function(c,d,e){var f;return p.isWindow(c)?c.document.documentElement["client"+a]:c.nodeType===9?(f=c.documentElement,Math.max(c.body["scroll"+a],f["scroll"+a],c.body["offset"+a],f["offset"+a],f["client"+a])):e===b?p.css(c,d,e,h):p.style(c,d,e,h)},c,g?e:b,g,null)}})}),a.jQuery=a.$=p,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return p})})(window); \ No newline at end of file diff --git a/embed/js/jquery-ui-1.8.24.custom.min.js b/embed/js/jquery-ui-1.8.24.custom.min.js new file mode 100644 index 0000000..7d53c3a --- /dev/null +++ b/embed/js/jquery-ui-1.8.24.custom.min.js @@ -0,0 +1,25 @@ +/*! jQuery UI - v1.8.24 - 2012-09-28 +* https://github.com/jquery/jquery-ui +* Includes: jquery.ui.core.js +* Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ +(function(a,b){function c(b,c){var e=b.nodeName.toLowerCase();if("area"===e){var f=b.parentNode,g=f.name,h;return!b.href||!g||f.nodeName.toLowerCase()!=="map"?!1:(h=a("img[usemap=#"+g+"]")[0],!!h&&d(h))}return(/input|select|textarea|button|object/.test(e)?!b.disabled:"a"==e?b.href||c:c)&&d(b)}function d(b){return!a(b).parents().andSelf().filter(function(){return a.curCSS(this,"visibility")==="hidden"||a.expr.filters.hidden(this)}).length}a.ui=a.ui||{};if(a.ui.version)return;a.extend(a.ui,{version:"1.8.24",keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}}),a.fn.extend({propAttr:a.fn.prop||a.fn.attr,_focus:a.fn.focus,focus:function(b,c){return typeof b=="number"?this.each(function(){var d=this;setTimeout(function(){a(d).focus(),c&&c.call(d)},b)}):this._focus.apply(this,arguments)},scrollParent:function(){var b;return a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?b=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(a.curCSS(this,"position",1))&&/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0):b=this.parents().filter(function(){return/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}).eq(0),/fixed/.test(this.css("position"))||!b.length?a(document):b},zIndex:function(c){if(c!==b)return this.css("zIndex",c);if(this.length){var d=a(this[0]),e,f;while(d.length&&d[0]!==document){e=d.css("position");if(e==="absolute"||e==="relative"||e==="fixed"){f=parseInt(d.css("zIndex"),10);if(!isNaN(f)&&f!==0)return f}d=d.parent()}}return 0},disableSelection:function(){return this.bind((a.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(a){a.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}}),a("").outerWidth(1).jquery||a.each(["Width","Height"],function(c,d){function h(b,c,d,f){return a.each(e,function(){c-=parseFloat(a.curCSS(b,"padding"+this,!0))||0,d&&(c-=parseFloat(a.curCSS(b,"border"+this+"Width",!0))||0),f&&(c-=parseFloat(a.curCSS(b,"margin"+this,!0))||0)}),c}var e=d==="Width"?["Left","Right"]:["Top","Bottom"],f=d.toLowerCase(),g={innerWidth:a.fn.innerWidth,innerHeight:a.fn.innerHeight,outerWidth:a.fn.outerWidth,outerHeight:a.fn.outerHeight};a.fn["inner"+d]=function(c){return c===b?g["inner"+d].call(this):this.each(function(){a(this).css(f,h(this,c)+"px")})},a.fn["outer"+d]=function(b,c){return typeof b!="number"?g["outer"+d].call(this,b):this.each(function(){a(this).css(f,h(this,b,!0,c)+"px")})}}),a.extend(a.expr[":"],{data:a.expr.createPseudo?a.expr.createPseudo(function(b){return function(c){return!!a.data(c,b)}}):function(b,c,d){return!!a.data(b,d[3])},focusable:function(b){return c(b,!isNaN(a.attr(b,"tabindex")))},tabbable:function(b){var d=a.attr(b,"tabindex"),e=isNaN(d);return(e||d>=0)&&c(b,!e)}}),a(function(){var b=document.body,c=b.appendChild(c=document.createElement("div"));c.offsetHeight,a.extend(c.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0}),a.support.minHeight=c.offsetHeight===100,a.support.selectstart="onselectstart"in c,b.removeChild(c).style.display="none"}),a.curCSS||(a.curCSS=a.css),a.extend(a.ui,{plugin:{add:function(b,c,d){var e=a.ui[b].prototype;for(var f in d)e.plugins[f]=e.plugins[f]||[],e.plugins[f].push([c,d[f]])},call:function(a,b,c){var d=a.plugins[b];if(!d||!a.element[0].parentNode)return;for(var e=0;e0?!0:(b[d]=1,e=b[d]>0,b[d]=0,e)},isOverAxis:function(a,b,c){return a>b&&a=9||!!b.button?this._mouseStarted?(this._mouseDrag(b),b.preventDefault()):(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)&&(this._mouseStarted=this._mouseStart(this._mouseDownEvent,b)!==!1,this._mouseStarted?this._mouseDrag(b):this._mouseUp(b)),!this._mouseStarted):this._mouseUp(b)},_mouseUp:function(b){return a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate),this._mouseStarted&&(this._mouseStarted=!1,b.target==this._mouseDownEvent.target&&a.data(b.target,this.widgetName+".preventClickEvent",!0),this._mouseStop(b)),!1},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(a){return this.mouseDelayMet},_mouseStart:function(a){},_mouseDrag:function(a){},_mouseStop:function(a){},_mouseCapture:function(a){return!0}})})(jQuery);;/*! jQuery UI - v1.8.24 - 2012-09-28 +* https://github.com/jquery/jquery-ui +* Includes: jquery.ui.position.js +* Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ +(function(a,b){a.ui=a.ui||{};var c=/left|center|right/,d=/top|center|bottom/,e="center",f={},g=a.fn.position,h=a.fn.offset;a.fn.position=function(b){if(!b||!b.of)return g.apply(this,arguments);b=a.extend({},b);var h=a(b.of),i=h[0],j=(b.collision||"flip").split(" "),k=b.offset?b.offset.split(" "):[0,0],l,m,n;return i.nodeType===9?(l=h.width(),m=h.height(),n={top:0,left:0}):i.setTimeout?(l=h.width(),m=h.height(),n={top:h.scrollTop(),left:h.scrollLeft()}):i.preventDefault?(b.at="left top",l=m=0,n={top:b.of.pageY,left:b.of.pageX}):(l=h.outerWidth(),m=h.outerHeight(),n=h.offset()),a.each(["my","at"],function(){var a=(b[this]||"").split(" ");a.length===1&&(a=c.test(a[0])?a.concat([e]):d.test(a[0])?[e].concat(a):[e,e]),a[0]=c.test(a[0])?a[0]:e,a[1]=d.test(a[1])?a[1]:e,b[this]=a}),j.length===1&&(j[1]=j[0]),k[0]=parseInt(k[0],10)||0,k.length===1&&(k[1]=k[0]),k[1]=parseInt(k[1],10)||0,b.at[0]==="right"?n.left+=l:b.at[0]===e&&(n.left+=l/2),b.at[1]==="bottom"?n.top+=m:b.at[1]===e&&(n.top+=m/2),n.left+=k[0],n.top+=k[1],this.each(function(){var c=a(this),d=c.outerWidth(),g=c.outerHeight(),h=parseInt(a.curCSS(this,"marginLeft",!0))||0,i=parseInt(a.curCSS(this,"marginTop",!0))||0,o=d+h+(parseInt(a.curCSS(this,"marginRight",!0))||0),p=g+i+(parseInt(a.curCSS(this,"marginBottom",!0))||0),q=a.extend({},n),r;b.my[0]==="right"?q.left-=d:b.my[0]===e&&(q.left-=d/2),b.my[1]==="bottom"?q.top-=g:b.my[1]===e&&(q.top-=g/2),f.fractions||(q.left=Math.round(q.left),q.top=Math.round(q.top)),r={left:q.left-h,top:q.top-i},a.each(["left","top"],function(c,e){a.ui.position[j[c]]&&a.ui.position[j[c]][e](q,{targetWidth:l,targetHeight:m,elemWidth:d,elemHeight:g,collisionPosition:r,collisionWidth:o,collisionHeight:p,offset:k,my:b.my,at:b.at})}),a.fn.bgiframe&&c.bgiframe(),c.offset(a.extend(q,{using:b.using}))})},a.ui.position={fit:{left:function(b,c){var d=a(window),e=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft();b.left=e>0?b.left-e:Math.max(b.left-c.collisionPosition.left,b.left)},top:function(b,c){var d=a(window),e=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop();b.top=e>0?b.top-e:Math.max(b.top-c.collisionPosition.top,b.top)}},flip:{left:function(b,c){if(c.at[0]===e)return;var d=a(window),f=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft(),g=c.my[0]==="left"?-c.elemWidth:c.my[0]==="right"?c.elemWidth:0,h=c.at[0]==="left"?c.targetWidth:-c.targetWidth,i=-2*c.offset[0];b.left+=c.collisionPosition.left<0?g+h+i:f>0?g+h+i:0},top:function(b,c){if(c.at[1]===e)return;var d=a(window),f=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop(),g=c.my[1]==="top"?-c.elemHeight:c.my[1]==="bottom"?c.elemHeight:0,h=c.at[1]==="top"?c.targetHeight:-c.targetHeight,i=-2*c.offset[1];b.top+=c.collisionPosition.top<0?g+h+i:f>0?g+h+i:0}}},a.offset.setOffset||(a.offset.setOffset=function(b,c){/static/.test(a.curCSS(b,"position"))&&(b.style.position="relative");var d=a(b),e=d.offset(),f=parseInt(a.curCSS(b,"top",!0),10)||0,g=parseInt(a.curCSS(b,"left",!0),10)||0,h={top:c.top-e.top+f,left:c.left-e.left+g};"using"in c?c.using.call(b,h):d.css(h)},a.fn.offset=function(b){var c=this[0];return!c||!c.ownerDocument?null:b?a.isFunction(b)?this.each(function(c){a(this).offset(b.call(this,c,a(this).offset()))}):this.each(function(){a.offset.setOffset(this,b)}):h.call(this)}),a.curCSS||(a.curCSS=a.css),function(){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d,e,g,h,i;d=document.createElement(b?"div":"body"),g={visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"},b&&a.extend(g,{position:"absolute",left:"-1000px",top:"-1000px"});for(var j in g)d.style[j]=g[j];d.appendChild(c),e=b||document.documentElement,e.insertBefore(d,e.firstChild),c.style.cssText="position: absolute; left: 10.7432222px; top: 10.432325px; height: 30px; width: 201px;",h=a(c).offset(function(a,b){return b}).offset(),d.innerHTML="",e.removeChild(d),i=h.top+h.left+(b?2e3:0),f.fractions=i>21&&i<22}()})(jQuery);;/*! jQuery UI - v1.8.24 - 2012-09-28 +* https://github.com/jquery/jquery-ui +* Includes: jquery.ui.resizable.js +* Copyright (c) 2012 AUTHORS.txt; Licensed MIT, GPL */ +(function(a,b){a.widget("ui.resizable",a.ui.mouse,{widgetEventPrefix:"resize",options:{alsoResize:!1,animate:!1,animateDuration:"slow",animateEasing:"swing",aspectRatio:!1,autoHide:!1,containment:!1,ghost:!1,grid:!1,handles:"e,s,se",helper:!1,maxHeight:null,maxWidth:null,minHeight:10,minWidth:10,zIndex:1e3},_create:function(){var b=this,c=this.options;this.element.addClass("ui-resizable"),a.extend(this,{_aspectRatio:!!c.aspectRatio,aspectRatio:c.aspectRatio,originalElement:this.element,_proportionallyResizeElements:[],_helper:c.helper||c.ghost||c.animate?c.helper||"ui-resizable-helper":null}),this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)&&(this.element.wrap(a('

",{id:k.substr(1),html:"

",mousedown:function(){return f}}).hide().insertAfter(d(A).last()),d(a).unbind(l).bind("resize"+l,c),c(),r)},toggle:function(a,b,c){if(a&&a.isDefaultPrevented())return g;var i=h.effect,k=b?"show":"hide",l=r.is(":visible"),p=d("["+n+"]").filter(":visible").not(j),q;return r||(r=g.create()),r.is(":animated")&&l===b||!b&&p.length?g:(b?(r.css({left:0,top:0}),r.toggleClass("blurs",h.blur),h.stealfocus!==f&&(o.bind("focusin"+m,v),t(d("body :focus")))):o.unbind("focusin"+m),r.stop(e,f),d.isFunction(i)?i.call(r,b):i===f?r[k]():r.fadeTo(parseInt(c,10)||90,b?1:0,function(){b||d(this).hide()}),b||r.queue(function(a){r.css({left:"",top:""}),a()}),g)},show:function(a,b){return g.toggle(a,e,b)},hide:function(a,b){return g.toggle(a,f,b)},destroy:function(){var a=r;return a&&(a=d("["+n+"]").not(j).length<1,a?(i.overlay.remove(),d(b).unbind(l)):i.overlay.unbind(l+c.id),o.undelegate("*","focusin"+m)),j.removeAttr(n).unbind(l)}}),g.init()}function P(a){var b=this,c=a.elements,e=c.tooltip,f=".bgiframe-"+a.id;d.extend(b,{init:function(){c.bgiframe=d(''),c.bgiframe.appendTo(e),e.bind("tooltipmove"+f,b.adjust)},adjust:function(){var b=a.get("dimensions"),d=a.plugins.tip,f=c.tip,g,h;h=parseInt(e.css("border-left-width"),10)||0,h={left:-h,top:-h},d&&f&&(g=d.corner.precedance==="x"?["width","left"]:["height","top"],h[g[1]]-=f[g[0]]()),c.bgiframe.css(h).css(b)},destroy:function(){c.bgiframe.remove(),e.unbind(f)}}),b.init()}var e=!0,f=!1,g=null,h="x",i="y",j="width",k="height",l="top",m="left",n="bottom",o="right",p="center",q="flip",r="flipinvert",s="shift",t,u,v,w={},x="ui-tooltip",y="ui-widget",z="ui-state-disabled",A="div.qtip."+x,B=x+"-default",C=x+"-focus",D=x+"-hover",E="_replacedByqTip",F="oldtitle",G,H;H=d("

",{id:"qtip-rcontainer"}),d(function(){H.appendTo(b.body)}),t=d.fn.qtip=function(a,b,h){var i=(""+a).toLowerCase(),j=g,k=d.makeArray(arguments).slice(1),l=k[k.length-1],m=this[0]?d.data(this[0],"qtip"):g;if(!arguments.length&&m||i==="api")return m;if("string"==typeof a)return this.each(function(){var a=d.data(this,"qtip");if(!a)return e;l&&l.timeStamp&&(a.cache.event=l);if(i!=="option"&&i!=="options"||!b)a[i]&&a[i].apply(a[i],k);else if(d.isPlainObject(b)||h!==c)a.set(b,h);else return j=a.get(b),f}),j!==g?j:this;if("object"==typeof a||!arguments.length)return m=I(d.extend(e,{},a)),t.bind.call(this,m,l)},t.bind=function(a,b){return this.each(function(g){function n(a){function b(){l.render(typeof a=="object"||h.show.ready),i.show.add(i.hide).unbind(k)}if(l.cache.disabled)return f;l.cache.event=d.extend({},a),l.cache.target=a?d(a.target):[c],h.show.delay>0?(clearTimeout(l.timers.show),l.timers.show=setTimeout(b,h.show.delay),j.show!==j.hide&&i.hide.bind(j.hide,function(){clearTimeout(l.timers.show)})):b()}var h,i,j,k,l,m;m=d.isArray(a.id)?a.id[g]:a.id,m=!m||m===f||m.length<1||w[m]?t.nextid++:w[m]=m,k=".qtip-"+m+"-create",l=K.call(this,m,a);if(l===f)return e;h=l.options,d.each(u,function(){this.initialize==="initialize"&&this(l)}),i={show:h.show.target,hide:h.hide.target},j={show:d.trim(""+h.show.event).replace(/ /g,k+" ")+k,hide:d.trim(""+h.hide.event).replace(/ /g,k+" ")+k},/mouse(over|enter)/i.test(j.show)&&!/mouse(out|leave)/i.test(j.hide)&&(j.hide+=" mouseleave"+k),i.show.bind("mousemove"+k,function(a){v={pageX:a.pageX,pageY:a.pageY,type:"mousemove"},l.cache.onTarget=e}),i.show.bind(j.show,n),(h.show.ready||h.prerender)&&n(b)})},u=t.plugins={Corner:function(a){a=(""+a).replace(/([A-Z])/," $1").replace(/middle/gi,p).toLowerCase(),this.x=(a.match(/left|right/i)||a.match(/center/)||["inherit"])[0].toLowerCase(),this.y=(a.match(/top|bottom|center/i)||["inherit"])[0].toLowerCase();var b=a.charAt(0);this.precedance=b==="t"||b==="b"?i:h,this.string=function(){return this.precedance===i?this.y+this.x:this.x+this.y},this.abbrev=function(){var a=this.x.substr(0,1),b=this.y.substr(0,1);return a===b?a:this.precedance===i?b+a:a+b},this.invertx=function(a){this.x=this.x===m?o:this.x===o?m:a||this.x},this.inverty=function(a){this.y=this.y===l?n:this.y===n?l:a||this.y},this.clone=function(){return{x:this.x,y:this.y,precedance:this.precedance,string:this.string,abbrev:this.abbrev,clone:this.clone,invertx:this.invertx,inverty:this.inverty}}},offset:function(a,b){function j(a,b){c.left+=b*a.scrollLeft(),c.top+=b*a.scrollTop()}var c=a.offset(),e=a.closest("body")[0],f=b,g,h,i;if(f){do f.css("position")!=="static"&&(h=f.position(),c.left-=h.left+(parseInt(f.css("borderLeftWidth"),10)||0)+(parseInt(f.css("marginLeft"),10)||0),c.top-=h.top+(parseInt(f.css("borderTopWidth"),10)||0)+(parseInt(f.css("marginTop"),10)||0),!g&&(i=f.css("overflow"))!=="hidden"&&i!=="visible"&&(g=f));while((f=d(f[0].offsetParent)).length);g&&g[0]!==e&&j(g,1)}return c},iOS:parseFloat((""+(/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent)||[0,""])[1]).replace("undefined","3_2").replace("_",".").replace("_",""))||f,fn:{attr:function(a,b){if(this.length){var c=this[0],e="title",f=d.data(c,"qtip");if(a===e&&f&&"object"==typeof f&&f.options.suppress)return arguments.length<2?d.attr(c,F):(f&&f.options.content.attr===e&&f.cache.attr&&f.set("content.text",b),this.attr(F,b))}return d.fn["attr"+E].apply(this,arguments)},clone:function(a){var b=d([]),c="title",e=d.fn["clone"+E].apply(this,arguments);return a||e.filter("["+F+"]").attr("title",function(){return d.attr(this,F)}).removeAttr(F),e}}},d.each(u.fn,function(a,b){if(!b||d.fn[a+E])return e;var c=d.fn[a+E]=d.fn[a];d.fn[a]=function(){return b.apply(this,arguments)||c.apply(this,arguments)}}),d.ui||(d["cleanData"+E]=d.cleanData,d.cleanData=function(a){for(var b=0,e;(e=a[b])!==c;b++)try{d(e).triggerHandler("removeqtip")}catch(f){}d["cleanData"+E](a)}),t.version="@VERSION",t.nextid=0,t.inactiveEvents="click dblclick mousedown mouseup mousemove mouseleave mouseenter".split(" "),t.zindex=15e3,t.defaults={prerender:f,id:f,overwrite:e,suppress:e,content:{text:e,attr:"title",title:{text:f,button:f}},position:{my:"top left",at:"bottom right",target:f,container:f,viewport:f,adjust:{x:0,y:0,mouse:e,resize:e,method:"flip flip"},effect:function(a,b,c){d(this).animate(b,{duration:200,queue:f})}},show:{target:f,event:"mouseenter",effect:e,delay:90,solo:f,ready:f,autofocus:f},hide:{target:f,event:"mouseleave",effect:e,delay:0,fixed:f,inactive:f,leave:"window",distance:f},style:{classes:"",widget:f,width:f,height:f,def:e},events:{render:g,move:g,show:g,hide:g,toggle:g,visible:g,hidden:g,focus:g,blur:g}},u.svg=function(a,c,e,f){var g=d(b),h=c[0],i={width:0,height:0,position:{top:1e10,left:1e10}},j,k,l,m,n;while(!h.getBBox)h=h.parentNode;if(h.getBBox&&h.parentNode){j=h.getBBox(),k=h.getScreenCTM(),l=h.farthestViewportElement||h;if(!l.createSVGPoint)return i;m=l.createSVGPoint(),m.x=j.x,m.y=j.y,n=m.matrixTransform(k),i.position.left=n.x,i.position.top=n.y,m.x+=j.width,m.y+=j.height,n=m.matrixTransform(k),i.width=n.x-i.position.left,i.height=n.y-i.position.top,i.position.left+=g.scrollLeft(),i.position.top+=g.scrollTop()}return i},u.ajax=function(a){var b=a.plugins.ajax;return"object"==typeof b?b:a.plugins.ajax=new L(a)},u.ajax.initialize="render",u.ajax.sanitize=function(a){var b=a.content,c;b&&"ajax"in b&&(c=b.ajax,typeof c!="object"&&(c=a.content.ajax={url:c}),"boolean"!=typeof c.once&&c.once&&(c.once=!!c.once))},d.extend(e,t.defaults,{content:{ajax:{loading:e,once:e}}}),u.tip=function(a){var b=a.plugins.tip;return"object"==typeof b?b:a.plugins.tip=new N(a)},u.tip.initialize="render",u.tip.sanitize=function(a){var b=a.style,c;b&&"tip"in b&&(c=a.style.tip,typeof c!="object"&&(a.style.tip={corner:c}),/string|boolean/i.test(typeof c.corner)||(c.corner=e),typeof c.width!="number"&&delete c.width,typeof c.height!="number"&&delete c.height,typeof c.border!="number"&&c.border!==e&&delete c.border,typeof c.offset!="number"&&delete c.offset)},d.extend(e,t.defaults,{style:{tip:{corner:e,mimic:f,width:6,height:6,border:e,offset:0}}}),u.modal=function(a){var b=a.plugins.modal;return"object"==typeof b?b:a.plugins.modal=new O(a)},u.modal.initialize="render",u.modal.sanitize=function(a){a.show&&(typeof a.show.modal!="object"?a.show.modal={on:!!a.show.modal}:typeof a.show.modal.on=="undefined"&&(a.show.modal.on=e))},u.modal.zindex=t.zindex-200,u.modal.focusable=["a[href]","area[href]","input","select","textarea","button","iframe","object","embed","[tabindex]","[contenteditable]"],d.extend(e,t.defaults,{show:{modal:{on:f,effect:e,blur:e,stealfocus:e,escape:e}}}),u.viewport=function(c,d,e,f,g,q,t){function L(a,b,c,e,f,g,h,i,j){var k=d[f],l=w[a],m=y[a],n=c===s,o=-E.offset[f]+D.offset[f]+D["scroll"+f],q=l===f?j:l===g?-j:-j/2,t=m===f?i:m===g?-i:-i/2,u=G&&G.size?G.size[h]||0:0,v=G&&G.corner&&G.corner.precedance===a&&!n?u:0,x=o-k+v,z=k+j-D[h]-o+v,A=q-(w.precedance===a||l===w[b]?t:0)-(m===p?i/2:0);return n?(v=G&&G.corner&&G.corner.precedance===b?u:0,A=(l===f?1:-1)*q-v,d[f]+=x>0?x:z>0?-z:0,d[f]=Math.max(-E.offset[f]+D.offset[f]+(v&&G.corner[a]===p?G.offset:0),k-A,Math.min(Math.max(-E.offset[f]+D.offset[f]+D[h],k+A),d[f]))):(e*=c===r?2:0,x>0&&(l!==f||z>0)?(d[f]-=A+e,J["invert"+a](f)):z>0&&(l!==g||x>0)&&(d[f]-=(l===p?-A:A)+e,J["invert"+a](g)),d[f]z&&(d[f]=k,J=w.clone())),d[f]-k}var u=e.target,v=c.elements.tooltip,w=e.my,y=e.at,z=e.adjust,A=z.method.split(" "),B=A[0],C=A[1]||A[0],D=e.viewport,E=e.container,F=c.cache,G=c.plugins.tip,H={left:0,top:0},I,J,K;if(!D.jquery||u[0]===a||u[0]===b.body||z.method==="none")return H;I=v.css("position")==="fixed",D={elem:D,height:D[(D[0]===a?"h":"outerH")+"eight"](),width:D[(D[0]===a?"w":"outerW")+"idth"](),scrollleft:I?0:D.scrollLeft(),scrolltop:I?0:D.scrollTop(),offset:D.offset()||{left:0,top:0}},E={elem:E,scrollLeft:E.scrollLeft(),scrollTop:E.scrollTop(),offset:E.offset()||{left:0,top:0}};if(B!=="shift"||C!=="shift")J=w.clone();return H={left:B!=="none"?L(h,i,B,z.x,m,o,j,f,q):0,top:C!=="none"?L(i,h,C,z.y,l,n,k,g,t):0},J&&F.lastClass!==(K=x+"-pos-"+J.abbrev())&&v.removeClass(c.cache.lastClass).addClass(c.cache.lastClass=K),H},u.imagemap=function(a,b,c,e){function v(a,b,c){var d=0,e=1,f=1,g=0,h=0,i=a.width,j=a.height;while(i>0&&j>0&&e>0&&f>0){i=Math.floor(i/2),j=Math.floor(j/2),c.x===m?e=i:c.x===o?e=a.width-i:e+=Math.floor(i/2),c.y===l?f=j:c.y===n?f=a.height-j:f+=Math.floor(j/2),d=b.length;while(d--){if(b.length<2)break;g=b[d][0]-a.position.left,h=b[d][1]-a.position.top,(c.x===m&&g>=e||c.x===o&&g<=e||c.x===p&&(ga.width-e)||c.y===l&&h>=f||c.y===n&&h<=f||c.y===p&&(ha.height-f))&&b.splice(d,1)}}return{left:b[0][0],top:b[0][1]}}b.jquery||(b=d(b));var f=a.cache.areas={},g=(b[0].shape||b.attr("shape")).toLowerCase(),h=b[0].coords||b.attr("coords"),i=h.split(","),j=[],k=d('img[usemap="#'+b.parent("map").attr("name")+'"]'),q=k.offset(),r={width:0,height:0,position:{top:1e10,right:0,bottom:0,left:1e10}},s=0,t=0,u;q.left+=Math.ceil((k.outerWidth()-k.width())/2),q.top+=Math.ceil((k.outerHeight()-k.height())/2);if(g==="poly"){s=i.length;while(s--)t=[parseInt(i[--s],10),parseInt(i[s+1],10)],t[0]>r.position.right&&(r.position.right=t[0]),t[0]r.position.bottom&&(r.position.bottom=t[1]),t[1] 0 ? JSON.stringify(rawInputLst) : '', +*/ + function(dataFromBackend) { + var trace = dataFromBackend.trace; + + // don't enter visualize mode if there are killer errors: + if (!trace || + (trace.length == 0) || + (trace[trace.length - 1].event == 'uncaught_exception')) { + + handleUncaughtExceptionFunc(trace); + + if (trace.length == 1) { + alert(trace[0].exception_msg); + } + else if (trace[trace.length - 1].exception_msg) { + alert(trace[trace.length - 1].exception_msg); + } + else { + alert("Unknown error. Reload to try again," + + "or report a bug to philip@pgbovine.net\n\n" + + "(Click the 'Generate URL' button to include a " + + "unique URL in your email bug report.)"); + } + } + else { + // fail-soft to prevent running off of the end of trace + if (frontendOptionsObj.startingInstruction >= trace.length) { + frontendOptionsObj.startingInstruction = 0; + } + myVisualizer = new ExecutionVisualizer(outputDiv, dataFromBackend, frontendOptionsObj); + + // set keyboard bindings + // VERY IMPORTANT to clear and reset this every time or + // else the handlers might be bound multiple times + $(document).unbind('keydown'); + $(document).keydown(function(k) { + if (k.keyCode == 37) { // left arrow + if (myVisualizer.stepBack()) { + k.preventDefault(); // don't horizontally scroll the display + } + } + else if (k.keyCode == 39) { // right arrow + if (myVisualizer.stepForward()) { + k.preventDefault(); // don't horizontally scroll the display + } + } + }); + + handleSuccessFunc(); + } + }, + "json"); +} diff --git a/embed/js/opt-frontend.js b/embed/js/opt-frontend.js new file mode 100644 index 0000000..2ad2739 --- /dev/null +++ b/embed/js/opt-frontend.js @@ -0,0 +1,598 @@ +/* + +Online Python Tutor +https://github.com/pgbovine/OnlinePythonTutor/ + +Copyright (C) 2010-2013 Philip J. Guo (philip@pgbovine.net) + +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. + +*/ + + + +// Pre-reqs: +// - pytutor.js +// - jquery.ba-bbq.min.js +// - opt-frontend-common.js +// should all be imported BEFORE this file + +var appMode = 'edit'; // 'edit', 'display', or 'display_no_frills' + +var preseededCurInstr = null; // if you passed in a 'curInstr=' in the URL, then set this var + +var myVisualizer = null; // singleton ExecutionVisualizer instance + + +function enterEditMode() { + $.bbq.pushState({ mode: 'edit' }, 2 /* completely override other hash strings to keep URL clean */); +} + +function enterDisplayNoFrillsMode() { + $.bbq.pushState({ mode: 'display_no_frills' }, 2 /* completely override other hash strings to keep URL clean */); +} + +var pyInputCodeMirror; // CodeMirror object that contains the input text + +function setCodeMirrorVal(dat) { + pyInputCodeMirror.setValue(dat.rtrim() /* kill trailing spaces */); + $('#urlOutput,#embedCodeOutput').val(''); + + // also scroll to top to make the UI more usable on smaller monitors + $(document).scrollTop(0); +} + + +$(document).ready(function() { + + $("#embedLinkDiv").hide(); + + pyInputCodeMirror = CodeMirror(document.getElementById('codeInputPane'), { + mode: + {name: "python", + version: 3, + singleLineStringErrors: false + }, + lineNumbers: true, + indentUnit: 3, + tabSize: 3, + matchBrackets: true, + extraKeys: { + Tab: function(cm) { + var spaces = Array(cm.getOption("indentUnit") + 1).join(" "); + cm.replaceSelection(spaces, "end", "+input"); + } + } + }); + + //pyInputCodeMirror.setSize(null, '240px'); + + + + // be friendly to the browser's forward and back buttons + // thanks to http://benalman.com/projects/jquery-bbq-plugin/ + $(window).bind("hashchange", function(e) { + appMode = $.bbq.getState('mode'); // assign this to the GLOBAL appMode + + if (appMode === undefined || appMode == 'edit') { + $("#pyInputPane").show(); + $("#pyOutputPane").hide(); + $("#embedLinkDiv").hide(); + + // destroy all annotation bubbles (NB: kludgy) + if (myVisualizer) { + myVisualizer.destroyAllAnnotationBubbles(); + } + } + else if (appMode == 'display') { + $("#pyInputPane").hide(); + $("#pyOutputPane").show(); + + $("#embedLinkDiv").show(); + + $('#executeBtn').html("Visualize Execution"); + $('#executeBtn').attr('disabled', false); + + + // do this AFTER making #pyOutputPane visible, or else + // jsPlumb connectors won't render properly + myVisualizer.updateOutput(); + + // customize edit button click functionality AFTER rendering (NB: awkward!) + $('#pyOutputPane #editCodeLinkDiv').show(); + $('#pyOutputPane #editBtn').click(function() { + enterEditMode(); + }); + } + else if (appMode == 'display_no_frills') { + $("#pyInputPane").hide(); + $("#pyOutputPane").show(); + $("#embedLinkDiv").show(); + } + else { + assert(false); + } + + $('#urlOutput,#embedCodeOutput').val(''); // clear to avoid stale values + }); + + function getRawInput() { + if (typeof window.stdinPane === "undefined") + return ""; + else return window.stdinPane.value; + } + + function executeCode(forceStartingInstr) { + var backend_script = null; + if ($('#pythonVersionSelector').val() == '2') { + backend_script = python2_backend_script; + } + else if ($('#pythonVersionSelector').val() == '3') { + backend_script = python3_backend_script; + } + // experimental KRAZY MODE!!! + else if ($('#pythonVersionSelector').val() == '2crazy') { + backend_script = python2crazy_backend_script; + } + + $('#executeBtn').html("Please wait ... processing your code"); + $('#executeBtn').attr('disabled', true); + $("#pyOutputPane").hide(); + $("#embedLinkDiv").hide(); + + var backendOptionsObj = {cumulative_mode: ($('#cumulativeModeSelector').val() == 'true'), + heap_primitives: ($('#heapPrimitivesSelector').val() == 'true'), + show_only_outputs: ($('#showOnlyOutputsSelector').val() == 'true'), + py_crazy_mode: ($('#pythonVersionSelector').val() == '2crazy'), + raw_input: getRawInput(), + origin: 'opt-frontend.js'}; + + + var startingInstruction = 0; + + // only do this at most ONCE, and then clear out preseededCurInstr + // NOP anyways if preseededCurInstr is 0 + if (preseededCurInstr) { + startingInstruction = preseededCurInstr; + preseededCurInstr = null; + } + + // forceStartingInstr overrides everything else + if (forceStartingInstr !== undefined) { + startingInstruction = forceStartingInstr; + } + + var frontendOptionsObj = {startingInstruction: startingInstruction, + // tricky: selector 'true' and 'false' values are strings! + disableHeapNesting: ($('#heapPrimitivesSelector').val() == 'true'), + drawParentPointers: ($('#drawParentPointerSelector').val() == 'true'), + textualMemoryLabels: ($('#textualMemoryLabelsSelector').val() == 'true'), + showOnlyOutputs: ($('#showOnlyOutputsSelector').val() == 'true'), + executeCodeWithRawInputFunc: executeCodeWithRawInput, + updateOutputCallback: function() {$('#urlOutput,#embedCodeOutput').val('');}, + + // undocumented experimental modes: + pyCrazyMode: ($('#pythonVersionSelector').val() == '2crazy'), + //allowEditAnnotations: true, + + highlightLines: true, + } + + function handleSuccessFunc() { + // also scroll to top to make the UI more usable on smaller monitors + $(document).scrollTop(0); + + $.bbq.pushState({ mode: 'display' }, 2 /* completely override other hash strings to keep URL clean */); + } + + function handleUncaughtExceptionFunc(trace) { + if (trace.length == 1) { + var errorLineNo = trace[0].line - 1; /* CodeMirror lines are zero-indexed */ + if (errorLineNo !== undefined) { + // highlight the faulting line in pyInputCodeMirror + pyInputCodeMirror.focus(); +/* CodeMirror 2 + pyInputCodeMirror.setCursor(errorLineNo, 0); + pyInputCodeMirror.setLineClass(errorLineNo, null, 'errorLine'); + + pyInputCodeMirror.setOption('onChange', function() { + pyInputCodeMirror.setLineClass(errorLineNo, null, null); // reset line back to normal + pyInputCodeMirror.setOption('onChange', null); // cancel + }); +*/ + /* CodeMirror 3 */ + var marked = pyInputCodeMirror.addLineClass(errorLineNo, null, 'errorLine'); + var hook = function(marked) { return function() { + pyInputCodeMirror.removeLineClass(marked, null, 'errorLine'); // reset line back to normal + pyInputCodeMirror.off('change', hook); // cancel + }} (marked); + pyInputCodeMirror.on('change', hook); + + } + + $('#executeBtn').html("Visualize Execution"); + $('#executeBtn').attr('disabled', false); + } + } + + executePythonCode(pyInputCodeMirror.getValue(), + backend_script, backendOptionsObj, + frontendOptionsObj, + 'pyOutputPane', + handleSuccessFunc, handleUncaughtExceptionFunc); + } + + function executeCodeFromScratch() { + // reset these globals + rawInputLst = []; + executeCode(); + } + + function executeCodeWithRawInput(rawInputStr, curInstr) { + enterDisplayNoFrillsMode(); + + // set some globals + rawInputLst.push(rawInputStr); + executeCode(curInstr); + } + + $("#executeBtn").attr('disabled', false); + $("#executeBtn").click(executeCodeFromScratch); + + + // canned examples + + $("#tutorialExampleLink").click(function() { + $.get("example-code/py_tutorial.txt", setCodeMirrorVal); + return false; + }); + + $("#strtokExampleLink").click(function() { + $.get("example-code/strtok.txt", setCodeMirrorVal); + return false; + }); + + $("#listCompLink").click(function() { + $.get("example-code/list-comp.txt", setCodeMirrorVal); + return false; + }); + + $("#fibonacciExampleLink").click(function() { + $.get("example-code/fib.txt", setCodeMirrorVal); + return false; + }); + + $("#memoFibExampleLink").click(function() { + $.get("example-code/memo_fib.txt", setCodeMirrorVal); + return false; + }); + + $("#factExampleLink").click(function() { + $.get("example-code/fact.txt", setCodeMirrorVal); + return false; + }); + + $("#filterExampleLink").click(function() { + $.get("example-code/filter.txt", setCodeMirrorVal); + return false; + }); + + $("#insSortExampleLink").click(function() { + $.get("example-code/ins_sort.txt", setCodeMirrorVal); + return false; + }); + + $("#aliasExampleLink").click(function() { + $.get("example-code/aliasing.txt", setCodeMirrorVal); + return false; + }); + + $("#happyExampleLink").click(function() { + $.get("example-code/happy.txt", setCodeMirrorVal); + return false; + }); + + $("#newtonExampleLink").click(function() { + $.get("example-code/sqrt.txt", setCodeMirrorVal); + return false; + }); + + $("#oopSmallExampleLink").click(function() { + $.get("example-code/oop_small.txt", setCodeMirrorVal); + return false; + }); + + $("#mapExampleLink").click(function() { + $.get("example-code/map.txt", setCodeMirrorVal); + return false; + }); + + $("#rawInputExampleLink").click(function() { + $.get("example-code/raw_input.txt", setCodeMirrorVal); + return false; + }); + + $("#oop1ExampleLink").click(function() { + $.get("example-code/oop_1.txt", setCodeMirrorVal); + return false; + }); + + $("#oop2ExampleLink").click(function() { + $.get("example-code/oop_2.txt", setCodeMirrorVal); + return false; + }); + + $("#inheritanceExampleLink").click(function() { + $.get("example-code/oop_inherit.txt", setCodeMirrorVal); + return false; + }); + + $("#sumExampleLink").click(function() { + $.get("example-code/sum.txt", setCodeMirrorVal); + return false; + }); + + $("#pwGcdLink").click(function() { + $.get("example-code/wentworth_gcd.txt", setCodeMirrorVal); + return false; + }); + + $("#pwSumListLink").click(function() { + $.get("example-code/wentworth_sumList.txt", setCodeMirrorVal); + return false; + }); + + $("#towersOfHanoiLink").click(function() { + $.get("example-code/towers_of_hanoi.txt", setCodeMirrorVal); + return false; + }); + + $("#pwTryFinallyLink").click(function() { + $.get("example-code/wentworth_try_finally.txt", setCodeMirrorVal); + return false; + }); + + $("#sumCubesLink").click(function() { + $.get("example-code/sum-cubes.txt", setCodeMirrorVal); + return false; + }); + + $("#decoratorsLink").click(function() { + $.get("example-code/decorators.txt", setCodeMirrorVal); + return false; + }); + + $("#genPrimesLink").click(function() { + $.get("example-code/gen_primes.txt", setCodeMirrorVal); + return false; + }); + + $("#genExprLink").click(function() { + $.get("example-code/genexpr.txt", setCodeMirrorVal); + return false; + }); + + + $('#closure1Link').click(function() { + $.get("example-code/closures/closure1.txt", setCodeMirrorVal); + return false; + }); + $('#closure2Link').click(function() { + $.get("example-code/closures/closure2.txt", setCodeMirrorVal); + return false; + }); + $('#closure3Link').click(function() { + $.get("example-code/closures/closure3.txt", setCodeMirrorVal); + return false; + }); + $('#closure4Link').click(function() { + $.get("example-code/closures/closure4.txt", setCodeMirrorVal); + return false; + }); + $('#closure5Link').click(function() { + $.get("example-code/closures/closure5.txt", setCodeMirrorVal); + return false; + }); + $('#lambdaParamLink').click(function() { + $.get("example-code/closures/lambda-param.txt", setCodeMirrorVal); + return false; + }); + $('#tortureLink').click(function() { + $.get("example-code/closures/student-torture.txt", setCodeMirrorVal); + return false; + }); + + + + $('#aliasing1Link').click(function() { + $.get("example-code/aliasing/aliasing1.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing2Link').click(function() { + $.get("example-code/aliasing/aliasing2.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing3Link').click(function() { + $.get("example-code/aliasing/aliasing3.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing4Link').click(function() { + $.get("example-code/aliasing/aliasing4.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing5Link').click(function() { + $.get("example-code/aliasing/aliasing5.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing6Link').click(function() { + $.get("example-code/aliasing/aliasing6.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing7Link').click(function() { + $.get("example-code/aliasing/aliasing7.txt", setCodeMirrorVal); + return false; + }); + $('#aliasing8Link').click(function() { + $.get("example-code/aliasing/aliasing8.txt", setCodeMirrorVal); + return false; + }); + + + $('#ll1Link').click(function() { + $.get("example-code/linked-lists/ll1.txt", setCodeMirrorVal); + return false; + }); + $('#ll2Link').click(function() { + $.get("example-code/linked-lists/ll2.txt", setCodeMirrorVal); + return false; + }); + $('#sumListLink').click(function() { + $.get("example-code/sum-list.txt", setCodeMirrorVal); + return false; + }); + + $('#varargsLink').click(function() { + $.get("example-code/varargs.txt", setCodeMirrorVal); + return false; + }); + + $('#forElseLink').click(function() { + $.get("example-code/for-else.txt", setCodeMirrorVal); + return false; + }); + + $('#nonlocalLink').click(function() { + $.get("example-code/nonlocal.txt", setCodeMirrorVal); + return false; + }); + + + var queryStrOptions = getQueryStringOptions(); + + if (queryStrOptions.preseededCode) { + setCodeMirrorVal(queryStrOptions.preseededCode); + } + else { + // select a canned example on start-up: + // $("#aliasExampleLink").trigger('click'); + } + + if (queryStrOptions.raw_input !== undefined) { + window.stdinPane.value = queryStrOptions.raw_input; + } + + // ugh, ugly tristate due to the possibility of each being undefined + if (queryStrOptions.pyState !== undefined) { + $('#pythonVersionSelector').val(queryStrOptions.pyState); + } + if (queryStrOptions.cumulativeState !== undefined) { + $('#cumulativeModeSelector').val(queryStrOptions.cumulativeState); + } + if (queryStrOptions.heapPrimitives !== undefined) { + $('#heapPrimitivesSelector').val(queryStrOptions.heapPrimitives); + } + if (queryStrOptions.drawParentPointers !== undefined) { + $('#drawParentPointerSelector').val(queryStrOptions.drawParentPointers); + } + if (queryStrOptions.textRefs !== undefined) { + $('#textualMemoryLabelsSelector').val(queryStrOptions.textRefs); + } + if (queryStrOptions.showOnlyOutputs !== undefined) { + $('#showOnlyOutputsSelector').val(queryStrOptions.showOnlyOutputs); + } + + + appMode = $.bbq.getState('mode'); // assign this to the GLOBAL appMode + if ((appMode == "display") && queryStrOptions.preseededCode /* jump to display only with pre-seeded code */) { + preseededCurInstr = queryStrOptions.preseededCurInstr; // ugly global + $("#executeBtn").trigger('click'); + } + else { + if (appMode === undefined) { + // default mode is 'edit', don't trigger a "hashchange" event + appMode = 'edit'; + } + else { + // fail-soft by killing all passed-in hashes and triggering a "hashchange" + // event, which will then go to 'edit' mode + $.bbq.removeState(); + } + } + + + // log a generic AJAX error handler + $(document).ajaxError(function() { + alert("Server error (possibly due to memory/resource overload). " + + "Report a bug to philip@pgbovine.net\n\n" + + "(Click the 'Generate URL' button to include a unique URL in your email bug report.)"); + + $('#executeBtn').html("Visualize Execution"); + $('#executeBtn').attr('disabled', false); + }); + + + // redraw connector arrows on window resize + $(window).resize(function() { + if (appMode == 'display') { + myVisualizer.redrawConnectors(); + } + }); + + $('#genUrlBtn').bind('click', function() { + var myArgs = {code: pyInputCodeMirror.getValue(), + mode: appMode, + //cumulative: $('#cumulativeModeSelector').val(), + //heapPrimitives: $('#heapPrimitivesSelector').val(), + //drawParentPointers: $('#drawParentPointerSelector').val(), + //textReferences: $('#textualMemoryLabelsSelector').val(), + //showOnlyOutputs: $('#showOnlyOutputsSelector').val(), + //py: $('#pythonVersionSelector').val() + raw_input: getRawInput(), + }; + + if (appMode == 'display') { + myArgs.curInstr = myVisualizer.curInstr; + } + + var urlStr = $.param.fragment(window.location.href, myArgs, 2 /* clobber all */); + $('#urlOutput').val(urlStr); + }); + + + $('#genEmbedBtn').bind('click', function() { + assert(appMode == 'display'); + var myArgs = {code: pyInputCodeMirror.getValue(), + cumulative: $('#cumulativeModeSelector').val(), + heapPrimitives: $('#heapPrimitivesSelector').val(), + drawParentPointers: $('#drawParentPointerSelector').val(), + textReferences: $('#textualMemoryLabelsSelector').val(), + showOnlyOutputs: $('#showOnlyOutputsSelector').val(), + py: $('#pythonVersionSelector').val(), + curInstr: myVisualizer.curInstr, + codeDivWidth: myVisualizer.DEFAULT_EMBEDDED_CODE_DIV_WIDTH, + codeDivHeight: myVisualizer.DEFAULT_EMBEDDED_CODE_DIV_HEIGHT, + }; + + var embedUrlStr = $.param.fragment(domain + "iframe-embed.html", myArgs, 2 /* clobber all */); + var iframeStr = ''; + $('#embedCodeOutput').val(iframeStr); + }); +}); + diff --git a/embed/js/pytutor.js b/embed/js/pytutor.js new file mode 100644 index 0000000..167906f --- /dev/null +++ b/embed/js/pytutor.js @@ -0,0 +1,3510 @@ +/* + +Online Python Tutor +https://github.com/pgbovine/OnlinePythonTutor/ + +Copyright (C) 2010-2013 Philip J. Guo (philip@pgbovine.net) + +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. + +*/ + + +/* To import, put this at the top of your HTML page: + + + + + + + + + + + + + + + + +*/ + + +/* Coding gotchas: + +- NEVER use naked $(__) or d3.select(__) statements to select DOM elements. + + ALWAYS use myViz.domRoot or myViz.domRootD3 for jQuery and D3, respectively. + + Otherwise things will break in weird ways when you have more than one visualization + embedded within a webpage, due to multiple matches in the global namespace. + + +- always use generateID to generate unique CSS IDs, or else things will break + when multiple ExecutionVisualizer instances are displayed on a webpage + +*/ + + +var SVG_ARROW_POLYGON = '0,3 12,3 12,0 18,5 12,10 12,7 0,7'; +var SVG_ARROW_HEIGHT = 10; // must match height of SVG_ARROW_POLYGON + +var curVisualizerID = 1; // global to uniquely identify each ExecutionVisualizer instance + +// domRootID is the string ID of the root element where to render this instance +// dat is data returned by the Python Tutor backend consisting of two fields: +// code - string of executed code +// trace - a full execution trace +// +// params is an object containing optional parameters, such as: +// jumpToEnd - if non-null, jump to the very end of execution +// startingInstruction - the (zero-indexed) execution point to display upon rendering +// hideOutput - hide "Program output" display +// codeDivHeight - maximum height of #pyCodeOutputDiv (in integer pixels) +// codeDivWidth - maximum width of #pyCodeOutputDiv (in integer pixels) +// editCodeBaseURL - the base URL to visit when the user clicks 'Edit code' (if null, then 'Edit code' link hidden) +// allowEditAnnotations - allow user to edit per-step annotations (default: false) +// embeddedMode - shortcut for hideOutput=true, allowEditAnnotations=false, +// codeDivWidth=this.DEFAULT_EMBEDDED_CODE_DIV_WIDTH, +// codeDivHeight=this.DEFAULT_EMBEDDED_CODE_DIV_HEIGHT +// disableHeapNesting - if true, then render all heap objects at the top level (i.e., no nested objects) +// drawParentPointers - if true, then draw environment diagram parent pointers for all frames +// WARNING: there are hard-to-debug MEMORY LEAKS associated with activating this option +// textualMemoryLabels - render references using textual memory labels rather than as jsPlumb arrows. +// this is good for slow browsers or when used with disableHeapNesting +// to prevent "arrow overload" +// showOnlyOutputs - show only program outputs and NOT internal data structures +// updateOutputCallback - function to call (with 'this' as parameter) +// whenever this.updateOutput() is called +// (BEFORE rendering the output display) +// heightChangeCallback - function to call (with 'this' as parameter) +// whenever the HEIGHT of #dataViz changes +// verticalStack - if true, then stack code display ON TOP of visualization +// (else place side-by-side) +// executeCodeWithRawInputFunc - function to call when you want to re-execute the given program +// with some new user input (somewhat hacky!) +// highlightLines - highlight current and previously executed lines (default: false) +// arrowLines - draw arrows pointing to current and previously executed lines (default: true) +// compactFuncLabels - render functions with a 'func' prefix and no type label +// pyCrazyMode - run with Py2crazy, which provides expression-level +// granularity instead of line-level granularity (HIGHLY EXPERIMENTAL!) +function ExecutionVisualizer(domRootID, dat, params) { + serverReply = dat; + this.curInputCode = dat.code.rtrim(); // kill trailing spaces + this.curTrace = dat.trace; + + this.DEFAULT_EMBEDDED_CODE_DIV_WIDTH = 350; + this.DEFAULT_EMBEDDED_CODE_DIV_HEIGHT = 400; + + // optional filtering to remove redundancy ... + // ok, we're gonna filter out all trace entries of 'call' events, + // because each one contains IDENTICAL state information as the + // 'step_line' entry immediately following it. this filtering allows the + // visualization to not show as much redundancy. + + //this.curTrace = this.curTrace.filter(function(e) {return e.event != 'call';}); + + // if the final entry is raw_input or mouse_input, then trim it from the trace and + // set a flag to prompt for user input when execution advances to the + // end of the trace + if (this.curTrace.length > 0) { + var lastEntry = this.curTrace[this.curTrace.length - 1]; + if (lastEntry.event == 'raw_input') { + this.promptForUserInput = true; + this.userInputPromptStr = lastEntry.prompt; + this.curTrace.pop() // kill last entry so that it doesn't get displayed + } + else if (lastEntry.event == 'mouse_input') { + this.promptForMouseInput = true; + this.userInputPromptStr = lastEntry.prompt; + this.curTrace.pop() // kill last entry so that it doesn't get displayed + } + } + + this.hasStdout = ((this.curTrace.length > 0) + && this.curTrace[this.curTrace.length-1] + && this.curTrace[this.curTrace.length-1].stdout); + + if (this.hasStdout) { + this.stdoutLines = this.curTrace[this.curTrace.length-1].stdout.split("\n").length; + } + else + this.stdoutLines = -1; + + this.curInstr = 0; + + this.params = params; + if (!this.params) { + this.params = {}; // make it an empty object by default + } + + var arrowLinesDef = (this.params.arrowLines !== undefined); + var highlightLinesDef = (this.params.highlightLines !== undefined); + + if (!arrowLinesDef && !highlightLinesDef) { + // neither is set + this.params.highlightLines = false; + this.params.arrowLines = true; + } + else if (arrowLinesDef && highlightLinesDef) { + // both are set, so just use their set values + } + else if (arrowLinesDef) { + // only arrowLines set + this.params.highlightLines = !(this.params.arrowLines); + } + else { + // only highlightLines set + this.params.arrowLines = !(this.params.highlightLines); + } + + if (this.params.lang == undefined) + this.params.lang = "python"; + + this.compactFuncLabels = this.params.compactFuncLabels; + + // audible! + if (this.params.pyCrazyMode) { + this.params.arrowLines = this.params.highlightLines = false; + } + + // needs to be unique! + this.visualizerID = curVisualizerID; + curVisualizerID++; + + this.leftGutterSvgInitialized = false; + this.arrowOffsetY = undefined; + this.codeRowHeight = undefined; + + // avoid 'undefined' state + this.disableHeapNesting = (this.params.disableHeapNesting == true); + this.drawParentPointers = (this.params.drawParentPointers == true); + this.textualMemoryLabels = (this.params.textualMemoryLabels == true); + this.showOnlyOutputs = (this.params.showOnlyOutputs == true); + + this.executeCodeWithRawInputFunc = this.params.executeCodeWithRawInputFunc; + + // cool, we can create a separate jsPlumb instance for each visualization: + this.jsPlumbInstance = jsPlumb.getInstance({ + Endpoint: ["Dot", {radius:3}], + EndpointStyles: [{fillStyle: connectorBaseColor}, {fillstyle: null} /* make right endpoint invisible */], + Anchors: ["RightMiddle", "LeftMiddle"], + PaintStyle: {lineWidth:1, strokeStyle: connectorBaseColor}, + + // bezier curve style: + //Connector: [ "Bezier", { curviness:15 }], /* too much 'curviness' causes lines to run together */ + //Overlays: [[ "Arrow", { length: 14, width:10, foldback:0.55, location:0.35 }]], + + // state machine curve style: + Connector: [ "StateMachine" ], + Overlays: [[ "Arrow", { length: 10, width:7, foldback:0.55, location:1 }]], + EndpointHoverStyles: [{fillStyle: connectorHighlightColor}, {fillstyle: null} /* make right endpoint invisible */], + HoverPaintStyle: {lineWidth: 1, strokeStyle: connectorHighlightColor}, + }); + + + // true iff trace ended prematurely since maximum instruction limit has + // been reached + var instrLimitReached = false; + + + // the root elements for jQuery and D3 selections, respectively. + // ALWAYS use these and never use naked $(__) or d3.select(__) + this.domRoot = $('#' + domRootID); + this.domRoot.data("vis",this); // bnm store a reference to this as div data for use later. + this.domRootD3 = d3.select('#' + domRootID); + + // stick a new div.ExecutionVisualizer within domRoot and make that + // the new domRoot: + this.domRoot.html('

'); + + this.domRoot = this.domRoot.find('div.ExecutionVisualizer'); + this.domRootD3 = this.domRootD3.select('div.ExecutionVisualizer'); + + + // initialize in renderPyCodeOutput() + this.codeOutputLines = null; + this.breakpoints = null; // set of execution points to set as breakpoints + this.sortedBreakpointsList = null; // sorted and synced with breakpointLines + this.hoverBreakpoints = null; // set of breakpoints because we're HOVERING over a given line + + this.enableTransitions = false; // EXPERIMENTAL - enable transition effects + + + this.hasRendered = false; + + this.render(); // go for it! + +} + + +// create a unique ID, which is often necessary so that jsPlumb doesn't get confused +// due to multiple ExecutionVisualizer instances being displayed simultaneously +ExecutionVisualizer.prototype.generateID = function(original_id) { + // (it's safer to start names with a letter rather than a number) + return 'v' + this.visualizerID + '__' + original_id; +} + + +ExecutionVisualizer.prototype.render = function() { + if (this.hasRendered) { + alert('ERROR: You should only call render() ONCE on an ExecutionVisualizer object.'); + return; + } + + + var myViz = this; // to prevent confusion of 'this' inside of nested functions + + var codeDisplayHTML = + '

\ +

Edit code

\ +

\ + \ + \ + Step ? of ?\ + \ + \ +

\ +

\ + \ +

\ +

'; + + var outputRows = Math.min(10, myViz.stdoutLines); + + var outputsHTML = + '

\ +

\ + Program output:
\ + \ +

'; + + var codeVizHTML = + '

\ +