Im trying to write a Python code editor in browser using Skulpt to execute the Python code and Code Mirror as a text editor.
As the input function for Skulpt uses an alert for input, I have decided to write my own function. The input function I have written works and takes an input from a modal.
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true}); Any errors in the code are usually sent to the output pre:
For normal errors with no input I get this (which is what I want to happen):
However, when I use an input in my code no error message is output:
The errors will no longer be displayed and I receive the following error:
Does anyone have any idea how I could resolve this issue or point me in the right direction?
I've put both my skulpt.js and index.html file below if this helps.
SkulptTest.js
// output functions are configurable. This one just appends some text
// to a pre element.
function outf(text) {
var mypre = document.getElementById("output");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() {
var prog = editor.getValue(); ;
var mypre = document.getElementById("output");
mypre.innerHTML = '';
Sk.pre = "output";
Sk.configure({output:outf, read:builtinRead, __future__: Sk.python3, inputfun: function (prompt) {
clearModal();
addModalQuestion(prompt);
toggleModal();
// the function returns a promise to give a result back later...
return new Promise(function(resolve,reject){
$("#modal-submit").on("click",function(e){
// resolve the promise with the value of the input field
resolve($("#modal-input").val());
})
})
}, inputfunTakesPrompt: true});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
try {
if (result = Sk.importMainWithBody("<stdin>", false, prog, true)) {
return result;
}
}
catch(e) {
outf(e.toString());
}
});
;
}index.html
<!DOCTYPE html>
<html>
<head>
<!--JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<!--Skulpt-->
<script src="skulpt/skulpt.min.js" type="text/javascript"></script>
<script src="skulpt/skulpt-stdlib.js" type="text/javascript"></script>
<!--Code Mirror-->
<script src="codemirror/lib/codemirror.js"></script>
<link href="codemirror/lib/codemirror.css" rel="stylesheet">
<script src="codemirror/mode/python/python.js"></script>
<link href="codemirror/theme/midnight.css" rel="stylesheet">
<!--My Styles-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Input</title>
<meta name="description" content="How do we input data in Python 3?">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style>
#editor-container {
width: 100vw;
height: 47vh;
}
#run-container {
width: 100vw;
height: 5vh;
background-color: #0a121f;
}
#run-container button {
float: right;
height: 5vh;
width: 15%;
background-color: yellow;
border: none;
border-radius: 5px;
}
#output-container {
width: calc(100vw - 10px);
height: calc(45vh - 10px);
background-color: aliceblue;
float: right;
background-color: #000;
color: #fff;
padding-left: 10px;
padding-top: 10px;
}
#output {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
<!--Modal-->
<link href="css/modal.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Skulp-->
<script src="skulptTest.js"></script>
<!--My Code-->
<div id="right-panel">
<div id="editor-container">
<div class="modal" id="modal">
<div class="modal-content">
<span class="close-button"></span>
<p id="modal-question" class="modal-question">Input Prompt</p>
<input type="text" id="modal-input" name="modal-input" class="modal-input">
<button id="modal-submit" class="modal-submit" onclick="toggleModal()">Submit</button>
</div>
</div>
<textarea id="editor"></textarea>
</div>
<div id="run-container">
<button type="button" onclick="runit()">Run</button>
</div>
</div>
<div id="output-container">
<pre id="output"></pre>
</div>
<!-- Code Mirror-->
<script src="js/code-mirror.js"></script>
<script>editor.setValue("name = input('What is your name?')\nprint(name)");</script>
</body>
</html>
<script src="js/modal.js"></script>I've also attached a link to all of the files below.
If anyone could help me with this I'd really appreciate it
Thanks in advance,
Sean