<!DOCTYPE html> <html> <head> <title></title> %(scripts)s <script src="skulpt-stdlib.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js" crossorigin="anonymous"></script> </head> <body> <h1>In Browser Testing Page</h1> <p>Open the Javascript Console and click the run button.</p> <p>Remember that you can add a debugger statement to your Python below or in the Skulpt Javascript.</p> <script type="text/javascript"> function outf(text) { var mypre = document.getElementById(Sk.pre); mypre.innerHTML = mypre.innerHTML + text; } function showjs(text) { var mypre = document.getElementById("runbrowser_jsout"); mypre.innerHTML = mypre.innerHTML + text; } function builtinRead(x) { //console.log(x); if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) { throw "File not found: '" + x + "'"; } var file = Sk.builtinFiles["files"][x]; if (!file) { return new Promise(function (accept, reject) { function reqListener () { console.log(this); console.log(arguments) accept(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", "%(root)s" + file); oReq.send(); }); } return file; } function runit(myDiv) { var prog = document.getElementById(myDiv+"_code").value; var mypre = document.getElementById(myDiv+"_pre"); Sk.inputfun = function(prompt) { return new Promise(function (resolve) { resolve(window.prompt(prompt)); }); }; //Sk.outputfun = alert; mypre.innerHTML = ''; Sk.console = { 'container': '#'+myDiv+"_canvas", 'width': 400, 'height': 300, 'pngMode': true, 'printHtml': function (a,b) {} } Sk.canvas = myDiv+"_canvas"; $("#"+Sk.canvas).empty() var can = document.getElementById(Sk.canvas); can.style.display = 'block'; if (can) { can.width = can.width; if (Sk.tg) { Sk.tg.canvasInit = false; Sk.tg.turtleList = []; } } Sk.pre = myDiv+"_pre"; Sk.configure({ output:outf, read: builtinRead, inputfunTakesPrompt: true, debugout: showjs, debugging: %(debug_mode)s }); var myPromise = Sk.misceval.asyncToPromise(function() { return Sk.importMainWithBody("<stdin>",true,prog,true); }); myPromise.then(function(mod) {}, function(err) { console.error(err.toString()); console.error(err.nativeError.stack); }); } </script> <h3>Test Code</h3> <div id="runbrowser"> <form> <button onclick="runit('runbrowser')" type="button">Run</button><br> <textarea edit_id="eta_5" id="runbrowser_code" cols="72" rows="20" style="font-family: 'Lucida Console', Monaco, monospace;"> %(code)s </textarea> </form> <h3>Canvas</h3> <div id="runbrowser_canvas" height="500px" width="800px" style="border-style: solid; display: none"></div> <h3>Output</h3> <pre id="runbrowser_pre" style="background-color: #dddddd"></pre> <h3>Compiled To Javascript</h3> <pre id="runbrowser_jsout"></pre> </div> </body> </html>