feat: UI revamp with sidebar nav and grouped library
Replace top Nav with Sidebar, add lib/group.js for library grouping, tokenized color/alert styles, and tighter Settings/Canvas export layout. Adds @tabler/icons-react. Verified production build (standalone) passes, so the Docker image built from this tree matches the local app. Co-authored-by: Claude <claude-code@anthropic.com>
This commit is contained in:
bizzle
+222
-192
@@ -1,7 +1,12 @@
|
||||
"use client";
|
||||
// components/QuestionCard.jsx — edit any question inline, with the answer key
|
||||
// styled in red pen and grading-stamp verification badges.
|
||||
// components/QuestionCard.jsx — one question rendered as a row in the editor
|
||||
// document: a left rail (drag grip + number), the prompt/options in the center,
|
||||
// and the answer key in the right margin, styled in red pen.
|
||||
import { useState } from "react";
|
||||
import {
|
||||
IconGripVertical, IconArrowUp, IconArrowDown, IconRefresh, IconX,
|
||||
IconCircleCheck, IconAlertTriangle, IconArrowRight,
|
||||
} from "@tabler/icons-react";
|
||||
import { questionTypeLabel } from "@/lib/schema";
|
||||
|
||||
const LETTERS = "ABCDEFGHIJ";
|
||||
@@ -10,218 +15,243 @@ function AutoTextarea({ value, onChange, rows = 2, ...rest }) {
|
||||
return <textarea value={value || ""} rows={rows} onChange={(e) => onChange(e.target.value)} {...rest} />;
|
||||
}
|
||||
|
||||
export default function QuestionCard({ q, index, count, onChange, onMove, onDelete, onRegenerate, busy }) {
|
||||
export default function QuestionCard({
|
||||
q, index, count, onChange, onMove, onDelete, onRegenerate, busy,
|
||||
dragging, over, onDragStart, onDragEnter, onDrop, onDragEnd,
|
||||
}) {
|
||||
const [regenOpen, setRegenOpen] = useState(false);
|
||||
const [note, setNote] = useState("");
|
||||
const [grabbed, setGrabbed] = useState(false);
|
||||
|
||||
function set(patch) {
|
||||
onChange({ ...q, ...patch, verification: patch.verification || { status: "unchecked", note: "" } });
|
||||
}
|
||||
// Editing content invalidates the old verification stamp (set() above resets it),
|
||||
// but pure point changes shouldn't:
|
||||
function setPoints(points) {
|
||||
onChange({ ...q, points });
|
||||
}
|
||||
function setPoints(points) { onChange({ ...q, points }); }
|
||||
|
||||
const v = q.verification || { status: "unchecked" };
|
||||
const hasMargin = q.type !== "matching"; // matching edits pairs in the center; others use the margin
|
||||
|
||||
return (
|
||||
<div className="card qcard">
|
||||
<div className="qcard-head">
|
||||
<span className="qnum">{index + 1}.</span>
|
||||
<span className="chip chip-neutral">{questionTypeLabel(q.type)}</span>
|
||||
{v.status === "pass" && <span className="stamp stamp-pass" title="The accuracy check confirmed this answer against your source.">✓ Verified</span>}
|
||||
{v.status === "warn" && <span className="stamp stamp-warn" title={v.note}>⚠ Check this</span>}
|
||||
<span className="qcard-actions">
|
||||
<label className="small muted" style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
|
||||
<input className="points-input" type="number" min="0" max="100" value={q.points}
|
||||
onChange={(e) => setPoints(Math.max(0, Number(e.target.value) || 0))} aria-label="Points" />
|
||||
pts
|
||||
</label>
|
||||
<button className="icon-btn" title="Move up" disabled={index === 0 || busy} onClick={() => onMove(-1)}>↑</button>
|
||||
<button className="icon-btn" title="Move down" disabled={index === count - 1 || busy} onClick={() => onMove(1)}>↓</button>
|
||||
<button className="icon-btn" title="Regenerate this question" disabled={busy} onClick={() => setRegenOpen((o) => !o)}>↻</button>
|
||||
<button className="icon-btn danger" title="Delete question" disabled={busy} onClick={onDelete}>✕</button>
|
||||
</span>
|
||||
<div
|
||||
className={`qrow${dragging ? " dragging" : ""}${over ? " drag-over" : ""}`}
|
||||
draggable={grabbed}
|
||||
onDragStart={(e) => { e.dataTransfer.effectAllowed = "move"; onDragStart?.(); }}
|
||||
onDragEnter={(e) => { e.preventDefault(); onDragEnter?.(); }}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => { e.preventDefault(); onDrop?.(); }}
|
||||
onDragEnd={() => { setGrabbed(false); onDragEnd?.(); }}
|
||||
>
|
||||
{/* ---- left rail: drag grip + number ---- */}
|
||||
<div className="qrail">
|
||||
<button
|
||||
className="qgrip"
|
||||
title="Drag to reorder"
|
||||
aria-label={`Drag question ${index + 1} to reorder`}
|
||||
onMouseDown={() => setGrabbed(true)}
|
||||
onMouseUp={() => setGrabbed(false)}
|
||||
onBlur={() => setGrabbed(false)}
|
||||
disabled={busy}
|
||||
>
|
||||
<IconGripVertical size={18} />
|
||||
</button>
|
||||
<span className="qnum">{index + 1}</span>
|
||||
</div>
|
||||
|
||||
{v.status === "warn" && v.note && (
|
||||
<div className="alert alert-warn" style={{ marginTop: 0 }}><b>Accuracy reviewer:</b> {v.note}</div>
|
||||
)}
|
||||
{/* ---- center: meta, prompt, student-facing body ---- */}
|
||||
<div className="qmain">
|
||||
<div className="qcard-head">
|
||||
<span className="chip chip-pill chip-neutral">{questionTypeLabel(q.type)}</span>
|
||||
{v.status === "pass" && <span className="stamp stamp-pass" title="The accuracy check confirmed this answer against your source."><IconCircleCheck size={13} /> Verified</span>}
|
||||
{v.status === "warn" && <span className="stamp stamp-warn" title={v.note}><IconAlertTriangle size={13} /> Check this</span>}
|
||||
<span className="qcard-actions">
|
||||
<label className="small muted" style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
|
||||
<input className="points-input" type="number" min="0" max="100" value={q.points}
|
||||
onChange={(e) => setPoints(Math.max(0, Number(e.target.value) || 0))} aria-label="Points" />
|
||||
pts
|
||||
</label>
|
||||
<button className="icon-btn" title="Move up" aria-label="Move up" disabled={index === 0 || busy} onClick={() => onMove(-1)}><IconArrowUp size={16} /></button>
|
||||
<button className="icon-btn" title="Move down" aria-label="Move down" disabled={index === count - 1 || busy} onClick={() => onMove(1)}><IconArrowDown size={16} /></button>
|
||||
<button className="icon-btn" title="Regenerate this question" aria-label="Regenerate" disabled={busy} onClick={() => setRegenOpen((o) => !o)}><IconRefresh size={16} /></button>
|
||||
<button className="icon-btn danger" title="Delete question" aria-label="Delete" disabled={busy} onClick={onDelete}><IconX size={16} /></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{regenOpen && (
|
||||
<div className="alert alert-info" style={{ marginTop: 0 }}>
|
||||
<div className="field-label">Regenerate this question from your source</div>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
<input type="text" placeholder="Optional note to steer it — e.g. make it harder, focus on the causes" value={note}
|
||||
onChange={(e) => setNote(e.target.value)} style={{ flex: 1, minWidth: 200 }} />
|
||||
<button className="btn btn-primary btn-sm" disabled={busy} onClick={() => { onRegenerate(note); setRegenOpen(false); setNote(""); }}>
|
||||
{busy ? <><span className="spinner" /> Working…</> : "Regenerate"}
|
||||
</button>
|
||||
<button className="btn btn-sm" onClick={() => setRegenOpen(false)}>Cancel</button>
|
||||
{v.status === "warn" && v.note && (
|
||||
<div className="alert alert-warn" style={{ marginTop: 0 }}><IconAlertTriangle size={17} /> <span><b>Accuracy reviewer:</b> {v.note}</span></div>
|
||||
)}
|
||||
|
||||
{regenOpen && (
|
||||
<div className="alert alert-info" style={{ marginTop: 0, display: "block" }}>
|
||||
<div className="field-label">Regenerate this question from your source</div>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
<input type="text" placeholder="Optional note to steer it — e.g. make it harder, focus on the causes" value={note}
|
||||
onChange={(e) => setNote(e.target.value)} style={{ flex: 1, minWidth: 200 }} />
|
||||
<button className="btn btn-primary btn-sm" disabled={busy} onClick={() => { onRegenerate(note); setRegenOpen(false); setNote(""); }}>
|
||||
{busy ? <><span className="spinner" /> Working…</> : "Regenerate"}
|
||||
</button>
|
||||
<button className="btn btn-sm" onClick={() => setRegenOpen(false)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Question prompt */}
|
||||
<AutoTextarea
|
||||
value={q.question}
|
||||
onChange={(question) => set({ question })}
|
||||
rows={q.type === "essay" || q.type === "discussion" ? 3 : 2}
|
||||
aria-label="Question text"
|
||||
placeholder={q.type === "fill_blank" ? "Sentence with ______ (six underscores) for each blank" : "Question text…"}
|
||||
/>
|
||||
<AutoTextarea
|
||||
className="q-prompt"
|
||||
value={q.question}
|
||||
onChange={(question) => set({ question })}
|
||||
rows={q.type === "essay" || q.type === "discussion" ? 3 : 2}
|
||||
aria-label="Question text"
|
||||
placeholder={q.type === "fill_blank" ? "Sentence with ______ (six underscores) for each blank" : "Question text…"}
|
||||
/>
|
||||
|
||||
{/* ---- type-specific bodies ---- */}
|
||||
{q.type === "multiple_choice" && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{(q.options || []).map((opt, i) => (
|
||||
<div className="opt-row" key={i}>
|
||||
<input
|
||||
type="radio" name={"correct-" + q.id} checked={q.correctIndex === i}
|
||||
onChange={() => set({ correctIndex: i })}
|
||||
title="Mark as the correct answer"
|
||||
/>
|
||||
<span className="opt-letter">{LETTERS[i]}.</span>
|
||||
<input type="text" value={opt} onChange={(e) => {
|
||||
const options = [...q.options]; options[i] = e.target.value; set({ options });
|
||||
}} placeholder={"Option " + LETTERS[i]} />
|
||||
<button className="icon-btn danger" title="Remove option" disabled={q.options.length <= 2}
|
||||
onClick={() => {
|
||||
const options = q.options.filter((_, j) => j !== i);
|
||||
let correctIndex = q.correctIndex;
|
||||
if (correctIndex === i) correctIndex = 0;
|
||||
else if (correctIndex > i) correctIndex -= 1;
|
||||
set({ options, correctIndex });
|
||||
}}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
{(q.options || []).length < 6 && (
|
||||
<button className="btn btn-sm" style={{ marginTop: 4 }} onClick={() => set({ options: [...q.options, ""] })}>+ Add option</button>
|
||||
)}
|
||||
<div className="field-hint">The <span className="redpen">red radio</span> marks the correct answer.</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "true_false" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key</span>
|
||||
<label className="check" style={{ margin: "2px 0", display: "inline-flex", marginRight: 18 }}>
|
||||
<input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === true} onChange={() => set({ correctAnswer: true })} />
|
||||
<span>True</span>
|
||||
</label>
|
||||
<label className="check" style={{ margin: "2px 0", display: "inline-flex" }}>
|
||||
<input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === false} onChange={() => set({ correctAnswer: false })} />
|
||||
<span>False</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "short_answer" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — sample answer</span>
|
||||
<AutoTextarea value={q.sampleAnswer} onChange={(sampleAnswer) => set({ sampleAnswer })} rows={2} placeholder="A model answer…" />
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Must-include points (one per line)</span>
|
||||
<AutoTextarea
|
||||
value={(q.keyPoints || []).join("\n")}
|
||||
onChange={(text) => set({ keyPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })}
|
||||
rows={2} placeholder={"point 1\npoint 2"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "essay" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — sample response</span>
|
||||
<AutoTextarea value={q.sampleResponse} onChange={(sampleResponse) => set({ sampleResponse })} rows={4} placeholder="A strong model response or outline…" />
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Rubric</span>
|
||||
{(q.rubric || []).map((r, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", flexWrap: "wrap" }}>
|
||||
<input type="text" value={r.criterion} placeholder="Criterion" style={{ flex: 2, minWidth: 140 }}
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, criterion: e.target.value } : x); set({ rubric }); }} />
|
||||
<input type="number" className="points-input" value={r.points} min="0" title="Points"
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, points: Math.max(0, Number(e.target.value) || 0) } : x); set({ rubric }); }} />
|
||||
<input type="text" value={r.description} placeholder="What earns full points" style={{ flex: 3, minWidth: 160 }}
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, description: e.target.value } : x); set({ rubric }); }} />
|
||||
<button className="icon-btn danger" onClick={() => set({ rubric: q.rubric.filter((_, j) => j !== i) })}>✕</button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-sm" onClick={() => set({ rubric: [...(q.rubric || []), { criterion: "", points: 0, description: "" }] })}>+ Add criterion</button>
|
||||
{(q.rubric || []).length > 0 && (
|
||||
<div className="field-hint">Rubric total: {(q.rubric || []).reduce((s, r) => s + (Number(r.points) || 0), 0)} / question points: {q.points}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "fill_blank" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — one answer per blank, in order</span>
|
||||
{(q.answers || []).map((a, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, alignItems: "center", margin: "5px 0" }}>
|
||||
<span className="opt-letter">{i + 1}.</span>
|
||||
<input type="text" value={a} onChange={(e) => { const answers = [...q.answers]; answers[i] = e.target.value; set({ answers }); }} />
|
||||
</div>
|
||||
))}
|
||||
<div className="field-hint">
|
||||
Blanks found in the question: {(String(q.question).match(/_{3,}/g) || []).length}.
|
||||
{" "}
|
||||
<button className="btn btn-sm" onClick={() => {
|
||||
const blanks = (String(q.question).match(/_{3,}/g) || []).length || 1;
|
||||
const answers = Array.from({ length: blanks }, (_, i) => q.answers?.[i] || "");
|
||||
set({ answers });
|
||||
}}>Match answer slots to blanks</button>
|
||||
{q.type === "multiple_choice" && (
|
||||
<div style={{ marginTop: 10 }}>
|
||||
{(q.options || []).map((opt, i) => (
|
||||
<div className="opt-row" key={i}>
|
||||
<input type="radio" name={"correct-" + q.id} checked={q.correctIndex === i}
|
||||
onChange={() => set({ correctIndex: i })} title="Mark as the correct answer" />
|
||||
<span className="opt-letter">{LETTERS[i]}.</span>
|
||||
<input type="text" value={opt} onChange={(e) => { const options = [...q.options]; options[i] = e.target.value; set({ options }); }} placeholder={"Option " + LETTERS[i]} />
|
||||
<button className="icon-btn danger" title="Remove option" aria-label="Remove option" disabled={q.options.length <= 2}
|
||||
onClick={() => {
|
||||
const options = q.options.filter((_, j) => j !== i);
|
||||
let correctIndex = q.correctIndex;
|
||||
if (correctIndex === i) correctIndex = 0;
|
||||
else if (correctIndex > i) correctIndex -= 1;
|
||||
set({ options, correctIndex });
|
||||
}}><IconX size={15} /></button>
|
||||
</div>
|
||||
))}
|
||||
{(q.options || []).length < 6 && (
|
||||
<button className="btn btn-sm" style={{ marginTop: 6 }} onClick={() => set({ options: [...q.options, ""] })}>+ Add option</button>
|
||||
)}
|
||||
<div className="field-hint">The <span className="redpen">red radio</span> marks the correct answer.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{q.type === "matching" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — correct pairs (the student copy shuffles the right column)</span>
|
||||
{(q.pairs || []).map((p, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<input type="text" value={p.left} placeholder="Left item" style={{ flex: 1, minWidth: 130 }}
|
||||
onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, left: e.target.value } : x); set({ pairs }); }} />
|
||||
<span className="muted">→</span>
|
||||
<input type="text" value={p.right} placeholder="Matches with" style={{ flex: 1, minWidth: 130 }}
|
||||
onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, right: e.target.value } : x); set({ pairs }); }} />
|
||||
<button className="icon-btn danger" disabled={(q.pairs || []).length <= 2} onClick={() => set({ pairs: q.pairs.filter((_, j) => j !== i) })}>✕</button>
|
||||
{q.type === "matching" && (
|
||||
<div className="answer-key" style={{ marginTop: 12 }}>
|
||||
<span className="ak-label">Answer key — correct pairs (the student copy shuffles the right column)</span>
|
||||
{(q.pairs || []).map((p, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", alignItems: "center", flexWrap: "wrap" }}>
|
||||
<input type="text" value={p.left} placeholder="Left item" style={{ flex: 1, minWidth: 130 }}
|
||||
onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, left: e.target.value } : x); set({ pairs }); }} />
|
||||
<IconArrowRight size={16} className="muted" />
|
||||
<input type="text" value={p.right} placeholder="Matches with" style={{ flex: 1, minWidth: 130 }}
|
||||
onChange={(e) => { const pairs = q.pairs.map((x, j) => j === i ? { ...x, right: e.target.value } : x); set({ pairs }); }} />
|
||||
<button className="icon-btn danger" aria-label="Remove pair" disabled={(q.pairs || []).length <= 2} onClick={() => set({ pairs: q.pairs.filter((_, j) => j !== i) })}><IconX size={15} /></button>
|
||||
</div>
|
||||
))}
|
||||
{(q.pairs || []).length < 10 && (
|
||||
<button className="btn btn-sm" onClick={() => set({ pairs: [...q.pairs, { left: "", right: "" }] })}>+ Add pair</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.sourceRef ? (
|
||||
<p className="small muted" style={{ margin: "12px 0 0" }}><b style={{ fontWeight: 600 }}>Source:</b> “{q.sourceRef}”</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* ---- right margin: the answer key, in red pen ---- */}
|
||||
{hasMargin && (
|
||||
<div className="qmargin">
|
||||
{q.type === "multiple_choice" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key</span>
|
||||
<p style={{ margin: 0, fontWeight: 600, color: "var(--redpen-ink)" }}>
|
||||
Correct: <span className="redpen">{LETTERS[q.correctIndex] || "?"}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "true_false" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key</span>
|
||||
<label className="check" style={{ margin: "2px 0", display: "inline-flex", marginRight: 18 }}>
|
||||
<input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === true} onChange={() => set({ correctAnswer: true })} />
|
||||
<span>True</span>
|
||||
</label>
|
||||
<label className="check" style={{ margin: "2px 0", display: "inline-flex" }}>
|
||||
<input type="radio" name={"tf-" + q.id} checked={q.correctAnswer === false} onChange={() => set({ correctAnswer: false })} />
|
||||
<span>False</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "short_answer" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — sample answer</span>
|
||||
<AutoTextarea value={q.sampleAnswer} onChange={(sampleAnswer) => set({ sampleAnswer })} rows={2} placeholder="A model answer…" />
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Must-include points (one per line)</span>
|
||||
<AutoTextarea value={(q.keyPoints || []).join("\n")}
|
||||
onChange={(text) => set({ keyPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })}
|
||||
rows={2} placeholder={"point 1\npoint 2"} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "essay" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — sample response</span>
|
||||
<AutoTextarea value={q.sampleResponse} onChange={(sampleResponse) => set({ sampleResponse })} rows={4} placeholder="A strong model response or outline…" />
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Rubric</span>
|
||||
{(q.rubric || []).map((r, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, margin: "5px 0", flexWrap: "wrap" }}>
|
||||
<input type="text" value={r.criterion} placeholder="Criterion" style={{ flex: 2, minWidth: 120 }}
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, criterion: e.target.value } : x); set({ rubric }); }} />
|
||||
<input type="number" className="points-input" value={r.points} min="0" title="Points"
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, points: Math.max(0, Number(e.target.value) || 0) } : x); set({ rubric }); }} />
|
||||
<input type="text" value={r.description} placeholder="What earns full points" style={{ flex: 3, minWidth: 140 }}
|
||||
onChange={(e) => { const rubric = q.rubric.map((x, j) => j === i ? { ...x, description: e.target.value } : x); set({ rubric }); }} />
|
||||
<button className="icon-btn danger" aria-label="Remove criterion" onClick={() => set({ rubric: q.rubric.filter((_, j) => j !== i) })}><IconX size={15} /></button>
|
||||
</div>
|
||||
))}
|
||||
<button className="btn btn-sm" onClick={() => set({ rubric: [...(q.rubric || []), { criterion: "", points: 0, description: "" }] })}>+ Add criterion</button>
|
||||
{(q.rubric || []).length > 0 && (
|
||||
<div className="field-hint">Rubric total: {(q.rubric || []).reduce((s, r) => s + (Number(r.points) || 0), 0)} / question points: {q.points}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "fill_blank" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Answer key — one per blank, in order</span>
|
||||
{(q.answers || []).map((a, i) => (
|
||||
<div key={i} style={{ display: "flex", gap: 7, alignItems: "center", margin: "5px 0" }}>
|
||||
<span className="opt-letter">{i + 1}.</span>
|
||||
<input type="text" value={a} onChange={(e) => { const answers = [...q.answers]; answers[i] = e.target.value; set({ answers }); }} />
|
||||
</div>
|
||||
))}
|
||||
<div className="field-hint">
|
||||
Blanks in the question: {(String(q.question).match(/_{3,}/g) || []).length}.{" "}
|
||||
<button className="btn btn-sm" onClick={() => {
|
||||
const blanks = (String(q.question).match(/_{3,}/g) || []).length || 1;
|
||||
const answers = Array.from({ length: blanks }, (_, i) => q.answers?.[i] || "");
|
||||
set({ answers });
|
||||
}}>Match slots to blanks</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "discussion" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Facilitator notes — key talking points</span>
|
||||
<AutoTextarea value={(q.talkingPoints || []).join("\n")}
|
||||
onChange={(text) => set({ talkingPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })} rows={3} />
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Follow-up questions (one per line)</span>
|
||||
<AutoTextarea value={(q.followUps || []).join("\n")}
|
||||
onChange={(text) => set({ followUps: text.split("\n").map((s) => s.trim()).filter(Boolean) })} rows={2} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Explanation, present for all types except discussion */}
|
||||
{q.type !== "discussion" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Explanation (teacher key)</span>
|
||||
<AutoTextarea value={q.explanation} onChange={(explanation) => set({ explanation })} rows={3} placeholder="Why this answer is correct…" />
|
||||
</div>
|
||||
))}
|
||||
{(q.pairs || []).length < 10 && (
|
||||
<button className="btn btn-sm" onClick={() => set({ pairs: [...q.pairs, { left: "", right: "" }] })}>+ Add pair</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{q.type === "discussion" && (
|
||||
<div className="answer-key">
|
||||
<span className="ak-label">Facilitator notes — key talking points (one per line)</span>
|
||||
<AutoTextarea
|
||||
value={(q.talkingPoints || []).join("\n")}
|
||||
onChange={(text) => set({ talkingPoints: text.split("\n").map((s) => s.trim()).filter(Boolean) })}
|
||||
rows={3}
|
||||
/>
|
||||
<span className="ak-label" style={{ marginTop: 8 }}>Follow-up questions (one per line)</span>
|
||||
<AutoTextarea
|
||||
value={(q.followUps || []).join("\n")}
|
||||
onChange={(text) => set({ followUps: text.split("\n").map((s) => s.trim()).filter(Boolean) })}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Explanation + source ref, present for all types */}
|
||||
{q.type !== "discussion" && (
|
||||
<div className="answer-key" style={{ background: "#fff7f5" }}>
|
||||
<span className="ak-label">Explanation (teacher key)</span>
|
||||
<AutoTextarea value={q.explanation} onChange={(explanation) => set({ explanation })} rows={2} placeholder="Why this answer is correct…" />
|
||||
</div>
|
||||
)}
|
||||
{q.sourceRef ? (
|
||||
<p className="small muted" style={{ margin: "9px 0 0" }}>
|
||||
<b>Source:</b> “{q.sourceRef}”
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user