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>
2026-04-27 11:43:16 +05:00
parent 3ed7bc147b
commit d2150153df
6 changed files with 412 additions and 3 deletions
@@ -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>
+  );
+}