#output {
width: 100%;
}
+ #error {
+ font-family: monospace;
+ color: red;
+ white-space: pre-wrap;
+ }
</style>
</head>
<textarea id="code" rows="15" width="100%"></textarea>
<button type="submit">Run code</button>
</form>
+ <div id="error">
+ </div>
<img id="output"></img>
- </div>
+ </div>
<button id="jumpstart">
Jumpstart Magic School Bus
const welcome_message = document.getElementById("welcome-message");
const jumpstart = document.getElementById("jumpstart");
const output = document.getElementById("output");
+ const error = document.getElementById("error");
function fade_element(elt) {
elt.style.opacity = "100%";
}
});
+ socket.on('error', (error_message) => {
+ error.textContent = error_message;
+ });
+
socket.on('state', (state) => {
if (state === "program") {
welcome.style.visibility = "hidden";
});
socket.on('output', (filename) => {
+ error.textContent = "";
output.src = filename;
});