/* ============================================================ admin.jsx — password-gated question bank manager Exports window.AdminApp ============================================================ */ (function () { const { useState, useEffect, useRef } = React; const S = window.TestStore; const LETTERS = ["A", "B", "C", "D"]; /* ---- helpers ---- */ function fmtDate(iso) { if (!iso) return "—"; const d = new Date(iso); return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) + " " + d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }); } /* ---- CSV helpers ---- */ function csvEsc(val) { const s = String(val == null ? '' : val); return (s.includes(',') || s.includes('"') || s.includes('\n') || s.includes('\r')) ? '"' + s.replace(/"/g, '""') + '"' : s; } function parseCSV(text) { const rows = []; let row = [], field = '', inQ = false, i = 0; const flush = () => { row.push(field); field = ''; }; while (i < text.length) { const c = text[i]; if (inQ) { if (c === '"') { if (text[i + 1] === '"') { field += '"'; i++; } else inQ = false; } else field += c; } else { if (c === '"') { inQ = true; } else if (c === ',') { flush(); } else if (c === '\n' || c === '\r') { flush(); if (row.some(Boolean)) rows.push(row); row = []; if (c === '\r' && text[i + 1] === '\n') i++; } else field += c; } i++; } flush(); if (row.some(Boolean)) rows.push(row); return rows; } function csvToObjects(text) { const rows = parseCSV(text); if (rows.length < 2) return []; const headers = rows[0].map((h) => h.trim().toLowerCase().replace(/\s+/g, '_')); return rows.slice(1) .filter((r) => r.some(Boolean)) .map((r) => { const obj = {}; headers.forEach((h, i) => { obj[h] = (r[i] || '').trim(); }); return obj; }); } function groupCSVRows(rows) { const groups = [], audioMap = {}, passageMap = {}; for (const row of rows) { const af = row.audio_file || ''; const pf = row.passage_file || ''; if (af) { if (!audioMap[af]) { audioMap[af] = []; groups.push(audioMap[af]); } audioMap[af].push(row); } else if (pf) { if (!passageMap[pf]) { passageMap[pf] = []; groups.push(passageMap[pf]); } passageMap[pf].push(row); } else { groups.push([row]); } } return groups; } function mimeFromExt(filename) { const ext = (filename.split('.').pop() || '').toLowerCase(); return ({ mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', m4a: 'audio/mp4', aac: 'audio/aac', webm: 'audio/webm', jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', webp: 'image/webp' })[ext] || 'application/octet-stream'; } /* ---- ZIP export ---- */ async function exportZip() { const zip = new JSZip(); const COLS = ['item_id','part','question','option_a','option_b','option_c','option_d', 'correct','explanation','audio_file','transcript','image_file', 'passage_file','passage_label','passage2_file']; const csvRows = [COLS.map(csvEsc).join(',')]; for (const item of S.allItems()) { const meta = S.PARTS[item.part]; // Audio let audioFile = ''; if (item.audioUrl && item.audioName) { audioFile = item.audioName; const b64 = item.audioUrl.split(',')[1]; if (b64) zip.file(`audio/${audioFile}`, b64, { base64: true }); } // Image (skip SVG placeholders) let imageFile = ''; if (item.imageUrl && !item.imageUrl.startsWith('data:image/svg+xml')) { imageFile = `item_${item.id}.jpg`; const b64 = item.imageUrl.split(',')[1]; if (b64) zip.file(`images/${imageFile}`, b64, { base64: true }); } // Passage let passageFile = '', passage2File = ''; if (item.passage) { passageFile = `passage_${item.id}.txt`; zip.file(`passages/${passageFile}`, item.passage); } if (item.passage2) { passage2File = `passage2_${item.id}.txt`; zip.file(`passages/${passage2File}`, item.passage2); } // One CSV row per question item.questions.forEach((q) => { const opts = q.options.slice(0, meta.options); const row = [ item.id, item.part, meta.stemless ? '' : (q.text || ''), opts[0] || '', opts[1] || '', opts[2] || '', opts[3] || '', ['A','B','C','D'][q.correct] || 'A', q.explanation || '', audioFile, item.transcript || '', imageFile, passageFile, item.passageLabel || '', passage2File, ]; csvRows.push(row.map(csvEsc).join(',')); }); } zip.file('questions.csv', csvRows.join('\r\n')); const blob = await zip.generateAsync({ type: 'blob' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'question-bank.zip'; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); } /* ---- Results ZIP export ---- */ function extFromDataUrl(dataUrl) { const mime = ((dataUrl || '').split(';')[0] || '').split(':')[1] || ''; return ({ 'audio/webm': 'webm', 'audio/ogg': 'ogg', 'audio/mp4': 'm4a', 'audio/mpeg': 'mp3', 'audio/wav': 'wav' })[mime] || 'audio'; } async function exportResultsZip(results) { const zip = new JSZip(); const MAX_SP = 3; const hdrs = [ 'id', 'submitted_at', 'participant_name', 'listening_score', 'listening_correct', 'listening_total', 'reading_score', 'reading_correct', 'reading_total', 'total_score', 'band', 'speaking_graded_by', 'speaking_graded_comment', ]; for (let i = 1; i <= MAX_SP; i++) { hdrs.push( `speaking_Q${i}_prompt`, `speaking_Q${i}_topic`, `speaking_Q${i}_attempted`, `speaking_Q${i}_duration_s`, `speaking_Q${i}_score`, `speaking_Q${i}_audio_file`, ); } const csvRows = [hdrs.map(csvEsc).join(',')]; for (const r of results) { const detail = await S.getResultDetail(r.id); const spItems = detail?.speaking?.items || []; const safeName = (r.participantName || 'anonymous').replace(/[^a-zA-Z0-9_-]/g, '_').slice(0, 30); const row = [ r.id, r.savedAt || '', r.participantName || '', r.listening?.scaled ?? '', r.listening?.correct ?? '', r.listening?.total ?? '', r.reading?.scaled ?? '', r.reading?.correct ?? '', r.reading?.total ?? '', r.totalScaled ?? '', r.band || '', r.speaking?.gradedBy || '', detail?.speaking?.gradedComment || '', ]; for (let i = 0; i < MAX_SP; i++) { const si = spItems[i]; if (!si) { for (let j = 0; j < 6; j++) row.push(''); continue; } const spPrompt = S.getSpeakingItem(si.id); let audioFile = ''; if (si.audioDataUrl) { const ext = extFromDataUrl(si.audioDataUrl); audioFile = `speaking/${safeName}_${r.id.slice(-8)}_Q${i + 1}.${ext}`; const b64 = si.audioDataUrl.split(',')[1]; if (b64) zip.file(audioFile, b64, { base64: true }); } row.push( spPrompt?.prompt || '', spPrompt?.topic || '', si.attempted ? 'yes' : 'no', si.duration ?? '', si.score ?? '', audioFile, ); } csvRows.push(row.map(csvEsc).join(',')); } zip.file('results.csv', csvRows.join('\r\n')); const blob = await zip.generateAsync({ type: 'blob' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'test-results.zip'; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); } /* ---- ZIP import parser ---- */ function buildItemFromGroup(group, fileMap) { const errors = []; const first = group[0]; const part = parseInt(first.part, 10); const meta = S.PARTS[part]; if (!meta) { errors.push(`Invalid part "${first.part}" — skipping group`); return { item: null, errors }; } const item_id = (first.item_id || '').trim() || null; const af = (first.audio_file || '').trim(); const imgf = (first.image_file || '').trim(); const pf = (first.passage_file || '').trim(); const p2f = (first.passage2_file || '').trim(); const questions = group.map((row, gi) => { const opts = [row.option_a, row.option_b, row.option_c, row.option_d] .slice(0, meta.options) .map((o) => String(o || '')); const cIdx = ['A','B','C','D'].indexOf((row.correct || 'A').toUpperCase()); if (cIdx < 0) errors.push(`Part ${part} row ${gi + 1}: unknown correct "${row.correct}" — defaulting to A`); return { id: '', text: meta.stemless ? '' : String(row.question || ''), options: opts, correct: Math.max(0, cIdx), explanation: String(row.explanation || ''), }; }); const item = { id: item_id, part, imageUrl: imgf && fileMap[imgf] ? fileMap[imgf] : (meta.hasImage ? null : null), _newImage: !!(imgf && fileMap[imgf]), _imageFile: imgf, audioUrl: af && fileMap[af] ? fileMap[af] : null, audioName: af || null, transcript: meta.section === 'listening' ? String(first.transcript || '') : null, passage: meta.hasPassage ? (pf && fileMap[pf] != null ? fileMap[pf] : '') : null, passageLabel: meta.hasPassage ? (String(first.passage_label || '') || 'Passage') : null, passage2: (meta.n === 7 && p2f && fileMap[p2f] != null) ? fileMap[p2f] : null, questions, }; return { item, errors }; } async function parseZipImport(zip) { const csvFile = zip.files['questions.csv']; if (!csvFile) throw new Error('questions.csv not found in ZIP'); const csvText = await csvFile.async('string'); const rows = csvToObjects(csvText); if (!rows.length) throw new Error('questions.csv has no data rows'); // Build fileMap: filename → data URL (audio/image) or plain text (passages) const fileMap = {}; for (const [path, zipEntry] of Object.entries(zip.files)) { if (zipEntry.dir) continue; if (path === 'questions.csv') continue; const filename = path.split('/').pop(); if (!filename) continue; if (path.startsWith('passages/')) { fileMap[filename] = await zipEntry.async('string'); } else { const b64 = await zipEntry.async('base64'); const mime = mimeFromExt(filename); fileMap[filename] = `data:${mime};base64,${b64}`; } } const groups = groupCSVRows(rows); const incoming = []; const errors = []; for (const group of groups) { const { item, errors: errs } = buildItemFromGroup(group, fileMap); errors.push(...errs); if (item) incoming.push(item); } return { incoming, errors }; } /* ---- Diff computation ---- */ function getItemChanges(existing, incoming) { const CH = []; function chk(label, a, b) { if (String(a || '').trim() !== String(b || '').trim()) CH.push(label); } const maxQ = Math.max(existing.questions.length, incoming.questions.length); for (let i = 0; i < maxQ; i++) { const eq = existing.questions[i], iq = incoming.questions[i]; if (!eq) { CH.push(`Q${i+1} added`); continue; } if (!iq) { CH.push(`Q${i+1} removed`); continue; } chk(`Q${i+1} text`, eq.text, iq.text); eq.options.forEach((o, j) => chk(`Q${i+1} option ${LETTERS[j]}`, o, iq.options[j])); chk(`Q${i+1} correct`, ['A','B','C','D'][eq.correct], ['A','B','C','D'][iq.correct]); chk(`Q${i+1} explanation`, eq.explanation, iq.explanation); } chk('audio', existing.audioName, incoming.audioName); if (incoming._newImage) CH.push('image'); else if (!!existing.imageUrl !== !!incoming.imageUrl) CH.push('image removed'); chk('transcript', existing.transcript, incoming.transcript); chk('passage', existing.passage, incoming.passage); chk('passage2', existing.passage2, incoming.passage2); chk('passage label', existing.passageLabel, incoming.passageLabel); return CH; } function computeDiff(incoming, parseErrors) { const updated = [], unchanged = [], inserted = [], errors = parseErrors || []; for (const item of incoming) { if (!item.id) { inserted.push(item); continue; } const existing = S.getItem(item.id); if (!existing) { inserted.push(item); continue; } const changes = getItemChanges(existing, item); if (changes.length) updated.push({ incoming: item, existing, changes }); else unchanged.push(item); } return { updated, unchanged, inserted, errors }; } /* ---- Template download ---- */ async function downloadTemplate() { const zip = new JSZip(); const HEADER = 'item_id,part,question,option_a,option_b,option_c,option_d,correct,explanation,audio_file,transcript,image_file,passage_file,passage_label,passage2_file'; const rows = [ // Part 1 `,1,,She is typing on a keyboard.,She is reading a book.,She is talking on the phone.,She is walking away.,A,The woman is at a desk with her hands on the keyboard.,photo1.mp3,"(A) She is typing on a keyboard. (B) She is reading a book. (C) She is talking on the phone. (D) She is walking away.",photo1.jpg,,`, // Part 2 `,2,,It's on your desk.,Around three o'clock.,"Yes, I reported it.",,A,Answers a where question.,part2_q1.mp3,"Where did you put the report? (A) It's on your desk. (B) Around three o'clock. (C) Yes, I reported it.",,, `, // Part 3 rows (same audio_file = same group) `,3,What are the speakers discussing?,A rental apartment,A job interview,A hotel room,A restaurant,A,The man asks about the listed apartment.,conversation1.mp3,"Man: Is the apartment on Oak Street still available? Woman: Yes it is. Would you like to see it?",,, `, `,3,When will they meet?,Saturday at 2 pm,Friday morning,Sunday at noon,Monday evening,A,They agree on Saturday at two.,conversation1.mp3,,,,`, // Part 4 rows (same audio_file = same group) `,4,What is the announcement about?,A flight delay,A gate change,A boarding call,A cancellation,A,It announces a delay of forty minutes.,announcement1.mp3,"Attention passengers: Flight 482 has been delayed by approximately forty minutes.",,, `, `,4,What is the new boarding time?,4:15,4:50,3:00,5:00,A,New boarding time is stated as 4:15.,announcement1.mp3,,,,`, // Part 5 `,5,"The new software has significantly improved the ______ of the reports.",accurate,accuracy,accurately,accurateness,B,A noun is needed after the of.,,,,, `, // Part 6 rows (same passage_file = same group) `,6,(1),began,begins,begin,beginning,B,Present simple fits the scheduled future event.,,,,notice1.txt,Notice, `, `,6,(2),may,must not,should have,would have,A,may grants permission to use the lot.,,,,notice1.txt,, `, `,6,(3),"The elevator is also out of service.","Thank you for your cooperation.","Rent is due on the first.","The pool reopens in June.",B,A polite closing fits the apology.,,,,notice1.txt,, `, // Part 7 rows (same passage_file = same group) `,7,What is the purpose of the e-mail?,To request volunteers,To confirm an office move,To announce a holiday,To introduce new staff,B,The e-mail confirms the relocation to 50 Harbor Street.,,,,email1.txt,E-mail, `, `,7,When will packing boxes be delivered?,March 11,March 14,March 15,March 20,A,Boxes are delivered to each desk on March 11.,,,,email1.txt,, `, ]; zip.file('questions.csv', [HEADER, ...rows].join('\r\n')); zip.file('passages/notice1.txt', 'To all building tenants:\n\nThe parking garage will be closed for resurfacing next weekend. ' + 'The work is expected to ______ (1) on Saturday morning and finish by Sunday evening. ' + 'During this time, tenants ______ (2) use the temporary lot on Maple Avenue at no charge. ' + 'We apologize for any inconvenience. ______ (3)\n\n— Building Management' ); zip.file('passages/email1.txt', 'From: Daniel Ortiz, Facilities\nTo: All Staff\nSubject: Office Relocation\n\n' + 'Dear colleagues,\n\nI\'m writing to confirm that our office will move to 50 Harbor Street on March 14. ' + 'Packing boxes will be delivered to each desk on March 11. ' + 'Please label your boxes clearly with your name and department.\n\nBest regards,\nDaniel' ); zip.file('README.txt', 'QUESTION BANK TEMPLATE\n' + '======================\n\n' + 'HOW TO USE\n' + '----------\n' + '1. Open questions.csv in Excel or Google Sheets.\n' + '2. Fill in one row per question. For group items (Parts 3, 4, 6, 7),\n' + ' use the SAME filename in audio_file or passage_file for all rows\n' + ' that share the same stimulus. That groups them into one item.\n' + '3. Place audio files in the audio/ folder, images in images/,\n' + ' passage text files (.txt) in passages/.\n' + ' Filenames must exactly match what you wrote in the CSV.\n' + '4. Re-ZIP the folder and import via Admin > Import.\n\n' + 'COLUMN REFERENCE\n' + '----------------\n' + 'item_id : Leave blank for new items. Filled automatically on export.\n' + ' Re-import with item_id to update existing questions in place.\n' + 'part : 1-7 (see Part Guide below)\n' + 'question : Question text. Leave blank for Part 1 (no question stem).\n' + 'option_a-d : Answer choices. Part 2 uses only A-C (leave option_d blank).\n' + 'correct : A / B / C / D\n' + 'explanation : Shown in the answer review screen. Optional.\n' + 'audio_file : Filename of audio in the audio/ folder (Parts 1-4).\n' + ' Rows sharing the same audio_file form one grouped item.\n' + 'transcript : Spoken script text. Used for TTS if no audio file.\n' + 'image_file : Filename of image in the images/ folder (Part 1 only).\n' + 'passage_file : Filename of .txt in the passages/ folder (Parts 6-7).\n' + ' Rows sharing the same passage_file form one grouped item.\n' + 'passage_label : Label shown above passage e.g. "E-mail" "Notice". Parts 6-7.\n' + 'passage2_file : Optional second passage file for double-passage Part 7 items.\n\n' + 'PART GUIDE\n' + '----------\n' + 'Part 1 Listening Photographs 1 Q per item 4 options\n' + 'Part 2 Listening Question-Response 1 Q per item 3 options\n' + 'Part 3 Listening Conversations 2-5 Q / group 4 options\n' + 'Part 4 Listening Talks 2-5 Q / group 4 options\n' + 'Part 5 Reading Incomplete Sentence 1 Q per item 4 options\n' + 'Part 6 Reading Text Completion 3 Q / group 4 options\n' + 'Part 7 Reading Reading Comprehens. 2-5 Q / group 4 options\n' ); const blob = await zip.generateAsync({ type: 'blob' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'question-bank-template.zip'; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); } /* ---------------- Password gate ---------------- */ function Gate({ onUnlock }) { const [pw, setPw] = useState(""); const [err, setErr] = useState(false); const ref = useRef(null); useEffect(() => { ref.current && ref.current.focus(); }, []); function submit(e) { e.preventDefault(); if (pw === S.getSettings().adminPassword) onUnlock(); else { setErr(true); setPw(""); } } return (

Admin Access

Enter the administrator password to manage questions.

{ setPw(e.target.value); setErr(false); }} style={err ? { borderColor: "var(--incorrect)", boxShadow: "0 0 0 3px var(--incorrect-soft)" } : null} /> {err &&

Incorrect password. Try again.

}
); } /* ---------------- File → data URL ---------------- */ function readAsDataURL(file) { return new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); }); } /* ---------------- Upload controls ---------------- */ function ImageUpload({ value, onChange }) { const ref = useRef(null); async function pick(e) { const f = e.target.files[0]; if (!f) return; onChange(await readAsDataURL(f)); } return (
{value ? :
No image
}
{value && }
); } function AudioUpload({ value, name, onChange }) { const ref = useRef(null); async function pick(e) { const f = e.target.files[0]; if (!f) return; onChange(await readAsDataURL(f), f.name); } return (
{value ? (name || "Audio attached") : "No audio — transcript used for speech synthesis"}
{value && }
); } /* ---------------- MC Question editor ---------------- */ function QuestionEditor({ q, meta, index, total, onChange, onRemove }) { const set = (patch) => onChange({ ...q, ...patch }); const setOpt = (i, v) => { const o = [...q.options]; o[i] = v; set({ options: o }); }; return (
Question {index + 1}{total > 1 ? ` of ${total}` : ""} {total > 1 && }
{!meta.stemless && (