Add matching quiz type, more theme colors, animal icon picker, and fix color persistence

- Fix theme not saving across sessions: /api/state was missing `theme` in SELECT
- Add 4 new color themes: red, teal, yellow, indigo (student + admin)
- Add animal icon picker (32 animals) with PATCH /api/students/:id/emoji endpoint
- Add Matching item type: word bank (A, B, C… alphabetical) + clue blanks, auto-graded
- Matching submit button stays disabled until all blanks are filled

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/admin.html

@@ -129,6 +129,7 @@
               <option value="quiz">❓ Quiz</option>
               <option value="spelling_practice">✏️ Spelling Practice</option>
               <option value="spelling_test">⭐ Spelling Test</option>
+              <option value="matching">🔤 Matching</option>
               <option value="flashcards">🗂️ Flashcards</option>
             </select>
           </label>
@@ -234,6 +235,12 @@
             <button type="button" id="ie-add-question" class="secondary">+ Add question</button>
           </div>
 
+          <div id="ie-field-matching" class="ie-field">
+            <p class="hint" style="margin-bottom:.5rem">Enter word-clue pairs. Words are shown as A, B, C… (alphabetical order) in the word bank.</p>
+            <div id="ie-pairs"></div>
+            <button type="button" id="ie-add-pair" class="secondary">+ Add pair</button>
+          </div>
+
           <div id="ie-field-spelling" class="ie-field">
             <label>Word list <select id="ie-list"></select></label>
           </div>

public/admin.js

@@ -104,7 +104,7 @@ function showPanel(name) {
 // Kids
 // ============================================================
 
-const THEME_COLORS = { blue: '#4f86f7', green: '#2e9e5b', purple: '#7c5cbf', orange: '#e8802a', pink: '#d45d8a' };
+const THEME_COLORS = { blue: '#4f86f7', green: '#2e9e5b', purple: '#7c5cbf', orange: '#e8802a', pink: '#d45d8a', red: '#e84040', teal: '#20a8a0', yellow: '#c8960c', indigo: '#5b6abf' };
 
 async function loadKids() {
   const students = await api('/api/students');
@@ -388,6 +388,8 @@ async function openItemEditor(unitId, itemId) {
   $('#ie-error').hidden = true;
   $('#ie-questions').innerHTML = '';
   questionCount = 0;
+  $('#ie-pairs').innerHTML = '';
+  pairCount = 0;
 
   if (itemId) {
     const item = await api(`/api/admin/items/${itemId}`);
@@ -405,6 +407,11 @@ async function openItemEditor(unitId, itemId) {
     if (item.type === 'spelling_practice' || item.type === 'spelling_test') $('#ie-list').value = item.ref_id;
     if (item.type === 'flashcards') $('#ie-deck').value = item.ref_id;
     if (item.type === 'quiz') (item.questions || []).forEach(addQuestionRow);
+    if (item.type === 'matching') {
+      $('#ie-pairs').innerHTML = '';
+      pairCount = 0;
+      (item.questions || []).forEach(addMatchingRow);
+    }
     $('#ie-delete').hidden = false;
     $('#ie-delete').onclick = async () => {
       if (!confirm('Delete this item and any grades for it?')) return;
@@ -437,6 +444,7 @@ function updateItemFieldVisibility() {
   $('#ie-field-lesson').hidden = type !== 'lesson';
   $('#ie-field-assignment').hidden = type !== 'assignment';
   $('#ie-field-quiz').hidden = type !== 'quiz';
+  $('#ie-field-matching').hidden = type !== 'matching';
   $('#ie-field-spelling').hidden = type !== 'spelling_practice' && type !== 'spelling_test';
   $('#ie-field-flashcards').hidden = type !== 'flashcards';
   $('#ie-scan-section').hidden = type !== 'lesson' && type !== 'quiz';
@@ -658,6 +666,20 @@ function addQuestionRow(q = {}) {
 }
 $('#ie-add-question').addEventListener('click', () => addQuestionRow());
 
+let pairCount = 0;
+function addMatchingRow(pair = {}) {
+  const n = pairCount++;
+  const div = document.createElement('div');
+  div.className = 'matching-pair-row';
+  div.innerHTML = `
+    <input class="pair-word" placeholder="Word / term" value="${esc(pair.correct_answer || pair.word || '')}">
+    <input class="pair-clue" placeholder="Clue / definition" value="${esc(pair.prompt || pair.clue || '')}">
+    <button type="button" class="danger small pair-remove">✕</button>`;
+  div.querySelector('.pair-remove').addEventListener('click', () => div.remove());
+  $('#ie-pairs').appendChild(div);
+}
+$('#ie-add-pair').addEventListener('click', () => addMatchingRow());
+
 $('#ie-load-template').addEventListener('click', async () => {
   const tid = $('#ie-template-select').value;
   if (!tid) return msg('Pick a template first.');
@@ -710,6 +732,15 @@ $('#item-form').addEventListener('submit', async (e) => {
       points: Number(row.querySelector('.qn-points').value) || 1,
     }));
   }
+  if (type === 'matching') {
+    body.questions = Array.from(document.querySelectorAll('.matching-pair-row')).map((row) => ({
+      type: 'match',
+      prompt: row.querySelector('.pair-clue').value.trim(),
+      correctAnswer: row.querySelector('.pair-word').value.trim(),
+      choices: [],
+      points: 1,
+    })).filter((q) => q.prompt && q.correctAnswer);
+  }
 
   const id = $('#ie-id').value;
   try {

public/app.js

@@ -27,11 +27,11 @@ const esc = (s) =>
 const todayStr = () => new Date().toISOString().slice(0, 10);
 
 const TYPE_ICON = {
-  lesson: '📖', assignment: '📝', quiz: '❓',
+  lesson: '📖', assignment: '📝', quiz: '❓', matching: '🔤',
   spelling_practice: '✏️', spelling_test: '⭐', flashcards: '🗂️',
 };
 const TYPE_LABEL = {
-  lesson: 'Lesson', assignment: 'Assignment', quiz: 'Quiz',
+  lesson: 'Lesson', assignment: 'Assignment', quiz: 'Quiz', matching: 'Matching',
   spelling_practice: 'Spelling Practice', spelling_test: 'Spelling Test', flashcards: 'Flashcards',
 };
 
@@ -191,7 +191,18 @@ const THEMES = {
   purple: { '--accent': '#7c5cbf', '--accent-dark': '#6245a0', '--bg': '#f8f4ff' },
   orange: { '--accent': '#e8802a', '--accent-dark': '#c96a1a', '--bg': '#fff8f0' },
   pink:   { '--accent': '#d45d8a', '--accent-dark': '#b4487a', '--bg': '#fff0f5' },
+  red:    { '--accent': '#e84040', '--accent-dark': '#c42828', '--bg': '#fff5f5' },
+  teal:   { '--accent': '#20a8a0', '--accent-dark': '#178880', '--bg': '#f0faf9' },
+  yellow: { '--accent': '#c8960c', '--accent-dark': '#a87a06', '--bg': '#fffbf0' },
+  indigo: { '--accent': '#5b6abf', '--accent-dark': '#4a57a0', '--bg': '#f4f5ff' },
 };
+
+const ANIMAL_EMOJIS = [
+  '🐶','🐱','🐰','🦊','🐻','🐼','🐨','🐯',
+  '🦁','🐮','🐷','🐸','🐵','🐔','🐧','🦆',
+  '🦉','🦋','🐢','🦄','🐬','🦈','🦖','🦕',
+  '🐺','🦝','🦔','🐿️','🦜','🦩','🦚','🐙',
+];
 const THEME_NAMES = Object.keys(THEMES);
 const DEFAULT_VARS = { '--accent': '#4f86f7', '--accent-dark': '#3a6fd8', '--bg': '#fdf6e3' };
 
@@ -305,6 +316,7 @@ $('#celebration-close').addEventListener('click', () => {
 // Theme picker toggle
 $('#theme-picker-btn').addEventListener('click', () => {
   $('#theme-dots').hidden = !$('#theme-dots').hidden;
+  $('#icon-grid').hidden = true;
 });
 
 document.querySelectorAll('.theme-dot').forEach((btn) =>
@@ -318,6 +330,29 @@ document.querySelectorAll('.theme-dot').forEach((btn) =>
   })
 );
 
+// ---------- animal / icon picker ----------
+
+$('#icon-picker-btn').addEventListener('click', () => {
+  const grid = $('#icon-grid');
+  if (grid.hidden) {
+    grid.innerHTML = ANIMAL_EMOJIS.map((e) =>
+      `<button class="icon-choice${currentStudent && currentStudent.emoji === e ? ' active' : ''}" data-emoji="${e}">${e}</button>`
+    ).join('');
+    grid.querySelectorAll('.icon-choice').forEach((btn) =>
+      btn.addEventListener('click', async () => {
+        const emoji = btn.dataset.emoji;
+        currentStudent.emoji = emoji;
+        $('#kid-greeting').textContent = `${emoji} Hi, ${currentStudent.name}!`;
+        grid.querySelectorAll('.icon-choice').forEach((b) => b.classList.toggle('active', b.dataset.emoji === emoji));
+        await api(`/api/students/${currentStudent.id}/emoji`, { method: 'PATCH', body: { emoji } });
+        grid.hidden = true;
+      })
+    );
+  }
+  grid.hidden = !grid.hidden;
+  $('#theme-dots').hidden = true;
+});
+
 const OFFLINE_STATUS_ICON = { not_started: '⬜', in_progress: '🔄', done: '✅' };
 
 function renderToday(tasks) {
@@ -600,6 +635,7 @@ async function openItem(itemId, type) {
   if (type === 'lesson') return openLesson(itemId);
   if (type === 'assignment') return openAssignment(itemId);
   if (type === 'quiz') return openQuiz(itemId, false);
+  if (type === 'matching') return openMatching(itemId, false);
   const item = await api(`/api/items/${itemId}?studentId=${currentStudent.id}`);
   if (type === 'spelling_practice') return startPractice({ listId: item.list.id, itemId });
   if (type === 'spelling_test') return startTest({ listId: item.list.id, itemId, allowRetakes: item.allow_retakes });
@@ -788,6 +824,85 @@ async function openQuiz(itemId, forceRetake = false) {
 
 const normalizeAnswer = (s) => String(s ?? '').trim().toLowerCase();
 
+// ---------- matching ----------
+
+async function openMatching(itemId, forceRetake = false) {
+  const item = await api(`/api/items/${itemId}?studentId=${currentStudent.id}`);
+  $('#quiz-kicker').textContent = `${item.course_name} · ${item.unit_name}`;
+  $('#quiz-title').textContent = item.title;
+  const graded = !forceRetake && item.submission && item.submission.status === 'graded';
+  const result = $('#quiz-result');
+
+  const wordBankHtml = (wb) => `
+    <div class="match-word-bank">
+      <strong>Word Bank</strong>
+      <div class="match-bank-list">
+        ${wb.map((w, i) => `<span class="match-bank-item"><strong>${String.fromCharCode(65 + i)}.</strong> ${esc(w)}</span>`).join('')}
+      </div>
+    </div>`;
+
+  if (graded) {
+    result.hidden = false;
+    result.className = 'status-banner good';
+    const pct = item.submission.points_possible
+      ? Math.round((item.submission.score / item.submission.points_possible) * 100) : 0;
+    result.innerHTML = `🌟 Score: ${item.submission.score} / ${item.submission.points_possible} (${pct}%)`;
+
+    let retakeBtn = '';
+    if (item.allow_retakes) retakeBtn = `<button id="quiz-retake-btn" class="check-btn secondary">🔁 Retake</button>`;
+
+    $('#quiz-form').innerHTML = wordBankHtml(item.wordBank) + retakeBtn +
+      item.questions.map((q) => {
+        const correct = q.given && q.given.toUpperCase() === q.correctLetter;
+        return `<div class="quiz-question review match-review-row">
+          <span class="match-blank-badge ${correct ? 'correct' : 'wrong'}">${esc(q.given || '?')}</span>
+          <span class="match-clue">${correct ? '✅' : '❌'} ${esc(q.prompt)}</span>
+          ${correct ? '' : `<span class="q-correct-answer">→ ${esc(q.correctLetter)} (${esc(q.correctWord)})</span>`}
+        </div>`;
+      }).join('');
+
+    if (item.allow_retakes) {
+      $('#quiz-retake-btn').addEventListener('click', () => openMatching(itemId, true));
+    }
+  } else {
+    result.hidden = true;
+    $('#quiz-form').innerHTML = wordBankHtml(item.wordBank) +
+      `<p class="match-instructions">Write the letter from the word bank that matches each clue.</p>` +
+      item.questions.map((q, i) =>
+        `<div class="quiz-question match-row">
+          <input type="text" class="match-input" name="q${q.id}" maxlength="2"
+            placeholder="?" autocomplete="off" autocapitalize="characters">
+          <span class="match-clue">${i + 1}. ${esc(q.prompt)}</span>
+        </div>`
+      ).join('') +
+      `<button type="submit" class="check-btn" disabled>Submit ✓</button>`;
+
+    const submitBtn = $('#quiz-form button[type=submit]');
+    const inputs = Array.from($('#quiz-form').querySelectorAll('.match-input'));
+    const checkAllFilled = () => {
+      submitBtn.disabled = !inputs.every((inp) => inp.value.trim().length > 0);
+    };
+    inputs.forEach((inp) => inp.addEventListener('input', checkAllFilled));
+
+    $('#quiz-form').onsubmit = async (e) => {
+      e.preventDefault();
+      if (submitBtn.disabled) return;
+      submitBtn.disabled = true;
+      const answers = {};
+      for (const q of item.questions) {
+        const field = $('#quiz-form').elements[`q${q.id}`];
+        answers[q.id] = field ? field.value.trim().toUpperCase() : '';
+      }
+      await api(`/api/items/${itemId}/quiz-submit`, {
+        method: 'POST',
+        body: { studentId: currentStudent.id, answers, date: todayStr() },
+      });
+      openMatching(itemId, false);
+    };
+  }
+  show('quiz');
+}
+
 // ---------- flashcards ----------
 
 const flash = { cards: [], i: 0, itemId: null, reviewed: 0 };

public/index.html

@@ -21,7 +21,10 @@
   <section id="view-kid" class="view" hidden>
     <div class="kid-topbar">
       <button class="back-btn" data-nav="home">← Switch</button>
-      <button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
+      <div class="kid-topbar-actions">
+        <button id="icon-picker-btn" class="theme-picker-btn" aria-label="Change my animal">🐾</button>
+        <button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
+      </div>
     </div>
     <h1 id="kid-greeting"></h1>
     <div id="theme-dots" class="theme-dots" hidden>
@@ -30,7 +33,12 @@
       <button class="theme-dot theme-purple" data-theme="purple" title="Purple"></button>
       <button class="theme-dot theme-orange" data-theme="orange" title="Orange"></button>
       <button class="theme-dot theme-pink"   data-theme="pink"   title="Pink"></button>
+      <button class="theme-dot theme-red"    data-theme="red"    title="Red"></button>
+      <button class="theme-dot theme-teal"   data-theme="teal"   title="Teal"></button>
+      <button class="theme-dot theme-yellow" data-theme="yellow" title="Yellow"></button>
+      <button class="theme-dot theme-indigo" data-theme="indigo" title="Indigo"></button>
     </div>
+    <div id="icon-grid" class="icon-grid" hidden></div>
 
     <div class="kid-nav">
       <button class="nav-pill active" data-tab="today">📋 Today</button>

public/styles.css

@@ -740,9 +740,14 @@ body.theme-green  { --accent: #2e9e5b; --accent-dark: #247a47; --bg: #f0faf4; }
 body.theme-purple { --accent: #7c5cbf; --accent-dark: #6245a0; --bg: #f8f4ff; }
 body.theme-orange { --accent: #e8802a; --accent-dark: #c96a1a; --bg: #fff8f0; }
 body.theme-pink   { --accent: #d45d8a; --accent-dark: #b4487a; --bg: #fff0f5; }
+body.theme-red    { --accent: #e84040; --accent-dark: #c42828; --bg: #fff5f5; }
+body.theme-teal   { --accent: #20a8a0; --accent-dark: #178880; --bg: #f0faf9; }
+body.theme-yellow { --accent: #c8960c; --accent-dark: #a87a06; --bg: #fffbf0; }
+body.theme-indigo { --accent: #5b6abf; --accent-dark: #4a57a0; --bg: #f4f5ff; }
 
 /* ---------- kid top bar + theme picker ---------- */
 .kid-topbar { display: flex; justify-content: space-between; align-items: center; }
+.kid-topbar-actions { display: flex; gap: 0.25rem; align-items: center; }
 .theme-picker-btn {
   background: none; border: none; font-size: 1.3rem; cursor: pointer;
   padding: 0.25rem 0.5rem; color: var(--muted); line-height: 1;
@@ -763,6 +768,25 @@ body.theme-pink   { --accent: #d45d8a; --accent-dark: #b4487a; --bg: #fff0f5; }
 .theme-dot.theme-purple { background: #7c5cbf; }
 .theme-dot.theme-orange { background: #e8802a; }
 .theme-dot.theme-pink   { background: #d45d8a; }
+.theme-dot.theme-red    { background: #e84040; }
+.theme-dot.theme-teal   { background: #20a8a0; }
+.theme-dot.theme-yellow { background: #c8960c; }
+.theme-dot.theme-indigo { background: #5b6abf; }
+
+/* ---------- icon / animal picker ---------- */
+.icon-grid {
+  display: grid; grid-template-columns: repeat(8, 1fr);
+  gap: 0.35rem; margin-bottom: 0.75rem;
+  background: var(--card); border-radius: var(--radius);
+  padding: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.1);
+}
+.icon-choice {
+  font-size: 1.6rem; background: none; border: 2px solid transparent;
+  border-radius: 0.5rem; cursor: pointer; padding: 0.2rem;
+  transition: transform 0.1s, border-color 0.1s;
+}
+.icon-choice:hover { transform: scale(1.2); }
+.icon-choice.active { border-color: var(--accent); background: var(--bg); }
 
 /* ---------- celebration overlay ---------- */
 #celebration-overlay {
@@ -806,6 +830,46 @@ body.theme-pink   { --accent: #d45d8a; --accent-dark: #b4487a; --bg: #fff0f5; }
   font-size: 1.05rem;
 }
 
+/* ---------- matching quiz ---------- */
+.match-word-bank {
+  background: var(--bg); border: 2px solid var(--accent);
+  border-radius: var(--radius); padding: 0.75rem 1rem;
+  margin-bottom: 1rem; text-align: left;
+}
+.match-bank-list {
+  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
+  margin-top: 0.4rem;
+}
+.match-bank-item { font-size: 0.95rem; }
+.match-instructions { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.75rem; }
+.match-row {
+  display: flex; align-items: center; gap: 0.6rem;
+  text-align: left;
+}
+.match-input {
+  width: 2.6rem; text-align: center; font-size: 1.1rem; font-weight: 700;
+  text-transform: uppercase; border: 2px solid var(--accent);
+  border-radius: 8px; padding: 0.3rem; flex-shrink: 0;
+}
+.match-clue { flex: 1; font-size: 0.95rem; }
+.match-review-row {
+  display: flex; align-items: center; gap: 0.6rem;
+  text-align: left; flex-wrap: wrap;
+}
+.match-blank-badge {
+  display: inline-block; width: 2.2rem; text-align: center;
+  font-size: 1rem; font-weight: 700; border-radius: 6px;
+  padding: 0.15rem 0; flex-shrink: 0;
+}
+.match-blank-badge.correct { background: var(--good-bg); color: var(--good); }
+.match-blank-badge.wrong   { background: var(--bad-bg);  color: var(--bad);  }
+
+/* admin matching pair rows */
+.matching-pair-row {
+  display: grid; grid-template-columns: 1fr 2fr auto;
+  gap: 0.4rem; margin-bottom: 0.4rem; align-items: center;
+}
+
 /* ---------- print list button ---------- */
 .big-btn.print-list {
   background: #6b7280; color: #fff; font-size: 1.2rem;
@@ -828,6 +892,10 @@ body.theme-pink   { --accent: #d45d8a; --accent-dark: #b4487a; --bg: #fff0f5; }
 .theme-swatch.theme-purple { background: #7c5cbf; }
 .theme-swatch.theme-orange { background: #e8802a; }
 .theme-swatch.theme-pink   { background: #d45d8a; }
+.theme-swatch.theme-red    { background: #e84040; }
+.theme-swatch.theme-teal   { background: #20a8a0; }
+.theme-swatch.theme-yellow { background: #c8960c; }
+.theme-swatch.theme-indigo { background: #5b6abf; }
 
 /* ---------- student portal: test history ---------- */
 .thr-heading { margin: 1.5rem 0 0.5rem; font-size: 1rem; }