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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user