Add quiz feature: student UI, admin editor, lesson page integration
- QuizSection component: shows questions as text inputs, read-only after submission - QuizEditor component: admin CRUD for quiz questions with type selector - saveQuiz/deleteQuiz server actions for admin - submitQuizAttempt server action: idempotent, auto-marks lesson complete - Student lesson page: renders QuizSection, updates complete button logic - Admin lesson page: renders QuizEditor below homework section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,6 +7,7 @@ import { KinescopePlayer } from "@/components/player/kinescope-player";
|
||||
import { LessonContent } from "@/components/student/lesson-content";
|
||||
import { LessonCompleteButton } from "@/components/student/lesson-complete-button";
|
||||
import { HomeworkSection } from "@/components/student/homework-section";
|
||||
import { QuizSection } from "@/components/student/quiz-section";
|
||||
import { LessonComments } from "@/components/student/lesson-comments";
|
||||
import { FileFormatBadge } from "@/components/shared/file-format-badge";
|
||||
|
||||
@@ -26,6 +27,9 @@ export default async function LessonPage({ params }: Props) {
|
||||
include: {
|
||||
files: { orderBy: { createdAt: "asc" } },
|
||||
homework: true,
|
||||
quiz: {
|
||||
include: { questions: { orderBy: { order: "asc" } } },
|
||||
},
|
||||
module: {
|
||||
include: {
|
||||
course: {
|
||||
@@ -71,6 +75,12 @@ export default async function LessonPage({ params }: Props) {
|
||||
})
|
||||
: null;
|
||||
|
||||
const quizAttempt = lesson?.quiz && session && !isAdmin
|
||||
? await prisma.quizAttempt.findFirst({
|
||||
where: { quizId: lesson.quiz.id, userId: session.user.id },
|
||||
})
|
||||
: null;
|
||||
|
||||
if (!lesson || lesson.module.course.slug !== slug) notFound();
|
||||
|
||||
const isCompleted = !!progress;
|
||||
@@ -163,6 +173,21 @@ export default async function LessonPage({ params }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quiz */}
|
||||
{lesson.quiz && !isAdmin && (
|
||||
<div className="mb-8">
|
||||
<p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--muted-foreground)" }}>
|
||||
Тест
|
||||
</p>
|
||||
<QuizSection
|
||||
quiz={lesson.quiz}
|
||||
attempt={quizAttempt ? { answers: quizAttempt.answers as Record<string, string> } : null}
|
||||
slug={slug}
|
||||
lessonId={lessonId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Complete button + Prev/Next navigation */}
|
||||
<div
|
||||
className="flex items-center justify-between pt-6 mt-6"
|
||||
@@ -179,10 +204,10 @@ export default async function LessonPage({ params }: Props) {
|
||||
<div />
|
||||
)}
|
||||
|
||||
{!isAdmin && !lesson.homework && (
|
||||
{!isAdmin && !lesson.homework && !lesson.quiz && (
|
||||
<LessonCompleteButton lessonId={lessonId} slug={slug} isCompleted={isCompleted} />
|
||||
)}
|
||||
{!isAdmin && lesson.homework && isCompleted && (
|
||||
{!isAdmin && (lesson.homework || lesson.quiz) && isCompleted && (
|
||||
<LessonCompleteButton lessonId={lessonId} slug={slug} isCompleted={true} readOnly={true} />
|
||||
)}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import Link from "next/link";
|
||||
import { LessonEditor } from "@/components/admin/lesson-editor";
|
||||
import { LessonFilesManager } from "@/components/admin/lesson-files-manager";
|
||||
import { HomeworkEditor } from "@/components/admin/homework-editor";
|
||||
import { QuizEditor } from "@/components/admin/quiz-editor";
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ courseId: string; moduleId: string; lessonId: string }>;
|
||||
@@ -18,6 +19,9 @@ export default async function LessonEditorPage({ params }: Props) {
|
||||
include: {
|
||||
files: { orderBy: { createdAt: "asc" } },
|
||||
homework: true,
|
||||
quiz: {
|
||||
include: { questions: { orderBy: { order: "asc" } } },
|
||||
},
|
||||
module: {
|
||||
include: { course: { select: { title: true, slug: true } } },
|
||||
},
|
||||
@@ -40,10 +44,12 @@ export default async function LessonEditorPage({ params }: Props) {
|
||||
const plain = JSON.parse(JSON.stringify({
|
||||
files: lesson.files,
|
||||
homework: lesson.homework,
|
||||
quiz: lesson.quiz,
|
||||
siblings,
|
||||
})) as {
|
||||
files: typeof lesson.files;
|
||||
homework: typeof lesson.homework;
|
||||
quiz: typeof lesson.quiz;
|
||||
siblings: typeof siblings;
|
||||
};
|
||||
|
||||
@@ -86,12 +92,20 @@ export default async function LessonEditorPage({ params }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Homework section */}
|
||||
<div className="card-aubade p-6">
|
||||
<div className="card-aubade p-6 mb-6">
|
||||
<p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "var(--muted-foreground)" }}>
|
||||
Домашнее задание
|
||||
</p>
|
||||
<HomeworkEditor lessonId={lessonId} initial={plain.homework} />
|
||||
</div>
|
||||
|
||||
{/* Quiz section */}
|
||||
<div className="card-aubade p-6">
|
||||
<p className="text-xs font-bold uppercase tracking-widest mb-4" style={{ color: "var(--muted-foreground)" }}>
|
||||
Тест
|
||||
</p>
|
||||
<QuizEditor lessonId={lessonId} initial={plain.quiz} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { saveQuiz, deleteQuiz } from "@/lib/actions/quiz-actions";
|
||||
|
||||
type QType = "TEXT" | "SINGLE" | "MULTIPLE";
|
||||
|
||||
interface Question {
|
||||
id?: string;
|
||||
text: string;
|
||||
type: QType;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
lessonId: string;
|
||||
initial: { id: string; questions: Question[] } | null;
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<QType, string> = {
|
||||
TEXT: "Текстовый ответ",
|
||||
SINGLE: "Один вариант",
|
||||
MULTIPLE: "Несколько вариантов",
|
||||
};
|
||||
|
||||
export function QuizEditor({ lessonId, initial }: Props) {
|
||||
const [questions, setQuestions] = useState<Question[]>(
|
||||
initial?.questions ?? []
|
||||
);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
const inputStyle = {
|
||||
border: "2px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
outline: "none",
|
||||
width: "100%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
fontSize: "0.875rem",
|
||||
fontFamily: "inherit",
|
||||
};
|
||||
|
||||
function addQuestion() {
|
||||
setQuestions((prev) => [
|
||||
...prev,
|
||||
{ text: "", type: "TEXT", order: prev.length },
|
||||
]);
|
||||
}
|
||||
|
||||
function updateQuestion(idx: number, patch: Partial<Question>) {
|
||||
setQuestions((prev) =>
|
||||
prev.map((q, i) => (i === idx ? { ...q, ...patch } : q))
|
||||
);
|
||||
}
|
||||
|
||||
function removeQuestion(idx: number) {
|
||||
setQuestions((prev) =>
|
||||
prev.filter((_, i) => i !== idx).map((q, i) => ({ ...q, order: i }))
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (questions.length === 0) return;
|
||||
startTransition(async () => {
|
||||
await saveQuiz(
|
||||
lessonId,
|
||||
questions.map((q, i) => ({ text: q.text.trim(), type: q.type, order: i }))
|
||||
);
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (!confirm("Удалить квиз и все ответы студентов?")) return;
|
||||
startTransition(async () => {
|
||||
await deleteQuiz(lessonId);
|
||||
setQuestions([]);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{questions.length === 0 && (
|
||||
<p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
|
||||
Вопросов нет
|
||||
</p>
|
||||
)}
|
||||
|
||||
{questions.map((q, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="space-y-2 px-4 py-3"
|
||||
style={{ border: "2px solid var(--border)" }}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span
|
||||
className="text-xs font-bold uppercase tracking-widest"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Вопрос {idx + 1}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeQuestion(idx)}
|
||||
className="text-xs"
|
||||
style={{ color: "oklch(0.577 0.245 27.325)" }}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
value={q.text}
|
||||
onChange={(e) => updateQuestion(idx, { text: e.target.value })}
|
||||
style={{ ...inputStyle, minHeight: "unset" }}
|
||||
placeholder="Текст вопроса..."
|
||||
onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
{(["TEXT", "SINGLE", "MULTIPLE"] as QType[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => updateQuestion(idx, { type: t })}
|
||||
className="text-xs px-2 py-1"
|
||||
style={{
|
||||
border: `2px solid ${q.type === t ? "var(--foreground)" : "var(--border)"}`,
|
||||
background: q.type === t ? "var(--foreground)" : "transparent",
|
||||
color: q.type === t ? "var(--background)" : "var(--foreground)",
|
||||
}}
|
||||
>
|
||||
{TYPE_LABELS[t]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button onClick={addQuestion} className="btn-aubade text-xs px-3 py-1.5">
|
||||
+ Добавить вопрос
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={pending || questions.length === 0 || questions.some((q) => !q.text.trim())}
|
||||
className="btn-aubade btn-aubade-accent text-xs px-4 py-1.5"
|
||||
style={{
|
||||
opacity:
|
||||
pending || questions.length === 0 || questions.some((q) => !q.text.trim())
|
||||
? 0.6
|
||||
: 1,
|
||||
}}
|
||||
>
|
||||
{pending ? "Сохранение..." : "Сохранить квиз"}
|
||||
</button>
|
||||
{initial && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={pending}
|
||||
className="text-xs px-3 py-1.5"
|
||||
style={{ color: "oklch(0.577 0.245 27.325)" }}
|
||||
>
|
||||
Удалить квиз
|
||||
</button>
|
||||
)}
|
||||
{saved && (
|
||||
<span
|
||||
className="text-xs self-center"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
✓ Сохранено
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { submitQuizAttempt } from "@/lib/actions/student-actions";
|
||||
|
||||
interface Question {
|
||||
id: string;
|
||||
text: string;
|
||||
type: "TEXT" | "SINGLE" | "MULTIPLE";
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
quiz: { id: string; questions: Question[] };
|
||||
attempt: { answers: Record<string, string> } | null;
|
||||
slug: string;
|
||||
lessonId: string;
|
||||
}
|
||||
|
||||
const inputStyle = {
|
||||
border: "2px solid var(--border)",
|
||||
background: "var(--background)",
|
||||
outline: "none",
|
||||
width: "100%",
|
||||
padding: "0.5rem 0.75rem",
|
||||
fontSize: "0.875rem",
|
||||
fontFamily: "inherit",
|
||||
resize: "vertical" as const,
|
||||
minHeight: "80px",
|
||||
};
|
||||
|
||||
export function QuizSection({ quiz, attempt, slug, lessonId }: Props) {
|
||||
const [answers, setAnswers] = useState<Record<string, string>>(
|
||||
attempt?.answers ?? {}
|
||||
);
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
const allFilled = quiz.questions.every((q) => answers[q.id]?.trim());
|
||||
|
||||
if (attempt) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-xs px-2 py-0.5 font-bold uppercase tracking-widest"
|
||||
style={{
|
||||
border: "2px solid var(--foreground)",
|
||||
background: "var(--accent)",
|
||||
}}
|
||||
>
|
||||
Заполнено
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{quiz.questions.map((q) => (
|
||||
<div key={q.id} className="space-y-1">
|
||||
<p className="text-sm font-medium">{q.text}</p>
|
||||
<div
|
||||
className="px-4 py-3 text-sm whitespace-pre-wrap opacity-70"
|
||||
style={{ border: "2px solid var(--border)" }}
|
||||
>
|
||||
{attempt.answers[q.id] || "—"}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{quiz.questions.map((q, idx) => (
|
||||
<div key={q.id} className="space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
{idx + 1}. {q.text}
|
||||
</p>
|
||||
<textarea
|
||||
value={answers[q.id] ?? ""}
|
||||
onChange={(e) =>
|
||||
setAnswers((prev) => ({ ...prev, [q.id]: e.target.value }))
|
||||
}
|
||||
style={inputStyle}
|
||||
placeholder="Ваш ответ..."
|
||||
onFocus={(e) => (e.currentTarget.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
disabled={pending || !allFilled}
|
||||
onClick={() =>
|
||||
startTransition(() =>
|
||||
submitQuizAttempt(quiz.id, lessonId, slug, answers)
|
||||
)
|
||||
}
|
||||
className="btn-aubade btn-aubade-accent text-sm px-5 py-2"
|
||||
style={{ opacity: pending || !allFilled ? 0.6 : 1 }}
|
||||
>
|
||||
{pending ? "Отправка..." : "Отправить"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
"use server";
|
||||
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { revalidatePath } from "next/cache";
|
||||
|
||||
async function requireAdmin() {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session || session.user.role !== "admin") throw new Error("Forbidden");
|
||||
}
|
||||
|
||||
export async function saveQuiz(
|
||||
lessonId: string,
|
||||
questions: { text: string; type: "TEXT" | "SINGLE" | "MULTIPLE"; order: number }[]
|
||||
) {
|
||||
await requireAdmin();
|
||||
|
||||
const existing = await prisma.quiz.findUnique({ where: { lessonId } });
|
||||
|
||||
if (existing) {
|
||||
await prisma.quizQuestion.deleteMany({ where: { quizId: existing.id } });
|
||||
await prisma.quizQuestion.createMany({
|
||||
data: questions.map((q) => ({
|
||||
quizId: existing.id,
|
||||
text: q.text,
|
||||
type: q.type,
|
||||
order: q.order,
|
||||
})),
|
||||
});
|
||||
} else {
|
||||
await prisma.quiz.create({
|
||||
data: {
|
||||
lessonId,
|
||||
questions: {
|
||||
create: questions.map((q) => ({
|
||||
text: q.text,
|
||||
type: q.type,
|
||||
order: q.order,
|
||||
})),
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
revalidatePath(`/admin`);
|
||||
}
|
||||
|
||||
export async function deleteQuiz(lessonId: string) {
|
||||
await requireAdmin();
|
||||
await prisma.quiz.delete({ where: { lessonId } });
|
||||
revalidatePath(`/admin`);
|
||||
}
|
||||
@@ -94,6 +94,43 @@ export async function submitHomework(
|
||||
revalidatePath(`/courses/${slug}/lessons/${lessonId}`);
|
||||
}
|
||||
|
||||
// ── Quiz ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function submitQuizAttempt(
|
||||
quizId: string,
|
||||
lessonId: string,
|
||||
slug: string,
|
||||
answers: Record<string, string>
|
||||
) {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) throw new Error("Unauthorized");
|
||||
|
||||
const existing = await prisma.quizAttempt.findFirst({
|
||||
where: { quizId, userId: session.user.id },
|
||||
});
|
||||
if (existing) return;
|
||||
|
||||
await prisma.$transaction(async (tx) => {
|
||||
await tx.quizAttempt.create({
|
||||
data: {
|
||||
userId: session.user.id,
|
||||
quizId,
|
||||
score: 0,
|
||||
answers: answers as object,
|
||||
},
|
||||
});
|
||||
await tx.lessonProgress.upsert({
|
||||
where: { userId_lessonId: { userId: session.user.id, lessonId } },
|
||||
create: { userId: session.user.id, lessonId },
|
||||
update: {},
|
||||
});
|
||||
});
|
||||
|
||||
revalidatePath(`/courses/${slug}/lessons/${lessonId}`);
|
||||
revalidatePath(`/courses/${slug}`);
|
||||
revalidatePath("/dashboard");
|
||||
}
|
||||
|
||||
// ── Comments ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function addComment(lessonId: string, slug: string, text: string) {
|
||||
|
||||
Reference in New Issue
Block a user