diff --git a/public/root.html b/public/root.html
index bd44566..c3ffcce 100644
--- a/public/root.html
+++ b/public/root.html
@@ -10,8 +10,8 @@
             split("").
             reverse().
             join("")
-      ).toString(36);
-      console.log("session", session);
+      ).toString(36)
+      console.log("session", session)
     </script>
   </header>
   <body>
@@ -20,6 +20,7 @@
       <input type="text" name="idq" readonly=true value="" style="display: none;">
       <div name="question"></div>
       <div name="clues"></div>
+      <div name="solution"></div>
       <input type="button" value="clue">
       <input type="text" name="answer">
       <input type="submit" value="submit">
@@ -28,36 +29,45 @@
   </body>
   <footer>
     <script>
-      let knowledgebase = {{ASSIGNMENTS_JSON}};
+      let knowledgebase = {{ASSIGNMENTS_JSON}}
       knowledgebase = Object.
          keys(knowledgebase).
          map((key) => [
             [key, knowledgebase[key]]
-         ]);
+         ])
 
       function nextQuestion(form) {
-         form.children.answer.value = "";
-         let todo = knowledgebase.pop();
+         form.children.answer.value = ""
+         let todo = knowledgebase.pop()
          if (!todo) {
-            todo = [0];
+            todo = [0]
          }
-         todo = todo[0];
+         todo = todo[0]
          if (! todo) {
-            todo = ["", {Q: "ALL DONE"}];
+            todo = ["", {Q: "ALL DONE"}]
          }
 
-         form.children.idq.value = todo[0];
+         form.children.idq.value = todo[0]
+
+         form.children.question.innerHTML = `<h3>${todo[1].Q}</h3>`
 
-         console.log(todo[1]);
-         form.children.question.innerHTML = `<h3>${todo[1].Q}</h3>`;
          let clues = ""
-         for (var i of todo[1].Clues) {
-            clues += `<br>${i}`
+         for (var i in todo[1].Clues) {
+            clues += `<details><summary>clue #${i}</summary>${todo[1].Clues[i]}</details>`
          }
-         form.children.clues.innerHTML = clues;
+         form.children.clues.innerHTML = clues
+
+         let solution = ""
+         for (var i in todo[1].Solution) {
+            solution += `<br>${todo[1].Solution[i]}`
+         }
+         if (solution) {
+            solution = `<details><summary>solution</summary>${solution}</details>`
+         }
+         form.children.solution.innerHTML = solution
       }
 
-      nextQuestion(document.getElementById("flash"));
+      nextQuestion(document.getElementById("flash"))
     </script>
   </footer>
 </html>
diff --git a/testdata/sample.yaml b/testdata/sample.yaml
index f246727..7dd5cce 100644
--- a/testdata/sample.yaml
+++ b/testdata/sample.yaml
@@ -1,27 +1,40 @@
 knowledge:
   questions:
-    uuid1:
+    uuid10:
       q: whats a fieldset
       clues:
       - clue1 of 2
       - clue2 of 2
+      solution:
+      - solution A
+      - solution B
+      tags:
+      - ops
+      - data-platform
+    uuid11:
+      q: whats a responseset
+      clues:
+      - clue1 of 2
+      - clue2 of 2
+      solution:
+      - solution A
+      - solution B
       tags:
       - ops
       - data-platform
   answers:
-    uuid2:
-      q: uuid1
+    uuid20:
+      q: uuid10
       a: a schema
       ts: 123
       author: breel
-    uuid0:
-      q: uuid1
+    uuid21:
+      q: uuid10
       a: not a schema
       ts: 122
       author: breel
 users:
   breel:
-    history:
-      uuid1:
-      - {a: uuid0, pass: true}
-      - {a: uuid2, pass: true}
+    tags: {assignments: [ops]}
+    cadence: 5s
+    resolution: 1
