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,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>
+  );
+}