question-bank-framework 0.2.0 → 0.4.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,39 @@ 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, QuestionStatusMap, 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 { setQuestionStatus, getQuestionStatuses } from '../lib/question-status-storage.ts';
+import { questionStatusLabels } from '../lib/question-filter.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);
+
+const questionStatusStyles: Record<QuestionStatus, string> = {
+  unanswered: 'border-gray-300 bg-gray-50 text-gray-700',
+  revisit: 'border-amber-300 bg-amber-50 text-amber-900',
+  complete: 'border-green-300 bg-green-50 text-green-800',
+};
+
+const questionStatusDotStyles: Record<QuestionStatus, string> = {
+  unanswered: 'border-gray-300 bg-white text-gray-600 hover:border-gray-500',
+  revisit: 'border-amber-400 bg-amber-100 text-amber-900 hover:border-amber-600',
+  complete: 'border-green-500 bg-green-100 text-green-900 hover:border-green-700',
+};
 
 export function QuizPage() {
   const bank = useBank();
@@ -19,8 +45,10 @@ 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 [statusMap, setStatusMap] = useState<QuestionStatusMap>({});
   const titleInputRef = useRef<HTMLInputElement>(null);
   const quizQuestions = useMemo(
     () =>
@@ -33,11 +61,15 @@ export function QuizPage() {
   useEffect(() => {
     let active = true;
     setShownAnswerId(null);
+    setChecked({});
     getQuiz(bank.namespace, quizId).then((quiz) => {
       if (active) setSession(quiz);
     }).finally(() => {
       if (active) setLoading(false);
     });
+    getQuestionStatuses(bank.namespace).then((statuses) => {
+      if (active) setStatusMap(statuses);
+    });
     return () => {
       active = false;
     };
@@ -72,16 +104,43 @@ 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);
+    setStatusMap((current) => ({ ...current, [activeQuestion.id]: status }));
     setShownAnswerId(null);
     setSession((current) =>
       current
@@ -121,9 +180,18 @@ 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 activeStatus: QuestionStatus = statusMap[activeQuestion.id] ?? 'unanswered';
+  const score = scoreAnswers(quizQuestions, session.answers);
 
   return (
     <div className="mx-auto grid max-w-3xl gap-6">
@@ -168,12 +236,98 @@ 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>
+
+      {quizQuestions.length > 1 && (
+        <nav aria-label="Questions in this quiz">
+          <ol className="m-0 flex list-none flex-wrap gap-1.5 p-0">
+            {quizQuestions.map((question, index) => {
+              const status = statusMap[question.id] ?? 'unanswered';
+              const isActive = index === activeIndex;
+              return (
+                <li key={question.id}>
+                  <button
+                    type="button"
+                    onClick={() => goToQuestion(index)}
+                    aria-label={`Go to question ${index + 1}: ${question.title} — ${questionStatusLabels[status]}${isActive ? ' (current question)' : ''}`}
+                    aria-current={isActive ? 'true' : undefined}
+                    title={`${question.title} — ${questionStatusLabels[status]}`}
+                    className={cn(
+                      'flex size-8 items-center justify-center rounded-md border text-xs font-semibold tabular-nums transition-colors',
+                      questionStatusDotStyles[status],
+                      isActive && 'ring-2 ring-gray-900 ring-offset-2',
+                    )}
+                  >
+                    {index + 1}
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+        </nav>
+      )}
+
+      {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>
+          <Badge variant="outline" className={questionStatusStyles[activeStatus]}>
+            {questionStatusLabels[activeStatus]}
+          </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 +340,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>
+
+            {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 && (
+        {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 +475,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