onload = function _onload() { var cwrap = document.getElementById('canvas-wrapper'), child = cwrap.children[0]; onresize = _onresize; function _onresize() { if (!child.children.length) return setTimeout(_onresize,150); var d = (child.children[0].clientWidth-cwrap.clientWidth)/2; if (d<0) cwrap.style.paddingLeft = -d+'px'; else cwrap.style.paddingLeft = '', cwrap.scrollLeft = d; console.log(child.children[0].clientWidth,cwrap.clientWidth,d); } loadMultiSk(main,null,false); function main(Sk) { console.log('main start'); var i= 0; sk0 = Sk[0].init('#mycanvas1','#output'), sk1 = Sk[1].init('#mycanvas2','#output'); setTimeout(_onresize,150); setTimeout(run,300); function wait() { if (sk0.done && sk1.done) { console.log('run #'+i+' done'); if (i<3) ++i, setTimeout(run,3000); } else setTimeout(wait,300); } function run() { console.log('run #'+i+' start'); sk0.stdoutClear(); sk0.done = false; sk0.run(document.getElementById('code1').value).then( function() { console.log('p1 done'); sk0.done = true; } ); sk1.done = false; sk1.run(document.getElementById('code2').value).then( function() { console.log('p2 done'); sk1.done = true; } ); setTimeout(wait,300); } } }; // requirements: // mostly ES5 compatible (except Skulpt specific requirements) // as Skulpt seems works only with Promise, this is the only exception // however, if somebody tell me how to run skulpt without Promise, // I could adapt my code to run without Promise too ;) // known bugs: // none... but I probably have missing some ;P // I would try to fix those wich anybody could find: feel free to // report them in code comments (with link to your playground code // and / or useful description to let me able to investigate) // loadMultiSk(onload,[onerror,debug]) // debug: boolean log debug infos (optional, default to true) // onerror callback (optional, default debug ? log error : throw error) // onload: callback function (required) // callback function signature: function(SkContext object list) // SkContext interface // SkContext.init(turtle,stdout) // args: html element or query selector string (optional) // turtle default div element not in dom tree (avoid Skulpt error) // stdout default console.log // SkContext.stdoutClear() // clear stdout (if stdout not console.log default) // SkContext.run(pySource) // execute pySource (string) // return Promise var loadMultiSk = (function loadMultiSk_factory() { var ifrm, Sk = [], sk_timeout = 3000, sk_wait_delay = 0, dbg = true, sk_basesrc = 'https://cdn.rawgit.com/skulpt/skulpt-dist/0.11.0/', sk_js = 'skulpt.min.js', sk_stdlib = 'skulpt-stdlib.js', re = /###(.+?)###/g, rp = function rp(s,k) { switch (k) { case 'TITLE': return 'IFRAME #'+this; case 'BODY': return '

iframe #'+this+'

'; default: return s; } }, doc = document, sk_srcdoc = '\n\ \n\ \n\ ###TITLE###\n\

Skulpt multi-instances Template +