Merge branch 'dev' into delete-timeout-fix

2023-12-12 23:16:26 +03:00 · 2023-12-12 23:16:26 +03:00 · 32c2b03a4f
commit 32c2b03a4f
parent 16eb2c7d6b 9defa6abce
14 changed files with 612 additions and 660 deletions
--- a/src/pages/Landing/HeaderLanding.tsx
+++ b/src/pages/Landing/HeaderLanding.tsx
@ -1,34 +1,45 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import SectionStyled from './SectionStyled';
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import SectionStyled from "./SectionStyled";
 import NavMenuItem from "@ui_kit/Header/NavMenuItem";
 import QuizLogo from "./images/icons/QuizLogo";
 import { useMediaQuery, useTheme } from "@mui/material";
 import { setIsContactFormOpen } from "../../stores/contactForm";
+import { useUserStore } from "@root/user";
+import { useNavigate } from "react-router-dom";

-const buttonMenu = ['Меню 1', 'Меню 2', 'Меню 3', 'Меню 4', 'Меню 5', 'Меню 1', 'Меню 2']
+const buttonMenu = ["Меню 1", "Меню 2", "Меню 3", "Меню 4", "Меню 5", "Меню 1", "Меню 2"];

 export default function Component() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1000))
-    const [select, setSelect] = React.useState(0)
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const [select, setSelect] = React.useState(0);
+  const userId = useUserStore((state) => state.userId);
+  const navigate = useNavigate();
+
+  const onClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
+
  return (
-        <SectionStyled tag={'header'} bg={'#F2F3F7'} mwidth={'1160px'}
+    <SectionStyled
+      tag={"header"}
+      bg={"#F2F3F7"}
+      mwidth={"1160px"}
      sxsect={{
-                           minHeight: '80px',
-                           borderBottom: '1px solid #E3E3E3',
+        minHeight: "80px",
+        borderBottom: "1px solid #E3E3E3",
        position: "relative",
        padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
-                           zIndex: 3
+        zIndex: 3,
      }}
      sxcont={{
-                           display: 'flex',
-                           justifyContent: 'space-between',
-                           alignItems: 'center',
-                           padding: 0
-                       }}>
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 0,
+      }}
+    >
      <QuizLogo width={isMobile ? 100 : 150} />
      {/*<Box*/}
      {/*    sx={{*/}
@ -54,19 +65,22 @@ export default function Component() {
      {/*        />*/}
      {/*    ))}*/}
      {/*</Box>*/}
-            <Button variant="outlined"
-                onClick={() => setIsContactFormOpen(true)}
+      <Button
+        variant="outlined"
+        onClick={onClick}
        sx={{
-                        color: 'black',
-                        border: '1px solid black',
-                        textTransform: 'none',
-                        fontWeight: '400',
-                        fontSize: '18px',
-                        lineHeight: '24px',
-                        borderRadius: '8px',
-                        padding: '8px 17px',
+          color: "black",
+          border: "1px solid black",
+          textTransform: "none",
+          fontWeight: "400",
+          fontSize: "18px",
+          lineHeight: "24px",
+          borderRadius: "8px",
+          padding: "8px 17px",
        }}
-            >Предрегистрация</Button>
+      >
+        {userId ? "Войти" : " Регистрация / Войти"}
+      </Button>
    </SectionStyled>
-    )
+  );
 }
--- a/src/pages/Landing/Hero.tsx
+++ b/src/pages/Landing/Hero.tsx
@ -1,59 +1,66 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import React from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import { Typography, useMediaQuery, useTheme } from "@mui/material";
-import abstraction from '../../assets/Quiz-main.png'
-import SectionStyled from './SectionStyled';
-import { Link, redirect } from 'react-router-dom';
+import abstraction from "../../assets/Quiz-main.png";
+import SectionStyled from "./SectionStyled";
+import { Link, redirect, useNavigate } from "react-router-dom";
 import { setIsContactFormOpen } from "@root/contactForm";
+import { useUserStore } from "@root/user";

 export default function Component() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
-    const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const userId = useUserStore((state) => state.userId);
+  const navigate = useNavigate();
+
+  const tryItForFreeonClick = () => (userId ? navigate("/list") : setIsContactFormOpen(true));
+
  return (
-        <SectionStyled tag={'section'} bg={'#f2f3f7'} mwidth={'1160px'}
+    <SectionStyled
+      tag={"section"}
+      bg={"#f2f3f7"}
+      mwidth={"1160px"}
      sxsect={{
-                           height: isMobile ? '702px' : (isTablet ? '986px' : '660px'),
+        height: isMobile ? "702px" : isTablet ? "986px" : "660px",
      }}
      sxcont={{
-                           display: 'flex',
-                           justifyContent: 'space-between',
-                           alignItems: 'center',
-                           padding: isMobile ? "300px 16px 0 16px" : (isTablet ? "494px 40px 0 40px" : 0),
-                           marginBottom: isMobile ? '55px' : (isTablet ? 0 : "55px"),
-                       }}>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '30px',
-                    height: '100%',
-                    justifyContent: 'space-between',
-                    alignItems: "flex-start",
-                    position: 'relative',
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: isMobile ? "300px 16px 0 16px" : isTablet ? "494px 40px 0 40px" : 0,
+        marginBottom: isMobile ? "55px" : isTablet ? 0 : "55px",
      }}
    >
-                <Typography variant='h2'>
-                    Pena Quiz
-                </Typography>
      <Box
        sx={{
-                        maxWidth: isTablet ? '715px' : '420px',
-                        minHeight: '64px',
-                    }}>
-                    <Typography variant='body1'>
-                        Помогаем посетителю оставить заявку. <br style={{display: isTablet ? 'flex' : "none"}}/> Готовые шаблоны квизов с легкой установкой на любой сайт и социальные сети
+          display: "flex",
+          flexDirection: "column",
+          gap: "30px",
+          height: "100%",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          position: "relative",
+        }}
+      >
+        <Typography variant="h2">Pena Quiz</Typography>
+        <Box
+          sx={{
+            maxWidth: isTablet ? "715px" : "420px",
+            minHeight: "64px",
+          }}
+        >
+          <Typography variant="body1">
+            Помогаем посетителю оставить заявку. <br style={{ display: isTablet ? "flex" : "none" }} /> Готовые шаблоны
+            квизов с легкой установкой на любой сайт и социальные сети
          </Typography>
        </Box>
        {/*<Link */}
        {/*    to="/list"*/}
        {/*    style={{textDecoration: "none"}}>*/}
-                <Button variant="contained"
-                        onClick={() => setIsContactFormOpen(true)}
-                >
+        <Button variant="contained" onClick={tryItForFreeonClick}>
          Попробуйте бесплатно
-                    
        </Button>
        {/*</Link>*/}

@ -62,14 +69,14 @@ export default function Component() {
          src={abstraction}
          sx={{
            position: "absolute",
-                        bottom: isMobile ? undefined : (isTablet? "138px" : "-291px"),
+            bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
            maxWidth: isMobile ? "403px" : "810px",
            width: isMobile ? "100%" : undefined,
-                        left: isMobile ? "-20px" : (isTablet? "54px" : "401px"),
-                        top: isMobile ? "-345px" : undefined
+            left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
+            top: isMobile ? "-345px" : undefined,
          }}
        />
      </Box>
    </SectionStyled>
-    )
+  );
 }
--- a/src/pages/Questions/BranchingMap/CsComponent.tsx
+++ b/src/pages/Questions/BranchingMap/CsComponent.tsx
@ -216,6 +216,7 @@ function CsComponent({
    }
  }

+
  const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
    const deleteNodes = [] as string[]
    const deleteEdges: any = []
@ -331,6 +332,7 @@ function CsComponent({
  }


+
  useEffect(() => {
    if (startCreate) {
      addNode({ parentNodeContentId: startCreate });
@ -348,7 +350,6 @@ function CsComponent({


  const readyLO = (e) => {
-    console.log('REAdy')
    if (e.cy.data('firstNode') === 'nonroot') {
      e.cy.data('firstNode', 'root')
      e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
@ -433,7 +434,6 @@ function CsComponent({
          task.task.forEach(n => {
            const width = n.data('subtreeWidth')

-            console.log('ORORORORO', n.data(), yoffset, width, oldPos, task.parent.data('subtreeWidth'))
            n.data('oldPos', { x: 250 * n.data('layer'), y: yoffset + width / 2 })
            yoffset += width
            queue.push({ task: n.cy().edges(`[source="${n.id()}"]`).targets(), parent: n })
@ -462,7 +462,6 @@ function CsComponent({
  }

  useEffect(() => {
-    console.log('KEKEKE')
    document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
    const cy = cyRef.current;
    const eles = cy?.add(storeToNodes(questions.filter((question: AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null))))
@ -510,7 +509,6 @@ function CsComponent({
    if (!container) {
      return;
    }
-    console.log('POP')

    container.style.overflow = "hidden";

@ -540,7 +538,6 @@ function CsComponent({
      const bb = n.boundingBox()
      return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
    })
-    console.log('POPE')

    nodesInView
      .toArray()
@ -553,7 +550,6 @@ function CsComponent({
            modifiers: [{ name: "flip", options: { boundary: node } }],
          },
          content: ([item]) => {
-    console.log('POPPER', item.id())
            const itemId = item.id();
            const itemElement = layoutsContainer.current?.querySelector(
              `.popper-layout[data-id='${itemId}']`
@ -583,7 +579,6 @@ function CsComponent({
            modifiers: [{ name: "flip", options: { boundary: node } }],
          },
          content: ([item]) => {
-    console.log('POPPER+', item.id())
            const itemId = item.id();
            const itemElement = plusesContainer.current?.querySelector(
              `.popper-plus[data-id='${itemId}']`
@ -612,7 +607,6 @@ function CsComponent({
            modifiers: [{ name: "flip", options: { boundary: node } }],
          },
          content: ([item]) => {
-    console.log('POPPERx', item.id())
            const itemId = item.id();
            const itemElement = crossesContainer.current?.querySelector(
              `.popper-cross[data-id='${itemId}']`
@ -636,18 +630,17 @@ function CsComponent({
            return crossElement;
          },
        });
-
-        const gearsPopper = node.popper({
+let gearsPopper = null
+console.log('POPE', node.data())
+        if (node.data().root !== true) {
+        gearsPopper = node.popper({
          popper: {
            placement: "left",
            modifiers: [{ name: "flip", options: { boundary: node } }],
          },
          content: ([item]) => {
-    console.log('POPPERg', item.id())
+            console.log('PEPO', item.id())
            const itemId = item.id();
-            if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
-              return;
-            }

            const itemElement = gearsContainer.current?.querySelector(
              `.popper-gear[data-id='${itemId}']`
@ -668,12 +661,11 @@ function CsComponent({
            return gearElement;
          },
        });
-
+        }
        const update = async () => {
-    console.log('POPPERi=u', item.id())
          await plusesPopper.update();
          await crossesPopper.update();
-          await gearsPopper.update();
+          await gearsPopper?.update();
          await layoutsPopper.update();
        };

@ -696,6 +688,18 @@ function CsComponent({
              { name: "offset", options: { offset: [0, -130 * zoom] } },
            ],
          });
+          plusesPopper.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [0, 0 * zoom] } },
+            ],
+          });
+          gearsPopper?.setOptions({
+            modifiers: [
+              { name: "flip", options: { boundary: node } },
+              { name: "offset", options: { offset: [0, 0] } },
+            ],
+          });

          layoutsContainer.current
            ?.querySelectorAll("#popper-layouts > .popper-layout")
@ -725,7 +729,7 @@ function CsComponent({
              element.style.borderRadius = `${6 * zoom}px`;
            });

-          gearsContainer.current
+          gearsContainer?.current
            ?.querySelectorAll("#popper-gears > .popper-gear")
            .forEach((item) => {
              const element = item as HTMLDivElement;
@ -785,7 +789,7 @@ let pressed = false
        variant="text"
        onClick={() => {

-          //код сюда
+          cyRef.current?.fit()

        }}
      >
--- a/src/pages/Questions/BranchingMap/FirstNodeField.tsx
+++ b/src/pages/Questions/BranchingMap/FirstNodeField.tsx
@ -1,6 +1,6 @@
 import { Box } from "@mui/material"
 import { useEffect, useRef, useState } from "react";
-import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
+import { deleteQuestion, updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
 import { updateRootContentId } from "@root/quizes/actions"
 import { useCurrentQuiz } from "@root/quizes/hooks"
 import { useQuestionsStore } from "@root/questions/store"
@ -11,8 +11,9 @@ interface Props {
    modalQuestionTargetContentId: string;
 }
 export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
+
    const quiz = useCurrentQuiz();
-    const { dragQuestionContentId } = useQuestionsStore()
+    const { dragQuestionContentId, questions } = useQuestionsStore()
    const Container = useRef<HTMLDivElement | null>(null);

    const modalOpen = () => setOpenedModalQuestions(true)
@ -22,6 +23,11 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
            if (dragQuestionContentId) {
                updateRootContentId(quiz?.id, dragQuestionContentId)
                updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
+                //если были результаты - удалить
+                questions.forEach((q) => {
+                    if (q.type === 'result') deleteQuestion(q.id)
+                })
+
            }
        } else {
            enqueueSnackbar("Нет информации о взятом опроснике")
@ -44,6 +50,10 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
            if (modalQuestionTargetContentId) {
                updateRootContentId(quiz?.id, modalQuestionTargetContentId)
                updateQuestion(modalQuestionTargetContentId, (question) => question.content.rule.parentId = "root")
+                //если были результаты - удалить
+                questions.forEach((q) => {
+                    if (q.type === 'result') deleteQuestion(q.id)
+                })
            }
        } else {
            enqueueSnackbar("Нет информации о взятом опроснике")
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -22,7 +22,7 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { enqueueSnackbar } from "notistack";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateOpenedModalSettingsId } from "@root/questions/actions";
+import { updateOpenedModalSettingsId, updateRootContentId } from "@root/questions/actions";

 interface Props {
    switchState: string;
@ -40,7 +40,7 @@ export default function ButtonsOptions({
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
    const quiz = useCurrentQuiz();
-    const { openBranchingPanel } = useQuestionsStore.getState();
+    const { openBranchingPanel, questions } = useQuestionsStore.getState();

    const openedModal = () => {
        updateOpenedModalSettingsId(question.id);
--- a/src/pages/ResultPage/ResultSettings.tsx
+++ b/src/pages/ResultPage/ResultSettings.tsx
@ -33,7 +33,6 @@ export const ResultSettings = () => {
        isReadyToLeave = false;
      }
    });
-    console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
    isReadyToLeaveRef.current = isReadyToLeave;
  }, [results])

--- a/src/pages/ViewPublicationPage/questions/Date.tsx
+++ b/src/pages/ViewPublicationPage/questions/Date.tsx
@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers";
 import { Box, Typography } from "@mui/material";

@ -14,10 +15,9 @@ type DateProps = {

 export const Date = ({ currentQuestion }: DateProps) => {
  const { answers } = useQuizViewStore();
-  const { answer } =
-    answers.find(
+  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.content.id
-    ) ?? {};
+  )?.answer as string;
  const [day, month, year] = answer?.split(".") || [];

  return (
@ -35,23 +35,27 @@ export const Date = ({ currentQuestion }: DateProps) => {
          slots={{
            openPickerIcon: () => <CalendarIcon />,
          }}
-          selected={
+          value={dayjs(
            answer
              ? new window.Date(`${month}.${day}.${year}`)
              : new window.Date()
+          )}
+          onChange={(date) => {
+            if (!date) {
+              return;
            }
-          onChange={(date) =>
+
            updateAnswer(
              currentQuestion.content.id,
              String(
-                date?.toLocaleDateString("ru-RU", {
+                new window.Date(date.toDate()).toLocaleDateString("ru-RU", {
                  year: "numeric",
                  month: "2-digit",
                  day: "2-digit",
                })
              )
-            )
-          }
+            );
+          }}
          slotProps={{
            openPickerButton: {
              sx: {
--- a/src/pages/ViewPublicationPage/questions/File.tsx
+++ b/src/pages/ViewPublicationPage/questions/File.tsx
@ -16,13 +16,18 @@ type FileProps = {

 export const File = ({ currentQuestion }: FileProps) => {
  const { answers } = useQuizViewStore();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;

  const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
    const file = target.files?.[0];

    if (file) {
-      updateAnswer(currentQuestion.content.id, `${file.name}|${URL.createObjectURL(file)}`);
+      updateAnswer(
+        currentQuestion.content.id,
+        `${file.name}|${URL.createObjectURL(file)}`
+      );
    }
  };

@ -47,6 +52,28 @@ export const File = ({ currentQuestion }: FileProps) => {
          />
          <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
        </ButtonBase>
+        {answer && currentQuestion.content.type === "picture" && (
+          <img
+            src={answer.split("|")[1]}
+            alt=""
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+            }}
+          />
+        )}
+        {answer && currentQuestion.content.type === "video" && (
+          <video
+            src={answer.split("|")[1]}
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+              objectFit: "cover",
+            }}
+          />
+        )}
        {answer?.split("|")[0] && (
          <Typography sx={{ marginTop: "15px" }}>
            {answer?.split("|")[0]}
--- a/src/pages/ViewPublicationPage/questions/Images.tsx
+++ b/src/pages/ViewPublicationPage/questions/Images.tsx
@ -60,9 +60,22 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
            <Box
              key={index}
              sx={{
+                cursor: "pointer",
                borderRadius: "5px",
                border: `1px solid ${theme.palette.grey2.main}`,
              }}
+              onClick={(event) => {
+                event.preventDefault();
+
+                updateAnswer(
+                  currentQuestion.content.id,
+                  currentQuestion.content.variants[index].id
+                );
+
+                if (answer === currentQuestion.content.variants[index].id) {
+                  deleteAnswer(currentQuestion.content.id);
+                }
+              }}
            >
              <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
                <Box sx={{ width: "100%", height: "300px" }}>
@ -88,18 +101,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                  color: theme.palette.grey2.main,
                  marginTop: "10px",
                }}
-                onClick={(event) => {
-                  event.preventDefault();
-
-                  updateAnswer(
-                    currentQuestion.content.id,
-                    currentQuestion.content.variants[index].id
-                  );
-
-                  if (answer === currentQuestion.content.variants[index].id) {
-                    deleteAnswer(currentQuestion.content.id);
-                  }
-                }}
                value={index}
                control={
                  <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
--- a/src/pages/ViewPublicationPage/questions/Number.tsx
+++ b/src/pages/ViewPublicationPage/questions/Number.tsx
@ -37,16 +37,14 @@ export const Number = ({ currentQuestion }: NumberProps) => {
    },
    1000
  );
-  const { answer } =
-    answers.find(
+  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.content.id
-    ) ?? {};
+  )?.answer as string;

  const min = window.Number(currentQuestion.content.range.split("—")[0]);
  const max = window.Number(currentQuestion.content.range.split("—")[1]);

  useEffect(() => {
-    console.log("ans", currentQuestion.content.start);
    if (answer) {
      setMinRange(answer.split("—")[0]);
      setMaxRange(answer.split("—")[1]);
@ -76,7 +74,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
          marginTop: "20px",
        }}
      >
-
        <Slider
          value={
            currentQuestion.content.chooseRange
@ -89,6 +86,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
          max={max}
          step={currentQuestion.content.step || 1}
          sx={{
+            marginBottom: "20px",
            color: theme.palette.brightPurple.main,
            padding: "0",
            marginTop: "75px",
@ -96,27 +94,27 @@ export const Number = ({ currentQuestion }: NumberProps) => {
              background: theme.palette.brightPurple.main,
              borderRadius: "8px",
              width: "60px",
-                height: "36px"
+              height: "36px",
            },
            "& .MuiSlider-valueLabel::before": {
              width: "6px",
              height: "2px",
              transform: "translate(-50%, 50%) rotate(90deg)",
-                bottom: "-5px"
+              bottom: "-5px",
            },
            "& .MuiSlider-rail": {
              backgroundColor: "#F2F3F7",
              border: `1px solid #9A9AAF`,
-                  height: "12px"
+              height: "12px",
            },
            "& .MuiSlider-thumb": {
              border: "3px #f2f3f7 solid",
              height: "23px",
-                  width: "23px"
+              width: "23px",
            },
            "& .MuiSlider-track": {
-                height: "12px"
-              }
+              height: "12px",
+            },
          }}
          onChange={(_, value) => {
            const range = String(value).replace(",", "—");
@ -158,6 +156,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
            sx={{
              display: "flex",
              gap: "15px",
+              alignItems: "center",
              "& .MuiFormControl-root": { width: "auto" },
            }}
          >
@ -180,9 +179,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
                "& .MuiInputBase-input": { textAlign: "center" },
              }}
            />
-
-            до
-            
+            <Typography>до</Typography>
            <CustomTextField
              placeholder="0"
              value={maxRange}
@ -204,7 +201,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
            />
          </Box>
        )}
-        
      </Box>
    </Box>
  );
--- a/src/pages/ViewPublicationPage/questions/Rating.tsx
+++ b/src/pages/ViewPublicationPage/questions/Rating.tsx
@ -44,12 +44,14 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
            <StarIconMini
              color={theme.palette.brightPurple.main}
              width={50}
+              sx={{ transform: "scale(1.4)" }}
            />
          }
          emptyIcon={
            <StarIconMini
              color={theme.palette.grey2.main}
              width={50}
+              sx={{ transform: "scale(1.4)" }}
            />
          }
        />
--- a/src/pages/ViewPublicationPage/questions/Variant.tsx
+++ b/src/pages/ViewPublicationPage/questions/Variant.tsx
@ -2,8 +2,10 @@ import {
  Box,
  Typography,
  RadioGroup,
+  FormGroup,
  FormControlLabel,
  Radio,
+  Checkbox,
  useTheme,
 } from "@mui/material";

@ -27,11 +29,13 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
      ({ questionId }) => questionId === currentQuestion.content.id
    ) ?? {};

+  const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
+
  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
      <Box sx={{ display: "flex" }}>
-        <RadioGroup
+        <Group
          name={currentQuestion.id}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id
@ -70,25 +74,45 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
                value={index}
                labelPlacement="start"
                control={
+                  currentQuestion.content.multi ? (
+                    <Checkbox
+                      checked={!!answer?.includes(variant.id)}
+                      checkedIcon={<RadioCheck />}
+                      icon={<RadioIcon />}
+                    />
+                  ) : (
                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
+                  )
                }
                label={variant.answer}
                onClick={(event) => {
                  event.preventDefault();
+                  const variantId = currentQuestion.content.variants[index].id;
+
+                  if (currentQuestion.content.multi) {
+                    const currentAnswer =
+                      typeof answer !== "string" ? answer || [] : [];

                    updateAnswer(
                      currentQuestion.content.id,
-                    currentQuestion.content.variants[index].id
+                      currentAnswer?.includes(variantId)
+                        ? currentAnswer?.filter((item) => item !== variantId)
+                        : [...currentAnswer, variantId]
                    );

-                  if (answer === currentQuestion.content.variants[index].id) {
+                    return;
+                  }
+
+                  updateAnswer(currentQuestion.content.id, variantId);
+
+                  if (answer === variantId) {
                    deleteAnswer(currentQuestion.content.id);
                  }
                }}
              />
            ))}
          </Box>
-        </RadioGroup>
+        </Group>
        {currentQuestion.content.back && (
          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
            <img
--- a/src/stores/quizView.ts
+++ b/src/stores/quizView.ts
@ -3,7 +3,7 @@ import { devtools } from "zustand/middleware";

 type Answer = {
  questionId: string;
-  answer: string;
+  answer: string | string[];
  // Поле отвечающее за первое изменение ответа, нужно для галочки "Необязательный вопрос"
  changed: boolean;
 };
@ -25,7 +25,7 @@ export const useQuizViewStore = create<QuizViewStore>()(

 export const updateAnswer = (
  questionId: string,
-  answer: string,
+  answer: string | string[],
  changed = true
 ) => {
  const answers = [...useQuizViewStore.getState().answers];
--- a/yarn.lock
+++ b/yarn.lock