feat: quiz

2026-10-15 20:07:01 +05:30
parent 9f67da37a6
commit 6a6143ceb2
12 changed files with 982 additions and 16 deletions
@@ -0,0 +1,132 @@
+"use client";
+
+/**
+ * Your finished attempt: the score, then every question with your answer,
+ * the correct one, its explanation, and how long you took.
+ *
+ * Correct options are filled solid so they read at a glance; a wrong pick is
+ * outlined in red. "Your answer" marks whatever you chose either way.
+ */
+
+import Link from "next/link";
+import { Check, Clock, X } from "lucide-react";
+import { RichText } from "@/lib/rich-text";
+import type { QuizResult } from "@/lib/quiz";
+import { cn } from "@/lib/utils";
+
+export function fmtMs(ms?: number | null): string {
+  if (ms == null) return "—";
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;
+}
+
+export function QuizResultView({ result }: { result: QuizResult }) {
+  const pct = result.total
+    ? Math.round((result.score / result.total) * 100)
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-2xl border border-border bg-card p-5 text-center">
+        <p className="text-xs font-medium uppercase tracking-wide text-primary">
+          Your result
+        </p>
+        <p className="mt-2 text-4xl font-semibold tabular-nums text-foreground">
+          {result.score}
+          <span className="text-2xl text-muted-foreground">
+            /{result.total}
+          </span>
+        </p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {pct}% correct · {fmtMs(result.total_ms)} in total
+        </p>
+        {result.quiz.target_path && (
+          <Link
+            href={result.quiz.target_path}
+            className="mt-3 inline-block text-sm font-medium text-primary hover:underline"
+          >
+            Back to {result.quiz.target_title || "the reading"}
+          </Link>
+        )}
+      </section>
+
+      <ol className="space-y-4">
+        {result.items.map((it, i) => (
+          <li key={it.id} className="rounded-xl border border-border p-4">
+            <div className="flex items-start justify-between gap-3">
+              <p className="text-sm font-medium text-foreground">
+                <span className="text-muted-foreground">{i + 1}. </span>
+                <RichText text={it.prompt} />
+              </p>
+              <span
+                className={cn(
+                  "inline-flex shrink-0 items-center gap-1 text-xs",
+                  it.is_correct ? "text-primary" : "text-destructive",
+                )}
+              >
+                {it.is_correct ? (
+                  <Check className="size-3.5" />
+                ) : (
+                  <X className="size-3.5" />
+                )}
+                {it.is_correct ? "Correct" : "Incorrect"}
+              </span>
+            </div>
+            {it.multi && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                Select all that apply
+              </p>
+            )}
+            <ul className="mt-3 space-y-1.5">
+              {it.options.map((o) => {
+                const chosen = it.chosen_option_ids.includes(o.id);
+                return (
+                  <li
+                    key={o.id}
+                    className={cn(
+                      "flex items-start gap-2 rounded-lg border px-3 py-2 text-sm",
+                      o.is_correct
+                        ? "border-primary bg-primary font-medium text-primary-foreground dark:text-white"
+                        : chosen
+                          ? "border-destructive/50 bg-destructive/10 text-foreground"
+                          : "border-border text-muted-foreground",
+                    )}
+                  >
+                    {o.is_correct ? (
+                      <Check className="mt-0.5 size-3.5 shrink-0" strokeWidth={3} />
+                    ) : chosen ? (
+                      <X className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+                    ) : (
+                      <span className="size-3.5 shrink-0" />
+                    )}
+                    <span className="min-w-0 flex-1">
+                      <RichText text={o.body} />
+                    </span>
+                    {chosen && (
+                      <span
+                        className={cn(
+                          "shrink-0 text-xs font-normal",
+                          o.is_correct ? "opacity-85" : "text-muted-foreground",
+                        )}
+                      >
+                        Your answer
+                      </span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+            {it.explanation && (
+              <p className="mt-3 rounded-lg bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+                <RichText text={it.explanation} />
+              </p>
+            )}
+            <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="size-3" /> {fmtMs(it.response_ms)}
+            </p>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}