scripts now loading, more devel presentation work

This commit is contained in:
Neale Pickett 2018-10-10 00:05:58 +00:00
parent 72f1a7d47d
commit d8a26fa30e
3 changed files with 67 additions and 20 deletions

View File

@ -78,3 +78,12 @@ img {
.cat5, .cat13, .cat21 {background-color: #e31a1c; color: white;} .cat5, .cat13, .cat21 {background-color: #e31a1c; color: white;}
.cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;} .cat6, .cat14, .cat22 {background-color: #fdbf6f; color: black;}
.cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;} .cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}
#devel {
background-color: #c88;
color: black;
}
.kvpair {
border: solid black 2px;
}

47
theme/devel.js Normal file
View File

@ -0,0 +1,47 @@
// Devel server addons
// devel_addin drops a bunch of development extensions into element e.
// It will only modify stuff inside e.
function devel_addin(obj, e) {
let h = document.createElement("h2");
e.appendChild(h);
h.textContent = "Development Options";
let g = document.createElement("p");
e.appendChild(g);
g.innerText = "This section will not appear for participants."
let keys = Object.keys(obj);
keys.sort();
for (let key of keys) {
switch (key) {
case "body":
continue;
}
let d = document.createElement("div");
e.appendChild(d);
d.classList.add("kvpair");
let ktxt = document.createElement("span");
d.appendChild(ktxt);
ktxt.textContent = key;
let val = obj[key];
if (Array.isArray(val)) {
let vi = document.createElement("select");
d.appendChild(vi);
vi.multiple = true;
for (let a of val) {
let opt = document.createElement("option");
vi.appendChild(opt);
opt.innerText = a;
}
} else {
let vi = document.createElement("input");
d.appendChild(vi);
vi.value = val;
vi.disabled = true;
}
}
}

View File

@ -5,6 +5,7 @@
<link rel="stylesheet" href="basic.css"> <link rel="stylesheet" href="basic.css">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta charset="utf-8"> <meta charset="utf-8">
<script src="devel.js"></script>
<script> <script>
function init() { function init() {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
@ -19,26 +20,16 @@ function init() {
.then(function(resp) { .then(function(resp) {
return resp.json(); return resp.json();
}).then(function(obj) { }).then(function(obj) {
document.getElementById("puzzle").innerHTML = obj.body;
document.getElementById("authors").textContent = obj.authors.join(", "); document.getElementById("authors").textContent = obj.authors.join(", ");
if (obj.answers) { if (obj.answers) {
let oldans = document.querySelector("[name=answer]"); devel_addin(obj, document.getElementById("devel"));
let ans = document.createElement("select"); }
oldans.parentNode.replaceChild(ans, oldans); for (let script of obj.scripts) {
ans.multiple = true; let st = document.createElement("script");
for (let a of obj.answers) { document.head.appendChild(st);
let opt = document.createElement("option"); st.src = base + script;
ans.appendChild(opt);
opt.innerText = a;
}
document.getElementById("idtxt").innerText = "Summary/Hint:"
let id = document.querySelector("[name=id]");
id.disabled = true;
id.value = "❖ " + (obj.summary || obj.hint);
id.title = "This will be hidden to participants";
document.querySelector("[type=Submit]").disabled = true;
} }
for (let fn of obj.files) { for (let fn of obj.files) {
let li = document.createElement("li"); let li = document.createElement("li");
@ -48,7 +39,6 @@ function init() {
li.appendChild(a); li.appendChild(a);
document.getElementById("files").appendChild(li); document.getElementById("files").appendChild(li);
} }
document.getElementById("puzzle").innerHTML = obj.body;
}).catch(function(err) { }).catch(function(err) {
console.log("Error", err); console.log("Error", err);
}); });
@ -98,10 +88,11 @@ document.addEventListener("DOMContentLoaded", init);
<form action="answer" method="post"> <form action="answer" method="post">
<input type="hidden" name="cat"> <input type="hidden" name="cat">
<input type="hidden" name="points"> <input type="hidden" name="points">
<span id="idtxt">Team ID:</span> <input type="text" name="id"> <br> Team ID: <input type="text" name="id"> <br>
Answer: <input type="text" name="answer"> <br> Answer: <input type="text" name="answer" id="answer"> <br>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </form>
<div id="devel"></div>
<nav> <nav>
<ul> <ul>
<li><a href="puzzle-list.html">Puzzles</a></li> <li><a href="puzzle-list.html">Puzzles</a></li>