diff --git a/static/admin.js b/static/admin.js
index c5fea96..6571c9f 100644
--- a/static/admin.js
+++ b/static/admin.js
@@ -1,2 +1,212 @@
const app = document.querySelector("#admin-app");
-app.textContent = "Loading admin...";
+
+let quizzes = [];
+let sessions = [];
+let activeSid = null;
+let ws = null;
+let leaderboard = [];
+let roster = [];
+let liveHistogram = null;
+let currentState = null;
+
+const samplePool = {
+ title: "Week 9 Recap: Computer Organization",
+ score_fn: "linear_decay",
+ time_limit_default: 60,
+ questions: [
+ {id: "q1", text: "Which unit sequences control signals in a multi-cycle datapath?", options: {A: "ALU", B: "Control unit", C: "Register file", D: "Instruction memory"}, correct: "B"}
+ ]
+};
+
+function escapeText(value) {
+ return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ })[char]);
+}
+
+async function api(path, options = {}) {
+ const response = await fetch(path, {
+ credentials: "same-origin",
+ headers: {"Content-Type": "application/json", ...(options.headers || {})},
+ ...options,
+ });
+ if (!response.ok) throw new Error(await response.text());
+ const contentType = response.headers.get("content-type") || "";
+ return contentType.includes("json") ? response.json() : response.text();
+}
+
+async function boot() {
+ try {
+ await refresh();
+ render();
+ } catch {
+ renderLogin();
+ }
+}
+
+function renderLogin(error = "") {
+ app.innerHTML = ``;
+ document.querySelector("#login-form").addEventListener("submit", async (event) => {
+ event.preventDefault();
+ const form = new FormData(event.currentTarget);
+ try {
+ await api("/admin/login", {method: "POST", body: JSON.stringify({password: form.get("password")})});
+ await refresh();
+ render();
+ } catch {
+ renderLogin("Login failed.");
+ }
+ });
+}
+
+async function refresh() {
+ quizzes = (await api("/admin/api/quizzes")).quizzes;
+ sessions = (await api("/admin/api/sessions")).sessions;
+}
+
+function render() {
+ app.innerHTML = ``;
+ document.querySelector("#new-quiz").addEventListener("click", renderQuizModal);
+ document.querySelector("#new-session").addEventListener("click", renderSessionModal);
+ document.querySelectorAll("[data-session]").forEach((button) => {
+ button.addEventListener("click", () => connectSession(button.dataset.session));
+ });
+ bindControls();
+}
+
+function renderSession() {
+ if (!activeSid) return `No active session
Create or select a session.
+
${escapeText(session?.title || activeSid)}
${escapeText(currentState?.state || session?.state || "")}
+
Session ID: ${activeSid}
+
+
+
+
Roster (${roster.length})
+
${roster.map((p) => `${escapeText(p.student_id)} ${escapeText(p.name)}`).join("") || "No students yet."}
+
Live Histogram
+ ${renderHistogram(liveHistogram?.histogram)}
+
Leaderboard
+ ${renderLeaderboard(leaderboard)}
+
${Object.entries(data).map(([key, value]) => (
+ `
${key}${value}
`
+ )).join("")}
${(rows || []).map((row) => (
+ `- ${row.rank}. ${escapeText(row.name)} ${row.student_id ? `(${escapeText(row.student_id)})` : ""}${row.score}
`
+ )).join("") || "- No scores yet.
"}
`;
+}
+
+function bindControls() {
+ document.querySelectorAll("[data-command]").forEach((button) => {
+ button.addEventListener("click", () => {
+ if (!ws || ws.readyState !== WebSocket.OPEN) return;
+ const command = button.dataset.command;
+ if (command === "open_question") {
+ ws.send(JSON.stringify({
+ type: command,
+ question_idx: Number(document.querySelector("#question-idx").value || 0),
+ time_limit: Number(document.querySelector("#time-limit").value || 60),
+ }));
+ } else {
+ ws.send(JSON.stringify({type: command}));
+ }
+ });
+ });
+}
+
+function renderQuizModal() {
+ app.innerHTML = ``;
+ document.querySelector("#cancel").addEventListener("click", render);
+ document.querySelector("#quiz-form").addEventListener("submit", async (event) => {
+ event.preventDefault();
+ const pool = JSON.parse(new FormData(event.currentTarget).get("pool"));
+ await api("/admin/api/quizzes", {method: "POST", body: JSON.stringify({pool_json: pool})});
+ await refresh();
+ render();
+ });
+}
+
+async function renderSessionModal() {
+ const options = quizzes.map((quiz) => ``).join("");
+ app.innerHTML = ``;
+ document.querySelector("#cancel").addEventListener("click", render);
+ document.querySelector("#session-form").addEventListener("submit", async (event) => {
+ event.preventDefault();
+ const quizId = Number(new FormData(event.currentTarget).get("quiz_id"));
+ const result = await api("/admin/api/sessions", {method: "POST", body: JSON.stringify({quiz_id: quizId})});
+ document.querySelector("#session-result").innerHTML = `${result.sid}
${result.join_url}
`;
+ await refresh();
+ connectSession(result.sid);
+ });
+}
+
+function connectSession(sid) {
+ activeSid = sid;
+ if (ws) ws.close();
+ const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+ ws = new WebSocket(`${protocol}://${window.location.host}/ws/instructor/${sid}`);
+ ws.addEventListener("message", (event) => {
+ const message = JSON.parse(event.data);
+ if (message.type === "state") currentState = message;
+ if (message.type === "lobby_update") roster = message.participants;
+ if (message.type === "live_histogram") liveHistogram = message;
+ if (message.type === "full_leaderboard") leaderboard = message.leaderboard;
+ if (message.type === "question_closed") liveHistogram = {histogram: message.histogram};
+ render();
+ });
+ render();
+}
+
+boot();
diff --git a/static/quiz.js b/static/quiz.js
index 598e3bf..3428afc 100644
--- a/static/quiz.js
+++ b/static/quiz.js
@@ -1,2 +1,223 @@
const app = document.querySelector("#app");
-app.textContent = "Loading quiz...";
+const params = new URLSearchParams(window.location.search);
+const sid = params.get("sid");
+
+let ws = null;
+let me = null;
+let activeQuestion = null;
+let submitted = null;
+let countdownTimer = null;
+
+function html(strings, ...values) {
+ return strings.map((part, index) => part + (values[index] ?? "")).join("");
+}
+
+function escapeText(value) {
+ return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ })[char]);
+}
+
+function setView(markup) {
+ app.innerHTML = ``;
+}
+
+function askForLink() {
+ setView(html`
+
Ask your instructor for the link
+
This quiz link is missing or no longer valid.
+
Connection closed
Refresh the page to reconnect.
+
${escapeText(message.title)}
+
You are in. Waiting for instructor to start.
+
${escapeText(me?.name || "")}
+
+
Question ${message.question_idx + 1}
+
+ ${escapeText(message.text)}
+ ${buttons}
+ `);
+ document.querySelectorAll("[data-answer]").forEach((button) => {
+ button.addEventListener("click", () => submitAnswer(button.dataset.answer));
+ });
+ startCountdown(message);
+}
+
+function startCountdown(message) {
+ clearInterval(countdownTimer);
+ const endAt = Date.now() + message.remaining_ms;
+ const total = message.time_limit * 1000;
+ const tick = () => {
+ const remaining = Math.max(0, endAt - Date.now());
+ const timer = document.querySelector("#timer");
+ const fill = document.querySelector("#bar-fill");
+ if (timer) timer.textContent = `${Math.ceil(remaining / 1000)}s`;
+ if (fill) fill.style.width = `${Math.max(0, Math.min(100, remaining / total * 100))}%`;
+ };
+ tick();
+ countdownTimer = setInterval(tick, 250);
+}
+
+function submitAnswer(answer) {
+ if (!ws || !activeQuestion || submitted) return;
+ ws.send(JSON.stringify({type: "submit", question_idx: activeQuestion.question_idx, answer}));
+ document.querySelectorAll("[data-answer]").forEach((button) => button.disabled = true);
+}
+
+function renderSubmitted(message) {
+ submitted = message;
+ const seconds = (message.elapsed_ms / 1000).toFixed(1);
+ setView(html`
+
Submitted
+
Submitted in ${seconds}s, +${message.score} pts.
+
Wait for the reveal.
+
${key}${value}
`
+ )).join("");
+ const board = renderBoard(message.top5);
+ setView(html`
+ Correct answer: ${escapeText(message.correct)}
+ Reveal
+ Your answer: ${escapeText(message.your_answer || "missed")}. Score: ${message.your_score || 0}.
+ ${message.explanation ? `${escapeText(message.explanation)}
` : ""}
+ ${rows}
+ ${board}
+ Your rank: ${message.your_rank ?? "pending"}. Total: ${message.your_total ?? 0}.
+ `);
+}
+
+function renderBetween(message) {
+ setView(html`
+
Next question coming up
+
Your rank: ${message.your_rank ?? "pending"}
+
Total: ${message.your_total ?? 0}
+ ${renderBoard(message.top5)}
+
+
Quiz finished
+
Your rank: ${message.your_rank ?? "pending"}. Total: ${message.your_total ?? 0}.
+
Answered ${message.questions_answered ?? 0}, correct ${message.questions_correct ?? 0}.
+ ${renderBoard(message.final_top5)}
+
No scores yet.
";
+ return `${rows.map((row) => (
+ `- ${row.rank}. ${escapeText(row.name)}${row.score}
`
+ )).join("")}
`;
+}
+
+function renderError(message) {
+ setView(html`Quiz message
${escapeText(message)}