QUESTION {qIdx + 1} / {total}
{submitted && (
{sel === q.correct ? 'CORRECT' : 'INCORRECT'}
)}
{q.q}
{q.options.map((opt, i) => {
const isSel = sel === i;
const isCor = i === q.correct;
let bg = 'var(--surface)', border = '1px solid var(--line)';
let labelBg = 'var(--surface-2)', labelColor = 'var(--ink-2)';
let trailingIcon = null;
if (submitted) {
if (isCor) { bg = 'var(--correct-soft)'; border = '1px solid var(--correct)'; labelBg = 'var(--correct)'; labelColor = '#fff'; trailingIcon =
; }
else if (isSel) { bg = 'var(--wrong-soft)'; border = '1px solid var(--wrong)'; labelBg = 'var(--wrong)'; labelColor = '#fff'; trailingIcon = ; }
} else if (isSel) {
bg = 'var(--primary-soft)'; border = '1px solid var(--primary)';
labelBg = 'var(--primary)'; labelColor = 'var(--primary-ink)';
}
return (
);
})}
);
}
function ReviewBlock({ q, transcript }) {
return (
<>
{score}/{total}
{score === total ? '全對！太厲害了。' : score >= 2 ? '不錯，再練一次。' : '再聽一次試試。'}
{quiz?.title || 'Shipment Delay'} · {quiz?.mins || 1}:23
{questions.map((q, i) => {
const c = answers[i] === q.correct;
return (
);
})}
{/* 2-column stats (no streak) */}
{stats.map((s, i) => (
))}
);
}
// ── REVIEW PAGE ───────────────────────────────────────────────────────────────
function ReviewPage({ go, quiz, userAnswers = null }) {
const [details, setDetails] = useState(null);
useEffect(() => {
if (!quiz) return;
if (quiz.quiz_items) {
setDetails(quiz);
return;
}
const unsub = db.collection('quizzes').doc(quiz.id).collection('details').doc('content').onSnapshot(
snap => setDetails(snap.exists ? snap.data() : null),
console.error
);
return () => unsub();
}, [quiz]);
const questions = (details?.quiz_items || SAMPLE_QUESTIONS).map(item =>
item.question ? {
q: item.question, options: item.options,
correct: item.answer_index, explain: item.explanation,
} : item
);
const transcript = (details?.transcript || SAMPLE_TRANSCRIPT).map(t =>
t.speaker ? {
who: t.speaker === 'Woman' ? 'F' : 'M',
name: t.speaker === 'Woman' ? 'Sarah' : 'Daniel',
text: t.text,
} : t
);
const audioUrl = details?.audio_url || null;
const audioRef = useRef(null);
const [paused, setPaused] = useState(true);
const [currentT, setCurrentT] = useState(0);
const [duration, setDuration] = useState(83);
const [showTranscript, setShowTranscript] = useState(false);
const [expandedExplains, setExpandedExplains] = useState({});
useEffect(() => {
if (!audioUrl) return;
const a = new Audio(audioUrl);
audioRef.current = a;
a.addEventListener('loadedmetadata', () => setDuration(a.duration));
a.addEventListener('timeupdate', () => setCurrentT(a.currentTime));
a.addEventListener('ended', () => setPaused(true));
return () => { a.pause(); };
}, [audioUrl]);
useEffect(() => {
if (audioUrl || paused) return;
const id = setInterval(() => {
setCurrentT(t => {
if (t >= duration) { setPaused(true); return duration; }
return t + 0.5;
});
}, 500);
return () => clearInterval(id);
}, [paused, audioUrl, duration]);
if (!details) {
return seek(-5)} onFwd5={() => seek(5)}
rightAction={
}
/>
);
}
// ── ADMIN PAGE ────────────────────────────────────────────────────────────────
function AdminPage({ go }) {
const [tab, setTab] = useState('upload');
const [stage, setStage] = useState('idle');
const [activeStep, setActiveStep] = useState(0);
const [file, setFile] = useState(null);
const [previewUrl, setPreviewUrl] = useState(null);
const [errorMsg, setErrorMsg] = useState('');
const fileInputRef = useRef();
const steps = [
{ key: 'analyze', label: '分析場景', icon: 'cam' },
{ key: 'write', label: '撰寫對話', icon: 'doc' },
{ key: 'image', label: '生成情境圖', icon: 'sparkles' },
{ key: 'voice', label: '合成語音', icon: 'sound' },
{ key: 'save', label: '儲存測驗', icon: 'check' },
];
const handleFile = async (f) => {
if (!f) return;
const resized = await resizeImage(f, 1024);
setFile(resized);
setPreviewUrl(URL.createObjectURL(resized));
setStage('preview');
setErrorMsg('');
};
const handleDrop = (e) => {
e.preventDefault();
const f = e.dataTransfer.files[0];
if (f && (f.type === 'image/jpeg' || f.type === 'image/png')) handleFile(f);
};
const generate = async () => {
if (stage !== 'preview' || !file) return;
setStage('generating');
setActiveStep(0);
const adminKey = sessionStorage.getItem('vl-admin-key') || '';
if (!BACKEND_URL) {
[1500, 3000, 4500, 6000].forEach((ms, i) => setTimeout(() => setActiveStep(i + 1), ms));
setTimeout(() => setStage('done'), 6500);
return;
}
try {
const form = new FormData();
form.append('image', file);
const res = await fetch(`${BACKEND_URL}/generate`, {
method: 'POST',
headers: { 'Admin-Key': adminKey },
body: form,
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
setStage('done');
} catch (err) {
setStage('error');
setErrorMsg(err.message || '生成失敗，請重試');
}
};
return (
<>
{/* AppBar */}
{/* Tab bar */}
{[['upload', '上傳新測驗'], ['manage', '管理測驗']].map(([k, label]) => (
))}
{/* Upload tab */}
{tab === 'upload' && (
上傳一張
情境照片。
AI 會生成符合場景的多益對話與三題聽力題目
{stage === 'idle' ? (
e.preventDefault()} onClick={() => fileInputRef.current?.click()} style={{ width: '100%', border: '1.5px dashed var(--line)', background: 'var(--surface)', padding: '36px 20px', textAlign: 'center', cursor: 'pointer', borderRadius: 'var(--radius-card)' }}>
點擊上傳 / 拍照
支援 JPG · PNG · 最大 8MB
) : (
{previewUrl &&
}
{stage === 'preview' && (
)}
{file?.name || 'image.jpg'} · {file ? (file.size / 1024 / 1024).toFixed(1) : '?'}MB
{stage === 'preview' ? 'READY' : stage === 'generating' ? 'PROCESSING' : stage === 'done' ? 'COMPLETE' : 'ERROR'}
)}
handleFile(e.target.files[0])}/>
{stage === 'error' && errorMsg && (
{errorMsg}
)}
{(stage === 'generating' || stage === 'done') && (
{steps.map((s, i) => {
const done = stage === 'done' || i < activeStep;
const active = stage === 'generating' && i === activeStep;
return (
{done ? : active ? : {i + 1}}
{s.label}
{done &&
OK}
{active &&
…}
);
})}
)}
{stage === 'done' && (
)}
)}
{/* Manage tab */}
{tab === 'manage' && }
);
}
// ── ADMIN QUIZ LIST ───────────────────────────────────────────────────────────
function AdminQuizList() {
const [quizzes, setQuizzes] = useState(null);
const [deleteId, setDeleteId] = useState(null);
const [deleting, setDeleting] = useState(false);
const [replaceQuiz, setReplaceQuiz] = useState(null);
useEffect(() => {
return db.collection('quizzes').orderBy('created_at', 'desc').onSnapshot(
snap => setQuizzes(snap.docs.map(d => ({ id: d.id, ...d.data() }))),
() => setQuizzes([])
);
}, []);
const handleDelete = async (quiz) => {
setDeleting(true);
const adminKey = sessionStorage.getItem('vl-admin-key') || '';
try {
if (BACKEND_URL) {
const res = await fetch(`${BACKEND_URL}/quiz/${quiz.id}`, {
method: 'DELETE',
headers: { 'Admin-Key': adminKey },
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
}
setDeleteId(null);
} catch (e) {
console.error(e);
} finally {
setDeleting(false);
}
};
if (quizzes === null) {
return
;
}
return (
{quizzes.length} 份測驗
{quizzes.length === 0 && (
)}
{quizzes.map(q => (
{ setDeleteId(q.id); setReplaceQuiz(null); }}
onDeleteConfirm={() => handleDelete(q)}
onDeleteCancel={() => setDeleteId(null)}
onReplaceImage={() => { setReplaceQuiz(q); setDeleteId(null); }}
/>
))}
{replaceQuiz && (
setReplaceQuiz(null)}/>
)}
);
}
function AdminQuizRow({ q, isDeleteConfirm, deleting, onDeleteRequest, onDeleteConfirm, onDeleteCancel, onReplaceImage }) {
return (
{q.image_url &&
}
{isDeleteConfirm && (
確定刪除「{q.title}」？
連同圖片與音檔一併刪除，無法復原。
)}
);
}
// ── REPLACE IMAGE MODAL ───────────────────────────────────────────────────────
function ReplaceImageModal({ quiz, onClose }) {
const [file, setFile] = useState(null);
const [previewUrl, setPreviewUrl] = useState(null);
const [uploading, setUploading] = useState(false);
const [done, setDone] = useState(false);
const fileInputRef = useRef();
const handleFile = async (f) => {
if (!f) return;
const resized = await resizeImage(f, 1024);
setFile(resized);
setPreviewUrl(URL.createObjectURL(resized));
};
const handleConfirm = async () => {
if (!file) return;
setUploading(true);
const adminKey = sessionStorage.getItem('vl-admin-key') || '';
try {
if (BACKEND_URL) {
const form = new FormData();
form.append('image', file);
const res = await fetch(`${BACKEND_URL}/quiz/${quiz.id}/image`, {
method: 'PUT',
headers: { 'Admin-Key': adminKey },
body: form,
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
}
setDone(true);
setTimeout(onClose, 900);
} catch (e) {
console.error(e);
setUploading(false);
}
};
return (
e.stopPropagation()} style={{ background: 'var(--surface)', width: '100%', padding: '20px 20px 32px', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
{!previewUrl ? (
fileInputRef.current?.click()} onDrop={e => { e.preventDefault(); handleFile(e.dataTransfer.files[0]); }} onDragOver={e => e.preventDefault()}
style={{ border: '1.5px dashed var(--line)', borderRadius: 4, padding: '28px 20px', textAlign: 'center', cursor: 'pointer', background: 'var(--bg)' }}>
點擊上傳 / 拖曳圖片
JPG · PNG · 最大 8MB
) : (
{file?.name} · {file ? (file.size / 1024 / 1024).toFixed(1) : '?'}MB
{!uploading && !done && (
)}
{uploading && 上傳中…}
{done && ✓ 已更新}
)}
handleFile(e.target.files[0])}/>
);
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function dockSecBtn() {
return {
width: 44, height: 44, borderRadius: 999,
background: 'var(--surface-2)', color: 'var(--ink-2)',
border: 'none', display: 'grid', placeItems: 'center',
flexShrink: 0, cursor: 'pointer',
};
}
function handleShare(quiz) {
const base = window.location.origin + window.location.pathname;
const url = quiz?.id ? `${base}#quiz=${quiz.id}` : base;
if (navigator.share) {
navigator.share({ title: quiz?.title || 'VisiListen', url }).catch(() => {});
} else {
navigator.clipboard?.writeText(url).catch(() => {});
}
}
// ── Boot ──────────────────────────────────────────────────────────────────────
async function resizeImage(file, maxDim = 1024) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
let { width, height } = img;
if (width > maxDim || height > maxDim) {
const ratio = Math.min(maxDim / width, maxDim / height);
width = Math.round(width * ratio);
height = Math.round(height * ratio);
} else {
return resolve(file);
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
if (blob) {
resolve(new File([blob], file.name, { type: 'image/jpeg', lastModified: Date.now() }));
} else {
resolve(file);
}
}, 'image/jpeg', 0.85);
};
img.onerror = () => resolve(file);
img.src = e.target.result;
};
reader.onerror = () => resolve(file);
reader.readAsDataURL(file);
});
}
ReactDOM.createRoot(document.getElementById('root')).render();
) : (