scripts now loading, more devel presentation work

theme/basic.css

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

theme/devel.js

@@ -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;
+    }
+  }
+}

theme/puzzle.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="basic.css">
     <meta name="viewport" content="width=device-width">
     <meta charset="utf-8">
+    <script src="devel.js"></script>
     <script>
 function init() {
   let params = new URLSearchParams(window.location.search);
@@ -19,26 +20,16 @@ function init() {
   .then(function(resp) {
     return resp.json();
   }).then(function(obj) {
+    document.getElementById("puzzle").innerHTML = obj.body;
     document.getElementById("authors").textContent = obj.authors.join(", ");
     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);
-      ans.multiple = true;
-      for (let a of obj.answers) {
-        let opt = document.createElement("option");
-        ans.appendChild(opt);
-        opt.innerText = a;
     }
+    for (let script of obj.scripts) {
+      let st = document.createElement("script");
+      document.head.appendChild(st);
+      st.src = base + script;
       
-      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) {
       let li = document.createElement("li");
@@ -48,7 +39,6 @@ function init() {
       li.appendChild(a);
       document.getElementById("files").appendChild(li);
     }
-    document.getElementById("puzzle").innerHTML = obj.body;
   }).catch(function(err) {
     console.log("Error", err);
   });
@@ -98,10 +88,11 @@ document.addEventListener("DOMContentLoaded", init);
     <form action="answer" method="post">
       <input type="hidden" name="cat">
       <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">
     </form>
+    <div id="devel"></div>
     <nav>
       <ul>
         <li><a href="puzzle-list.html">Puzzles</a></li>