question-bank-framework 0.2.0 → 0.3.0

package/framework/components/quiz-list.tsx

@@ -2,11 +2,13 @@
 
 import { useEffect, useState } from 'react';
 import { Link } from '@tanstack/react-router';
-import { Trash2 } from 'lucide-react';
+import { ListOrdered, Trash2 } from 'lucide-react';
 import { useBank } from '../../core/config.tsx';
 import type { QuizSession } from '../../core/types.ts';
+import { isAnswerProvided, scoreAnswers } from '../../core/types.ts';
 import { Button } from './ui/button';
-import { deleteQuiz, listQuizzes } from '../lib/quiz-storage.ts';
+import { QuizQuestionEditor } from './quiz-question-editor';
+import { deleteQuiz, listQuizzes, setQuizQuestions } from '../lib/quiz-storage.ts';
 
 export function QuizList() {
   const bank = useBank();
@@ -14,6 +16,7 @@ export function QuizList() {
   const [loading, setLoading] = useState(true);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState(false);
+  const [editingQuiz, setEditingQuiz] = useState<QuizSession | null>(null);
 
   useEffect(() => {
     let active = true;
@@ -40,6 +43,11 @@ export function QuizList() {
     }
   };
 
+  const saveQuestions = async (quiz: QuizSession, questionIds: string[]) => {
+    const updated = await setQuizQuestions(bank.namespace, quiz, questionIds);
+    setQuizzes((current) => current.map((item) => (item.id === updated.id ? updated : item)));
+  };
+
   return (
     <div className="grid gap-8">
       <div className="flex flex-wrap items-end justify-between gap-4">
@@ -63,7 +71,13 @@ export function QuizList() {
           )}
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             {quizzes.map((quiz) => {
-              const answeredCount = Object.values(quiz.answers).filter((answer) => answer.trim().length > 0).length;
+              const questions = quiz.questionIds
+                .map((id) => bank.questionById.get(id))
+                .filter((question) => question !== undefined);
+              const answeredCount = questions.filter((question) =>
+                isAnswerProvided(question, quiz.answers[question.id]),
+              ).length;
+              const score = scoreAnswers(questions, quiz.answers);
               return (
                 <div key={quiz.id} className="group relative">
                   <Link
@@ -71,26 +85,40 @@ export function QuizList() {
                     params={{ quizId: quiz.id }}
                     className="block rounded-xl border border-gray-200 bg-white p-5 transition-colors hover:border-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
                   >
-                    <h2 className="m-0 pr-10 text-lg font-semibold text-gray-900">{quiz.title}</h2>
+                    <h2 className="m-0 pr-16 text-lg font-semibold text-gray-900">{quiz.title}</h2>
                     <p className="mt-2 text-sm text-gray-700">
                       {quiz.questionIds.length} {quiz.questionIds.length === 1 ? 'question' : 'questions'}
                     </p>
                     <p className="mt-1 text-sm text-gray-600">
                       {answeredCount} of {quiz.questionIds.length} answered
+                      {score.gradeable > 0 && ` • ${score.correct}/${score.gradeable} correct`}
                     </p>
                   </Link>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="icon-xs"
-                    aria-label={`Delete ${quiz.title}`}
-                    title="Delete quiz"
-                    disabled={deletingId === quiz.id}
-                    onClick={() => removeQuiz(quiz)}
-                    className="absolute right-3 top-3 rounded-full border-red-200 bg-white text-red-600 opacity-0 shadow-sm transition-opacity hover:border-red-300 hover:bg-red-50 hover:text-red-700 focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
-                  >
-                    <Trash2 aria-hidden="true" />
-                  </Button>
+                  <div className="absolute right-3 top-3 flex gap-1.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon-xs"
+                      aria-label={`Reorder questions in ${quiz.title}`}
+                      title="Reorder or remove questions"
+                      onClick={() => setEditingQuiz(quiz)}
+                      className="rounded-full bg-white shadow-sm"
+                    >
+                      <ListOrdered aria-hidden="true" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon-xs"
+                      aria-label={`Delete ${quiz.title}`}
+                      title="Delete quiz"
+                      disabled={deletingId === quiz.id}
+                      onClick={() => removeQuiz(quiz)}
+                      className="rounded-full border-red-200 bg-white text-red-600 shadow-sm hover:border-red-300 hover:bg-red-50 hover:text-red-700"
+                    >
+                      <Trash2 aria-hidden="true" />
+                    </Button>
+                  </div>
                 </div>
               );
             })}
@@ -105,6 +133,14 @@ export function QuizList() {
           </Button>
         </div>
       )}
+
+      <QuizQuestionEditor
+        quiz={editingQuiz}
+        onOpenChange={(open) => {
+          if (!open) setEditingQuiz(null);
+        }}
+        onSave={saveQuestions}
+      />
     </div>
   );
 }

package/framework/components/quiz-page.tsx

@@ -4,13 +4,26 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams } from '@tanstack/react-router';
 import { Check, Pencil, X } from 'lucide-react';
 import { useBank } from '../../core/config.tsx';
-import type { QuestionStatus, QuizSession } from '../../core/types.ts';
+import type { QuestionStatus, QuizAnswer, QuizSession } from '../../core/types.ts';
+import {
+  getCorrectIds,
+  isAnswerCorrect,
+  isAnswerProvided,
+  isChoiceQuestion,
+  questionKind,
+  questionKindLabels,
+  scoreAnswers,
+  toSelectedIds,
+} from '../../core/types.ts';
 import { Badge } from './ui/badge';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { MarkdownContent } from './markdown-content';
 import { setQuestionStatus } from '../lib/question-status-storage.ts';
 import { getQuiz, saveQuizLocally, saveQuizProgress } from '../lib/quiz-storage.ts';
+import { cn } from '../lib/utils.ts';
+
+const optionLetter = (index: number): string => String.fromCharCode(65 + index);
 
 export function QuizPage() {
   const bank = useBank();
@@ -19,6 +32,7 @@ export function QuizPage() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [shownAnswerId, setShownAnswerId] = useState<string | null>(null);
+  const [checked, setChecked] = useState<Record<string, boolean>>({});
   const [editingTitle, setEditingTitle] = useState(false);
   const [titleDraft, setTitleDraft] = useState('');
   const titleInputRef = useRef<HTMLInputElement>(null);
@@ -33,6 +47,7 @@ export function QuizPage() {
   useEffect(() => {
     let active = true;
     setShownAnswerId(null);
+    setChecked({});
     getQuiz(bank.namespace, quizId).then((quiz) => {
       if (active) setSession(quiz);
     }).finally(() => {
@@ -72,13 +87,39 @@ export function QuizPage() {
     setSession((current) => (current ? { ...current, currentQuestion: index, completed: false } : current));
   };
 
-  const updateAnswer = (value: string) => {
+  const updateWrittenAnswer = (value: string) => {
     if (!activeQuestion) return;
     setSession((current) =>
       current ? { ...current, completed: false, answers: { ...current.answers, [activeQuestion.id]: value } } : current,
     );
   };
 
+  const setChoiceAnswer = (questionId: string, value: string[]) => {
+    setChecked((current) => (current[questionId] ? { ...current, [questionId]: false } : current));
+    setSession((current) =>
+      current ? { ...current, completed: false, answers: { ...current.answers, [questionId]: value } } : current,
+    );
+  };
+
+  const toggleOption = (questionId: string, optionId: string, single: boolean) => {
+    if (!activeQuestion) return;
+    const current = toSelectedIds(activeQuestion, session?.answers[questionId]);
+    if (single) {
+      setChoiceAnswer(questionId, current[0] === optionId ? [] : [optionId]);
+    } else {
+      setChoiceAnswer(
+        questionId,
+        current.includes(optionId) ? current.filter((id) => id !== optionId) : [...current, optionId],
+      );
+    }
+  };
+
+  const checkAnswer = () => {
+    if (!activeQuestion) return;
+    setChecked((current) => ({ ...current, [activeQuestion.id]: true }));
+    if (bank.answers[activeQuestion.id]) setShownAnswerId(activeQuestion.id);
+  };
+
   const updateQuestionStatus = (status: QuestionStatus) => {
     if (!activeQuestion) return;
     void setQuestionStatus(bank.namespace, activeQuestion.id, status);
@@ -121,9 +162,17 @@ export function QuizPage() {
     );
   }
 
-  const answer = session.answers[activeQuestion.id] ?? '';
+  const answer: QuizAnswer | undefined = session.answers[activeQuestion.id];
   const suggestedAnswer = bank.answers[activeQuestion.id];
   const isSuggestedAnswerShown = shownAnswerId === activeQuestion.id;
+  const choice = isChoiceQuestion(activeQuestion);
+  const kind = questionKind(activeQuestion);
+  const selectedIds = toSelectedIds(activeQuestion, answer);
+  const hasSelection = isAnswerProvided(activeQuestion, answer);
+  const isChecked = checked[activeQuestion.id] === true;
+  const correctness = isChecked ? isAnswerCorrect(activeQuestion, answer) : null;
+  const correctIds = getCorrectIds(activeQuestion);
+  const score = scoreAnswers(quizQuestions, session.answers);
 
   return (
     <div className="mx-auto grid max-w-3xl gap-6">
@@ -168,12 +217,66 @@ export function QuizPage() {
         <span className="text-sm text-gray-600">{saving ? 'Saving...' : 'Saved'}</span>
       </div>
 
-      <p className="text-base font-semibold text-gray-900">
-        Question {activeIndex + 1} of {quizQuestions.length}
-      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <p className="m-0 text-base font-semibold text-gray-900">
+          Question {activeIndex + 1} of {quizQuestions.length}
+        </p>
+        {score.gradeable > 0 && (
+          <Badge variant="secondary" aria-label={`Quiz score: ${score.correct} of ${score.gradeable} correct`}>
+            {score.correct}/{score.gradeable} correct
+          </Badge>
+        )}
+        {session.completed && (
+          <Badge variant="outline" className="border-green-300 bg-green-50 text-green-800">
+            Quiz complete
+          </Badge>
+        )}
+      </div>
+
+      {session.completed && score.gradeable > 0 && (
+        <section aria-label="Quiz results" className="rounded-xl border border-gray-200 bg-gray-50 p-5">
+          <h2 className="m-0 text-lg font-semibold text-gray-900">
+            You scored {score.correct} of {score.gradeable}
+          </h2>
+          <ol className="mt-3 grid gap-1.5">
+            {quizQuestions.map((question, index) => {
+              const result = isAnswerCorrect(question, session.answers[question.id]);
+              return (
+                <li key={question.id}>
+                  <button
+                    type="button"
+                    onClick={() => goToQuestion(index)}
+                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-gray-100"
+                    aria-label={`Review question ${index + 1}: ${question.title} — ${result === null ? 'written' : result ? 'correct' : 'incorrect'}`}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        'flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
+                        result === true && 'bg-green-600 text-white',
+                        result === false && 'bg-red-600 text-white',
+                        result === null && 'bg-gray-200 text-gray-700',
+                      )}
+                    >
+                      {result === true ? <Check className="size-3" /> : result === false ? <X className="size-3" /> : index + 1}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate text-gray-900">{question.title}</span>
+                    <span className="shrink-0 text-xs text-gray-500">
+                      {result === null ? 'Written' : result ? 'Correct' : 'Incorrect'}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+        </section>
+      )}
 
       <section className="rounded-xl border border-gray-200 bg-white p-5">
-        <h2 className="m-0 text-xl font-semibold text-gray-900">{activeQuestion.title}</h2>
+        <div className="flex flex-wrap items-center gap-2">
+          <h2 className="m-0 flex-1 text-xl font-semibold text-gray-900">{activeQuestion.title}</h2>
+          <Badge variant="outline">{questionKindLabels[kind]}</Badge>
+        </div>
         <p className="mt-1 font-mono text-xs text-gray-500">{activeQuestion.id}</p>
         {activeQuestion.tags.length > 0 && (
           <div className="mt-2 flex flex-wrap gap-1">
@@ -186,32 +289,134 @@ export function QuizPage() {
         )}
         <MarkdownContent content={activeQuestion.prompt} className="mt-4 text-base leading-relaxed text-gray-800" />
 
-        <div className="mt-6">
-          <label htmlFor="quiz-answer" className="text-sm font-semibold text-gray-900">
-            Your answer
-          </label>
-          <textarea
-            id="quiz-answer"
-            value={answer}
-            onChange={(event) => updateAnswer(event.target.value)}
-            placeholder="Write your working or notes here..."
-            className="mt-2 block min-h-40 w-full resize-y rounded-lg border border-gray-300 bg-white p-3 text-base leading-relaxed text-gray-900 outline-none placeholder:text-gray-400"
-          />
-        </div>
+        {choice ? (
+          <div className="mt-6">
+            <p id="quiz-choices-label" className="text-sm font-semibold text-gray-900">
+              {kind === 'single' ? 'Choose one answer' : 'Choose all that apply'}
+            </p>
+            <div role={kind === 'single' ? 'radiogroup' : 'group'} aria-labelledby="quiz-choices-label" className="mt-2 grid gap-2">
+              {(activeQuestion.options ?? []).map((option, index) => {
+                const selected = selectedIds.includes(option.id);
+                const isCorrectOption = correctIds.includes(option.id);
+                const showCorrectness = isChecked;
+                return (
+                  <label
+                    key={option.id}
+                    className={cn(
+                      'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
+                      !showCorrectness && selected && 'border-gray-900 bg-gray-50',
+                      !showCorrectness && !selected && 'border-gray-300 bg-white hover:border-gray-500',
+                      showCorrectness && isCorrectOption && 'border-green-600 bg-green-50',
+                      showCorrectness && !isCorrectOption && selected && 'border-red-600 bg-red-50',
+                      showCorrectness && !isCorrectOption && !selected && 'border-gray-200 bg-white opacity-70',
+                    )}
+                  >
+                    <input
+                      type={kind === 'single' ? 'radio' : 'checkbox'}
+                      name={`quiz-choice-${activeQuestion.id}`}
+                      checked={selected}
+                      onChange={() => toggleOption(activeQuestion.id, option.id, kind === 'single')}
+                      className="mt-1 size-4 shrink-0 accent-gray-900"
+                      aria-label={`Option ${optionLetter(index)}`}
+                    />
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold',
+                        showCorrectness && isCorrectOption
+                          ? 'border-green-600 bg-green-600 text-white'
+                          : showCorrectness && selected
+                            ? 'border-red-600 bg-red-600 text-white'
+                            : selected
+                              ? 'border-gray-900 bg-gray-900 text-white'
+                              : 'border-gray-300 bg-white text-gray-600',
+                      )}
+                    >
+                      {optionLetter(index)}
+                    </span>
+                    <MarkdownContent content={option.text} className="min-w-0 flex-1 text-base leading-7" />
+                    {showCorrectness && isCorrectOption && (
+                      <Badge variant="outline" className="shrink-0 border-green-600 bg-white text-green-800">
+                        Correct
+                      </Badge>
+                    )}
+                    {showCorrectness && !isCorrectOption && selected && (
+                      <Badge variant="outline" className="shrink-0 border-red-600 bg-white text-red-800">
+                        Yours
+                      </Badge>
+                    )}
+                  </label>
+                );
+              })}
+            </div>
 
-        {suggestedAnswer && (
+            {isChecked && correctness !== null && (
+              <div
+                role="status"
+                className={cn(
+                  'mt-4 rounded-lg border p-4 text-sm font-medium',
+                  correctness ? 'border-green-300 bg-green-50 text-green-900' : 'border-red-300 bg-red-50 text-red-900',
+                )}
+              >
+                {correctness
+                  ? 'Correct — nice work.'
+                  : `Not quite. Correct answer${correctIds.length > 1 ? 's' : ''}: ${correctIds
+                      .map((id) => {
+                        const index = (activeQuestion.options ?? []).findIndex((o) => o.id === id);
+                        return index >= 0 ? optionLetter(index) : id;
+                      })
+                      .join(', ')}`}
+              </div>
+            )}
+
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Button onClick={checkAnswer} disabled={!hasSelection} variant={isChecked ? 'outline' : 'default'}>
+                {isChecked ? 'Checked' : 'Check answer'}
+              </Button>
+              {suggestedAnswer && (
+                <Button
+                  variant="outline"
+                  aria-expanded={isSuggestedAnswerShown}
+                  aria-controls="suggested-answer"
+                  onClick={() => setShownAnswerId(isSuggestedAnswerShown ? null : activeQuestion.id)}
+                >
+                  {isSuggestedAnswerShown ? 'Hide explanation' : 'Show explanation'}
+                </Button>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="mt-6">
+            <label htmlFor="quiz-answer" className="text-sm font-semibold text-gray-900">
+              Your answer
+            </label>
+            <textarea
+              id="quiz-answer"
+              value={typeof answer === 'string' ? answer : ''}
+              onChange={(event) => updateWrittenAnswer(event.target.value)}
+              placeholder="Write your working or notes here..."
+              className="mt-2 block min-h-40 w-full resize-y rounded-lg border border-gray-300 bg-white p-3 text-base leading-relaxed text-gray-900 outline-none placeholder:text-gray-400"
+            />
+          </div>
+        )}
+
+        {suggestedAnswer && (choice ? isSuggestedAnswerShown : true) && (
           <div className="mt-5">
-            <Button
-              variant="outline"
-              aria-expanded={isSuggestedAnswerShown}
-              aria-controls="suggested-answer"
-              onClick={() => setShownAnswerId(isSuggestedAnswerShown ? null : activeQuestion.id)}
-            >
-              {isSuggestedAnswerShown ? 'Hide answer' : 'Show answer'}
-            </Button>
+            {!choice && (
+              <Button
+                variant="outline"
+                aria-expanded={isSuggestedAnswerShown}
+                aria-controls="suggested-answer"
+                onClick={() => setShownAnswerId(isSuggestedAnswerShown ? null : activeQuestion.id)}
+              >
+                {isSuggestedAnswerShown ? 'Hide answer' : 'Show answer'}
+              </Button>
+            )}
             {isSuggestedAnswerShown && (
               <section id="suggested-answer" className="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
-                <h3 className="m-0 text-base font-semibold text-gray-900">Suggested answer</h3>
+                <h3 className="m-0 text-base font-semibold text-gray-900">
+                  {choice ? 'Explanation' : 'Suggested answer'}
+                </h3>
                 <MarkdownContent content={suggestedAnswer} className="mt-3 text-sm leading-relaxed text-gray-800" />
               </section>
             )}
@@ -219,9 +424,18 @@ export function QuizPage() {
         )}
 
         <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
-          <Button variant="outline" onClick={() => goToQuestion(Math.max(activeIndex - 1, 0))} disabled={activeIndex === 0}>
-            Previous
-          </Button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => goToQuestion(Math.max(activeIndex - 1, 0))} disabled={activeIndex === 0}>
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => goToQuestion(Math.min(activeIndex + 1, quizQuestions.length - 1))}
+              disabled={activeIndex === quizQuestions.length - 1}
+            >
+              Next
+            </Button>
+          </div>
           <div className="ml-auto flex flex-wrap items-center justify-end gap-2">
             <Button variant="outline" onClick={() => updateQuestionStatus('unanswered')} disabled={session.completed}>
               Skip

package/framework/components/quiz-question-editor.tsx

@@ -0,0 +1,171 @@
+// Framework-owned: eject with `qb reveal framework/components/quiz-question-editor.tsx`.
+
+import { useEffect, useState } from 'react';
+import { ArrowDown, ArrowUp, GripVertical, Shuffle, Trash2 } from 'lucide-react';
+import { useBank } from '../../core/config.tsx';
+import type { QuizSession } from '../../core/types.ts';
+import { Button } from './ui/button';
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from './ui/sheet';
+import { cn } from '../lib/utils.ts';
+
+const move = (ids: string[], from: number, to: number) => {
+  const next = [...ids];
+  const [item] = next.splice(from, 1);
+  if (item !== undefined) next.splice(to, 0, item);
+  return next;
+};
+
+export function QuizQuestionEditor({
+  quiz,
+  onOpenChange,
+  onSave,
+}: {
+  quiz: QuizSession | null;
+  onOpenChange: (open: boolean) => void;
+  onSave: (quiz: QuizSession, questionIds: string[]) => Promise<void>;
+}) {
+  const bank = useBank();
+  const [ids, setIds] = useState<string[]>([]);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState(false);
+
+  useEffect(() => {
+    if (!quiz) return;
+    setIds(quiz.questionIds);
+    setSaveError(false);
+  }, [quiz]);
+
+  const changed = quiz !== null && (ids.length !== quiz.questionIds.length || ids.some((id, index) => id !== quiz.questionIds[index]));
+
+  const shuffle = () => {
+    setIds((current) => {
+      if (current.length < 2) return current;
+      const next = [...current];
+      for (let i = next.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [next[i], next[j]] = [next[j] as string, next[i] as string];
+      }
+      return next;
+    });
+  };
+
+  const save = async () => {
+    if (!quiz) return;
+    setSaving(true);
+    setSaveError(false);
+    try {
+      await onSave(quiz, ids);
+      onOpenChange(false);
+    } catch {
+      setSaveError(true);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Sheet open={quiz !== null} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full gap-0 sm:max-w-md">
+        <SheetHeader className="border-b">
+          <SheetTitle>Edit questions</SheetTitle>
+          <SheetDescription>{quiz?.title}. Drag to reorder, or remove questions you no longer want.</SheetDescription>
+          <div className="mt-2 flex items-center justify-between gap-2">
+            <span className="text-sm text-muted-foreground">
+              {ids.length} {ids.length === 1 ? 'question' : 'questions'}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={shuffle}
+              disabled={ids.length < 2}
+              aria-label="Shuffle question order"
+              title="Shuffle question order"
+            >
+              <Shuffle aria-hidden="true" />
+              Shuffle
+            </Button>
+          </div>
+        </SheetHeader>
+        <ol className="m-0 min-h-0 flex-1 list-none overflow-y-auto p-2">
+          {ids.map((id, index) => (
+            <li
+              key={id}
+              draggable
+              onDragStart={(event) => {
+                setDragIndex(index);
+                event.dataTransfer.effectAllowed = 'move';
+              }}
+              onDragOver={(event) => {
+                event.preventDefault();
+                if (dragIndex === null || dragIndex === index) return;
+                setIds((current) => move(current, dragIndex, index));
+                setDragIndex(index);
+              }}
+              onDragEnd={() => setDragIndex(null)}
+              className={cn(
+                'flex items-center gap-2 rounded-md border border-transparent px-2 py-2 hover:bg-muted',
+                dragIndex === index && 'border-gray-300 bg-muted opacity-60',
+              )}
+            >
+              <GripVertical aria-hidden="true" className="size-4 shrink-0 cursor-grab text-muted-foreground" />
+              <span className="w-6 shrink-0 text-right text-sm tabular-nums text-muted-foreground">{index + 1}</span>
+              <span className="min-w-0 flex-1 truncate text-sm">{bank.questionById.get(id)?.title ?? id}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                aria-label="Move up"
+                disabled={index === 0}
+                onClick={() => setIds((current) => move(current, index, index - 1))}
+              >
+                <ArrowUp aria-hidden="true" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                aria-label="Move down"
+                disabled={index === ids.length - 1}
+                onClick={() => setIds((current) => move(current, index, index + 1))}
+              >
+                <ArrowDown aria-hidden="true" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                aria-label="Remove question"
+                className="text-red-600 hover:bg-red-50 hover:text-red-700"
+                onClick={() => setIds((current) => current.filter((item) => item !== id))}
+              >
+                <Trash2 aria-hidden="true" />
+              </Button>
+            </li>
+          ))}
+          {ids.length === 0 && (
+            <li className="px-2 py-8 text-center text-sm text-muted-foreground">
+              No questions left. Delete the quiz instead if you no longer need it.
+            </li>
+          )}
+        </ol>
+        <SheetFooter className="border-t">
+          {saveError && (
+            <p role="alert" className="m-0 text-sm text-red-700">
+              Could not save changes. Please try again.
+            </p>
+          )}
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={save} disabled={!changed || ids.length === 0 || saving}>
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/framework/convex/quizzes.ts

@@ -40,7 +40,7 @@ export const saveProgress = mutation({
   args: {
     quizId: v.id('quizzes'),
     title: v.string(),
-    answers: v.record(v.string(), v.string()),
+    answers: v.record(v.string(), v.union(v.string(), v.array(v.string()))),
     currentQuestion: v.number(),
     completed: v.boolean(),
   },
@@ -48,3 +48,15 @@ export const saveProgress = mutation({
     await ctx.db.patch(quizId, { title, answers, currentQuestion, completed })
   },
 })
+
+export const setQuestions = mutation({
+  args: {
+    quizId: v.id('quizzes'),
+    questionIds: v.array(v.string()),
+    answers: v.record(v.string(), v.union(v.string(), v.array(v.string()))),
+    currentQuestion: v.number(),
+  },
+  handler: async (ctx, { quizId, questionIds, answers, currentQuestion }) => {
+    await ctx.db.patch(quizId, { questionIds, answers, currentQuestion })
+  },
+})