From b6c294c5bd036475cf089ef069414789bf90b5a0 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Tue, 4 Aug 2026 11:11:50 -0400
Subject: [PATCH] Basic data laid out and UIs faked.

---
 TODO.txt                  |  3 --
 pages/index.html          |  4 +--
 views/survey/index.html   | 70 +++++++++++++++++++++++++++----------
 views/survey/results.html | 71 +++++++++++++++++++++++++++----------
 views/survey/submit.html  | 73 +++++++++++++++++++++++++++++----------
 5 files changed, 162 insertions(+), 59 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index cc8f8c4..e69de29 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,3 +0,0 @@
-* The qmgr needs to actually manage the queue, currently it's just a little testing tool.
-* Probably also need an email testing tool that can send sample emails off the cli.
-* Try to remove code.js and either bring the functionality to jzed.js or not use it.
diff --git a/pages/index.html b/pages/index.html
index 97dd669..dcf8fc2 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -14,7 +14,7 @@
   </middle>
   <bottom>
     <button-group>
-      <button type="button"><a href="/survey/">Take Survey</a></button>
+      <a href="/survey/"><button type="button">Take Survey</button></a>
     </button-group>
   </bottom>
 </card>
@@ -33,7 +33,7 @@
 
   <bottom>
     <button-group>
-      <button type="button"><a href="/survey/results">View Results</a></button>
+      <a href="/survey/results"><button type="button">View Results</button></a>
     </button-group>
   </bottom>
 </card>
diff --git a/views/survey/index.html b/views/survey/index.html
index fa3fa24..bfcb813 100644
--- a/views/survey/index.html
+++ b/views/survey/index.html
@@ -1,30 +1,64 @@
-<h1>Sample Survey</h1>
+<script>
+  const Survey = {
+    "Title": "Sample Survey",
+    "Description": "The description.",
+    "Questions": [
+      {
+        "Id": 1,
+        "Question": "Do you like HTML?"
+      },
+      {
+        "Id": 2,
+        "Question": "Do you like CSS?"
+      },
+      {
+        "Id": 3,
+        "Question": "Do you like JavaScript?"
+      },
+      {
+        "Id": 4,
+        "Question": "Are you a programmer?"
+      },
+    ]
+  };
 
-<p>Solarpunk moka pot ceramics jean shorts. Cold-pressed fashion axe normcore four tet bandcamp ascot dad shoes bitters try-hard. Brooklyn slugging marxism XOXO gorpcore granny square humblebrag live-edge, fitzcarraldo mercury retrograde sound bath kickstarter van life freegan. Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</p>
+  $boot(async () => {
+    const items = Survey.Questions;
+    const list = $id('question-list');
+    const tmpl = $id('question-row');
 
-<form>
-  <grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;">
-    <label for="q1">Question 1: Do you like HTML?</label>
-    <input id="q1" type="checkbox" />
+    for(let i in items) {
+      $append(list, $render(tmpl, {i, item: items[i]}));
+    }
+  });
 
-    <label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label>
-    <input id="q2" type="checkbox" />
+  const resetForm = () => {
+    $id('survey-form').reset();
+  }
+</script>
 
-    <label for="q3">Question 1: Do you like HTML?</label>
-    <input id="q3" type="checkbox" />
+<style>
+#question-list {
+    font-size: 1.1em;
+    grid-template-columns: 1fr 60px;
+    gap: 10px;
+}
+</style>
 
-    <label for="q4">Question 1: Do you like HTML?</label>
-    <input id="q4" type="checkbox" />
+<h1>Sample Survey</h1>
 
-    <label for="q5">Question 1: Do you like HTML?</label>
-    <input id="q5" type="checkbox" />
+<p>Solarpunk moka pot ceramics jean shorts. Cold-pressed fashion axe normcore four tet bandcamp ascot dad shoes bitters try-hard. Brooklyn slugging marxism XOXO gorpcore granny square humblebrag live-edge, fitzcarraldo mercury retrograde sound bath kickstarter van life freegan. Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</p>
 
-    <label for="q6">Question 1: Do you like HTML?</label>
-    <input id="q6" type="checkbox" />
+<form id="survey-form" action="/survey/submit">
+  <grid id="question-list">
+    <template id="question-row">
+      <label for="question-${item.Id}">${item.Question}</label>
+      <input id="question-${item.Id}" type="checkbox" />
+    </template>
   </grid>
 
   <button-group>
-    <button type="button">Reset</button>
-    <button type="button"><a href="/survey/submit">Submit</a></button>
+    <button type="button" onClick="resetForm()">Reset</button>
+    <button type="submit">Submit</button>
   </button-group>
 </form>
diff --git a/views/survey/results.html b/views/survey/results.html
index 38ed0d6..6220982 100644
--- a/views/survey/results.html
+++ b/views/survey/results.html
@@ -1,3 +1,51 @@
+<script>
+  const Survey = {
+    "Title": "Sample Survey",
+    "Description": "The description.",
+    "Questions": [
+      {
+        "Id": 1,
+        "Question": "Do you like HTML?",
+        "Result": 20
+      },
+      {
+        "Id": 2,
+        "Question": "Do you like CSS?",
+        "Result": 33
+      },
+      {
+        "Id": 3,
+        "Question": "Do you like JavaScript?",
+        "Result": 48
+      },
+      {
+        "Id": 4,
+        "Question": "Are you a programmer?",
+        "Result": 2
+      },
+    ]
+  };
+
+  $boot(async () => {
+    const items = Survey.Questions;
+    const list = $id('question-list');
+    const tmpl = $id('question-row');
+
+    for(let i in items) {
+      $append(list, $render(tmpl, {i, item: items[i]}));
+    }
+  });
+</script>
+
+<style>
+#question-list {
+    font-size: 1.1em;
+    grid-template-columns: 1fr 60px;
+    gap: 10px;
+}
+</style>
+
+
 <h1>Results of Survey "Sample Finished Survey"</h1>
 
 <block>
@@ -10,24 +58,11 @@
 
 <h2>Questions</h2>
 
-<grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;">
-  <label for="q1">Question 1: Do you like HTML?</label>
-  <span>50%</span>
-
-  <label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label>
-  <span>50%</span>
-
-  <label for="q3">Question 1: Do you like HTML?</label>
-  <span>50%</span>
-
-  <label for="q4">Question 1: Do you like HTML?</label>
-  <span>50%</span>
-
-  <label for="q5">Question 1: Do you like HTML?</label>
-  <span>50%</span>
-
-  <label for="q6">Question 1: Do you like HTML?</label>
-  <span>50%</span>
+<grid id="question-list">
+  <template id="question-row">
+    <label for="${item.Id}">${item.Question}</label>
+    <span>${item.Result}%</span>
+  </template>
 </grid>
 
 <a href="/">View More Surveys</a>
diff --git a/views/survey/submit.html b/views/survey/submit.html
index 48e5ebe..80817ca 100644
--- a/views/survey/submit.html
+++ b/views/survey/submit.html
@@ -1,28 +1,65 @@
-<h1>Verify Your Answers</h1>
-
-<p>Please verify your answers are what you would like to say on this survey.</p>
+<script>
+  const Survey = {
+    "Title": "Sample Survey",
+    "Description": "The description.",
+    "Questions": [
+      {
+        "Id": 1,
+        "Question": "Do you like HTML?",
+        "Answer": true,
+      },
+      {
+        "Id": 2,
+        "Question": "Do you like CSS?",
+        "Answer": true
+      },
+      {
+        "Id": 3,
+        "Question": "Do you like JavaScript?",
+        "Answer": true
+      },
+      {
+        "Id": 4,
+        "Question": "Are you a programmer?",
+        "Answer": true
+      },
+    ]
+  };
 
-<grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;">
-  <label for="q1">Question 1: Do you like HTML?</label>
-  <span>YES</span>
+  $boot(async () => {
+    const items = Survey.Questions;
+    const list = $id('question-list');
+    const tmpl = $id('question-row');
 
-  <label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label>
-  <span>YES</span>
+    for(let i in items) {
+      const question = items[i];
+      question.Result = question.Answer ? "YES" : "NO";
+      $append(list, $render(tmpl, {i, item: question}));
+    }
+  });
+</script>
 
-  <label for="q3">Question 1: Do you like HTML?</label>
-  <span>YES</span>
+<style>
+#question-list {
+    font-size: 1.1em;
+    grid-template-columns: 1fr 60px;
+    gap: 10px;
+}
+</style>
 
-  <label for="q4">Question 1: Do you like HTML?</label>
-  <span>NO</span>
+<h1>Verify Your Answers</h1>
 
-  <label for="q5">Question 1: Do you like HTML?</label>
-  <span>YES</span>
+<p>Please verify your answers are what you would like to say on this survey.</p>
 
-  <label for="q6">Question 1: Do you like HTML?</label>
-  <span>YES</span>
+<grid id="question-list">
+  <template id="question-row">
+    <label for="${item.Id}">${item.Question}</label>
+    <span>${item.Result}</span>
+  </template>
 </grid>
 
 <button-group>
-  <button type="button"><a href="/survey/">Change My Answers</a></button>
-  <button type="button"><a href="/survey/finalize">Submit My Answers</a></button>
+  <a href="/survey/"><button type="button">Change My Answers</button></a>
+  <a href="/survey/finalize"><button type="button">Submit My Answers</button></a>
 </button-group>
+