Merge branch 'branching' into backend-integration

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -13,6 +13,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^13.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "@types/cytoscape": "^3.19.16",
         "@types/file-saver": "^2.0.5",
         "@types/jest": "^27.0.1",
         "@types/node": "^16.7.13",
@@ -21,6 +22,7 @@
         "@types/react-dom": "^18.0.0",
         "axios": "^1.5.1",
         "cytoscape": "^3.26.0",
+        "cytoscape-popper": "^2.0.0",
         "dayjs": "^1.11.10",
         "emoji-mart": "^5.5.2",
         "file-saver": "^2.0.5",
@@ -43,7 +45,7 @@
         "react-router-dom": "^6.6.2",
         "react-scripts": "5.0.1",
         "swr": "^2.2.4",
-        "typescript": "^4.4.2",
+        "typescript": "^5.2.2",
         "use-debounce": "^9.0.4",
         "web-vitals": "^2.1.0",
         "yup": "^1.3.2",
@@ -56,12 +58,6 @@
         "eject": "craco eject",
         "cypress:open": "cypress open"
     },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
     "browserslist": {
         "production": [
             ">0.2%",
@@ -77,8 +73,9 @@
     "devDependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
+        "@types/cytoscape-popper": "^2.0.4",
         "@types/react-beautiful-dnd": "^13.1.4",
-        "@types/react-cytoscapejs": "^1.2.4",
+        "@types/react-cytoscapejs": "^1.2.5",
         "craco-alias": "^3.0.1",
         "cypress": "^13.4.0"
     }

src/api/question.ts

@@ -30,6 +30,7 @@ async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
 }
 
 function editQuestion(body: EditQuestionRequest, signal?: AbortSignal) {
+    console.log("`${baseUrl}/question/edit` start")
     return makeRequest<EditQuestionRequest, EditQuestionResponse>({
         url: `${baseUrl}/question/edit`,
         body,

src/api/quiz.ts

@@ -93,7 +93,7 @@ const defaultCreateQuizBody: CreateQuizRequest = {
     "note_prevented": true,
     "mail_notifications": false,
     "unique_answers": true,
-    "name": "Название квиза",
+    "name": "",
     "description": "",
     "config": JSON.stringify(defaultQuizConfig),
     "status": "stop",

src/assets/icons/checked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 -2.62268e-07C21.3137 -1.17422e-07 24 2.68629 24 6L24 18C24 21.3137 21.3137 24 18 24L6 24C2.68629 24 -9.31652e-07 21.3137 -7.86805e-07 18L-5.24537e-07 12L-2.62268e-07 6C-1.17422e-07 2.68629 2.68629 -9.31652e-07 6 -7.86805e-07L18 -2.62268e-07Z" fill="#9A9AAF" fill-opacity="0.7"/>
+<path d="M7 11.5L11.2857 15.5L17 8" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/constants/base.ts

@@ -1,4 +1,4 @@
-import type { QuizQuestionBase } from "../model/questionTypes/shared";
+import type { QuizQuestionBase, QuestionBranchingRuleMain } from "../model/questionTypes/shared";
 
 
 export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id" | "backendId"> = {
@@ -12,20 +12,15 @@ export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id" | "backendId"> = {
     deleted: false,
     deleteTimeoutId: 0,
     content: {
+        id: "",
         hint: {
             text: "",
             video: "",
         },
         rule: {
-            or: true,
-            show: true,
-            title: "",
-            reqs: [
-                {
-                    id: "",
-                    vars: [],
-                },
-            ],
+            main: [] as QuestionBranchingRuleMain[],
+            parentId: "",
+            default: ""
         },
         back: "",
         originalBack: "",

src/model/question/question.ts

@@ -46,16 +46,18 @@ export interface RawQuestion {
 
 export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyTypedQuizQuestion {
     let content = defaultQuestionByType[rawQuestion.type].content;
+    const frontId = nanoid()
 
     try {
         content = JSON.parse(rawQuestion.content);
+        if (content.id.length === 0 || content.id.length === undefined) content.id = frontId
     } catch (error) {
         console.warn("Cannot parse question content from string, using default content", error);
     }
 
     return {
         backendId: rawQuestion.id,
-        id: nanoid(),
+        id: frontId,
         description: rawQuestion.description,
         page: rawQuestion.page,
         quizId: rawQuestion.quiz_id,

src/model/questionTypes/date.ts

@@ -7,6 +7,7 @@ import type {
 export interface QuizQuestionDate extends QuizQuestionBase {
   type: "date";
   content: {
+    id: string;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
     /** Чекбокс "Внутреннее название вопроса" */

src/model/questionTypes/emoji.ts

@@ -8,6 +8,7 @@ import type {
 export interface QuizQuestionEmoji extends QuizQuestionBase {
   type: "emoji";
   content: {
+    id: string;
     /** Чекбокс "Можно несколько" */
     multi: boolean;
     /** Чекбокс "Вариант "свой ответ"" */

src/model/questionTypes/file.ts

@@ -17,6 +17,7 @@ export type UploadFileType = keyof typeof UPLOAD_FILE_TYPES_MAP;
 export interface QuizQuestionFile extends QuizQuestionBase {
   type: "file";
   content: {
+    id: string;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
     /** Чекбокс "Внутреннее название вопроса" */

src/model/questionTypes/images.ts

@@ -8,6 +8,7 @@ import type {
 export interface QuizQuestionImages extends QuizQuestionBase {
     type: "images";
     content: {
+        id: string;
         /** Чекбокс "Вариант "свой ответ"" */
         own: boolean;
         /** Чекбокс "Можно несколько" */

src/model/questionTypes/number.ts

@@ -7,6 +7,7 @@ import type {
 export interface QuizQuestionNumber extends QuizQuestionBase {
   type: "number";
   content: {
+    id: string;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
     /** Чекбокс "Внутреннее название вопроса" */

src/model/questionTypes/page.ts

@@ -7,6 +7,7 @@ import type {
 export interface QuizQuestionPage extends QuizQuestionBase {
   type: "page";
   content: {
+    id: string;
     /** Чекбокс "Внутреннее название вопроса" */
     innerNameCheck: boolean;
     /** Поле "Внутреннее название вопроса" */

src/model/questionTypes/rating.ts

@@ -7,6 +7,7 @@ import type {
 export interface QuizQuestionRating extends QuizQuestionBase {
   type: "rating";
   content: {
+    id: string;
     /** Чекбокс "Необязательный вопрос" */
     required: boolean;
     /** Чекбокс "Внутреннее название вопроса" */

src/model/questionTypes/select.ts

@@ -8,6 +8,7 @@ import type {
 export interface QuizQuestionSelect extends QuizQuestionBase {
   type: "select";
   content: {
+    id: string;
     /** Чекбокс "Можно несколько" */
     multi: boolean;
     /** Чекбокс "Необязательный вопрос" */

src/model/questionTypes/shared.ts

@@ -12,17 +12,20 @@ import type { QuizQuestionVariant } from "./variant";
 import type { QuizQuestionVarImg } from "./varimg";
 import { nanoid } from "nanoid";
 
-
+export interface QuestionBranchingRuleMain {
+        next: string;
+        or: boolean;
+        rules: {
+            question: string; //id родителя (пока что)
+            answers: string[]
+        }[]
+}
 export interface QuestionBranchingRule {
-    /** Радиокнопка "Все условия обязательны" */
-    or: boolean;
-    show: boolean;
-    title: string;
-    reqs: {
-        id: string;
-        /** Список выбранных вариантов */
-        vars: number[];
-    }[];
+
+    //список условий
+    main: QuestionBranchingRuleMain[];
+    parentId: string | null | "root";
+    default: string;
 }
 
 export interface QuestionHint {
@@ -59,6 +62,7 @@ export interface QuizQuestionBase {
     deleted: boolean;
     deleteTimeoutId: number;
     content: {
+        id: string;
         hint: QuestionHint;
         rule: QuestionBranchingRule;
         back: string;
@@ -97,6 +101,14 @@ type FilterQuestionsWithVariants<T> = T extends {
 export type QuizQuestionsWithVariants = FilterQuestionsWithVariants<AnyTypedQuizQuestion>;
 
 
+export const createBranchingRuleMain: (targetId:string, parentId:string) => QuestionBranchingRuleMain = (targetId, parentId) => ({
+    next: targetId,
+    or: false,
+    rules: [{
+        question: parentId,
+        answers: [] as string[],
+    }]
+})
 export const createQuestionVariant: () => QuestionVariant = () => ({
     id: nanoid(),
     answer: "",

src/model/questionTypes/text.ts

@@ -7,6 +7,7 @@ import type {
 export interface QuizQuestionText extends QuizQuestionBase {
   type: "text";
   content: {
+    id: string;
     placeholder: string;
     /** Чекбокс "Внутреннее название вопроса" */
     innerNameCheck: boolean;

src/model/questionTypes/variant.ts

@@ -8,6 +8,7 @@ import type {
 export interface QuizQuestionVariant extends QuizQuestionBase {
   type: "variant";
   content: {
+    id: string;
     /** Чекбокс "Длинный текстовый ответ" */
     largeCheck: boolean;
     /** Чекбокс "Можно несколько" */

src/model/questionTypes/varimg.ts

@@ -8,6 +8,7 @@ import type {
 export interface QuizQuestionVarImg extends QuizQuestionBase {
     type: "varimg";
     content: {
+        id: string;
         /** Чекбокс "Вариант "свой ответ"" */
         own: boolean;
         /** Чекбокс "Внутреннее название вопроса" */

src/model/quizSettings.ts

@@ -33,6 +33,7 @@ export interface QuizConfig {
     noStartPage: boolean;
     startpageType: QuizStartpageType;
     results: QuizResultsType;
+    haveRoot: boolean;
     startpage: {
         description: string;
         button: string;
@@ -61,6 +62,7 @@ export const defaultQuizConfig: QuizConfig = {
     noStartPage: false,
     startpageType: null,
     results: null,
+    haveRoot: false,
     startpage: {
         description: "",
         button: "",

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -1,7 +1,7 @@
 import { MessageIcon } from "@icons/messagIcon";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
-import TextareaAutosize from "@mui/base/TextareaAutosize";
+import {TextareaAutosize} from "@mui/base/TextareaAutosize";
 import {
     Box,
     FormControl,

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -0,0 +1,611 @@
+import { useEffect, useRef, useState } from "react";
+import Cytoscape from "cytoscape";
+import CytoscapeComponent from "react-cytoscapejs";
+import popper from "cytoscape-popper";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { updateRootInfo } from "@root/quizes/actions"
+import { AnyQuizQuestion } from "@model/questionTypes/shared"
+import { useQuestionsStore } from "@root/questions/store";
+import { cleardragQuestionContentId, getQuestionById, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
+
+import { storeToNodes } from "./helper";
+
+import "./styles.css";
+
+import type {
+  Stylesheet,
+  Core,
+  NodeSingular,
+  AbstractEventObject,
+  ElementDefinition,
+} from "cytoscape";
+import { QuestionsList } from "../BranchingPanel/QuestionsList";
+import { enqueueSnackbar } from "notistack";
+
+type PopperItem = {
+  id: () => string;
+};
+
+type Modifier = {
+  name: string;
+  options: unknown;
+};
+
+type PopperConfig = {
+  popper: {
+    placement: string;
+    modifiers?: Modifier[];
+  };
+  content: (items: PopperItem[]) => void;
+};
+
+type Popper = {
+  update: () => Promise<void>;
+  setOptions: (modifiers: { modifiers?: Modifier[] }) => void;
+};
+
+type NodeSingularWithPopper = NodeSingular & {
+  popper: (config: PopperConfig) => Popper;
+};
+
+const stylesheet: Stylesheet[] = [
+  {
+    selector: "node",
+    style: {
+      shape: "round-rectangle",
+      width: 130,
+      height: 130,
+      backgroundColor: "#FFFFFF",
+      label: "data(label)",
+      "font-size": "16",
+      color: "#4D4D4D",
+      "text-halign": "center",
+      "text-valign": "center",
+      "text-wrap": "wrap",
+      "text-max-width": "80",
+    },
+  },
+  {
+    selector: ".multiline-auto",
+    style: {
+      "text-wrap": "wrap",
+      "text-max-width": "80",
+    },
+  },
+  {
+    selector: "edge",
+    style: {
+      width: 30,
+      "line-color": "#DEDFE7",
+      "curve-style": "taxi",
+      "taxi-direction": "horizontal",
+      "taxi-turn": 60,
+    },
+  },
+  {
+    selector: ":selected",
+    style: {
+      "border-style": "solid",
+      "border-width": 1.5,
+      "border-color": "#9A9AAF",
+    },
+  },
+];
+
+Cytoscape.use(popper);
+
+interface Props {
+  modalQuestionParentContentId: string;
+  modalQuestionTargetContentId: string;
+  setOpenedModalQuestions: (open: boolean) => void;
+  setModalQuestionParentContentId: (id: string) => void;
+  setModalQuestionTargetContentId: (id: string) => void;
+}
+
+
+export const CsComponent = ({
+  modalQuestionParentContentId,
+  modalQuestionTargetContentId,
+  setOpenedModalQuestions,
+  setModalQuestionParentContentId,
+  setModalQuestionTargetContentId
+}: Props) => {
+  const quiz = useCurrentQuiz();
+
+  const { dragQuestionContentId, questions } = useQuestionsStore()
+  const [startCreate, setStartCreate] = useState("");
+  const [startRemove, setStartRemove] = useState("");
+
+  const cyRef = useRef<Core | null>(null);
+  const layoutsContainer = useRef<HTMLDivElement | null>(null);
+  const plusesContainer = useRef<HTMLDivElement | null>(null);
+  const crossesContainer = useRef<HTMLDivElement | null>(null);
+  const gearsContainer = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
+      console.log("был выбран вопрос " + modalQuestionTargetContentId)
+    }
+
+  }, [modalQuestionTargetContentId])
+
+  const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => {
+    console.log("dragQuestionContentId       " + dragQuestionContentId)
+    const cy = cyRef?.current
+    const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
+    const targetQuestion = { ...getQuestionByContentId(dragQuestionContentId) } as AnyQuizQuestion
+
+    if (Object.keys(targetQuestion).length !== 0 && Object.keys(targetQuestion).length !== 0 && parentNodeContentId && parentNodeChildren !== undefined) {
+      clearDataAfterAddNode({ parentNodeContentId, targetQuestion, parentNodeChildren })
+      cy?.add([
+        {
+          data: {
+            id: targetQuestion.content.id,
+            label: targetQuestion.title || "noname"
+          }
+        },
+        {
+          data: {
+            source: parentNodeContentId,
+            target: targetQuestion.content.id
+          }
+        }
+      ]).layout(lyopts).run()
+    } else {
+      enqueueSnackbar("Добавляемый вопрос не найден")
+    }
+  }
+
+  const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren: number }) => {
+    console.log("записываю на бек ид родителя")
+    console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
+    //предупреждаем добавленный вопрос о том, кто его родитель
+    updateQuestion(targetQuestion.content.id, question => {
+      question.content.rule.parentId = parentNodeContentId
+      question.content.rule.main = []
+    })
+
+    //Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
+    if (parentNodeChildren > 1) {
+      updateOpenedModalSettingsId(parentNodeContentId)
+    } else {
+      //Если ребёнок первый - добавляем его родителю как дефолтный
+      updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
+    }
+  }
+
+  const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
+    console.log("remove")
+    const cy = cyRef?.current
+
+    const a = getQuestionByContentId(targetNodeContentId)
+    console.log(a)
+    console.log(a.content)
+    console.log(a.content.rule.parentId)
+    console.log(a.content.rule.parentId === "root")
+    console.log(targetNodeContentId)
+
+    if (a.content.rule.parentId === "root" && quiz) {
+      console.log("click ROOT")
+      updateQuestion(targetNodeContentId, question => {
+        question.content.rule.parentId = ""
+        question.content.rule.main = []
+        question.content.rule.default = ""
+      })
+      updateRootInfo(quiz?.id, false)
+    } else {
+      console.log("click  not  ROOT")
+      const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
+      if (targetNodeContentId && parentQuestionContentId) {
+
+        clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
+        cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
+      }
+
+
+    }
+  }
+  const clearDataAfterRemoveNode = ({ targetQuestionContentId, parentQuestionContentId }: { targetQuestionContentId: string, parentQuestionContentId: string }) => {
+
+
+
+    console.log({ targetQuestionContentId, parentQuestionContentId })
+
+    updateQuestion(targetQuestionContentId, question => {
+      question.content.rule.parentId = ""
+      question.content.rule.main = []
+      question.content.rule.default = ""
+    })
+    updateQuestion(parentQuestionContentId, question => {
+      if (question.content.rule.parentId === parentQuestionContentId) question.content.rule.parentId = ""
+    })
+
+  }
+
+
+  useEffect(() => {
+    if (startCreate) {
+      addNode({ parentNodeContentId: startCreate });
+      cleardragQuestionContentId()
+      setStartCreate("");
+    }
+  }, [startCreate]);
+
+  useEffect(() => {
+    if (startRemove) {
+      removeNode({ targetNodeContentId: startRemove });
+      setStartRemove("");
+    }
+  }, [startRemove]);
+
+
+
+
+  const readyLO = (e) => {
+    //удаляем иконки
+    e.cy.nodes().forEach((ele: any) => {
+      const data = ele.data()
+      data.id && removeButtons(data.id);
+    })
+    initialPopperIcons(e)
+  }
+
+  const lyopts = {
+    name: 'preset',
+
+    positions: (e) => {
+      console.log('POSITIIIIIIIONS')
+      const id = e.id()
+      const incomming = e.cy().edges(`[target="${id}"]`)
+      const layer = 0
+      e.removeData('lastChild')
+
+      if (incomming.length === 0) {
+        const children = e.cy().edges(`[source="${id}"]`)
+        e.data('layer', layer)
+        e.data('children', children.targets().length)
+        const queue = []
+        children.forEach(n => {
+          queue.push({ task: n.target(), layer: layer + 1 })
+        })
+        while (queue.length) {
+          const task = queue.pop()
+          task.task.data('layer', task.layer)
+          const children = e.cy().edges(`[source="${task.task.id()}"]`)
+          task.task.data('children', children.targets().length)
+          if (children.length !== 0) {
+            children.forEach(n => queue.push({ task: n.target(), layer: task.layer + 1 }))
+          }
+        }
+        queue.push({ parent: e, children: children.targets() })
+        while (queue.length) {
+          const task = queue.pop()
+          if (task.children.length === 0) {
+            task.parent.data('subtreeWidth', 0)
+            continue
+          }
+          const unprocessed = task?.children.filter(e => {
+            return (e.data('subtreeWidth') === undefined)
+          })
+          if (unprocessed.length !== 0) {
+            queue.push(task)
+            unprocessed.forEach(t => {
+              queue.push({ parent: t, children: t.cy().edges(`[source="${t.id()}"]`).targets() })
+            })
+            continue
+          }
+
+          task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
+        }
+        return { x: 200 * e.data('layer'), y: 0 }
+      } else {
+        const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
+        const wing = parent.data('subtreeWidth') / 2
+        const lastOffset = parent.data('lastChild')
+        const step = wing * 2 / (parent.data('children') - 1)
+        //e.removeData('subtreeWidth')
+        if (lastOffset !== undefined) {
+          parent.data('lastChild', lastOffset + step)
+          return { x: 200 * e.data('layer'), y: (lastOffset + step) }
+        } else {
+          parent.data('lastChild', parent.position().y - wing)
+          return { x: 200 * e.data('layer'), y: (parent.position().y - wing) }
+        }
+      }
+    }, // map of (node id) => (position obj); or function(node){ return somPos; }
+    zoom: undefined, // the zoom level to set (prob want fit = false if set)
+    pan: true, // the pan level to set (prob want fit = false if set)
+    fit: false, // whether to fit to viewport
+    padding: 30, // padding on fit
+    animate: false, // whether to transition the node positions
+    animationDuration: 500, // duration of animation in ms if enabled
+    animationEasing: undefined, // easing of animation if enabled
+    animateFilter: function (node, i) { return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
+    ready: readyLO, // callback on layoutready
+    transform: function (node, position) { return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
+  }
+
+  useEffect(() => {
+    document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
+    const cy = cyRef.current;
+    const eles = cy?.add(storeToNodes(questions))
+    console.log('PETTY', storeToNodes(questions), eles.length)
+    const elecs = eles.layout(lyopts).run()
+
+    cy?.fit()
+    //cy?.layout().run()
+
+    return () => {
+      document.querySelector("#root")?.removeEventListener("mouseup", cleardragQuestionContentId);
+      layoutsContainer.current?.remove();
+      plusesContainer.current?.remove();
+      crossesContainer.current?.remove();
+      gearsContainer.current?.remove();
+    };
+  }, []);
+
+
+  const removeButtons = (id: string) => {
+    layoutsContainer.current
+      ?.querySelector(`.popper-layout[data-id='${id}']`)
+      ?.remove();
+    plusesContainer.current
+      ?.querySelector(`.popper-plus[data-id='${id}']`)
+      ?.remove();
+    crossesContainer.current
+      ?.querySelector(`.popper-cross[data-id='${id}']`)
+      ?.remove();
+    gearsContainer.current
+      ?.querySelector(`.popper-gear[data-id='${id}']`)
+      ?.remove();
+  };
+
+
+  const initialPopperIcons = (e) => {
+    const cy = e.cy
+
+    const container =
+      (document.body.querySelector(
+        ".__________cytoscape_container"
+      ) as HTMLDivElement) || null;
+
+    if (!container) {
+      return;
+    }
+
+    container.style.overflow = "hidden";
+
+    if (!plusesContainer.current) {
+      plusesContainer.current = document.createElement("div");
+      plusesContainer.current.setAttribute("id", "popper-pluses");
+      container.append(plusesContainer.current);
+    }
+    if (!crossesContainer.current) {
+      crossesContainer.current = document.createElement("div");
+      crossesContainer.current.setAttribute("id", "popper-crosses");
+      container.append(crossesContainer.current);
+    }
+    if (!gearsContainer.current) {
+      gearsContainer.current = document.createElement("div");
+      gearsContainer.current.setAttribute("id", "popper-gears");
+      container.append(gearsContainer.current);
+    }
+    if (!layoutsContainer.current) {
+      layoutsContainer.current = document.createElement("div");
+      layoutsContainer.current.setAttribute("id", "popper-layouts");
+      container.append(layoutsContainer.current);
+    }
+
+    const ext = cy.extent()
+    const nodesInView = cy.nodes().filter(n => {
+      const bb = n.boundingBox()
+      return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2
+    })
+
+    nodesInView
+      .toArray()
+      ?.forEach((item) => {
+        const node = item as NodeSingularWithPopper;
+
+        const layoutsPopper = node.popper({
+          popper: {
+            placement: "left",
+            modifiers: [{ name: "flip", options: { boundary: node } }],
+          },
+          content: ([item]) => {
+            const itemId = item.id();
+            const itemElement = layoutsContainer.current?.querySelector(
+              `.popper-layout[data-id='${itemId}']`
+            );
+            if (itemElement) {
+              return itemElement;
+            }
+
+            const layoutElement = document.createElement("div");
+            layoutElement.style.zIndex = "0"
+            layoutElement.classList.add("popper-layout");
+            layoutElement.setAttribute("data-id", item.id());
+            layoutElement.addEventListener("mouseup", () => {
+              alert("layout")
+            }
+              // setStartCreate(node.id())
+            );
+            layoutsContainer.current?.appendChild(layoutElement);
+
+            return layoutElement;
+          },
+        });
+
+        const plusesPopper = node.popper({
+          popper: {
+            placement: "right",
+            modifiers: [{ name: "flip", options: { boundary: node } }],
+          },
+          content: ([item]) => {
+            const itemId = item.id();
+            const itemElement = plusesContainer.current?.querySelector(
+              `.popper-plus[data-id='${itemId}']`
+            );
+            if (itemElement) {
+              return itemElement;
+            }
+
+            const plusElement = document.createElement("div");
+            plusElement.classList.add("popper-plus");
+            plusElement.setAttribute("data-id", item.id());
+            plusElement.style.zIndex = "1"
+            plusElement.addEventListener("mouseup", () => {
+              setStartCreate(node.id());
+            });
+            plusesContainer.current?.appendChild(plusElement);
+
+            return plusElement;
+          },
+        });
+
+        const crossesPopper = node.popper({
+          popper: {
+            placement: "top-end",
+            modifiers: [{ name: "flip", options: { boundary: node } }],
+          },
+          content: ([item]) => {
+            const itemId = item.id();
+            const itemElement = crossesContainer.current?.querySelector(
+              `.popper-cross[data-id='${itemId}']`
+            );
+            if (itemElement) {
+              return itemElement;
+            }
+
+            const crossElement = document.createElement("div");
+            crossElement.classList.add("popper-cross");
+            crossElement.setAttribute("data-id", item.id());
+            crossElement.style.zIndex = "2"
+            crossesContainer.current?.appendChild(crossElement);
+            crossElement.addEventListener("mouseup", () => {
+              setStartRemove(node.id())
+
+
+            }
+            );
+
+            return crossElement;
+          },
+        });
+
+        const gearsPopper = node.popper({
+          popper: {
+            placement: "left",
+            modifiers: [{ name: "flip", options: { boundary: node } }],
+          },
+          content: ([item]) => {
+            const itemId = item.id();
+            if (item.data().lastChild === NaN || item.data().lastChild === undefined) {
+              return;
+            }
+
+            const itemElement = gearsContainer.current?.querySelector(
+              `.popper-gear[data-id='${itemId}']`
+            );
+            if (itemElement) {
+              return itemElement;
+            }
+
+            const gearElement = document.createElement("div");
+            gearElement.classList.add("popper-gear");
+            gearElement.setAttribute("data-id", item.id());
+            gearElement.style.zIndex = "1"
+            gearsContainer.current?.appendChild(gearElement);
+            gearElement.addEventListener("mouseup", (e) => {
+              console.log("шестерня")
+              //  setOpenedModalSettings(
+              //    findQuestionById(quizId, node.id().split(" ").pop() || "").index
+              //  );
+            });
+
+            return gearElement;
+          },
+        });
+
+        const update = async () => {
+          await plusesPopper.update();
+          await crossesPopper.update();
+          await gearsPopper.update();
+          await layoutsPopper.update();
+        };
+
+        const onZoom = (event: AbstractEventObject) => {
+          const zoom = event.cy.zoom();
+
+          update();
+
+          crossesPopper.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [-5 * zoom, -30 * zoom] } },
+            ],
+          });
+
+          layoutsPopper.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [0, -130 * zoom] } },
+            ],
+          });
+
+          layoutsContainer.current
+            ?.querySelectorAll("#popper-layouts > .popper-layout")
+            .forEach((item) => {
+              const element = item as HTMLDivElement;
+              element.style.width = `${130 * zoom}px`;
+              element.style.height = `${130 * zoom}px`;
+            });
+
+          plusesContainer.current
+            ?.querySelectorAll("#popper-pluses > .popper-plus")
+            .forEach((item) => {
+              const element = item as HTMLDivElement;
+              element.style.width = `${40 * zoom}px`;
+              element.style.height = `${40 * zoom}px`;
+              element.style.fontSize = `${40 * zoom}px`;
+              element.style.borderRadius = `${6 * zoom}px`;
+            });
+
+          crossesContainer.current
+            ?.querySelectorAll("#popper-crosses > .popper-cross")
+            .forEach((item) => {
+              const element = item as HTMLDivElement;
+              element.style.width = `${24 * zoom}px`;
+              element.style.height = `${24 * zoom}px`;
+              element.style.fontSize = `${24 * zoom}px`;
+              element.style.borderRadius = `${6 * zoom}px`;
+            });
+
+          gearsContainer.current
+            ?.querySelectorAll("#popper-gears > .popper-gear")
+            .forEach((item) => {
+              const element = item as HTMLDivElement;
+              element.style.width = `${60 * zoom}px`;
+              element.style.height = `${40 * zoom}px`;
+            });
+        };
+
+        node?.on("position", update);
+        cy?.on("pan zoom resize render", onZoom);
+      });
+  };
+
+  return (
+    <CytoscapeComponent
+      wheelSensitivity={0.1}
+      elements={[]}
+      // elements={createGraphElements(tree, quiz)}
+      style={{ height: "480px", background: "#F2F3F7" }}
+      stylesheet={stylesheet}
+      layout={(lyopts)}
+      cy={(cy) => {
+        cyRef.current = cy;
+      }}
+    />
+  );
+};

src/pages/Questions/BranchingMap/FirstNodeField.tsx

@@ -0,0 +1,73 @@
+import { Box } from "@mui/material"
+import { useEffect, useRef, useState } from "react";
+import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
+import { updateRootInfo } from "@root/quizes/actions"
+import { useQuestionsStore } from "@root/questions/store"
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { enqueueSnackbar } from "notistack";
+
+interface Props {
+    setOpenedModalQuestions: (open: boolean) => void;
+    modalQuestionTargetContentId: string;
+}
+export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
+    const { dragQuestionContentId } = useQuestionsStore()
+    const Container = useRef<HTMLDivElement | null>(null);
+    const quiz = useCurrentQuiz();
+    console.log(dragQuestionContentId)
+
+    const modalOpen = () => setOpenedModalQuestions(true)
+
+    const newRootNode = () => {
+        if (quiz) {
+            console.log(dragQuestionContentId)
+
+            if (dragQuestionContentId) {
+                updateRootInfo(quiz?.id, true)
+                updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
+            }
+        } else {
+            enqueueSnackbar("Нет информации о взятом опроснике")
+        }
+    }
+
+    useEffect(() => {
+        Container.current?.addEventListener("mouseup", newRootNode)
+        Container.current?.addEventListener("click", modalOpen)
+        return () => { 
+            Container.current?.removeEventListener("mouseup", newRootNode)
+            Container.current?.removeEventListener("click", modalOpen)
+        }
+    }, [dragQuestionContentId])
+
+    useEffect(() => {
+        if (quiz) {
+
+            if (modalQuestionTargetContentId) {
+                updateRootInfo(quiz?.id, true)
+                updateQuestion(modalQuestionTargetContentId, (question) => question.content.rule.parentId = "root")
+            }
+        } else {
+            enqueueSnackbar("Нет информации о взятом опроснике")
+        }
+
+    }, [modalQuestionTargetContentId])
+
+    return (
+        <Box
+            ref={Container}
+            sx={{
+                height: "100%",
+                width: "100%",
+                backgroundColor: "#f2f3f7",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#4d4d4d",
+                fontSize: "50px"
+            }}
+        >
+            +
+        </Box>
+    )
+}

src/pages/Questions/BranchingMap/helper.ts

@@ -0,0 +1,43 @@
+import { AnyQuizQuestion } from "@model/questionTypes/shared"
+
+interface Nodes {
+    data: {
+        id: string;
+        label: string;
+        parent?: string;
+    }
+}
+interface Edges {
+    data: {
+        source: string;
+        target: string;
+    }
+}
+
+export const storeToNodes = (questions: AnyQuizQuestion[]) => {
+    console.log(questions)
+    const nodes: Nodes[] = []
+    const edges: Edges[] = []
+    questions.forEach((question) => {
+        console.log(question)
+        if (question.content.rule.parentId) {
+            nodes.push({data: {
+                id: question.content.id,
+                label: question.title ? question.title : "noname"
+            }})
+            // nodes.push({
+            //     data: {
+            //       id: "delete" + question.content.id,
+            //       label: "X",
+            //       parent: question.content.id,
+            //     }
+            //   },)
+            if (question.content.rule.parentId !== "root") edges.push({data: {
+                source: question.content.rule.parentId,
+                target: question.content.id
+            }})
+        }
+    })
+    console.log([...nodes, ...edges])
+    return [...nodes, ...edges];
+}

src/pages/Questions/BranchingMap/index.tsx

@@ -0,0 +1,41 @@
+import { Box } from "@mui/material";
+import { FirstNodeField } from "./FirstNodeField";
+import { CsComponent } from "./CsComponent";
+import { useQuestionsStore } from "@root/questions/store"
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useState } from "react";
+import {BranchingQuestionsModal} from "../BranchingQuestionsModal"
+
+
+export const BranchingMap = () => {
+  const quiz = useCurrentQuiz();
+  const { dragQuestionContentId } = useQuestionsStore()
+  const [modalQuestionParentContentId, setModalQuestionParentContentId] = useState<string>("")
+  const [modalQuestionTargetContentId, setModalQuestionTargetContentId] = useState<string>("")
+  const [openedModalQuestions, setOpenedModalQuestions] = useState<boolean>(false)
+
+  return (
+      <Box
+        id="cytoscape-container"
+        sx={{
+          overflow: "hidden",
+          padding: "20px",
+          background: "#FFFFFF",
+          borderRadius: "12px",
+          boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+          marginBottom: "40px",
+          height: "521px",
+          border: dragQuestionContentId === null ? "none" : "#7e2aea 2px dashed"
+        }}
+      >
+
+        {
+          quiz?.config.haveRoot ?
+          <CsComponent modalQuestionParentContentId={modalQuestionParentContentId} modalQuestionTargetContentId={modalQuestionTargetContentId} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionParentContentId={setModalQuestionParentContentId} setModalQuestionTargetContentId={setModalQuestionTargetContentId}/>
+          :
+          <FirstNodeField setOpenedModalQuestions={setOpenedModalQuestions} modalQuestionTargetContentId={modalQuestionTargetContentId}/>
+        }
+        <BranchingQuestionsModal openedModalQuestions={openedModalQuestions} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionTargetContentId={setModalQuestionTargetContentId} />
+      </Box>
+  );
+};

src/pages/Questions/BranchingMap/styles.css

@@ -0,0 +1,45 @@
+#popper-pluses > .popper-plus {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: #eeeff4;
+  border: 1.5px dashed rgba(154, 154, 175, 0.5);
+  font-size: 0px;
+}
+
+#popper-pluses > .popper-plus::before {
+  content: "+";
+  color: rgba(154, 154, 175, 0.5);
+  font-size: inherit;
+}
+
+#popper-crosses > .popper-cross {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: rgba(154, 154, 175, 0.7);
+  font-size: 0px;
+}
+
+#popper-crosses > .popper-cross::before {
+  content: "+";
+  transform: rotate(45deg);
+  color: #fff;
+  font-size: inherit;
+}
+
+#popper-gears > .popper-gear {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background-image: url("../../../assets/icons/ArrowGear.svg");
+  font-size: 0px;
+  background-repeat: no-repeat;
+  background-size: contain;
+}

src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

@@ -0,0 +1,178 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  Link,
+  Modal,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+  useTheme,
+  Checkbox,
+} from "@mui/material";
+import { AnyQuizQuestion, createBranchingRuleMain } from "../../../model/questionTypes/shared"
+import { Select } from "../Select";
+
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
+import InfoIcon from "@icons/Info";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+
+import { TypeSwitch, BlockRule } from "./Settings";
+import { getQuestionById, updateOpenedModalSettingsId, updateQuestion } from "@root/questions/actions";
+import { useQuestionsStore } from "@root/questions/store";
+import { enqueueSnackbar } from "notistack";
+
+
+export default function BranchingQuestions() {
+  const theme = useTheme();
+
+
+  const { openedModalSettingsId } = useQuestionsStore();
+  const [targetQuestion, setTargetQuestion] = useState<AnyQuizQuestion | null>(getQuestionById(openedModalSettingsId))
+  const [parentQuestion, setParentQuestion] = useState<AnyQuizQuestion | null>(getQuestionById(openedModalSettingsId))
+
+  if (targetQuestion === null || parentQuestion === null) {
+    enqueueSnackbar("Невозможно найти данные ветвления для этого вопроса")
+    return <></>
+  }
+
+  const saveData = () => {
+
+  }
+
+  const handleClose = () => {
+    updateOpenedModalSettingsId()
+  };
+
+  return (
+    <>
+      <Modal open={openedModalSettingsId !== null} onClose={handleClose}>
+        <Box
+          sx={{
+            position: "absolute",
+            overflow: "hidden",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            maxWidth: "620px",
+            width: "100%",
+            bgcolor: "background.paper",
+            borderRadius: "12px",
+            boxShadow: 24,
+            p: 0,
+          }}
+        >
+          <>
+            <Box
+              sx={{
+                boxSizing: "border-box",
+                background: "#F2F3F7",
+                height: "70px",
+                padding: "0 25px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <Box sx={{ color: "#4d4d4d" }}>
+                <Typography component="span">{targetQuestion.title}</Typography>
+              </Box>
+              <Tooltip
+                title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
+                placement="top"
+              >
+                <Box>
+                  <InfoIcon />
+                </Box>
+              </Tooltip>
+            </Box>
+
+
+            <Box
+              sx={{
+                height: "400px",
+                overflow: "auto"
+              }}
+            >
+              {
+                parentQuestion.content.rule.main.length ?
+                  parentQuestion.content.rule.main.map((e: any, i: number) => {
+                    if (e.next === targetQuestion.id) {
+                      return <TypeSwitch key={i} targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={i} />
+                    } else {
+                      <></>
+                    }
+                  })
+                  :
+                  <TypeSwitch targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={0} />
+              }
+
+            </Box>
+
+
+            <Box
+              sx={{
+                margin: "20px 0 0 20px",
+                display: "flex",
+                flexDirection: "column"
+              }}
+            >
+              <Link
+                variant="body2"
+                sx={{
+                  color: theme.palette.brightPurple.main,
+                  marginBottom: "10px",
+                  cursor: "pointer"
+                }}
+                  onClick={() => {
+                    const mutate = parentQuestion
+                    mutate.content.rule.main.push(createBranchingRuleMain(targetQuestion.id, parentQuestion.id))
+                    setParentQuestion(mutate)
+                  }}
+              >
+                Добавить условие
+              </Link>
+
+
+              <FormControlLabel control={<Checkbox
+
+                sx={{
+                  margin: 0
+                }}
+                checked={parentQuestion.content.rule.default === targetQuestion.id}
+
+                onClick={() => {
+                  const mutate = parentQuestion
+                  mutate.content.rule.default = targetQuestion.id
+                  setParentQuestion(mutate)
+                }}
+              />} label="Следующий вопрос по-умолчанию" />
+
+            </Box>
+
+
+            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px", margin: "20px" }}>
+              <Button
+                variant="outlined"
+                onClick={handleClose}
+                sx={{ width: "100%", maxWidth: "130px" }}
+              >
+                Отмена
+              </Button>
+              <Button
+                variant="contained"
+                sx={{ width: "100%", maxWidth: "130px" }}
+                onClick={handleClose}
+              >
+                Готово
+              </Button>
+            </Box>
+          </>
+        </Box>
+      </Modal>
+    </>
+  );
+}

src/pages/Questions/BranchingModal/Settings.tsx

@@ -0,0 +1,516 @@
+import { Box, MenuItem, FormControl, Checkbox, FormControlLabel, Radio, RadioGroup, Typography, useTheme, Select, Chip, IconButton, TextField } from "@mui/material"
+import RadioCheck from "@ui_kit/RadioCheck"
+import RadioIcon from "@ui_kit/RadioIcon"
+import { QuizQuestionBase } from "model/questionTypes/shared"
+import { useState, useRef, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useQuestionsStore } from "@root/questions/store";
+import { updateQuestion, getQuestionById } from "@root/questions/actions";
+import { AnyQuizQuestion } from "../../../model/questionTypes/shared"
+import { SelectChangeEvent } from '@mui/material/Select';
+
+import InfoIcon from "@icons/Info";
+import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
+
+const CONDITIONS = [
+    "Все условия обязательны",
+    "Обязательно хотя бы одно условие",
+];
+interface Props {
+    parentQuestion: AnyQuizQuestion;
+    targetQuestion: AnyQuizQuestion;
+    ruleIndex: number;
+}
+
+
+//Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
+export const TypeSwitch = ({ parentQuestion, targetQuestion, ruleIndex }: Props) => {
+
+    switch (parentQuestion.type) {
+        // case 'nonselected':
+        //     return <BlockRule text={"Не выбран тип родительского вопроса"} />
+        //     break;
+
+        case "variant":
+        case "images":
+        case "varimg":
+        case "emoji":
+        case "select":
+
+            return (parentQuestion.content.variants === undefined ? <BlockRule text={"У родителя нет вариантов"} /> :
+                <SelectorType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+                //Реализован
+            )
+            break;
+
+         case "date":
+             // return <DateInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+             return <></>
+
+             break;
+
+        case "number":
+            return <NumberInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+            //Реализован
+            break;
+
+        case "page":
+        case "date":
+            return <BlockRule text={"У такого родителя может быть только один потомок"} />
+            break;
+
+        case "text":
+            return <TextInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+            //Реализован
+            break;
+
+        case "file":
+            return <FileInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+            //Реализован
+            break;
+
+        case "rating":
+            return <RatingInputsType targetQuestion={targetQuestion} parentQuestion={parentQuestion} ruleIndex={ruleIndex} />
+            //Реализован
+            break;
+
+        default:
+            return <BlockRule text={"Не распознан тип родительского вопроса"} />
+            break;
+    }
+
+}
+
+export const BlockRule = ({ text }: { text: string }) => {
+    return (
+        <Typography
+            sx={{
+                margin: "100px 0",
+                textAlign: "center"
+            }}
+        >{text}</Typography>
+    )
+}
+const SelectorType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+    const theme = useTheme();
+    const quizId = Number(useParams().quizId);
+    return (
+
+        <Box
+            sx={{
+                padding: "20px",
+                margin: "20px",
+                borderRadius: "8px",
+                bgcolor: "#F2F3F7",
+                height: "280px",
+                overflow: "auto"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "5px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Новое условие
+                </Typography>
+                <IconButton
+                    sx={{ borderRadius: "6px", padding: "2px" }}
+                    onClick={() => {
+                        const newParentQuestion = { ...parentQuestion }
+                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    <DeleteIcon color={"#4D4D4D"} />
+                </IconButton>
+            </Box>
+
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    pb: "10px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Дан ответ
+                </Typography>
+                <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
+                    (Укажите один или несколько вариантов)
+                </Typography>
+            </Box>
+            <Select
+                multiple
+                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers}
+                onChange={(event: SelectChangeEvent) => {
+
+                    const newParentQuestion = { ...parentQuestion }
+                    parentQuestion.content.rule.main[ruleIndex].rules[0].answers = (event.target as HTMLSelectElement).value
+                    //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+
+                }}
+                sx={{
+                    width: "100%",
+                    height: "48px",
+                    borderRadius: "8px",
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        border: `1px solid ${theme.palette.brightPurple.main} !important`,
+                        height: "48px",
+                        borderRadius: "10px",
+                    },
+                }}
+            >
+                {parentQuestion.content.variants.map((e: any) => {
+                    return <MenuItem value={e.id}>
+                        {e.answer}
+                    </MenuItem>
+                })}
+
+            </Select>
+
+            <FormControl>
+                <RadioGroup
+                    aria-labelledby="demo-controlled-radio-buttons-group"
+                    value={parentQuestion.content.rule.main[ruleIndex].or}
+                    onChange={(_, value) => {
+                        const newParentQuestion = { ...parentQuestion }
+                        parentQuestion.content.rule.main[ruleIndex].or = value
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    {CONDITIONS.map((condition, totalIndex) => (
+                        <FormControlLabel
+                            key={totalIndex}
+                            sx={{ color: theme.palette.grey2.main }}
+                            value={Boolean(Number(totalIndex))}
+                            control={
+                                <Radio
+                                    checkedIcon={<RadioCheck />}
+                                    icon={<RadioIcon />}
+                                />
+                            }
+                            label={condition}
+                        />
+                    ))}
+                </RadioGroup>
+            </FormControl>
+
+
+        </Box >
+    )
+}
+const DateInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+
+    return <></>
+}
+const NumberInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+    const theme = useTheme();
+    const quizId = Number(useParams().quizId);
+
+    return (
+        <Box
+            sx={{
+                padding: "20px",
+                margin: "20px",
+                borderRadius: "8px",
+                bgcolor: "#F2F3F7",
+                height: "280px",
+                overflow: "auto"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "5px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Новое условие
+                </Typography>
+                <IconButton
+                    sx={{ borderRadius: "6px", padding: "2px" }}
+                    onClick={() => {
+                        const newParentQuestion = { ...parentQuestion }
+                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    <DeleteIcon color={"#4D4D4D"} />
+                </IconButton>
+            </Box>
+
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    pb: "10px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Дан ответ
+                </Typography>
+                <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
+                    (Укажите один или несколько вариантов)
+                </Typography>
+            </Box>
+            {/* <TextField
+                sx={{
+                    marginTop: "20px",
+                    width: "100%"
+                }}
+
+                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
+                onChange={(event: React.FormEvent<HTMLInputElement>) => {
+
+                    const newParentQuestion = { ...parentQuestion }
+                    parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
+                    //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+
+                }}
+            /> */}
+
+
+
+
+        </Box >
+    )
+}
+const TextInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+    const theme = useTheme();
+    const quizId = Number(useParams().quizId);
+
+    return (
+        <Box
+            sx={{
+                padding: "20px",
+                margin: "20px",
+                borderRadius: "8px",
+                bgcolor: "#F2F3F7",
+                height: "280px",
+                overflow: "auto"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "5px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Новое условие
+                </Typography>
+                <IconButton
+                    sx={{ borderRadius: "6px", padding: "2px" }}
+                    onClick={() => {
+                        const newParentQuestion = { ...parentQuestion }
+                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    <DeleteIcon color={"#4D4D4D"} />
+                </IconButton>
+            </Box>
+
+            <Box
+                sx={{
+                    display: "inline",
+                    alignItems: "center",
+                    pb: "10px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Дан ответ
+                </Typography>
+                <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
+                    (Укажите текст, при совпадении с которым пользователь попадёт на этот вопрос)
+                </Typography>
+            </Box>
+            {/* <TextField
+                sx={{
+                    marginTop: "20px",
+                    width: "100%"
+                }}
+                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
+                onChange={(event: React.FormEvent<HTMLInputElement>) => {
+
+                    const newParentQuestion = { ...parentQuestion }
+                    newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value]
+                    //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+
+                }}
+            /> */}
+
+
+
+
+        </Box >
+    )
+}
+const FileInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+    const theme = useTheme();
+    const quizId = Number(useParams().quizId);
+
+    return (
+        <Box
+            sx={{
+                padding: "20px",
+                margin: "20px",
+                borderRadius: "8px",
+                bgcolor: "#F2F3F7",
+                height: "280px",
+                overflow: "auto"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "5px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Новое условие
+                </Typography>
+                <IconButton
+                    sx={{ borderRadius: "6px", padding: "2px" }}
+                    onClick={() => {
+                        const newParentQuestion = { ...parentQuestion }
+                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    <DeleteIcon color={"#4D4D4D"} />
+                </IconButton>
+            </Box>
+
+            <Box
+                sx={{
+                    display: "inline",
+                    alignItems: "center",
+                    pb: "10px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Перевести на этот вопрос если пользователь загрузил файл
+                </Typography>
+            </Box>
+            <FormControlLabel control={<Checkbox
+
+                sx={{
+                    margin: 0
+                }}
+                checked={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
+                onChange={(event: React.FormEvent<HTMLInputElement>) => {
+
+                    const newParentQuestion = { ...parentQuestion }
+                    parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).checked]
+                    //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+
+                }}
+            />} label="да" />
+
+
+
+
+        </Box >
+    )
+}
+const RatingInputsType = ({ parentQuestion, targetQuestion, ruleIndex }: { parentQuestion: any, targetQuestion: any, ruleIndex: number }) => {
+    const theme = useTheme();
+    const quizId = Number(useParams().quizId);
+
+    return (
+        <Box
+            sx={{
+                padding: "20px",
+                margin: "20px",
+                borderRadius: "8px",
+                bgcolor: "#F2F3F7",
+                height: "280px",
+                overflow: "auto"
+            }}
+        >
+            <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    pb: "5px",
+                }}
+            >
+                <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Новое условие
+                </Typography>
+                <IconButton
+                    sx={{ borderRadius: "6px", padding: "2px" }}
+                    onClick={() => {
+                        const newParentQuestion = { ...parentQuestion }
+                        newParentQuestion.content.rule.main.splice(ruleIndex, 1)
+                        //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+                    }}
+                >
+                    <DeleteIcon color={"#4D4D4D"} />
+                </IconButton>
+            </Box>
+
+            <Box
+                sx={{
+                    display: "inline",
+                    alignItems: "center",
+                    pb: "10px",
+                }}
+            >
+                <Typography sx={{ color: "#7E2AEA", pl: "10px", fontSize: "12px" }}>
+                    (Ожидаемое количество ячеек)
+                </Typography>
+            </Box>
+            {/* <TextField
+                sx={{
+                    marginTop: "20px",
+                    width: "100%"
+                }}
+                value={parentQuestion.content.rule.main[ruleIndex].rules[0].answers[0]}
+                onChange={(event: React.FormEvent<HTMLInputElement>) => {
+
+                    const newParentQuestion = { ...parentQuestion }
+                    parentQuestion.content.rule.main[ruleIndex].rules[0].answers = [(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, "")]
+                    //updateQuestionsList(quizId, parentQuestion.index, parentQuestion);
+
+                }}
+            /> */}
+
+
+
+
+        </Box >
+    )
+}
+
+// {
+//     content: {
+//         rule: {
+//             main: [
+//                 {
+//                     next: "id of next question", // 2 string
+//                     or: true // 3 boolean
+//                 rules: [
+//                         {
+//                             question: "question id", string
+//                 answers: [] // ответы на вопросы. для вариантов выбора - конкретные айдишники, для полей ввода текста - текст по полному совпадению, для ввода файла ии ещё какой подобной дичи - просто факт того что файл ввели, т.е. boolean
+//                         }
+//                     ]
+//                 }
+//             ],
+//             default: ID string
+//         }
+//     }
+// }

src/pages/Questions/BranchingPanel/QuestionsList.tsx

@@ -0,0 +1,89 @@
+import { useParams } from "react-router-dom";
+import { Box, Button, Typography } from "@mui/material";
+import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
+import { useQuestionsStore } from "@root/questions/store";
+import { updateDragQuestionContentId } from "@root/questions/actions";
+import { useEffect } from "react";
+import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
+
+
+const getItemStyle = (isDragging:any, draggableStyle:any) => ({
+  // some basic styles to make the items look a bit nicer
+  userSelect: "none",
+  padding: 5 * 2,
+  margin: `0 0 5px 0`,
+
+  // change background colour if dragging
+  background: isDragging ? "lightgreen" : "grey",
+
+  // styles we need to apply on draggables
+  ...draggableStyle
+});
+type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
+
+export const QuestionsList = () => {
+  const { questions } = useQuestionsStore()
+  console.log(questions)
+
+  return (
+    <Box sx={{ padding: "15px" }}>
+      <Typography
+        sx={{ fontSize: "12px", color: "#9A9AAF", marginBottom: "5px" }}
+      >
+        Перетащите вопросы в карту ветвления
+      </Typography>
+      <Box
+        sx={{
+          maxHeight: "400px",
+          overflowY: "scroll",
+          paddingRight: "12px",
+          "&::-webkit-scrollbar": { width: "8px" },
+          "&::-webkit-scrollbar-track": {
+            background: "#D4D4DF",
+            borderRadius: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            boxSizing: "border-box",
+            background: "#9A9AAF",
+            borderRadius: "4px",
+            border: "1.5px solid transparent",
+            backgroundClip: "padding-box",
+          },
+        }}
+      >
+        {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
+        {questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
+              <Button
+              onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
+                if (!content.rule.parentId) updateDragQuestionContentId(content.id)
+              }}
+            key={index}
+            sx={{
+              width: "100%",
+              cursor: "pointer",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "12px",
+              background: "#FFFFFF",
+              borderRadius: "8px",
+              marginBottom: "20px",
+              boxShadow: "0px 10px 30px #e7e7e7",
+              backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  border-radius: 8px;`,
+              "&:last-child": { marginBottom: 0 },
+            }}
+          >
+            <Typography sx={{  width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
+              {title || "нет заголовка"}
+            </Typography>
+            {content.rule.parentId && <CheckedIcon />}
+          </Button>
+              
+          
+        ))}
+      </Box>
+    </Box>
+  );
+}
+

src/pages/Questions/BranchingPanel/index.tsx

@@ -0,0 +1,85 @@
+import { Box, Typography, Switch, useTheme } from "@mui/material";
+
+import { QuestionsList } from "./QuestionsList";
+
+type BranchingPanelProps = {
+  active: boolean;
+  setActive: (active: boolean) => void;
+};
+
+export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: "15px",
+          padding: "18px",
+          background: "#fff",
+          borderRadius: "12px",
+          boxShadow: "0px 10px 30px #e7e7e7",
+        }}
+      >
+        <Switch
+          value={active}
+          onChange={(_, value) => setTimeout(() => setActive(value), 10)}
+          sx={{
+            width: 50,
+            height: 30,
+            padding: 0,
+            "& .MuiSwitch-switchBase": {
+              padding: 0,
+              margin: "2px",
+              transitionDuration: "300ms",
+              "&.Mui-checked": {
+                transform: "translateX(20px)",
+                color: theme.palette.brightPurple.main,
+                "& + .MuiSwitch-track": {
+                  backgroundColor: "#E8DCF9",
+                  opacity: 1,
+                  border: 0,
+                },
+                "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+              },
+              "&.Mui-disabled .MuiSwitch-thumb": {
+                color:
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[600],
+              },
+              "&.Mui-disabled + .MuiSwitch-track": {
+                opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+              },
+            },
+            "& .MuiSwitch-thumb": {
+              boxSizing: "border-box",
+              width: 25,
+              height: 25,
+            },
+            "& .MuiSwitch-track": {
+              borderRadius: 13,
+              backgroundColor:
+                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+              opacity: 1,
+              transition: theme.transitions.create(["background-color"], {
+                duration: 500,
+              }),
+            },
+          }}
+        />
+        <Box>
+          <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+            Логика ветвления
+          </Typography>
+          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+            Настройте связи между вопросами
+          </Typography>
+        </Box>
+      </Box>
+      { active && <QuestionsList /> }
+    </Box>
+  );
+};

src/pages/Questions/BranchingQuestionsModal/index.tsx

@@ -0,0 +1,77 @@
+import { useParams } from "react-router-dom";
+import { Box, Modal, Button, Typography } from "@mui/material";
+import { useQuestionsStore } from "@root/questions/store";
+import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
+
+type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
+
+interface Props {
+  openedModalQuestions: boolean;
+  setModalQuestionTargetContentId: (contentId:string) => void;
+  setOpenedModalQuestions: (open:boolean) => void;
+}
+
+export const BranchingQuestionsModal = ({ openedModalQuestions, setOpenedModalQuestions, setModalQuestionTargetContentId}:Props) => {
+  const quizId = Number(useParams().quizId);
+  const { questions } = useQuestionsStore();
+
+  const handleClose = () => {
+    setOpenedModalQuestions(false);
+  };
+
+  return (
+    <Modal open={openedModalQuestions} onClose={handleClose}>
+      <Box
+        sx={{
+          position: "absolute",
+          overflow: "hidden",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          maxWidth: "620px",
+          width: "100%",
+          bgcolor: "background.paper",
+          borderRadius: "12px",
+          boxShadow: 24,
+          padding: "30px 0",
+        }}
+      >
+        <Box sx={{ margin: "0 auto", maxWidth: "350px" }}>
+          {questions.filter((q:AnyQuestion) => (q.type && !q.content.rule.parentId)).map((question: AnyTypedQuizQuestion, index:number) => (
+            <Button
+              key={question.content.id}
+              onClick={() => {
+                setModalQuestionTargetContentId(question.content.id)
+                handleClose();
+              }}
+              sx={{
+                width: "100%",
+                cursor: "pointer",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "12px",
+                background: "#FFFFFF",
+                borderRadius: "8px",
+                marginBottom: "20px",
+                boxShadow: "0px 10px 30px #e7e7e7",
+                backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+border-radius: 8px;`,
+                "&:last-child": { marginBottom: 0 },
+              }}
+            >
+              <Typography
+                sx={{
+                  width: "100%",
+                  color: "#000",
+                }}
+              >
+                {question.title || "нет заголовка"}
+              </Typography>
+            </Button>
+          ))}
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

src/pages/Questions/DataOptions/switchData.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionDate } from "@model/questionTypes/date";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingData from "./settingData";
 
@@ -18,8 +17,6 @@ export default function SwitchData({
       return <SettingData question={question} />;
     case "help":
       return <HelpQuestions question={question} />;
-    case "branching":
-      return <BranchingQuestions question={question} />;
     default:
       return <></>;
   }

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -66,6 +66,7 @@ function DraggableListItem({ question, isDragging, index }: Props) {
                                 question={question}
                                 draggableProps={provided.dragHandleProps}
                                 isDragging={isDragging}
+                                index={index}
                             />
                         </Box>
                     )}

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -45,9 +45,10 @@ interface Props {
     question: AnyTypedQuizQuestion | UntypedQuizQuestion;
     draggableProps: DraggableProvidedDragHandleProps | null | undefined;
     isDragging: boolean;
+    index: number;
 }
 
-export default function QuestionsPageCard({ question, draggableProps, isDragging }: Props) {
+export default function QuestionsPageCard({ question, draggableProps, isDragging, index }: Props) {
     const [plusVisible, setPlusVisible] = useState<boolean>(false);
     const [open, setOpen] = useState<boolean>(false);
     const theme = useTheme();
@@ -96,7 +97,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                         <TextField
                             defaultValue={question.title}
                             placeholder={"Заголовок вопроса"}
-                            onChange={({ target }) => setTitle(target.value)}
+                            onChange={({ target }: { target: HTMLInputElement }) => setTitle(target.value)}
                             InputProps={{
                                 startAdornment: (
                                     <Box>
@@ -262,17 +263,26 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                                 </IconButton>
                             </Box>
                         )}
-
-                        <OneIcon
+                        <Box
                             style={{
-                                fontSize: "30px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "30px",
+                                width: "30px",
                                 marginLeft: "3px",
-                                color: !question.expanded ? "#FFF" : "",
-                                fill: question.expanded
+                                borderRadius: "50%",
+                                fontSize: "16px",
+                                color: question.expanded
+                                    ? theme.palette.brightPurple.main
+                                    : "#FFF",
+                                background: question.expanded
                                     ? "#EEE4FC"
                                     : theme.palette.brightPurple.main,
                             }}
-                        />
+                        >
+                            {index + 1}
+                        </Box>
                         <IconButton
                             disableRipple
                             sx={{

src/pages/Questions/DropDown/switchDropDown.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionSelect } from "@model/questionTypes/select";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingDropDown from "./settingDropDown";
 
@@ -18,8 +17,6 @@ export default function SwitchDropDown({
             return <SettingDropDown question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/Emoji/switchEmoji.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionEmoji } from "@model/questionTypes/emoji";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingEmoji from "./settingEmoji";
 
@@ -18,8 +17,6 @@ export default function SwitchEmoji({
             return <SettingEmoji question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx

@@ -1,6 +1,5 @@
 import { QuizQuestionVarImg } from "@model/questionTypes/varimg";
 import UploadImage from "../UploadImage";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingOptionsAndPict from "./SettingOptionsAndPict";
 
@@ -19,8 +18,6 @@ export default function SwitchOptionsAndPict({
             return <SettingOptionsAndPict question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         case "image":
             return <UploadImage question={question} />;
         default:

src/pages/Questions/OptionsPicture/switchOptionsPict.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import BranchingQuestions from "../branchingQuestions";
 import SettingOpytionsPict from "./settingOpytionsPict";
 import HelpQuestions from "../helpQuestions";
 import { QuizQuestionImages } from "@model/questionTypes/images";
@@ -18,8 +17,6 @@ export default function SwitchAnswerOptionsPict({
             return <SettingOpytionsPict question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/OwnTextField/switchTextField.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionText } from "@model/questionTypes/text";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingTextField from "./settingTextField";
 
@@ -18,8 +17,6 @@ export default function SwitchTextField({
             return <SettingTextField question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/PageOptions/switchPageOptions.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionPage } from "@model/questionTypes/page";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingPageOptions from "./SettingPageOptions";
 
@@ -18,8 +17,6 @@ export default function SwitchPageOptions({
             return <SettingPageOptions question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -0,0 +1,27 @@
+
+import {
+    Box,
+  } from "@mui/material";
+import { DraggableList } from "./DraggableList";
+import { BranchingPanel } from "./BranchingPanel";
+import { BranchingMap } from "./BranchingMap";
+
+interface Props {
+    settingBranching: boolean;
+    setSettingBranching: (active: boolean) => void
+}
+
+export const QuestionSwitchWindowTool = ({settingBranching, setSettingBranching}:Props) => {
+
+    return (
+                <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
+                <Box sx={{ flexBasis: "796px" }}>
+                {settingBranching ? <BranchingMap /> : <DraggableList />}
+                </Box>
+                <BranchingPanel
+                active={settingBranching}
+                setActive={setSettingBranching}
+                />
+            </Box>
+    )
+}

src/pages/Questions/QuestionsPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import {
     Box,
     Button,
@@ -13,14 +14,18 @@ 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 { DraggableList } from "./DraggableList";
+import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
+import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
+import { useQuestionsStore } from "@root/questions/store";
 
 
 export default function QuestionsPage() {
     const theme = useTheme();
+    const { openedModalSettingsId } = useQuestionsStore();
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const quiz = useCurrentQuiz();
 
+    const [settingBranching, setSettingBranching] = useState<boolean>(false);
     if (!quiz) return null;
 
     return (
@@ -37,6 +42,7 @@ export default function QuestionsPage() {
                 <Typography variant={"h5"}>Заголовок квиза</Typography>
                 <Button
                     sx={{
+                        display: settingBranching ? "none" : "flex",
                         fontSize: "16px",
                         lineHeight: "19px",
                         padding: 0,
@@ -49,7 +55,7 @@ export default function QuestionsPage() {
                     Свернуть всё
                 </Button>
             </Box>
-            <DraggableList />
+            <QuestionSwitchWindowTool settingBranching={settingBranching} setSettingBranching={setSettingBranching} />
             <Box
                 sx={{
                     display: "flex",
@@ -95,6 +101,7 @@ export default function QuestionsPage() {
                 </Box>
             </Box>
             {createPortal(<QuizPreview />, document.body)}
+            {/* {openedModalSettingsId !== null && <BranchingQuestions/>} */}
         </>
     );
 }

src/pages/Questions/RatingOptions/RatingOptions.tsx

@@ -172,13 +172,13 @@ export default function RatingOptions({ question }: Props) {
                             defaultValue={question.content.ratingNegativeDescription}
                             value={negativeText}
                             placeholder="Негативно"
-                            onChange={({ target }) => {
+                            onChange={({ target }: {target: HTMLInputElement}) => {
                                 if (target.value.length <= 15) {
                                     setNegativeText(target.value);
                                     debounceNegativeDescription(target.value);
                                 }
                             }}
-                            onBlur={({ target }) => debounceNegativeDescription(target.value)}
+                            onBlur={({ target }: {target: HTMLInputElement}) => debounceNegativeDescription(target.value)}
                             sx={{
                                 width: negativeTextWidth + 10 + "px",
                                 maxWidth: isMobile ? "140px" : "230px",
@@ -222,13 +222,13 @@ export default function RatingOptions({ question }: Props) {
                         <TextField
                             value={positiveText}
                             placeholder="Позитивно"
-                            onChange={({ target }) => {
+                            onChange={({ target }: {target: HTMLInputElement}) => {
                                 if (target.value.length <= 15) {
                                     setPositiveText(target.value);
                                     debouncePositiveDescription(target.value);
                                 }
                             }}
-                            onBlur={({ target }) => debouncePositiveDescription(target.value)}
+                            onBlur={({ target }: {target: HTMLInputElement}) => debouncePositiveDescription(target.value)}
                             sx={{
                                 width: positiveTextWidth + 10 + "px",
                                 maxWidth: isMobile ? "140px" : "230px",

src/pages/Questions/RatingOptions/switchRating.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionRating } from "@model/questionTypes/rating";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingRating from "./settingRating";
 
@@ -18,8 +17,6 @@ export default function SwitchRating({
             return <SettingRating question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/SliderOptions/switchSlider.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionNumber } from "@model/questionTypes/number";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingSlider from "./settingSlider";
 
@@ -18,8 +17,6 @@ export default function SwitchSlider({
             return <SettingSlider question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/UploadFile/switchUpload.tsx

@@ -1,5 +1,4 @@
 import { QuizQuestionFile } from "@model/questionTypes/file";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import SettingsUpload from "./settingUpload";
 
@@ -18,8 +17,6 @@ export default function SwitchUpload({
             return <SettingsUpload question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         default:
             return <></>;
     }

src/pages/Questions/answerOptions/switchAnswerOptions.tsx

@@ -1,6 +1,5 @@
 import { QuizQuestionVariant } from "@model/questionTypes/variant";
 import UploadImage from "../UploadImage";
-import BranchingQuestions from "../branchingQuestions";
 import HelpQuestions from "../helpQuestions";
 import ResponseSettings from "./responseSettings";
 
@@ -19,8 +18,6 @@ export default function SwitchAnswerOptions({
             return <ResponseSettings question={question} />;
         case "help":
             return <HelpQuestions question={question} />;
-        case "branching":
-            return <BranchingQuestions question={question} />;
         case "image":
             return <UploadImage question={question} />;
         default:

src/pages/Result/DescriptionForm/SwitchResult.tsx

@@ -1,6 +1,5 @@
 import Info from "@icons/Info";
 import { Box, TextField } from "@mui/material";
-import BranchingQuestions from "../../Questions/branchingQuestions";
 import PointsQuestions from "./PointsQuestions";
 
 interface Props {
@@ -45,10 +44,6 @@ export default function SwitchResult({
     case "setting":
       return <ResponseSettings />;
       break;
-    case "branching":
-    //   return <BranchingQuestions question={question} />;
-      return null
-      break;
     case "points":
       return <PointsQuestions />;
       break;

src/pages/createQuize/QuizCard.tsx

@@ -1,3 +1,4 @@
+import { useState, useRef } from "react";
 import ChartIcon from "@icons/ChartIcon";
 import LinkIcon from "@icons/LinkIcon";
 import PencilIcon from "@icons/PencilIcon";
@@ -10,6 +11,8 @@ import {
     Typography,
     useMediaQuery,
     useTheme,
+    Popover,
+
 } from "@mui/material";
 import { deleteQuiz, setEditQuizId } from "@root/quizes/actions";
 import { useNavigate } from "react-router-dom";
@@ -31,6 +34,8 @@ export default function QuizCard({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(600));
     const navigate = useNavigate();
+  const [subMenuOpen, setSubMenuOpen] = useState<boolean>(false);
+  const subMenuRef = useRef<HTMLButtonElement | null>(null);
 
     function handleEditClick() {
         setEditQuizId(quiz.backendId);
@@ -134,15 +139,45 @@ export default function QuizCard({
                     }}
                 />
                 <IconButton
+                    ref={subMenuRef}
                     sx={{
                         color: theme.palette.brightPurple.main,
                         ml: "auto",
                     }}
-                    onClick={() => deleteQuiz(quiz.id)}
+                    onClick={() => setSubMenuOpen(true)}
                     data-cy="delete-quiz"
                 >
                     <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
                 </IconButton>
+                <Popover
+                    open={subMenuOpen}
+                    anchorEl={subMenuRef.current}
+                    onClose={() => setSubMenuOpen(false)}
+                    anchorOrigin={{ vertical: "top", horizontal: "right" }}
+                >
+                    <Box onClick={() => setSubMenuOpen(false)}>
+                        <Button
+                            sx={{
+                                display: "block",
+                                width: "100%",
+                                padding: "15px 30px",
+                            }}
+                            onClick={()=>{}}
+                        >
+                            Копировать
+                        </Button>
+                        <Button
+                            sx={{
+                                display: "block",
+                                width: "100%",
+                                padding: "15px 30px",
+                            }}
+                            onClick={() => deleteQuiz(quiz.id)}
+                        >
+                            Удалить
+                        </Button>
+                    </Box>
+                </Popover>
             </Box>
         </Box>
     );

src/pages/startPage/StartPageSettings.tsx

@@ -643,7 +643,7 @@ export default function StartPageSettings() {
                                 Заголовок
                             </Typography>
                             <CustomTextField
-                                placeholder="Текст-заполнитель — это текст, который"
+                                placeholder="Название квиза"
                                 text={quiz.name}
                                 onChange={e => updateQuiz(quiz.id, quiz => {
                                     quiz.name = e.target.value;

src/stores/questions.ts

@@ -126,6 +126,7 @@ export const updateQuestion = <T extends AnyTypedQuizQuestion>(
     questionIndex: number,
     recipe: (question: T) => void,
 ) => setProducedState(state => {
+    console.log("начинаю отправку fire квиза " )
     const question = state.listQuestions[quizId][questionIndex] as T;
 
     recipe(question);

src/stores/questions/actions.ts

@@ -123,10 +123,9 @@ export const updateQuestion = (
     updateFn: (question: AnyTypedQuizQuestion) => void,
 ) => {
     setProducedState(state => {
-        const question = state.questions.find(q => q.id === questionId);
+        const question = state.questions.find(q => q.id === questionId) || state.questions.find(q => q.content.id === questionId);
         if (!question) return;
         if (question.type === null) throw new Error("Cannot update untyped question, use 'updateUntypedQuestion' instead");
-
         updateFn(question);
     }, {
         type: "updateQuestion",
@@ -134,14 +133,16 @@ export const updateQuestion = (
         updateFn: updateFn.toString(),
     });
 
-    clearTimeout(requestTimeoutId);
-    requestTimeoutId = setTimeout(() => {
+    // clearTimeout(requestTimeoutId);
+    // requestTimeoutId = setTimeout(() => {
         requestQueue.enqueue(async () => {
-            const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
-            if (!question) return;
-            if (question.type === null) throw new Error("Cannot send update request for untyped question");
+            const q = useQuestionsStore.getState().questions.find(q => q.id === questionId)  || useQuestionsStore.getState().questions.find(q => q.content.id === questionId);
+            console.log("мы пытаемся найти вопрос ")
+            if (!q) return;
+            if (q.type === null) throw new Error("Cannot send update request for untyped question");
+            console.log(q.title)
 
-            const response = await questionApi.edit(questionToEditQuestionRequest(question));
+            const response = await questionApi.edit(questionToEditQuestionRequest(q));
 
             setQuestionBackendId(questionId, response.updated);
         }).catch(error => {
@@ -150,7 +151,7 @@ export const updateQuestion = (
             devlog("Error editing question", { error, questionId });
             enqueueSnackbar("Не удалось сохранить вопрос");
         });
-    }, REQUEST_DEBOUNCE);
+    // }, REQUEST_DEBOUNCE);
 };
 
 export const addQuestionVariant = (questionId: string) => {
@@ -271,7 +272,7 @@ export const createTypedQuestion = async (
     const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
     if (!question) return;
     if (question.type !== null) throw new Error("Cannot upgrade already typed question");
-
+    
     try {
         const createdQuestion = await questionApi.create({
             quiz_id: question.quizId,
@@ -363,4 +364,28 @@ function setProducedState<A extends string | { type: unknown; }>(
     action?: A,
 ) {
     useQuestionsStore.setState(state => produce(state, recipe), false, action);
+};
+
+
+export const cleardragQuestionContentId = () => {
+    useQuestionsStore.setState({dragQuestionContentId: null});
+};
+
+export const getQuestionById = (questionId: string | null) => {
+    if (questionId === null) return null;
+    return useQuestionsStore.getState().questions.find(q => q.id === questionId) || null;
+};
+export const getQuestionByContentId = (questionContentId: string | null) => {
+    console.log("questionContentId " + questionContentId)
+    if (questionContentId === null) return null;
+    return useQuestionsStore.getState().questions.find(q => {
+        console.log(q.content.id)
+        console.log(q.content.id === questionContentId)
+        return ( q.content.id === questionContentId)}) || null;
+};
+
+export const updateOpenedModalSettingsId = (id?: string) => useQuestionsStore.setState({openedModalSettingsId: id ? id : null});
+export const updateDragQuestionContentId = (contentId?: string) => {
+    console.log("contentId " + contentId)
+    useQuestionsStore.setState({dragQuestionContentId: contentId ? contentId : null});
 }

src/stores/questions/store.ts

@@ -4,11 +4,15 @@ import { devtools } from "zustand/middleware";
 
 
 export type QuestionsStore = {
-    questions: (AnyTypedQuizQuestion | UntypedQuizQuestion)[];
+    questions: (AnyTypedQuizQuestion | UntypedQuizQuestion);
+    openedModalSettingsId: string | null;
+    dragQuestionContentId: string | null;
 };
 
 const initialState: QuestionsStore = {
     questions: [],
+    openedModalSettingsId: null as null,
+    dragQuestionContentId: null,
 };
 
 export const useQuestionsStore = create<QuestionsStore>()(

src/stores/quizPreview.ts

@@ -28,6 +28,10 @@ export const toggleQuizPreview = () => useQuizPreviewStore.setState(
     state => ({ isPreviewShown: !state.isPreviewShown })
 );
 
+export const setCurrentQuestionIndex = (step: number) => useQuizPreviewStore.setState(
+    state => ({ currentQuestionIndex:state.currentQuestionIndex = step })
+);
+
 export const incrementCurrentQuestionIndex = (maxStep: number) => useQuizPreviewStore.setState(
     state => ({ currentQuestionIndex: Math.min(state.currentQuestionIndex + 1, maxStep) })
 );

src/stores/quizes/actions.ts

@@ -175,6 +175,12 @@ export const deleteQuiz = async (quizId: string) => requestQueue.enqueue(async (
         enqueueSnackbar(`Не удалось удалить квиз. ${message}`);
     }
 });
+export const updateRootInfo = (quizId: string, have:boolean) => updateQuiz(
+    quizId,
+    quiz => {
+        quiz.config.haveRoot = have;
+    },
+);
 
 // TODO copy quiz
 

src/ui_kit/ContactForm.tsx

@@ -86,7 +86,7 @@ export default () => {
           >E-mail</Typography>
         <TextField
                   value={mail}
-                  onChange={(e) => setContactFormMailField(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setContactFormMailField(e.target.value)}
                   placeholder="username@penahaub.com"
                   name="name"
                   fullWidth

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -1,9 +1,10 @@
-import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
+import { Box, Button, LinearProgress, Paper, Typography, FormControl, Select as MuiSelect, MenuItem, useTheme } from "@mui/material";
 import { useQuestionsStore } from "@root/questions/store";
 import {
     decrementCurrentQuestionIndex,
     incrementCurrentQuestionIndex,
     useQuizPreviewStore,
+    setCurrentQuestionIndex
 } from "@root/quizPreview";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
 import { useEffect } from "react";
@@ -20,9 +21,10 @@ import Text from "./QuizPreviewQuestionTypes/Text";
 import Variant from "./QuizPreviewQuestionTypes/Variant";
 import Varimg from "./QuizPreviewQuestionTypes/Varimg";
 import { notReachable } from "../../utils/notReachable";
-
+import ArrowDownIcon from "@icons/ArrowDownIcon";
 
 export default function QuizPreviewLayout() {
+    const theme = useTheme();
     const questions = useQuestionsStore(state => state.questions);
     const currentQuizStep = useQuizPreviewStore(
         (state) => state.currentQuestionIndex
@@ -67,7 +69,9 @@ export default function QuizPreviewLayout() {
                     whiteSpace: "break-spaces",
                     overflowY: "auto",
                     flexGrow: 1,
-                    "&::-webkit-scrollbar": { width: 0 },
+                    "&::-webkit-scrollbar": { width: 0, display: "none" },
+                    msOverflowStyle: "none",
+                    scrollbarWidth: "none",
                 }}
             >
                 <QuestionPreviewComponent question={currentQuestion} />
@@ -76,62 +80,138 @@ export default function QuizPreviewLayout() {
                 sx={{
                     mt: "auto",
                     p: "16px",
-                    display: "flex",
                     borderTop: "1px solid #E3E3E3",
-                    alignItems: "center",
                 }}
             >
-                <Box
-                    sx={{
-                        flexGrow: 1,
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 1,
-                    }}
-                >
-                    <Typography>
-                        {nonDeletedQuizQuestions.length > 0
-                            ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
-                            }`
-                            : "Нет вопросов"}
-                    </Typography>
-                    {nonDeletedQuizQuestions.length > 0 && (
-                        <LinearProgress
-                            variant="determinate"
-                            value={currentProgress}
+                <Box sx={{ marginBottom: "10px" }}>
+                    <FormControl
+                        fullWidth
+                        size="small"
+                        sx={{ width: "100%", minWidth: "200px", height: "48px" }}
+                    >
+                        <MuiSelect
+                            id="category-select"
+                            variant="outlined"
+                            value={currentQuizStep}
+                            placeholder="Заголовок вопроса"
+                            onChange={({ target }) =>
+                                setCurrentQuestionIndex(window.Number(target.value))
+                            }
                             sx={{
-                                "&.MuiLinearProgress-colorPrimary": {
-                                    backgroundColor: "fadePurple.main",
-                                },
-                                "& .MuiLinearProgress-barColorPrimary": {
-                                    backgroundColor: "brightPurple.main",
+                                height: "48px",
+                                borderRadius: "8px",
+                                "& .MuiOutlinedInput-notchedOutline": {
+                                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
                                 },
                             }}
-                        />
-                    )}
-                </Box>
-                <Box
-                    sx={{
-                        ml: 2,
-                        display: "flex",
-                        gap: 1,
-                    }}
-                >
-                    <Button
-                        variant="outlined"
-                        onClick={decrementCurrentQuestionIndex}
-                        disabled={currentQuizStep === 0}
-                        sx={{ px: 1, minWidth: 0 }}
+                            MenuProps={{
+                                PaperProps: {
+                                    sx: {
+                                        mt: "8px",
+                                        p: "4px",
+                                        borderRadius: "8px",
+                                        border: "1px solid #EEE4FC",
+                                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+                                    },
+                                },
+                                MenuListProps: {
+                                    sx: {
+                                        py: 0,
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "8px",
+                                        "& .Mui-selected": {
+                                            backgroundColor: theme.palette.background.default,
+                                            color: theme.palette.brightPurple.main,
+                                        },
+                                    },
+                                },
+                            }}
+                            inputProps={{
+                                sx: {
+                                    color: theme.palette.brightPurple.main,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    px: "9px",
+                                    gap: "20px",
+                                },
+                            }}
+                            IconComponent={(props) => <ArrowDownIcon {...props} />}
+                        >
+                            {Object.values(questions).map(
+                                ({ id, title }, index) => (
+                                    <MenuItem
+                                        key={id}
+                                        value={index}
+                                        sx={{
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "20px",
+                                            p: "4px",
+                                            borderRadius: "5px",
+                                            color: theme.palette.grey2.main,
+                                        }}
+                                    >
+                                        {`${index + 1}. ${title}`}
+                                    </MenuItem>
+                                )
+                            )}
+                        </MuiSelect>
+                    </FormControl>
+                    </Box>
+                    <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Box
+                        sx={{
+                            flexGrow: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 1,
+                        }}
                     >
-                        <ArrowLeft />
-                    </Button>
-                    <Button
-                        variant="contained"
-                        onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
-                        disabled={currentQuizStep >= maxCurrentQuizStep}
+                        <Typography>
+                            {nonDeletedQuizQuestions.length > 0
+                                ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length
+                                }`
+                                : "Нет вопросов"}
+                        </Typography>
+                        {nonDeletedQuizQuestions.length > 0 && (
+                            <LinearProgress
+                                variant="determinate"
+                                value={currentProgress}
+                                sx={{
+                                    "&.MuiLinearProgress-colorPrimary": {
+                                        backgroundColor: "fadePurple.main",
+                                    },
+                                    "& .MuiLinearProgress-barColorPrimary": {
+                                        backgroundColor: "brightPurple.main",
+                                    },
+                                }}
+                            />
+                        )}
+                    </Box>
+                    <Box
+                        sx={{
+                            ml: 2,
+                            display: "flex",
+                            gap: 1,
+                        }}
                     >
-                        Далее
-                    </Button>
+                        <Button
+                            variant="outlined"
+                            onClick={decrementCurrentQuestionIndex}
+                            disabled={currentQuizStep === 0}
+                            sx={{ px: 1, minWidth: 0 }}
+                        >
+                            <ArrowLeft />
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
+                            disabled={currentQuizStep >= maxCurrentQuizStep}
+                        >
+                            Далее
+                        </Button>
+                    </Box>
                 </Box>
             </Box>
         </Paper>