#output {
width: 100%;
}
+ #error {
+ font-family: monospace;
+ color: red;
+ white-space: pre-wrap;
+ }
</style>
</head>
</div>
<div id="program" style="visibility: hidden">
- <h1>
- Magic School Bus Central Processor
+ <h1>Magic School Bus</h1>
</h1>
<form id="form">
- <textarea id="code" rows="10" width="100%">cr.move_to(10,10);
-cr.line_to(100, 100);
-cr.set_line_width(6);
-cr.stroke();</textarea>
+ <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%";
form.addEventListener('submit', event => {
event.preventDefault();
- console.log("Submitted form with code: " + code.value);
socket.emit('run', code.value);
});
students.textContent = count.toString();
});
+ socket.on('code', (code_string) => {
+ code.value = code_string;
+ });
+
socket.on('timer', (value) => {
timer_div.style.visibility = "visible";
timer.textContent = value.toString();
}
});
+ 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;
});