Public Access
feat: add MyExams, MyResults, Settings, and Workspace components
Release Pipeline / build-and-release (push) Failing after 41s
Release Pipeline / build-and-release (push) Failing after 41s
- Implemented MyExams component for managing user exams, including loading, deleting, and creating new exams. - Created MyResults component to display user results with options to review and delete results. - Developed Settings component for updating user display name and changing password. - Introduced Workspace component to serve as a container for MyExams, MyResults, and Settings, with navigation between tabs.
This commit is contained in:
LaurensBartelds committed
1 parent
ad777ef1c3
commit
62af83ce53
16 files changed
+2192
-47
No files matched your search
@@ -0,0 +1,764 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { apiFetch } from '../utils/api'
|
||||
import type { Exam, Question, QuestionType, Choice, MatchItem } from '../types'
|
||||
|
||||
const QUESTION_TYPES: { value: QuestionType; label: string }[] = [
|
||||
{ value: 'multiple-choice', label: 'Multiple Choice' },
|
||||
{ value: 'multiple-select', label: 'Multiple Select' },
|
||||
{ value: 'short-answer', label: 'Short Answer' },
|
||||
{ value: 'translation', label: 'Translation' },
|
||||
{ value: 'math-input', label: 'Math Input' },
|
||||
{ value: 'essay', label: 'Essay' },
|
||||
{ value: 'match', label: 'Match' },
|
||||
{ value: 'order', label: 'Order' },
|
||||
]
|
||||
|
||||
const BLANK_EXAM: Exam = {
|
||||
title: 'Untitled Exam',
|
||||
subtitle: '',
|
||||
questions: [],
|
||||
}
|
||||
|
||||
function makeBlankQuestion(type: QuestionType, index: number): Question {
|
||||
const id = `q${index + 1}`
|
||||
const base: Question = { id, type, prompt: '', points: 1 }
|
||||
switch (type) {
|
||||
case 'multiple-choice':
|
||||
return { ...base, choices: [{ id: 'a', text: '' }, { id: 'b', text: '' }], answer: 'a' }
|
||||
case 'multiple-select':
|
||||
return { ...base, choices: [{ id: 'a', text: '' }, { id: 'b', text: '' }], answer: [] }
|
||||
case 'short-answer':
|
||||
case 'translation':
|
||||
case 'math-input':
|
||||
return { ...base, answer: '', acceptedForms: [], caseSensitive: false }
|
||||
case 'essay':
|
||||
return { ...base, minWords: 0, rubric: [] }
|
||||
case 'match':
|
||||
return { ...base, left: [], right: [], answer: {} }
|
||||
case 'order':
|
||||
return { ...base, items: [], answer: [] }
|
||||
default:
|
||||
return base
|
||||
}
|
||||
}
|
||||
|
||||
export default function ExamEditor() {
|
||||
const { id: paramId } = useParams<{ id: string }>()
|
||||
const navigate = useNavigate()
|
||||
const isNew = paramId === 'new'
|
||||
const examId = isNew ? null : Number(paramId)
|
||||
|
||||
const [exam, setExam] = useState<Exam>(BLANK_EXAM)
|
||||
const [selectedIdx, setSelectedIdx] = useState(0)
|
||||
const [loading, setLoading] = useState(!isNew)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [saveMsg, setSaveMsg] = useState<string | null>(null)
|
||||
const [hasChanges, setHasChanges] = useState(isNew)
|
||||
|
||||
// Load existing exam
|
||||
useEffect(() => {
|
||||
if (isNew) return
|
||||
setLoading(true)
|
||||
apiFetch<{ exam: Exam }>(`/api/exams/${examId}`)
|
||||
.then((data) => {
|
||||
setExam(data.exam)
|
||||
setHasChanges(false)
|
||||
})
|
||||
.catch((e) => setError((e as Error).message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [examId, isNew])
|
||||
|
||||
const updateExam = useCallback((fn: (draft: Exam) => void) => {
|
||||
setExam((prev) => {
|
||||
const draft = structuredClone(prev)
|
||||
fn(draft)
|
||||
return draft
|
||||
})
|
||||
setHasChanges(true)
|
||||
setSaveMsg(null)
|
||||
}, [])
|
||||
|
||||
const addQuestion = (type: QuestionType) => {
|
||||
updateExam((draft) => {
|
||||
const q = makeBlankQuestion(type, draft.questions.length)
|
||||
draft.questions.push(q)
|
||||
})
|
||||
setSelectedIdx(exam.questions.length)
|
||||
}
|
||||
|
||||
const removeQuestion = (idx: number) => {
|
||||
updateExam((draft) => {
|
||||
draft.questions.splice(idx, 1)
|
||||
})
|
||||
if (selectedIdx >= idx && selectedIdx > 0) {
|
||||
setSelectedIdx(selectedIdx - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const saveExam = async () => {
|
||||
if (!exam.title.trim()) {
|
||||
setError('Exam title is required')
|
||||
return
|
||||
}
|
||||
if (exam.questions.length === 0) {
|
||||
setError('Add at least one question')
|
||||
return
|
||||
}
|
||||
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
if (isNew) {
|
||||
const data = await apiFetch<{ id: number }>('/api/exams', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ exam }),
|
||||
})
|
||||
setSaveMsg('Exam created successfully')
|
||||
setHasChanges(false)
|
||||
navigate(`/exam-editor/${data.id}`, { replace: true })
|
||||
} else {
|
||||
await apiFetch(`/api/exams/${examId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ exam }),
|
||||
})
|
||||
setSaveMsg('Exam saved')
|
||||
setHasChanges(false)
|
||||
}
|
||||
setTimeout(() => setSaveMsg(null), 3000)
|
||||
} catch (e) {
|
||||
setError((e as Error).message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const selectedQuestion = exam.questions[selectedIdx]
|
||||
|
||||
const truncate = (s: string, n = 40) => (s.length > n ? s.slice(0, n) + '…' : s)
|
||||
|
||||
return (
|
||||
<div className="exam-editor-shell">
|
||||
{/* Header */}
|
||||
<header className="exam-editor-header">
|
||||
<div className="exam-editor-header-left">
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => navigate('/workspace/exams')}>
|
||||
← Back
|
||||
</button>
|
||||
<input
|
||||
className="exam-editor-title-input"
|
||||
value={exam.title}
|
||||
onChange={(e) => updateExam((d) => { d.title = e.target.value })}
|
||||
placeholder="Exam title"
|
||||
/>
|
||||
</div>
|
||||
<div className="exam-editor-header-right">
|
||||
{saveMsg && <span className="exam-editor-save-msg">{saveMsg}</span>}
|
||||
{hasChanges && <span className="exam-editor-unsaved">Unsaved changes</span>}
|
||||
<button className="btn btn-primary" onClick={() => void saveExam()} disabled={saving}>
|
||||
{saving ? 'Saving…' : isNew ? 'Create Exam' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<div className="workspace-alert workspace-alert-error exam-editor-alert">
|
||||
<span>{error}</span>
|
||||
<button onClick={() => setError(null)} className="workspace-alert-close">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="exam-editor-loading">Loading…</div>
|
||||
) : (
|
||||
<div className="exam-editor-body">
|
||||
{/* Sidebar */}
|
||||
<aside className="exam-editor-sidebar">
|
||||
<div className="sidebar-section-label">Questions</div>
|
||||
<div className="nav-list">
|
||||
{exam.questions.map((q, i) => (
|
||||
<button
|
||||
key={q.id}
|
||||
className={`nav-item${selectedIdx === i ? ' active' : ''}`}
|
||||
onClick={() => setSelectedIdx(i)}
|
||||
>
|
||||
<span className="nav-item-num">{i + 1}</span>
|
||||
<span className="nav-item-title">{truncate(q.prompt) || 'Untitled'}</span>
|
||||
<span
|
||||
className="exam-editor-q-remove"
|
||||
onClick={(e) => { e.stopPropagation(); removeQuestion(i) }}
|
||||
title="Remove"
|
||||
>
|
||||
✕
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="exam-editor-add">
|
||||
<div className="sidebar-section-label" style={{ marginTop: 24 }}>Add Question</div>
|
||||
<div className="exam-editor-type-grid">
|
||||
{QUESTION_TYPES.map((t) => (
|
||||
<button
|
||||
key={t.value}
|
||||
className="exam-editor-type-btn"
|
||||
onClick={() => addQuestion(t.value)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Editor */}
|
||||
<main className="exam-editor-main">
|
||||
{selectedQuestion ? (
|
||||
<QuestionEditor
|
||||
question={selectedQuestion}
|
||||
onChange={(fn) => {
|
||||
updateExam((draft) => {
|
||||
const q = draft.questions[selectedIdx]
|
||||
if (q) fn(q)
|
||||
})
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="workspace-empty">
|
||||
<div className="workspace-empty-icon">◇</div>
|
||||
<div className="workspace-empty-title">No questions yet</div>
|
||||
<div className="workspace-empty-desc">Select a question type from the sidebar to add your first question.</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Question Editor ─── */
|
||||
|
||||
interface QEProps {
|
||||
question: Question
|
||||
onChange: (fn: (q: Question) => void) => void
|
||||
}
|
||||
|
||||
function QuestionEditor({ question, onChange }: QEProps) {
|
||||
const update = <K extends keyof Question>(key: K, value: Question[K]) => {
|
||||
onChange((q) => { q[key] = value })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="question-form">
|
||||
<div className="question-form-header">
|
||||
<span className="mono faint" style={{ fontSize: 12 }}>Question Editor</span>
|
||||
<span className="q-category" style={{ marginLeft: 'auto' }}>{question.type}</span>
|
||||
</div>
|
||||
|
||||
<div className="question-form-row">
|
||||
<label className="question-form-label">Prompt</label>
|
||||
<textarea
|
||||
className="textarea"
|
||||
value={question.prompt}
|
||||
onChange={(e) => update('prompt', e.target.value)}
|
||||
rows={3}
|
||||
placeholder="Enter the question prompt..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="question-form-row-inline">
|
||||
<div>
|
||||
<label className="question-form-label">Category (optional)</label>
|
||||
<input
|
||||
className="input"
|
||||
value={question.category ?? ''}
|
||||
onChange={(e) => update('category', e.target.value || undefined)}
|
||||
placeholder="e.g. Algebra"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: 100 }}>
|
||||
<label className="question-form-label">Points</label>
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
min={1}
|
||||
value={question.points ?? 1}
|
||||
onChange={(e) => update('points', Math.max(1, Number(e.target.value)))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="question-form-row">
|
||||
<label className="question-form-label">Explanation (optional)</label>
|
||||
<textarea
|
||||
className="textarea"
|
||||
value={question.explanation ?? ''}
|
||||
onChange={(e) => update('explanation', e.target.value || undefined)}
|
||||
rows={2}
|
||||
placeholder="Explanation shown after grading..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type-specific editors */}
|
||||
{question.type === 'multiple-choice' && <MultipleChoiceEditor q={question} onChange={onChange} />}
|
||||
{question.type === 'multiple-select' && <MultipleSelectEditor q={question} onChange={onChange} />}
|
||||
{(question.type === 'short-answer' || question.type === 'translation' || question.type === 'math-input') && (
|
||||
<TextAnswerEditor q={question} onChange={onChange} />
|
||||
)}
|
||||
{question.type === 'translation' && (
|
||||
<div className="question-form-row-inline">
|
||||
<div>
|
||||
<label className="question-form-label">Source Language</label>
|
||||
<input className="input" value={question.sourceLanguage ?? ''} onChange={(e) => update('sourceLanguage', e.target.value || undefined)} placeholder="e.g. English" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="question-form-label">Target Language</label>
|
||||
<input className="input" value={question.targetLanguage ?? ''} onChange={(e) => update('targetLanguage', e.target.value || undefined)} placeholder="e.g. Spanish" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{question.type === 'essay' && <EssayEditor q={question} onChange={onChange} />}
|
||||
{question.type === 'match' && <MatchEditor q={question} onChange={onChange} />}
|
||||
{question.type === 'order' && <OrderEditor q={question} onChange={onChange} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Multiple Choice ─── */
|
||||
|
||||
function MultipleChoiceEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const choices = q.choices ?? []
|
||||
const setChoices = (c: Choice[]) => onChange((q) => { q.choices = c })
|
||||
const setAnswer = (a: string) => onChange((q) => { q.answer = a })
|
||||
|
||||
const addChoice = () => {
|
||||
const nextId = String.fromCharCode(97 + choices.length) // a, b, c...
|
||||
setChoices([...choices, { id: nextId, text: '' }])
|
||||
}
|
||||
|
||||
const removeChoice = (idx: number) => {
|
||||
const next = choices.filter((_, i) => i !== idx)
|
||||
// Renumber
|
||||
const renumbered = next.map((c, i) => ({ ...c, id: String.fromCharCode(97 + i) }))
|
||||
setChoices(renumbered)
|
||||
if (q.answer === choices[idx]?.id) setAnswer(renumbered[0]?.id ?? '')
|
||||
}
|
||||
|
||||
const updateChoice = (idx: number, text: string) => {
|
||||
const next = [...choices]
|
||||
next[idx] = { ...next[idx], text }
|
||||
setChoices(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<label className="question-form-label">Choices</label>
|
||||
<div className="choice-editor-list">
|
||||
{choices.map((c, i) => (
|
||||
<div key={c.id} className="choice-editor-row">
|
||||
<input
|
||||
type="radio"
|
||||
name="mc-answer"
|
||||
checked={q.answer === c.id}
|
||||
onChange={() => setAnswer(c.id)}
|
||||
title="Mark as correct"
|
||||
/>
|
||||
<span className="mono faint" style={{ fontSize: 13, width: 20 }}>{c.id}</span>
|
||||
<input
|
||||
className="input"
|
||||
value={c.text}
|
||||
onChange={(e) => updateChoice(i, e.target.value)}
|
||||
placeholder={`Choice ${c.id}`}
|
||||
/>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => removeChoice(i)} title="Remove">✕</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="btn btn-sm" onClick={addChoice} style={{ marginTop: 8 }}>
|
||||
+ Add Choice
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Multiple Select ─── */
|
||||
|
||||
function MultipleSelectEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const choices = q.choices ?? []
|
||||
const answer = (q.answer as string[]) ?? []
|
||||
const setChoices = (c: Choice[]) => onChange((q) => { q.choices = c })
|
||||
const toggleAnswer = (id: string) => {
|
||||
const next = answer.includes(id) ? answer.filter((a) => a !== id) : [...answer, id]
|
||||
onChange((q) => { q.answer = next })
|
||||
}
|
||||
|
||||
const addChoice = () => {
|
||||
const nextId = String.fromCharCode(97 + choices.length)
|
||||
setChoices([...choices, { id: nextId, text: '' }])
|
||||
}
|
||||
|
||||
const removeChoice = (idx: number) => {
|
||||
const removedId = choices[idx].id
|
||||
const next = choices.filter((_, i) => i !== idx)
|
||||
const renumbered = next.map((c, i) => ({ ...c, id: String.fromCharCode(97 + i) }))
|
||||
setChoices(renumbered)
|
||||
onChange((q) => { q.answer = (q.answer as string[]).filter((a) => a !== removedId) })
|
||||
}
|
||||
|
||||
const updateChoice = (idx: number, text: string) => {
|
||||
const next = [...choices]
|
||||
next[idx] = { ...next[idx], text }
|
||||
setChoices(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<label className="question-form-label">Choices (check correct answers)</label>
|
||||
<div className="choice-editor-list">
|
||||
{choices.map((c, i) => (
|
||||
<div key={c.id} className="choice-editor-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={answer.includes(c.id)}
|
||||
onChange={() => toggleAnswer(c.id)}
|
||||
/>
|
||||
<span className="mono faint" style={{ fontSize: 13, width: 20 }}>{c.id}</span>
|
||||
<input
|
||||
className="input"
|
||||
value={c.text}
|
||||
onChange={(e) => updateChoice(i, e.target.value)}
|
||||
placeholder={`Choice ${c.id}`}
|
||||
/>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => removeChoice(i)} title="Remove">✕</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="btn btn-sm" onClick={addChoice} style={{ marginTop: 8 }}>
|
||||
+ Add Choice
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Text Answer (short, translation, math) ─── */
|
||||
|
||||
function TextAnswerEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const accepted = q.acceptedForms ?? []
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<div className="question-form-row">
|
||||
<label className="question-form-label">Correct Answer</label>
|
||||
<input
|
||||
className="input"
|
||||
value={(q.answer as string) ?? ''}
|
||||
onChange={(e) => onChange((q) => { q.answer = e.target.value })}
|
||||
placeholder="Enter the correct answer"
|
||||
/>
|
||||
</div>
|
||||
<div className="question-form-row">
|
||||
<label className="question-form-label">Accepted Forms (optional alternatives)</label>
|
||||
{accepted.map((form, i) => (
|
||||
<div key={i} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<input
|
||||
className="input"
|
||||
value={form}
|
||||
onChange={(e) => {
|
||||
const next = [...accepted]
|
||||
next[i] = e.target.value
|
||||
onChange((q) => { q.acceptedForms = next })
|
||||
}}
|
||||
placeholder="Alternative answer"
|
||||
/>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => {
|
||||
const next = accepted.filter((_, idx) => idx !== i)
|
||||
onChange((q) => { q.acceptedForms = next })
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => onChange((q) => { q.acceptedForms = [...(q.acceptedForms ?? []), ''] })}
|
||||
style={{ marginTop: 4 }}
|
||||
>
|
||||
+ Add Alternative
|
||||
</button>
|
||||
</div>
|
||||
<div className="question-form-row-inline" style={{ marginTop: 8 }}>
|
||||
<label className="question-form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={q.caseSensitive ?? false}
|
||||
onChange={(e) => onChange((q) => { q.caseSensitive = e.target.checked })}
|
||||
/>
|
||||
Case sensitive
|
||||
</label>
|
||||
<label className="question-form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={q.ignorePunctuation ?? false}
|
||||
onChange={(e) => onChange((q) => { q.ignorePunctuation = e.target.checked })}
|
||||
/>
|
||||
Ignore punctuation
|
||||
</label>
|
||||
<label className="question-form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={q.ignoreAccents ?? false}
|
||||
onChange={(e) => onChange((q) => { q.ignoreAccents = e.target.checked })}
|
||||
/>
|
||||
Ignore accents
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Essay ─── */
|
||||
|
||||
function EssayEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const rubric = q.rubric ?? []
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<div className="question-form-row-inline">
|
||||
<div style={{ width: 140 }}>
|
||||
<label className="question-form-label">Min Words</label>
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
min={0}
|
||||
value={q.minWords ?? 0}
|
||||
onChange={(e) => onChange((q) => { q.minWords = Number(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="question-form-row">
|
||||
<label className="question-form-label">Rubric Criteria</label>
|
||||
{rubric.map((item, i) => (
|
||||
<div key={i} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<input
|
||||
className="input"
|
||||
value={item}
|
||||
onChange={(e) => {
|
||||
const next = [...rubric]
|
||||
next[i] = e.target.value
|
||||
onChange((q) => { q.rubric = next })
|
||||
}}
|
||||
placeholder="Criterion"
|
||||
/>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => {
|
||||
const next = rubric.filter((_, idx) => idx !== i)
|
||||
onChange((q) => { q.rubric = next })
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => onChange((q) => { q.rubric = [...(q.rubric ?? []), ''] })}
|
||||
style={{ marginTop: 4 }}
|
||||
>
|
||||
+ Add Criterion
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Match ─── */
|
||||
|
||||
function MatchEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const left = q.left ?? []
|
||||
const right = q.right ?? []
|
||||
const answer = (q.answer as Record<string, string>) ?? {}
|
||||
|
||||
const addLeft = () => {
|
||||
const id = `l${left.length + 1}`
|
||||
onChange((q) => { q.left = [...left, { id, text: '' }] })
|
||||
}
|
||||
const addRight = () => {
|
||||
const id = `r${right.length + 1}`
|
||||
onChange((q) => { q.right = [...right, { id, text: '' }] })
|
||||
}
|
||||
const removeLeft = (idx: number) => {
|
||||
const removed = left[idx]
|
||||
onChange((q) => {
|
||||
q.left = left.filter((_, i) => i !== idx)
|
||||
const ans = { ...(q.answer as Record<string, string>) }
|
||||
delete ans[removed.id]
|
||||
q.answer = ans
|
||||
})
|
||||
}
|
||||
const removeRight = (idx: number) => {
|
||||
const removed = right[idx]
|
||||
onChange((q) => {
|
||||
q.right = right.filter((_, i) => i !== idx)
|
||||
const ans = { ...(q.answer as Record<string, string>) }
|
||||
for (const k of Object.keys(ans)) {
|
||||
if (ans[k] === removed.id) delete ans[k]
|
||||
}
|
||||
q.answer = ans
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<div className="match-editor-grid">
|
||||
<div>
|
||||
<label className="question-form-label">Left Column</label>
|
||||
{left.map((item, i) => (
|
||||
<div key={item.id} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<input
|
||||
className="input"
|
||||
value={item.text}
|
||||
onChange={(e) => {
|
||||
const next = [...left]
|
||||
next[i] = { ...next[i], text: e.target.value }
|
||||
onChange((q) => { q.left = next })
|
||||
}}
|
||||
placeholder={`Left item ${i + 1}`}
|
||||
/>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => removeLeft(i)}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-sm" onClick={addLeft} style={{ marginTop: 4 }}>+ Add Left</button>
|
||||
</div>
|
||||
<div>
|
||||
<label className="question-form-label">Right Column</label>
|
||||
{right.map((item, i) => (
|
||||
<div key={item.id} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<input
|
||||
className="input"
|
||||
value={item.text}
|
||||
onChange={(e) => {
|
||||
const next = [...right]
|
||||
next[i] = { ...next[i], text: e.target.value }
|
||||
onChange((q) => { q.right = next })
|
||||
}}
|
||||
placeholder={`Right item ${i + 1}`}
|
||||
/>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => removeRight(i)}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-sm" onClick={addRight} style={{ marginTop: 4 }}>+ Add Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{left.length > 0 && right.length > 0 && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<label className="question-form-label">Correct Pairings</label>
|
||||
{left.map((l) => (
|
||||
<div key={l.id} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<span style={{ minWidth: 120, fontSize: 14 }}>{l.text || l.id}</span>
|
||||
<span className="faint">→</span>
|
||||
<select
|
||||
className="input"
|
||||
style={{ width: 200 }}
|
||||
value={answer[l.id] ?? ''}
|
||||
onChange={(e) => {
|
||||
const next = { ...answer, [l.id]: e.target.value }
|
||||
if (!e.target.value) delete next[l.id]
|
||||
onChange((q) => { q.answer = next })
|
||||
}}
|
||||
>
|
||||
<option value="">— Select —</option>
|
||||
{right.map((r) => (
|
||||
<option key={r.id} value={r.id}>{r.text || r.id}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Order ─── */
|
||||
|
||||
function OrderEditor({ q, onChange }: { q: Question; onChange: QEProps['onChange'] }) {
|
||||
const items = q.items ?? []
|
||||
const answer = (q.answer as string[]) ?? []
|
||||
|
||||
const addItem = () => {
|
||||
const id = `s${items.length + 1}`
|
||||
onChange((q) => { q.items = [...items, { id, text: '' }] })
|
||||
}
|
||||
|
||||
const removeItem = (idx: number) => {
|
||||
const removed = items[idx]
|
||||
onChange((q) => {
|
||||
q.items = items.filter((_, i) => i !== idx)
|
||||
q.answer = answer.filter((a) => a !== removed.id)
|
||||
})
|
||||
}
|
||||
|
||||
const moveItem = (idx: number, dir: -1 | 1) => {
|
||||
const next = [...items]
|
||||
const swap = idx + dir
|
||||
if (swap < 0 || swap >= next.length) return
|
||||
;[next[idx], next[swap]] = [next[swap], next[idx]]
|
||||
onChange((q) => { q.items = next })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="question-form-section">
|
||||
<label className="question-form-label">Items (drag not implemented, use arrows to reorder)</label>
|
||||
{items.map((item, i) => (
|
||||
<div key={item.id} className="choice-editor-row" style={{ marginBottom: 6 }}>
|
||||
<span className="mono faint" style={{ fontSize: 12, width: 24 }}>{i + 1}</span>
|
||||
<input
|
||||
className="input"
|
||||
value={item.text}
|
||||
onChange={(e) => {
|
||||
const next = [...items]
|
||||
next[i] = { ...next[i], text: e.target.value }
|
||||
onChange((q) => { q.items = next })
|
||||
}}
|
||||
placeholder={`Item ${i + 1}`}
|
||||
/>
|
||||
<div className="order-editor-controls">
|
||||
<button className="btn btn-ghost btn-sm" disabled={i === 0} onClick={() => moveItem(i, -1)}>↑</button>
|
||||
<button className="btn btn-ghost btn-sm" disabled={i === items.length - 1} onClick={() => moveItem(i, 1)}>↓</button>
|
||||
<button className="btn btn-ghost btn-sm" onClick={() => removeItem(i)}>✕</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-sm" onClick={addItem} style={{ marginTop: 4 }}>+ Add Item</button>
|
||||
|
||||
{items.length > 0 && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<label className="question-form-label">Correct Order</label>
|
||||
<div className="choice-editor-row">
|
||||
{items.map((item, i) => (
|
||||
<span key={item.id} className="mono faint" style={{ fontSize: 13, marginRight: 4 }}>
|
||||
{i + 1}. {item.text || item.id}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="faint" style={{ fontSize: 12, marginTop: 4 }}>
|
||||
The correct order is the order shown above. Reorder items to set the correct sequence.
|
||||
</p>
|
||||
{/* Sync answer to current item order */}
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{ marginTop: 8 }}
|
||||
onClick={() => onChange((q) => { q.answer = items.map((it) => it.id) })}
|
||||
>
|
||||
Set Current Order as Correct
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user