diff --git a/src/components/quiz/question-form.tsx b/src/components/quiz/question-form.tsx
index 8aa7a99..c9e2523 100644
--- a/src/components/quiz/question-form.tsx
+++ b/src/components/quiz/question-form.tsx
@@ -5,22 +5,23 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import type { Answer, Question } from "@/types/quiz.ts";
-interface questionFormProps {
- question: Question;
- onUpdate: (updatedQuestion: Question) => void;
+interface QuestionFormProps {
+ question: Question & { advanced?: boolean };
+ onUpdate: (updatedQuestion: Question & { advanced?: boolean }) => void;
onRemove: (id: number) => void;
- advancedMode?: boolean;
}
export function QuestionForm({
question,
onUpdate,
onRemove,
- advancedMode = false,
-}: questionFormProps) {
+}: QuestionFormProps) {
+ const isAdvanced = Boolean(question.advanced);
+
const handleTextChange = (text: string) => {
onUpdate({ ...question, question: text });
};
@@ -95,16 +96,30 @@ export function QuestionForm({
>
Pytanie {question.id}
-
+
+
+ {
+ onUpdate({ ...question, advanced: checked });
+ }}
+ />
+
+ Zaawansowane
+
+
+
+
- {advancedMode ? (
+ {isAdvanced ? (
@@ -145,25 +160,26 @@ export function QuestionForm({
}}
/>
-
- {
- handleMultipleChange(Boolean(checked));
- }}
- />
-
-
) : null}
+
+ {
+ handleMultipleChange(Boolean(checked));
+ }}
+ />
+
+
+
Odpowiedzi
@@ -188,7 +204,7 @@ export function QuestionForm({
});
}}
/>
- {advancedMode ? (
+ {isAdvanced ? (
- {advancedMode ? (
+ {isAdvanced ? (
- questions.map((q) => ({
- ...q,
- image: advancedMode ? q.image : undefined,
- explanation: advancedMode ? q.explanation : undefined,
- answers: q.answers.map((a) => ({
- ...a,
- image: advancedMode ? a.image : undefined,
- })),
- }));
+type QuestionWithAdvanced = Question & { advanced?: boolean };
+
+const sanitizeQuestions = (questions: QuestionWithAdvanced[]) =>
+ questions.map((q) => {
+ const isAdvanced = Boolean(q.advanced);
+ const { advanced, ...rest } = q;
+ return {
+ ...rest,
+ image: isAdvanced ? q.image : undefined,
+ explanation: isAdvanced ? q.explanation : undefined,
+ answers: q.answers.map((a) => ({
+ ...a,
+ image: isAdvanced ? a.image : undefined,
+ })),
+ };
+ });
const scrollToBottom = () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
@@ -61,13 +66,28 @@ export function QuizEditor({
onSaveAndClose,
saving = false,
}: QuizEditorProps) {
+ const initialAdvancedDefault =
+ initialQuiz?.questions?.some(
+ (q) =>
+ Boolean(q.image) ||
+ Boolean(q.explanation) ||
+ q.answers.some((a) => Boolean(a.image)),
+ ) ?? false;
+
const [title, setTitle] = useState(initialQuiz?.title ?? "");
const [description, setDescription] = useState(
initialQuiz?.description ?? "",
);
- const [questions, setQuestions] = useState(() => {
+
+ const [questions, setQuestions] = useState(() => {
if (initialQuiz?.questions != null && initialQuiz.questions.length > 0) {
- return initialQuiz.questions;
+ return initialQuiz.questions.map((q) => ({
+ ...q,
+ advanced:
+ Boolean(q.image) ||
+ Boolean(q.explanation) ||
+ q.answers.some((a) => Boolean(a.image)),
+ }));
}
return [
{
@@ -78,23 +98,20 @@ export function QuizEditor({
{ answer: "", correct: false },
{ answer: "", correct: false },
],
+ image: "",
+ explanation: "",
+ advanced: initialAdvancedDefault,
},
];
});
+
const [error, setError] = useState(null);
- const [advancedMode, setAdvancedMode] = useState(
- initialQuiz?.questions?.some(
- (q) =>
- Boolean(q.image) ||
- Boolean(q.explanation) ||
- q.answers.some((a) => Boolean(a.image)),
- ) ?? false,
- );
+ const [advancedMode, setAdvancedMode] = useState(initialAdvancedDefault);
+
const [previousQuestionId, setPreviousQuestionId] = useState(() =>
questions.reduce((max, q) => Math.max(q.id, max), 0),
);
- // all questions multiple toggle state (true / false / mixed null)
const allQuestionsMultiple: boolean | null = useMemo(() => {
if (questions.length === 0) {
return null;
@@ -128,6 +145,7 @@ export function QuizEditor({
],
image: "",
explanation: "",
+ advanced: advancedMode,
},
]);
setPreviousQuestionId(newId);
@@ -158,7 +176,7 @@ export function QuizEditor({
});
};
- const updateQuestion = (updated: Question) => {
+ const updateQuestion = (updated: QuestionWithAdvanced) => {
setQuestions((previous) =>
previous.map((q) => (q.id === updated.id ? updated : q)),
);
@@ -171,7 +189,7 @@ export function QuizEditor({
const draft = {
title,
description,
- questions: sanitizeQuestions(questions, advancedMode),
+ questions: sanitizeQuestions(questions),
};
draft.title = draft.title.trim();
@@ -223,7 +241,7 @@ export function QuizEditor({
- {advancedMode ? (
-
-
- {
- setAllQuestionsMultiple(Boolean(checked));
- }}
- />
-
-
+
+
+ {
+ setAllQuestionsMultiple(Boolean(checked));
+ }}
+ />
+
- ) : null}
+
Pytania
@@ -300,7 +311,6 @@ export function QuizEditor({
question={q}
onUpdate={updateQuestion}
onRemove={removeQuestion}
- advancedMode={advancedMode}
/>
))}