132 lines
3.9 KiB
HTML
132 lines
3.9 KiB
HTML
<html>
|
|
<head>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
|
|
<script src="http://skulpt.org/js/skulpt.min.js" type="text/javascript"></script>
|
|
<script src="http://skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script>
|
|
<style>
|
|
/* Simple styling for better separation of input/output */
|
|
#input-container {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
#skulpt-input {
|
|
width: 80%;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script type="text/javascript">
|
|
// 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];
|
|
}
|
|
|
|
// --- Custom Inline Input Function ---
|
|
var inputCallback;
|
|
|
|
function inputf(prompt) {
|
|
// Display the prompt text to the user
|
|
document.getElementById("input-prompt").textContent = prompt;
|
|
|
|
// Show the input container
|
|
document.getElementById("input-container").style.display = 'block';
|
|
|
|
// Set focus on the input field
|
|
var inputField = document.getElementById("skulpt-input");
|
|
inputField.value = ''; // Clear previous input
|
|
inputField.focus();
|
|
|
|
// Return a promise that Skulpt will wait for
|
|
return new Promise(function(resolve, reject) {
|
|
inputCallback = resolve;
|
|
});
|
|
}
|
|
|
|
// Function to handle the submission of inline input
|
|
function submitInput() {
|
|
var inputField = document.getElementById("skulpt-input");
|
|
var inputValue = inputField.value;
|
|
|
|
// Hide the input container again
|
|
document.getElementById("input-container").style.display = 'none';
|
|
|
|
// Fulfill the promise with the user's input value
|
|
if (inputCallback) {
|
|
inputCallback(inputValue);
|
|
inputCallback = null; // Clear the callback
|
|
}
|
|
}
|
|
// ------------------------------------
|
|
|
|
// Here's everything you need to run a python program in skulpt
|
|
function runit() {
|
|
var prog = document.getElementById("yourcode").value;
|
|
var mypre = document.getElementById("output");
|
|
mypre.innerHTML = '';
|
|
|
|
// Hide the input container when a new run starts
|
|
document.getElementById("input-container").style.display = 'none';
|
|
|
|
Sk.pre = "output";
|
|
// Configure the custom input function: inputf
|
|
Sk.configure({output:outf, read:builtinRead, input:inputf});
|
|
|
|
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
|
|
var myPromise = Sk.misceval.asyncToPromise(function() {
|
|
return Sk.importMainWithBody("<stdin>", false, prog, true);
|
|
});
|
|
myPromise.then(function(mod) {
|
|
console.log('success');
|
|
},
|
|
function(err) {
|
|
// Display errors in the output area
|
|
outf(err.toString() + '\n');
|
|
console.log(err.toString());
|
|
});
|
|
}
|
|
|
|
// Allow pressing 'Enter' in the input field to submit
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('skulpt-input').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault(); // Prevent default form submission
|
|
submitInput();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<h3>Try This</h3>
|
|
<form>
|
|
<textarea id="yourcode" cols="40" rows="10">
|
|
name = raw_input("What is your name? ")
|
|
print "Hello, " + name + "!"
|
|
print "This is a demonstration of inline input."
|
|
</textarea><br />
|
|
<button type="button" onclick="runit()">Run</button>
|
|
</form>
|
|
|
|
<pre id="output" ></pre>
|
|
|
|
<div id="input-container" style="display:none;">
|
|
<label id="input-prompt"></label>
|
|
<input type="text" id="skulpt-input" />
|
|
<button type="button" onclick="submitInput()">Submit Input</button>
|
|
</div>
|
|
<div id="mycanvas"></div>
|
|
|
|
</body>
|
|
|
|
</html> |