Initial working commit
Some checks failed
Automated Container Build / build-and-push (push) Failing after 7s
Some checks failed
Automated Container Build / build-and-push (push) Failing after 7s
This commit is contained in:
parent
666ceb7325
commit
b7ce314f01
105 changed files with 35510 additions and 11 deletions
177
src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx
Normal file
177
src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { QuizViewer } from "@/components/quizzes/QuizViewer";
|
||||
import { AttemptHistory } from "@/components/quizzes/AttemptHistory";
|
||||
import { ShareMenu } from "@/components/ui/ShareMenu";
|
||||
|
||||
|
||||
interface Option {
|
||||
id: string;
|
||||
text: string;
|
||||
isCorrect: boolean;
|
||||
}
|
||||
|
||||
interface Question {
|
||||
id: string;
|
||||
type: string;
|
||||
prompt: string;
|
||||
rationale: string;
|
||||
category: string;
|
||||
options: Option[];
|
||||
}
|
||||
|
||||
interface QuizAttempt {
|
||||
id: string;
|
||||
score: number;
|
||||
maxScore: number;
|
||||
answersJson: string;
|
||||
isPartialRetake: boolean;
|
||||
completedAt: string;
|
||||
}
|
||||
|
||||
interface QuizData {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
questions: Question[];
|
||||
class: { slug: string; name: string };
|
||||
progress: Array<{
|
||||
mode: string;
|
||||
currentIndex: number;
|
||||
orderJson: string;
|
||||
answersJson: string | null;
|
||||
}>;
|
||||
}
|
||||
|
||||
export default function QuizStudyPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const classSlug = params.classSlug as string;
|
||||
const quizId = params.quizId as string;
|
||||
|
||||
const [quiz, setQuiz] = useState<QuizData | null>(null);
|
||||
const [attempts, setAttempts] = useState<QuizAttempt[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [view, setView] = useState<"history" | "take">("take");
|
||||
const [retakeIds, setRetakeIds] = useState<string[] | null>(null);
|
||||
|
||||
const fetchQuizAndAttempts = useCallback(async () => {
|
||||
try {
|
||||
const [quizRes, attemptsRes] = await Promise.all([
|
||||
fetch(`/api/quizzes/${quizId}`),
|
||||
fetch(`/api/quizzes/${quizId}/attempt`)
|
||||
]);
|
||||
|
||||
if (!quizRes.ok) throw new Error("Not found");
|
||||
|
||||
const [quizData, attemptsData] = await Promise.all([
|
||||
quizRes.json(),
|
||||
attemptsRes.ok ? attemptsRes.json() : []
|
||||
]);
|
||||
|
||||
setQuiz(quizData);
|
||||
setAttempts(attemptsData);
|
||||
|
||||
// Optional: keep track of attempt count, but default view is already "take"
|
||||
if (attemptsData.length > 0) {
|
||||
// We can do something here if we wanted to auto-switch to history, but user wants take
|
||||
}
|
||||
} catch {
|
||||
router.push(`/${classSlug}/quizzes`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [quizId, classSlug, router]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchQuizAndAttempts();
|
||||
}, [fetchQuizAndAttempts]);
|
||||
|
||||
if (loading || !quiz) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="animate-subtle-pulse">
|
||||
<div className="h-8 bg-bg-surface-alt rounded w-1/3 mb-4" />
|
||||
<div className="h-64 bg-bg-surface rounded-xl border border-border-light" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto w-full py-2 md:py-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => router.push(`/${classSlug}/quizzes`)}
|
||||
className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text-heading mb-2 transition-colors cursor-pointer"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to quizzes
|
||||
</button>
|
||||
<h1 className="text-xl font-bold text-text-heading">{quiz.name}</h1>
|
||||
{quiz.description && (
|
||||
<p className="text-sm text-text-secondary mt-1">{quiz.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* View toggle & Share */}
|
||||
<div className="flex items-center gap-4">
|
||||
<ShareMenu targetType="QUIZ" contentId={quiz.id} classSlug={classSlug} />
|
||||
|
||||
{attempts.length > 0 && (
|
||||
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
|
||||
<button
|
||||
onClick={() => setView("history")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "history"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
History
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView("take")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "take"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Take Quiz
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{view === "history" && attempts.length > 0 ? (
|
||||
<AttemptHistory
|
||||
quiz={quiz}
|
||||
attempts={attempts}
|
||||
onRetake={(missedIds) => {
|
||||
setRetakeIds(missedIds);
|
||||
setView("take");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<QuizViewer
|
||||
quiz={quiz}
|
||||
retakeIds={retakeIds}
|
||||
onFinished={() => {
|
||||
setRetakeIds(null);
|
||||
fetchQuizAndAttempts();
|
||||
setView("history");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
174
src/app/(protected)/[classSlug]/quizzes/page.tsx
Normal file
174
src/app/(protected)/[classSlug]/quizzes/page.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { ImportModal } from "@/components/import/ImportModal";
|
||||
|
||||
interface QuizItem {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
_count: { questions: number; attempts: number };
|
||||
}
|
||||
|
||||
export default function QuizzesPage() {
|
||||
const params = useParams();
|
||||
const classSlug = params.classSlug as string;
|
||||
const [quizzes, setQuizzes] = useState<QuizItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showImport, setShowImport] = useState(false);
|
||||
const [classId, setClassId] = useState<string>("");
|
||||
|
||||
const fetchQuizzes = useCallback(async (cId: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/quizzes/list?classId=${cId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setQuizzes(Array.isArray(data) ? data : []);
|
||||
}
|
||||
} catch {
|
||||
setQuizzes([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function init() {
|
||||
try {
|
||||
const classRes = await fetch("/api/classes");
|
||||
const classes = await classRes.json();
|
||||
const cls = classes.find((c: { slug: string }) => c.slug === classSlug);
|
||||
if (!cls) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setClassId(cls.id);
|
||||
fetchQuizzes(cls.id);
|
||||
} catch {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
init();
|
||||
}, [classSlug, fetchQuizzes]);
|
||||
|
||||
async function handleDelete(id: string, name: string) {
|
||||
if (!confirm(`Delete "${name}" and all its questions and attempts?`)) return;
|
||||
await fetch(`/api/quizzes/${id}`, { method: "DELETE" });
|
||||
setQuizzes((prev) => prev.filter((q) => q.id !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold text-text-heading">Quizzes</h2>
|
||||
<button
|
||||
onClick={() => setShowImport(true)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 shadow-sm cursor-pointer"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
Import Quiz
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="bg-bg-surface rounded-xl border border-border-light p-6 animate-subtle-pulse">
|
||||
<div className="h-5 bg-bg-surface-alt rounded w-2/3 mb-3" />
|
||||
<div className="h-4 bg-bg-surface-alt rounded w-1/3" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && quizzes.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
|
||||
<svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-text-heading mb-1">No quizzes yet</h3>
|
||||
<p className="text-text-secondary mb-4">Import your first quiz to start practicing</p>
|
||||
<button
|
||||
onClick={() => setShowImport(true)}
|
||||
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary text-white font-medium hover:bg-primary-hover transition-all duration-200 cursor-pointer"
|
||||
>
|
||||
Import Quiz
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quiz grid */}
|
||||
{!loading && quizzes.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{quizzes.map((quiz) => (
|
||||
<div
|
||||
key={quiz.id}
|
||||
className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300"
|
||||
>
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-text-heading mb-1">
|
||||
{quiz.name}
|
||||
</h3>
|
||||
{quiz.description && (
|
||||
<p className="text-sm text-text-secondary mb-3 line-clamp-2">
|
||||
{quiz.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
|
||||
{quiz._count.questions} {quiz._count.questions === 1 ? "question" : "questions"}
|
||||
</span>
|
||||
{quiz._count.attempts > 0 && (
|
||||
<span className="text-xs text-text-muted">
|
||||
{quiz._count.attempts} {quiz._count.attempts === 1 ? "attempt" : "attempts"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light">
|
||||
<Link
|
||||
href={`/${classSlug}/quizzes/${quiz.id}`}
|
||||
className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
|
||||
>
|
||||
Start Quiz
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(quiz.id, quiz.name)}
|
||||
className="p-2 rounded-lg text-text-muted hover:text-error hover:bg-error-bg transition-all duration-200 cursor-pointer"
|
||||
title="Delete"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Import Modal */}
|
||||
{showImport && (
|
||||
<ImportModal
|
||||
classId={classId}
|
||||
importType="quizzes"
|
||||
onClose={() => setShowImport(false)}
|
||||
onImported={() => {
|
||||
setShowImport(false);
|
||||
window.location.reload();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue