feat: quiz
This commit is contained in:
gosangam
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* The quiz button on a content page.
|
||||
*
|
||||
* Asks the BFF whether this page has a published quiz and renders nothing if
|
||||
* not, so it can sit on every content page without leaving an empty slot.
|
||||
* Its label tracks progress: Take quiz → Continue quiz → View results.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ClipboardCheck } from "lucide-react";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { quiz, quizActionLabel, type QuizCard } from "@/lib/quiz";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function QuizButton({
|
||||
path,
|
||||
className,
|
||||
}: {
|
||||
/** The content page's own path, e.g. /books/bg/2. */
|
||||
path: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const { user } = useAuth();
|
||||
const [card, setCard] = useState<QuizCard | null>(null);
|
||||
|
||||
// Re-asked when the user changes, so progress appears right after sign-in.
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
quiz
|
||||
.forPath(path)
|
||||
.then((c) => {
|
||||
if (!cancelled) setCard(c);
|
||||
})
|
||||
.catch(() => {
|
||||
/* no quiz button is the right failure */
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [path, user?.id]);
|
||||
|
||||
if (!card) return null;
|
||||
|
||||
const done = card.my.state === "completed";
|
||||
return (
|
||||
<Link
|
||||
href={`/quizzes/${card.id}`}
|
||||
title={card.title}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
|
||||
done
|
||||
? "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
: "border-primary/40 bg-primary/10 text-primary hover:bg-primary/15",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<ClipboardCheck className="size-3.5" />
|
||||
{quizActionLabel(card.my.state)}
|
||||
{card.my.state === "in_progress" && (
|
||||
<span className="tabular-nums opacity-70">
|
||||
{card.my.answered}/{card.my.total}
|
||||
</span>
|
||||
)}
|
||||
{done && card.my.score !== undefined && (
|
||||
<span className="tabular-nums opacity-70">
|
||||
{card.my.score}/{card.my.total}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* QuizzesCTA — the way into /quizzes, in two shapes:
|
||||
*
|
||||
* - "tile": a card that leads the search page's "Start here" row.
|
||||
* - "banner": a full-width row for the homepage, under sādhana / vāṇī.
|
||||
*
|
||||
* Renders nothing until there is at least one published quiz; with
|
||||
* `pendingOnly` it also hides once every quiz has been finished, so the
|
||||
* homepage only nudges when there's something left to do.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight, ChevronRight, ClipboardCheck } from "lucide-react";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { quiz, type QuizCard } from "@/lib/quiz";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function QuizzesCTA({
|
||||
variant = "banner",
|
||||
pendingOnly = false,
|
||||
className,
|
||||
}: {
|
||||
variant?: "banner" | "tile";
|
||||
pendingOnly?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const { user } = useAuth();
|
||||
const [cards, setCards] = useState<QuizCard[] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
quiz
|
||||
.list()
|
||||
.then((c) => {
|
||||
if (!cancelled) setCards(c);
|
||||
})
|
||||
.catch(() => {
|
||||
/* CTA simply doesn't render */
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// Refetch on sign-in/out: progress is per user.
|
||||
}, [user?.id]);
|
||||
|
||||
if (!cards?.length) return null;
|
||||
|
||||
if (pendingOnly && cards.every((c) => c.my.state === "completed")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagline = "Test your understanding of chapters, lectures and more";
|
||||
|
||||
if (variant === "tile") {
|
||||
// Matches the search page's FeaturedTile so it sits in that grid as an
|
||||
// equal: same padding, icon chip, title scale and corner arrow.
|
||||
return (
|
||||
<Link
|
||||
href="/quizzes"
|
||||
className={cn(
|
||||
"group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
|
||||
<ClipboardCheck className="size-5" />
|
||||
</div>
|
||||
<ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
|
||||
</div>
|
||||
<h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] lg:text-[1.35rem] leading-tight text-foreground">
|
||||
Quizzes
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
|
||||
{tagline}
|
||||
</p>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href="/quizzes"
|
||||
className={cn(
|
||||
"group flex items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<span className="inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<ClipboardCheck className="size-6" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-base font-semibold leading-snug text-foreground">
|
||||
Quizzes
|
||||
</p>
|
||||
<p className="truncate text-sm leading-snug text-muted-foreground">
|
||||
{tagline}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user