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