SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

numbered the questions in the Questionnaire type

Browse Source
This commit is contained in:
ArtChaos189 2023-12-16 15:17:07 +03:00
parent 194c3aade5
commit 5fb444e7bc
8 changed files with 947 additions and 960 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -29,7 +29,17 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, createUntypedQuestion, deleteQuestion, clearRuleForAll, toggleExpandQuestion, updateQuestion, updateUntypedQuestion, getQuestionByContentId, deleteQuestionWithTimeout } from "@root/questions/actions";
import {
copyQuestion,
createUntypedQuestion,
deleteQuestion,
clearRuleForAll,
toggleExpandQuestion,
updateQuestion,
updateUntypedQuestion,
getQuestionByContentId,
deleteQuestionWithTimeout,
} from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@ -63,7 +73,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
updateQuestionFn(question.id, (question) => {
question.title = title;
});
}, 200);
@ -102,7 +112,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
<TextField
defaultValue={question.title}
placeholder={"Заголовок вопроса"}
onChange={({ target }: { target: HTMLInputElement; }) => setTitle(target.value || " ")}
onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value || " ")}
InputProps={{
startAdornment: (
<Box>
@ -128,9 +138,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
margin: isMobile ? "10px 0" : 0,
"& .MuiInputBase-root": {
color: "#000000",
backgroundColor: question.expanded
? theme.palette.background.default
: "transparent",
backgroundColor: question.expanded ? theme.palette.background.default : "transparent",
height: "48px",
borderRadius: "10px",
".MuiOutlinedInput-notchedOutline": {
@ -226,13 +234,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
userSelect: "none",
}}
/>
<IconButton
sx={{ padding: "0" }}
onClick={() => copyQuestion(question.id, question.quizId)}
>
<CopyIcon
style={{ color: theme.palette.brightPurple.main }}
/>
<IconButton sx={{ padding: "0" }} onClick={() => copyQuestion(question.id, question.quizId)}>
<CopyIcon style={{ color: theme.palette.brightPurple.main }} />
</IconButton>
<IconButton
sx={{
@ -244,26 +247,30 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
onClick={() => {
const deleteFn = () => {
if (question.type !== null) {
if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
if (question.content.rule.parentId === "root") {
//удалить из стора root и очистить rule всем вопросам
updateRootContentId(quiz.id, "");
clearRuleForAll();
deleteQuestion(question.id);
questions.forEach(q => {
questions.forEach((q) => {
if (q.type === "result") {
deleteQuestion(q.id);
}
});
} else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
} else if (question.content.rule.parentId.length > 0) {
//удалить из стора вопрос из дерева и очистить его потомков
const clearQuestions = [] as string[];
//записываем потомков , а их результаты удаляем
const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
questions.forEach((targetQuestion) => {
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {
//если у вопроса совпал родитель с родителем => он потомок, в кучу его
if (targetQuestion.type === "result") {
deleteQuestion(targetQuestion.id);
} else {
if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id);
if (!clearQuestions.includes(targetQuestion.content.id))
clearQuestions.push(targetQuestion.content.id);
getChildren(targetQuestion); //и ищем его потомков
}
}
@ -272,7 +279,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
getChildren(question);
//чистим потомков от инфы ветвления
clearQuestions.forEach((id) => {
updateQuestion(id, question => {
updateQuestion(id, (question) => {
question.content.rule.parentId = "";
question.content.rule.main = [];
question.content.rule.default = "";
@ -282,10 +289,18 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
//чистим rule родителя
const parentQuestion = getQuestionByContentId(question.content.rule.parentId);
const newRule = {};
newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id); //удаляем условия перехода от родителя к этому вопросу
newRule.main = parentQuestion.content.rule.main.filter(
(data) => data.next !== question.content.id
); //удаляем условия перехода от родителя к этому вопросу
newRule.parentId = parentQuestion.content.rule.parentId;
newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);
newRule.default =
parentQuestion.content.rule.parentId === question.content.id
? ""
: parentQuestion.content.rule.parentId;
newRule.children = [...parentQuestion.content.rule.children].splice(
parentQuestion.content.rule.children.indexOf(question.content.id),
1
);
updateQuestion(question.content.rule.parentId, (PQ) => {
PQ.content.rule = newRule;
@ -293,7 +308,6 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
deleteQuestion(question.id);
}
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
@ -305,13 +319,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
}}
data-cy="delete-question"
>
<DeleteIcon
style={{ color: theme.palette.brightPurple.main }}
/>
<DeleteIcon style={{ color: theme.palette.brightPurple.main }} />
</IconButton>
</Box>
)}
{question.type !== null &&
{question.type !== null && (
<Box
style={{
display: "flex",
@ -322,17 +334,13 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
marginLeft: "3px",
borderRadius: "50%",
fontSize: "16px",
color: question.expanded
? theme.palette.brightPurple.main
: "#FFF",
background: question.expanded
? "#EEE4FC"
: theme.palette.brightPurple.main,
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
}}
>
{question.page + 1}
</Box>
}
)}
<IconButton
disableRipple
sx={{
@ -392,8 +400,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
backgroundPosition: "bottom",
backgroundRepeat: "repeat-x",
backgroundSize: "20px 1px",
backgroundImage:
"radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
backgroundImage: "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
}}
/>
<PlusIcon />
@ -406,82 +413,27 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return (
<Answer
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Answer color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "images":
return (
<OptionsPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <OptionsPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "varimg":
return (
<OptionsAndPict
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <OptionsAndPict color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "emoji":
return (
<Emoji
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Emoji color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "text":
return (
<Input
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Input color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "select":
return (
<DropDown
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <DropDown color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "date":
return (
<Date
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Date color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "number":
return (
<Slider
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Slider color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "file":
return (
<Download
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Download color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "page":
return (
<Page
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <Page color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
case "rating":
return (
<RatingIcon
color={isExpanded ? "#9A9AAF" : "#7E2AEA"}
sx={{ height: "22px", width: "20px" }}
/>
);
return <RatingIcon color={isExpanded ? "#9A9AAF" : "#7E2AEA"} sx={{ height: "22px", width: "20px" }} />;
default:
return <></>;
}

9
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -5,14 +5,12 @@ import { Draggable } from "react-beautiful-dnd";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import QuestionsPageCard from "./QuestionPageCard";
type FormDraggableListItemProps = {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
};
export default memo(
({ question, questionIndex }: FormDraggableListItemProps) => {
export default memo(({ question, questionIndex }: FormDraggableListItemProps) => {
const theme = useTheme();
return (
@ -45,7 +43,7 @@ export default memo(
</Typography>
<Typography
onClick={() => {
updateQuestion(question.id, question => {
updateQuestion(question.id, (question) => {
question.deleted = false;
});
}}
@ -80,5 +78,4 @@ export default memo(
)}
</Draggable>
);
}
);
});

150
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -11,8 +11,8 @@ import OptionsPict from "@icons/questionsPage/options_pict";
import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import { Box, InputAdornment, Paper } from "@mui/material";
import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import { Box, FormControlLabel, IconButton, InputAdornment, Paper, useMediaQuery, useTheme } from "@mui/material";
import { toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
@ -22,7 +22,13 @@ import SwitchQuestionsPage from "../../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import FormTypeQuestions from "../FormTypeQuestions";
import { QuestionType } from "@model/question/question";
import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { HideIcon } from "@icons/questionsPage/hideIcon";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import { NoLuggageOutlined, SignalCellularNullOutlined } from "@mui/icons-material";
interface Props {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
@ -30,18 +36,17 @@ interface Props {
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}
export default function QuestionsPageCard({
question,
questionIndex,
draggableProps,
}: Props) {
export default function QuestionsPageCard({ question, questionIndex, draggableProps }: Props) {
const [open, setOpen] = useState<boolean>(false);
const anchorRef = useRef(null);
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setTitle = useDebouncedCallback((title) => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
updateQuestionFn(question.id, (question) => {
question.title = title;
});
}, 200);
@ -65,15 +70,24 @@ export default function QuestionsPageCard({
<Box
sx={{
display: "flex",
p: 0,
flexDirection: "column",
padding: 0,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
margin: "20px",
gap: "18px",
flexDirection: isMobile ? "column-reverse" : null,
}}
>
<CustomTextField
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
text={question.title}
onChange={({ target }) => setTitle(target.value)}
sx={{ margin: "20px", width: "auto" }}
sx={{ width: "100%" }}
InputProps={{
startAdornment: (
<Box>
@ -94,19 +108,84 @@ export default function QuestionsPageCard({
/>
</Box>
),
endAdornment: (
<Box {...draggableProps}>
{questionIndex !== 0 && (
<InputAdornment position="start">
<PointsIcon
style={{ color: "#9A9AAF", fontSize: "30px" }}
/>
</InputAdornment>
)}
</Box>
),
}}
/>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: isMobile ? "100%" : "auto",
position: "relative",
}}
>
<Box
sx={{
flexDirection: isMobile ? "row-reverse" : null,
display: "flex",
alignItems: "center",
gap: "4px",
}}
>
<IconButton
sx={{ padding: "0", margin: "5px" }}
disableRipple
data-cy="expand-question"
onClick={() => toggleExpandQuestion(question.id)}
>
{question.expanded ? (
<ArrowDownIcon
style={{
width: "18px",
color: "#4D4D4D",
}}
/>
) : (
<ExpandLessIcon
sx={{
boxSizing: "border-box",
fill: theme.palette.brightPurple.main,
background: "#FFF",
borderRadius: "6px",
height: "30px",
width: "30px",
}}
/>
)}
</IconButton>
<Box
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "30px",
width: "30px",
marginLeft: "3px",
borderRadius: "50%",
fontSize: "16px",
color: question.expanded ? theme.palette.brightPurple.main : "#FFF",
background: question.expanded ? "#EEE4FC" : theme.palette.brightPurple.main,
}}
>
{questionIndex + 1}
</Box>
</Box>
<IconButton
disableRipple
sx={{
padding: isMobile ? "0" : "0 5px",
right: isMobile ? "0" : null,
bottom: isMobile ? "0" : null,
}}
{...draggableProps}
>
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Box>
</Box>
{question.type === null ? (
<FormTypeQuestions question={question} />
) : (
@ -123,41 +202,26 @@ const IconAndrom = (questionType: QuestionType | null) => {
case "variant":
return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "images":
return (
<OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
return <OptionsPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "varimg":
return (
<OptionsAndPict
color="#9A9AAF"
sx={{ height: "22px", width: "20px" }}
/>
);
return <OptionsAndPict color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "emoji":
return <Emoji color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "text":
return <Input color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "select":
return (
<DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
return <DropDown color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "date":
return <Date color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "number":
return <Slider color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "file":
return (
<Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
return <Download color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "page":
return <Page color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "rating":
return (
<RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
return <RatingIcon color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
default:
return (
<AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />
);
return <AnswerGroup color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
}
};

10
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -5,10 +5,8 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
import FormDraggableListItem from "./FormDraggableListItem";
import { useQuestions } from "@root/questions/hooks";
export const FormDraggableList = () => {
const { questions } = useQuestions()
const { questions } = useQuestions();
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);
@ -20,11 +18,7 @@ export const FormDraggableList = () => {
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
{questions?.map((question, index) => (
<FormDraggableListItem
key={question.id}
question={question}
questionIndex={index}
/>
<FormDraggableListItem key={question.id} question={question} questionIndex={index} />
))}
{provided.placeholder}
</Box>

5
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -8,7 +8,6 @@ import { FormDraggableList } from "./FormDraggableList";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
export default function FormQuestionsPage() {
const theme = useTheme();
const quiz = useCurrentQuiz();
@ -73,9 +72,7 @@ export default function FormQuestionsPage() {
data-cy="create-question"
>
<AddAnswer color="#EEE4FC" />
<Typography sx={{ color: "#9A9AAF" }}>
Добавить еще один вопрос
</Typography>
<Typography sx={{ color: "#9A9AAF" }}>Добавить еще один вопрос</Typography>
</Box>
</Box>
<Box

15
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -12,10 +12,7 @@ import Slider from "../../../assets/icons/questionsPage/slider";
import { QuestionType } from "@model/question/question";
import { createTypedQuestion } from "@root/questions/actions";
import type {
UntypedQuizQuestion
} from "../../../model/questionTypes/shared";
import type { UntypedQuizQuestion } from "../../../model/questionTypes/shared";
type ButtonTypeQuestion = {
icon: JSX.Element;
@ -61,7 +58,6 @@ interface Props {
}
export default function FormTypeQuestions({ question }: Props) {
return (
<Box>
<Box
@ -72,10 +68,8 @@ export default function FormTypeQuestions({ question }: Props) {
margin: "20px",
}}
>
{(("page" in question) && question.page === 0
? BUTTON_TYPE_QUESTIONS
: BUTTON_TYPE_SHORT_QUESTIONS
).map(({ icon, title, value: questionType }) => (
{("page" in question && question.page === 0 ? BUTTON_TYPE_QUESTIONS : BUTTON_TYPE_SHORT_QUESTIONS).map(
({ icon, title, value: questionType }) => (
<QuestionsMiniButton
key={title}
onClick={() => {
@ -84,7 +78,8 @@ export default function FormTypeQuestions({ question }: Props) {
icon={icon}
text={title}
/>
))}
)
)}
</Box>
</Box>
);

30
src/pages/Questions/QuestionsPage.tsx
View File

@ -1,12 +1,5 @@
import { useState, useEffect, useLayoutEffect, useRef } from "react"
import {
Box,
Button,
IconButton,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useState, useEffect, useLayoutEffect, useRef } from "react";
import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -14,7 +7,7 @@ import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/uiTools/actions";
@ -26,14 +19,13 @@ export default function QuestionsPage() {
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const quiz = useCurrentQuiz();
useLayoutEffect(() => {
updateOpenBranchingPanel(false)
updateEditSomeQuestion()
},[])
updateOpenBranchingPanel(false);
updateEditSomeQuestion();
}, []);
const ref = useRef()
const ref = useRef();
if (!quiz) return null;
return (
<>
<Box
@ -47,8 +39,7 @@ export default function QuestionsPage() {
margin: "60px 0 40px 0",
}}
>
<Typography variant={"h5"}>{
quiz.name ? quiz.name : "Заголовок квиза" }</Typography>
<Typography variant={"h5"}>{quiz.name ? quiz.name : "Заголовок квиза"}</Typography>
<Button
sx={{
display: openBranchingPanel ? "none" : "flex",
@ -64,7 +55,7 @@ export default function QuestionsPage() {
Свернуть всё
</Button>
</Box>
<QuestionSwitchWindowTool/>
<QuestionSwitchWindowTool />
<Box
sx={{
display: "flex",
@ -86,7 +77,6 @@ export default function QuestionsPage() {
<AddPlus />
</IconButton>
<Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
<Button
variant="outlined"
@ -112,7 +102,7 @@ export default function QuestionsPage() {
</Box>
</Box>
{createPortal(<QuizPreview />, document.body)}
{openedModalSettingsId !== null && <BranchingQuestions/>}
{openedModalSettingsId !== null && <BranchingQuestions />}
</>
);
}

4
src/pages/Questions/SwitchQuestionsPage.tsx
View File

@ -12,13 +12,11 @@ import UploadFile from "./UploadFile/UploadFile";
import AnswerOptions from "./answerOptions/AnswerOptions";
import { notReachable } from "../../utils/notReachable";
interface Props {
question: AnyTypedQuizQuestion;
}
export default function SwitchQuestionsPage({ question }: Props) {
switch (question.type) {
case "variant":
return <AnswerOptions question={question} />;
@ -54,6 +52,6 @@ export default function SwitchQuestionsPage({ question }: Props) {
return <RatingOptions question={question} />;
default:
notReachable(question)
notReachable(question);
}
}