From 18538122a7eed070fb9754a53761f707abd930f0 Mon Sep 17 00:00:00 2001
From: Jackson Hoffart <jackson.hoffart@gmail.com>
Date: Fri, 24 Jul 2026 16:58:38 +0200
Subject: [PATCH] feat: add index.html with test questions

---
 index.html | 720 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 720 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7d9c51b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,720 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CCDF Form</title>
+<style>
+  :root {
+    --bg: #f7f7f5;
+    --panel: #fff;
+    --ink: #1a1a1a;
+    --muted: #6b6b6b;
+    --line: #e2e2df;
+    --accent: #1f6feb;
+    --accent-ink: #fff;
+    --error: #b00020;
+    --error-bg: #fdecef;
+    --ok: #1a7f37;
+    --code-bg: #0b1020;
+    --code-ink: #e6edf3;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg);
+    color: var(--ink);
+  }
+  header {
+    background: var(--panel);
+    border-bottom: 1px solid var(--line);
+    padding: 20px 24px;
+    position: sticky; top: 0; z-index: 10;
+  }
+  header h1 { margin: 0 0 4px 0; font-size: 18px; }
+  header p { margin: 0; color: var(--muted); font-size: 13px; }
+  .controls {
+    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
+    margin-top: 12px;
+  }
+  .controls label { font-size: 13px; color: var(--muted); margin-right: 6px; }
+  .controls select, .controls button, .controls input[type=file] {
+    font: inherit;
+    padding: 6px 10px;
+    border: 1px solid var(--line);
+    background: #fff;
+    border-radius: 6px;
+    color: var(--ink);
+  }
+  .controls button.primary {
+    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
+    cursor: pointer;
+  }
+  .controls button { cursor: pointer; }
+  .controls button:hover { background: #f0f0ee; }
+  .controls button.primary:hover { background: #185ac2; }
+
+  main {
+    max-width: 900px; margin: 0 auto; padding: 24px;
+  }
+  .status {
+    padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
+    font-size: 14px;
+  }
+  .status.info { background: #eef4ff; color: #1a56b8; border: 1px solid #cbdcfb; }
+  .status.error { background: var(--error-bg); color: var(--error); border: 1px solid #f4c7cf; }
+  .status.ok { background: #eaf6ec; color: var(--ok); border: 1px solid #c9e8ce; }
+
+  .step {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 20px 22px;
+    margin-bottom: 18px;
+  }
+  .step > h2 {
+    margin: 0 0 4px 0; font-size: 17px;
+  }
+  .step > .step-hint { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
+  .section {
+    padding: 14px 0;
+    border-top: 1px dashed var(--line);
+  }
+  .section:first-of-type { border-top: none; padding-top: 4px; }
+  .section > h3 {
+    margin: 0 0 10px 0; font-size: 14px; color: var(--muted);
+    text-transform: uppercase; letter-spacing: 0.04em;
+  }
+  .field {
+    margin-bottom: 16px;
+  }
+  .field > label.field-label {
+    display: block;
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 4px;
+  }
+  .field .type-tag {
+    display: inline-block;
+    font-size: 10px; font-weight: 500;
+    padding: 2px 6px; margin-left: 6px;
+    background: #ecebe8; color: var(--muted);
+    border-radius: 999px;
+    vertical-align: middle;
+    text-transform: uppercase; letter-spacing: 0.03em;
+  }
+  .field .type-tag.null { background: #ffe9d6; color: #8a4b00; }
+  .field .desc {
+    font-size: 12px; color: var(--muted); margin-bottom: 6px;
+  }
+  .field input[type=text],
+  .field input[type=number],
+  .field input[type=url],
+  .field select,
+  .field textarea {
+    width: 100%;
+    font: inherit;
+    padding: 8px 10px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: #fff;
+  }
+  .field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
+  .field textarea.code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 100px; }
+  .field .checkbox-row {
+    display: flex; align-items: flex-start; gap: 8px;
+    padding: 6px 0;
+  }
+  .field .checkbox-row input { margin-top: 3px; }
+  .field .options-group {
+    display: flex; flex-direction: column; gap: 4px;
+    padding: 4px 0;
+  }
+  .field .options-group label {
+    display: flex; align-items: center; gap: 8px;
+    font-weight: normal; font-size: 14px;
+    padding: 2px 0;
+  }
+  .field .array-list { display: flex; flex-direction: column; gap: 6px; }
+  .field .array-row { display: flex; gap: 6px; }
+  .field .array-row input { flex: 1; }
+  .field button.mini {
+    font: inherit; font-size: 12px;
+    padding: 4px 10px;
+    border: 1px solid var(--line);
+    background: #fff; border-radius: 6px;
+    cursor: pointer;
+  }
+  .field button.mini:hover { background: #f0f0ee; }
+  .field .table-wrap { overflow-x: auto; margin-bottom: 6px; }
+  .field table {
+    border-collapse: collapse; width: 100%;
+    font-size: 13px;
+  }
+  .field table th, .field table td {
+    border: 1px solid var(--line);
+    padding: 4px;
+    vertical-align: top;
+    text-align: left;
+  }
+  .field table th { background: #fafaf8; font-weight: 600; }
+  .field table input, .field table select, .field table textarea {
+    width: 100%;
+    border: none;
+    padding: 4px;
+    font: inherit;
+    background: transparent;
+  }
+  .field.has-error .field-label { color: var(--error); }
+  .field.has-error input,
+  .field.has-error select,
+  .field.has-error textarea {
+    border-color: var(--error);
+  }
+  .field .error-msg {
+    color: var(--error); font-size: 12px; margin-top: 4px;
+  }
+
+  #result-panel {
+    background: var(--code-bg); color: var(--code-ink);
+    border-radius: 10px;
+    padding: 16px;
+    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 520px;
+    overflow: auto;
+  }
+  .actions { display: flex; gap: 8px; margin: 16px 0; }
+  footer { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>CCDF Answer Form</h1>
+  <p>Fill in answers below. Inputs are generated from the selected framework's JSON schema and validated against it.</p>
+  <div class="controls">
+    <div>
+      <label for="framework">Framework</label>
+      <select id="framework">
+        <option value="releases/ccdf/2025-07-17/ccdf.json">CCDF (2025-07-17)</option>
+        <option value="releases/seccdf/2025-09-05/seccdf.json">SECCDF (2025-09-05)</option>
+      </select>
+    </div>
+    <div>
+      <label for="topic">Tier</label>
+      <select id="topic"><option>Loading…</option></select>
+    </div>
+    <div>
+      <label for="schema-file">Or load file</label>
+      <input type="file" id="schema-file" accept="application/json,.json">
+    </div>
+  </div>
+</header>
+
+<main>
+  <div id="status"></div>
+  <form id="form" novalidate></form>
+  <div class="actions">
+    <button type="button" class="primary" id="validate-btn" style="background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit;">Validate & Preview</button>
+    <button type="button" id="copy-btn" style="background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit;">Copy JSON</button>
+    <button type="button" id="clear-btn" style="background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit;">Clear</button>
+  </div>
+  <pre id="result-panel">// Answers appear here after validation</pre>
+</main>
+
+<footer>Static form generated from the CCDF/SECCDF JSON schema. Empty fields are omitted from the output.</footer>
+
+<script>
+"use strict";
+
+const state = {
+  schema: null,      // full loaded framework doc
+  topicIndex: 0,     // which topic (tier) is being shown
+};
+
+const $ = (sel, root = document) => root.querySelector(sel);
+const el = (tag, attrs = {}, ...children) => {
+  const n = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === "class") n.className = v;
+    else if (k === "html") n.innerHTML = v;
+    else if (k.startsWith("on") && typeof v === "function") n.addEventListener(k.slice(2), v);
+    else if (v === true) n.setAttribute(k, "");
+    else if (v !== false && v != null) n.setAttribute(k, v);
+  }
+  for (const c of children) {
+    if (c == null || c === false) continue;
+    n.appendChild(c.nodeType ? c : document.createTextNode(String(c)));
+  }
+  return n;
+};
+
+const setStatus = (msg, kind = "info") => {
+  const s = $("#status");
+  if (!msg) { s.innerHTML = ""; return; }
+  s.innerHTML = "";
+  s.appendChild(el("div", { class: `status ${kind}` }, msg));
+};
+
+// ---------- Schema loading ----------
+async function loadFrameworkFromUrl(url) {
+  setStatus("Loading schema…");
+  try {
+    const res = await fetch(url, { cache: "no-store" });
+    if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+    const doc = await res.json();
+    setFramework(doc);
+    setStatus(`Loaded ${doc.title} v${doc.version}.`, "ok");
+  } catch (e) {
+    setStatus(
+      `Couldn't fetch schema from "${url}" (${e.message}). If you opened this file directly, browsers block fetch on file:// — either serve the folder (e.g. \`python3 -m http.server\`) or use "Or load file" to pick the JSON manually.`,
+      "error"
+    );
+  }
+}
+
+function setFramework(doc) {
+  state.schema = doc;
+  state.topicIndex = 0;
+  const topicSel = $("#topic");
+  topicSel.innerHTML = "";
+  (doc.topic || []).forEach((t, i) => {
+    topicSel.appendChild(el("option", { value: i }, t.label || t.name));
+  });
+  renderForm();
+}
+
+// ---------- Rendering ----------
+function renderForm() {
+  const form = $("#form");
+  form.innerHTML = "";
+  $("#result-panel").textContent = "// Answers appear here after validation";
+  if (!state.schema) return;
+  const topic = state.schema.topic[state.topicIndex];
+  if (!topic) return;
+
+  (topic.steps || []).forEach(step => {
+    const stepEl = el("section", { class: "step" },
+      el("h2", {}, step.label || step.name),
+    );
+    (step.sections || []).forEach(section => {
+      const secEl = el("div", { class: "section" });
+      if (section.label && section.label.trim()) {
+        secEl.appendChild(el("h3", {}, section.label));
+      }
+      (section.fields || []).forEach(field => {
+        secEl.appendChild(renderField(field));
+      });
+      stepEl.appendChild(secEl);
+    });
+    form.appendChild(stepEl);
+  });
+}
+
+function fieldId(field) { return `f_${field.id}_${field.name}`; }
+
+function renderField(field) {
+  const wrap = el("div", { class: "field", "data-field-id": field.id, "data-field-name": field.name });
+  wrap._field = field;
+
+  const type = field.type;
+  const hasOptions = Array.isArray(field.options) && field.options.length > 0
+    && typeof field.options[0] === "string";
+  const structuredOptions = Array.isArray(field.options) && field.options.length > 0
+    && typeof field.options[0] === "object";
+  const hasTable = Array.isArray(field.table) && field.table.length > 0;
+
+  const label = el("label", { class: "field-label", for: fieldId(field) },
+    field.label || field.name,
+    el("span", { class: `type-tag ${type == null ? "null" : ""}` }, type || "untyped"),
+  );
+  wrap.appendChild(label);
+
+  if (field.description) {
+    wrap.appendChild(el("div", { class: "desc" }, field.description));
+  }
+  if (type == null) {
+    wrap.appendChild(el("div", { class: "desc" }, "Note: this field has no declared type in the schema. It's rendered as a text input; edit the JSON output if a different shape is needed."));
+  }
+
+  // Boolean → checkbox
+  if (type === "boolean") {
+    const cb = el("input", { type: "checkbox", id: fieldId(field), "data-role": "boolean" });
+    const indeterminate = el("input", { type: "hidden", "data-role": "boolean-touched", value: "0" });
+    cb.addEventListener("change", () => { indeterminate.value = "1"; });
+    const row = el("div", { class: "checkbox-row" }, cb, indeterminate, el("span", {}, "Yes / true"));
+    wrap.appendChild(row);
+    return wrap;
+  }
+
+  // Table (object with table schema) → dynamic rows
+  if (hasTable) {
+    const columns = field.table[0].columns || [];
+    wrap.appendChild(renderTable(field, columns));
+    return wrap;
+  }
+
+  // Structured options (object with column-like options) → JSON textarea with schema hint
+  if (structuredOptions) {
+    const cols = field.options.map(o => `${o.name}: ${o.format || o.type || "any"}`).join(", ");
+    wrap.appendChild(el("div", { class: "desc" }, `Expected shape (per row): { ${cols} }. Enter an array of objects as JSON.`));
+    const ta = el("textarea", { id: fieldId(field), class: "code", "data-role": "json-array-of-objects", placeholder: "[\n  { … }\n]" });
+    wrap.appendChild(ta);
+    return wrap;
+  }
+
+  // String with options → select
+  if (type === "string" && hasOptions) {
+    const sel = el("select", { id: fieldId(field), "data-role": "select-string" },
+      el("option", { value: "" }, "— select —"),
+      ...field.options.map(o => el("option", { value: o }, o)),
+    );
+    wrap.appendChild(sel);
+    return wrap;
+  }
+
+  // Number with options → select numeric
+  if (type === "number" && hasOptions) {
+    const sel = el("select", { id: fieldId(field), "data-role": "select-number" },
+      el("option", { value: "" }, "— select —"),
+      ...field.options.map(o => el("option", { value: o }, o)),
+    );
+    wrap.appendChild(sel);
+    return wrap;
+  }
+
+  // Array with options → multi-checkbox group
+  if (type === "array" && hasOptions) {
+    const group = el("div", { class: "options-group", "data-role": "checkbox-array" });
+    field.options.forEach((o, i) => {
+      const cbId = `${fieldId(field)}_${i}`;
+      group.appendChild(el("label", { for: cbId },
+        el("input", { type: "checkbox", id: cbId, value: o }),
+        el("span", {}, o),
+      ));
+    });
+    wrap.appendChild(group);
+    return wrap;
+  }
+
+  // Array (freeform) → repeatable rows
+  if (type === "array") {
+    const list = el("div", { class: "array-list", "data-role": "string-array" });
+    const addBtn = el("button", { type: "button", class: "mini", onclick: () => list.appendChild(makeArrayRow(list)) }, "+ Add item");
+    list.appendChild(makeArrayRow(list));
+    wrap.appendChild(list);
+    wrap.appendChild(addBtn);
+    return wrap;
+  }
+
+  // Number → number input
+  if (type === "number") {
+    wrap.appendChild(el("input", { type: "number", id: fieldId(field), "data-role": "number", step: "any" }));
+    return wrap;
+  }
+
+  // Object (no table, no structured options) → JSON textarea
+  if (type === "object") {
+    wrap.appendChild(el("div", { class: "desc" }, "Enter a JSON object (e.g. an upload reference or nested data)."));
+    wrap.appendChild(el("textarea", { id: fieldId(field), class: "code", "data-role": "json-object", placeholder: "{ }" }));
+    return wrap;
+  }
+
+  // String (freeform) → textarea if description is long, else text input
+  const useTextarea = (field.description || "").length > 60 || (field.label || "").toLowerCase().includes("description");
+  if (useTextarea) {
+    wrap.appendChild(el("textarea", { id: fieldId(field), "data-role": "string" }));
+  } else {
+    wrap.appendChild(el("input", { type: "text", id: fieldId(field), "data-role": "string" }));
+  }
+  return wrap;
+}
+
+function makeArrayRow(list) {
+  const input = el("input", { type: "text" });
+  const remove = el("button", { type: "button", class: "mini", onclick: () => {
+    if (list.querySelectorAll(".array-row").length > 1) row.remove();
+    else input.value = "";
+  } }, "×");
+  const row = el("div", { class: "array-row" }, input, remove);
+  return row;
+}
+
+function renderTable(field, columns) {
+  const wrap = el("div", { class: "table-wrap", "data-role": "table" });
+  const table = el("table");
+  const thead = el("thead");
+  const headRow = el("tr");
+  columns.forEach(c => headRow.appendChild(el("th", {}, c.label || c.name)));
+  headRow.appendChild(el("th", { style: "width: 40px;" }, ""));
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+
+  const tbody = el("tbody");
+  table.appendChild(tbody);
+  wrap.appendChild(table);
+  wrap._columns = columns;
+
+  const addRow = () => {
+    const tr = el("tr");
+    columns.forEach(c => {
+      const cell = el("td");
+      const hasOpts = Array.isArray(c.options) && c.options.length > 0 && typeof c.options[0] === "string";
+      if (hasOpts) {
+        const s = el("select", { "data-col": c.name },
+          el("option", { value: "" }, "—"),
+          ...c.options.map(o => el("option", { value: o }, o)),
+        );
+        cell.appendChild(s);
+      } else if (c.type === "number") {
+        cell.appendChild(el("input", { type: "number", step: "any", "data-col": c.name }));
+      } else if (c.type === "boolean") {
+        cell.appendChild(el("input", { type: "checkbox", "data-col": c.name }));
+      } else {
+        cell.appendChild(el("input", { type: "text", "data-col": c.name }));
+      }
+      tr.appendChild(cell);
+    });
+    tr.appendChild(el("td", {},
+      el("button", { type: "button", class: "mini", onclick: () => tr.remove() }, "×"),
+    ));
+    tbody.appendChild(tr);
+  };
+  addRow();
+
+  const addBtn = el("button", { type: "button", class: "mini", onclick: addRow, style: "margin-top: 6px;" }, "+ Add row");
+  const container = el("div", {});
+  container.appendChild(wrap);
+  container.appendChild(addBtn);
+  return container;
+}
+
+// ---------- Collection & validation ----------
+function collectAndValidate() {
+  const answers = {};
+  const errors = [];
+
+  document.querySelectorAll("#form .field").forEach(fEl => {
+    fEl.classList.remove("has-error");
+    const err = fEl.querySelector(".error-msg");
+    if (err) err.remove();
+
+    const field = fEl._field;
+    const { value, error } = readField(fEl, field);
+    if (error) {
+      errors.push({ field, message: error });
+      fEl.classList.add("has-error");
+      fEl.appendChild(el("div", { class: "error-msg" }, error));
+      return;
+    }
+    if (value === undefined) return; // omit empty
+    answers[field.name] = value;
+  });
+
+  return { answers, errors };
+}
+
+function readField(fEl, field) {
+  const type = field.type;
+  const hasOptions = Array.isArray(field.options) && field.options.length > 0
+    && typeof field.options[0] === "string";
+  const structuredOptions = Array.isArray(field.options) && field.options.length > 0
+    && typeof field.options[0] === "object";
+  const hasTable = Array.isArray(field.table) && field.table.length > 0;
+
+  // Boolean
+  if (type === "boolean") {
+    const cb = fEl.querySelector('[data-role="boolean"]');
+    const touched = fEl.querySelector('[data-role="boolean-touched"]');
+    if (!touched || touched.value !== "1") return { value: undefined };
+    return { value: cb.checked };
+  }
+
+  // Table
+  if (hasTable) {
+    const wrap = fEl.querySelector('[data-role="table"]');
+    const columns = wrap._columns;
+    const rows = [];
+    let rowIdx = 0;
+    for (const tr of wrap.querySelectorAll("tbody tr")) {
+      rowIdx++;
+      const row = {};
+      let hasAnything = false;
+      for (const c of columns) {
+        const input = tr.querySelector(`[data-col="${c.name}"]`);
+        if (!input) continue;
+        if (c.type === "boolean") {
+          if (input.checked) { row[c.name] = true; hasAnything = true; }
+          continue;
+        }
+        const raw = input.value == null ? "" : String(input.value).trim();
+        if (raw === "") continue;
+        if (Array.isArray(c.options) && c.options.length > 0 && typeof c.options[0] === "string") {
+          if (!c.options.includes(raw)) return { error: `Row ${rowIdx}, column "${c.label || c.name}": "${raw}" is not one of ${c.options.join(", ")}` };
+          row[c.name] = raw;
+        } else if (c.type === "number") {
+          const n = Number(raw);
+          if (!Number.isFinite(n)) return { error: `Row ${rowIdx}, column "${c.label || c.name}" must be a number` };
+          row[c.name] = n;
+        } else {
+          row[c.name] = raw;
+        }
+        hasAnything = true;
+      }
+      if (hasAnything) rows.push(row);
+    }
+    if (rows.length === 0) return { value: undefined };
+    return { value: rows };
+  }
+
+  // Structured-options object (array of objects with defined column keys)
+  if (structuredOptions) {
+    const ta = fEl.querySelector('[data-role="json-array-of-objects"]');
+    const raw = (ta.value || "").trim();
+    if (!raw) return { value: undefined };
+    let parsed;
+    try { parsed = JSON.parse(raw); } catch (e) { return { error: `Invalid JSON: ${e.message}` }; }
+    if (!Array.isArray(parsed)) return { error: "Expected a JSON array of objects." };
+    const allowedKeys = new Set(field.options.map(o => o.name));
+    for (let i = 0; i < parsed.length; i++) {
+      const row = parsed[i];
+      if (typeof row !== "object" || row === null || Array.isArray(row)) return { error: `Item ${i + 1} must be an object.` };
+      for (const k of Object.keys(row)) {
+        if (!allowedKeys.has(k)) return { error: `Item ${i + 1}: unknown key "${k}". Allowed: ${[...allowedKeys].join(", ")}` };
+      }
+    }
+    return { value: parsed };
+  }
+
+  // String with options
+  if (type === "string" && hasOptions) {
+    const sel = fEl.querySelector('[data-role="select-string"]');
+    const v = sel.value;
+    if (v === "") return { value: undefined };
+    if (!field.options.includes(v)) return { error: `"${v}" is not one of ${field.options.join(", ")}` };
+    return { value: v };
+  }
+
+  // Number with options
+  if (type === "number" && hasOptions) {
+    const sel = fEl.querySelector('[data-role="select-number"]');
+    const v = sel.value;
+    if (v === "") return { value: undefined };
+    const n = Number(v);
+    if (!Number.isFinite(n)) return { error: "Must be a number." };
+    return { value: n };
+  }
+
+  // Array with options → multi-checkbox
+  if (type === "array" && hasOptions) {
+    const group = fEl.querySelector('[data-role="checkbox-array"]');
+    const values = [...group.querySelectorAll("input[type=checkbox]:checked")].map(c => c.value);
+    for (const v of values) {
+      if (!field.options.includes(v)) return { error: `"${v}" is not one of ${field.options.join(", ")}` };
+    }
+    if (values.length === 0) return { value: undefined };
+    return { value: values };
+  }
+
+  // Array (freeform)
+  if (type === "array") {
+    const list = fEl.querySelector('[data-role="string-array"]');
+    const items = [...list.querySelectorAll("input[type=text]")]
+      .map(i => (i.value || "").trim())
+      .filter(v => v !== "");
+    if (items.length === 0) return { value: undefined };
+    return { value: items };
+  }
+
+  // Number
+  if (type === "number") {
+    const input = fEl.querySelector('[data-role="number"]');
+    const raw = (input.value || "").trim();
+    if (raw === "") return { value: undefined };
+    const n = Number(raw);
+    if (!Number.isFinite(n)) return { error: "Must be a number." };
+    return { value: n };
+  }
+
+  // Object (freeform)
+  if (type === "object") {
+    const ta = fEl.querySelector('[data-role="json-object"]');
+    const raw = (ta.value || "").trim();
+    if (!raw) return { value: undefined };
+    let parsed;
+    try { parsed = JSON.parse(raw); } catch (e) { return { error: `Invalid JSON: ${e.message}` }; }
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      return { error: "Must be a JSON object (curly braces)." };
+    }
+    return { value: parsed };
+  }
+
+  // String (or untyped) → text/textarea
+  const el2 = fEl.querySelector('[data-role="string"]');
+  if (!el2) return { value: undefined };
+  const raw = (el2.value || "").trim();
+  if (raw === "") return { value: undefined };
+  return { value: raw };
+}
+
+// ---------- Wire up ----------
+$("#framework").addEventListener("change", (e) => loadFrameworkFromUrl(e.target.value));
+$("#topic").addEventListener("change", (e) => {
+  state.topicIndex = Number(e.target.value);
+  renderForm();
+});
+$("#schema-file").addEventListener("change", async (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  try {
+    const text = await file.text();
+    const doc = JSON.parse(text);
+    setFramework(doc);
+    setStatus(`Loaded ${doc.title || file.name} v${doc.version || "?"} from file.`, "ok");
+  } catch (err) {
+    setStatus(`Couldn't parse "${file.name}": ${err.message}`, "error");
+  }
+});
+
+$("#validate-btn").addEventListener("click", () => {
+  if (!state.schema) { setStatus("Load a schema first.", "error"); return; }
+  const { answers, errors } = collectAndValidate();
+  if (errors.length > 0) {
+    setStatus(`Found ${errors.length} validation error${errors.length === 1 ? "" : "s"}. See highlighted fields above.`, "error");
+  } else {
+    setStatus(`Validated. ${Object.keys(answers).length} field${Object.keys(answers).length === 1 ? "" : "s"} filled.`, "ok");
+  }
+  const topic = state.schema.topic[state.topicIndex];
+  const output = {
+    $framework: state.schema.$framework,
+    frameworkName: state.schema.name,
+    frameworkVersion: state.schema.version,
+    topic: topic.name,
+    answers,
+  };
+  $("#result-panel").textContent = JSON.stringify(output, null, 2);
+});
+
+$("#copy-btn").addEventListener("click", async () => {
+  const text = $("#result-panel").textContent;
+  try {
+    await navigator.clipboard.writeText(text);
+    setStatus("Copied JSON to clipboard.", "ok");
+  } catch {
+    setStatus("Clipboard blocked — select the text manually.", "error");
+  }
+});
+
+$("#clear-btn").addEventListener("click", () => {
+  if (!confirm("Clear all answers?")) return;
+  renderForm();
+  setStatus("Cleared.", "info");
+});
+
+// Initial load
+loadFrameworkFromUrl($("#framework").value);
+</script>
+</body>
+</html>
