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