Merge branch 'dev' into fast-editing-bug

src/model/questionTypes/shared.ts

@@ -60,7 +60,6 @@ export interface QuizQuestionBase {
     type?: QuestionType | null;
     expanded: boolean;
     openedModalSettings: boolean;
-    required: boolean;
     deleted: boolean;
     deleteTimeoutId: number;
     content: {

src/pages/Landing/Landing.tsx

@@ -24,7 +24,7 @@ export default function Landing() {
             <Header/>
             <Hero/>
             <Counter/>
-            <Collaboration/>
+            {/* <Collaboration/> */}
             <HowItWorks/>
             <BusinessPluses/>
             <HowToUse/>

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -157,6 +157,12 @@ function CsComponent({
   }, [modalQuestionTargetContentId])
 
   const addNode = ({ parentNodeContentId, targetNodeContentId }: { parentNodeContentId: string, targetNodeContentId?: string }) => {
+
+    
+    //запрещаем работу родителя-ребенка если это один и тот же вопрос
+    if (parentNodeContentId === targetNodeContentId) return
+
+
     const cy = cyRef?.current
     const parentNodeChildren = cy?.$('edge[source = "' + parentNodeContentId + '"]')?.length
     //если есть инфо о выбранном вопросе из модалки - берём родителя из инфо модалки. Иначе из значения дропа

src/pages/Questions/DataOptions/settingData.tsx

@@ -86,10 +86,10 @@ export default function SettingsData({ question }: SettingsDataProps) {
                 <CustomCheckbox
                     sx={{ mr: isMobile ? "0px" : "16px" }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
+                    checked={!question.content.required}
                     handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+                        updateQuestion<QuizQuestionDate>(question.id, question => {
-                            question.required = !target.checked;
+                            question.content.required = !target.checked;
                         });
                     }}
                 />
@@ -109,7 +109,7 @@ export default function SettingsData({ question }: SettingsDataProps) {
                         label={"Внутреннее название вопроса"}
                         checked={question.content.innerNameCheck}
                         handleChange={({ target }) => {
-                            updateQuestion(question.id, question => {
+                            updateQuestion<QuizQuestionDate>(question.id, question => {
                                 question.content.innerNameCheck = target.checked;
                                 question.content.innerName = target.checked ? question.content.innerName : "";
                             });

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -128,10 +128,10 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
                     </Typography>
                     <CustomCheckbox
                         label={"Необязательный вопрос"}
-                        checked={!question.required}
+                        checked={!question.content.required}
                         handleChange={(e) => {
-                            updateQuestion(question.id, question => {
+                            updateQuestion<QuizQuestionSelect>(question.id, question => {
-                                question.required = !e.target.checked;
+                                question.content.required = !e.target.checked;
                             });
                         }}
                     />
@@ -141,7 +141,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
                             label={"Внутреннее название вопроса"}
                             checked={question.content.innerNameCheck}
                             handleChange={({ target }) => {
-                                updateQuestion(question.id, question => {
+                                updateQuestion<QuizQuestionSelect>(question.id, question => {
                                     question.content.innerNameCheck = target.checked;
                                     question.content.innerName = target.checked ? question.content.innerName : "";
                                 });

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -85,11 +85,11 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
                 <CustomCheckbox
                     sx={{ mr: isMobile ? "0px" : "16px" }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
+                    checked={!question.content.required}
-                    handleChange={(e) => updateQuestion(question.id, question => {
+                    handleChange={({ target }) => updateQuestion<QuizQuestionEmoji>(question.id, question => {
                         if (question.type !== "emoji") return;
 
-                        question.content.required = !e.target.checked;
+                        question.content.required = !target.checked;
                     })}
                 />
                 <Box
@@ -107,7 +107,7 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
                         }}
                         label={"Внутреннее название вопроса"}
                         checked={question.content.innerNameCheck}
-                        handleChange={({ target }) => updateQuestion(question.id, question => {
+                        handleChange={({ target }) => updateQuestion<QuizQuestionEmoji>(question.id, question => {
                             question.content.innerNameCheck = target.checked;
                             question.content.innerName = target.checked ? question.content.innerName : "";
                         })}

src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx

@@ -111,11 +111,11 @@ export default function SettingOptionsAndPict({ question }: SettingOptionsAndPic
                     <CustomCheckbox
                         sx={{ mr: isMobile ? "0px" : "16px" }}
                         label={"Необязательный вопрос"}
-                        checked={question.content.required}
+                        checked={!question.content.required}
-                        handleChange={({ target }) => updateQuestion(question.id, question => {
+                        handleChange={({ target }) => updateQuestion<QuizQuestionVarImg>(question.id, question => {
                             if (question.type !== "varimg") return;
 
-                            question.content.required = target.checked;
+                            question.content.required = !target.checked;
                         })}
                     />
                     <Box sx={{ display: "flex", alignItems: "center" }}>
@@ -126,7 +126,7 @@ export default function SettingOptionsAndPict({ question }: SettingOptionsAndPic
                             }}
                             label={"Внутреннее название вопроса"}
                             checked={question.content.innerNameCheck}
-                            handleChange={({ target }) => updateQuestion(question.id, question => {
+                            handleChange={({ target }) => updateQuestion<QuizQuestionVarImg>(question.id, question => {
                                 question.content.innerNameCheck = target.checked;
                                 question.content.innerName = "";
                             })}

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -211,11 +211,11 @@ export default function SettingOpytionsPict({ question }: SettingOpytionsPictPro
                     <CustomCheckbox
                         sx={{ alignItems: isMobile ? "flex-start" : "" }}
                         label={"Необязательный вопрос"}
-                        checked={question.content.required}
+                        checked={!question.content.required}
-                        handleChange={({ target }) => updateQuestion(question.id, question => {
+                        handleChange={({ target }) => updateQuestion<QuizQuestionImages>(question.id, question => {
                             if (question.type !== "images") return;
 
-                            question.content.required = target.checked;
+                            question.content.required = !target.checked;
                         })
                         }
                     />

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -169,10 +169,10 @@ export default function SettingTextField({
                         alignItems: isMobile ? "flex-end" : "center",
                     }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
+                    checked={!question.content.required}
                     handleChange={(e) => {
-                        updateQuestion(question.id, question => {
+                        updateQuestion<QuizQuestionText>(question.id, question => {
-                            question.required = !e.target.checked;
+                            question.content.required = !e.target.checked;
                         });
                     }}
                 />
@@ -193,7 +193,7 @@ export default function SettingTextField({
                         label={"Внутреннее название вопроса"}
                         checked={question.content.innerNameCheck}
                         handleChange={({ target }) => {
-                            updateQuestion(question.id, question => {
+                            updateQuestion<QuizQuestionText>(question.id, question => {
                                 question.content.innerNameCheck = target.checked;
                                 question.content.innerName = target.checked
                                     ? question.content.innerName

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -148,12 +148,12 @@ export default function SettingSlider({ question }: SettingSliderProps) {
                 <CustomCheckbox
                     sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
+                    checked={!question.content.required}
                     handleChange={(e) => {
-                        updateQuestion(question.id, question => {
+                        updateQuestion<QuizQuestionRating>(question.id, question => {
                             if (question.type !== "rating") return;
 
-                            question.required = !e.target.checked;
+                            question.content.required = !e.target.checked;
                         });
                     }}
                 />

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -78,12 +78,12 @@ export default function SettingSlider({ question }: SettingSliderProps) {
                 <CustomCheckbox
                     sx={{ mr: isMobile ? "0px" : "16px", alignItems: isMobile ? "flex-end" : "center" }}
                     label={"Необязательный вопрос"}
-                    checked={!question.required}
+                    checked={!question.content.required}
                     handleChange={(e) => {
-                        updateQuestion(question.id, question => {
+                        updateQuestion<QuizQuestionNumber>(question.id, question => {
                             if (question.type !== "number") return;
 
-                            question.required = !e.target.checked;
+                            question.content.required = !e.target.checked;
                         });
                     }}
                 />

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -59,10 +59,10 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
                     mr: isMobile ? "0px" : "16px",
                 }}
                 label={"Необязательный вопрос"}
-                checked={!question.required}
+                checked={!question.content.required}
                 handleChange={(e) => {
-                    updateQuestion(question.id, question => {
+                    updateQuestion<QuizQuestionFile>(question.id, question => {
-                        question.required = !e.target.checked;
+                        question.content.required = !e.target.checked;
                     });
                 }}
             />
@@ -82,7 +82,7 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
                     label={"Внутреннее название вопроса"}
                     checked={question.content.innerNameCheck}
                     handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+                        updateQuestion<QuizQuestionFile>(question.id, question => {
                             question.content.innerNameCheck = target.checked;
                             question.content.innerName = target.checked ? question.content.innerName : "";
                         });

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -12,7 +12,6 @@ import { useDebouncedCallback } from "use-debounce";
 import InfoIcon from "../../../assets/icons/InfoIcon";
 import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
 
-
 interface Props {
   question: QuizQuestionVariant;
 }
@@ -63,7 +62,7 @@ export default function ResponseSettings({ question }: Props) {
           label={"Длинный текстовый ответ"}
           checked={question.content.largeCheck}
           handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+            updateQuestion(question.id, (question) => {
               if (!("largeCheck" in question.content)) return;
 
               question.content.largeCheck = target.checked;
@@ -76,7 +75,7 @@ export default function ResponseSettings({ question }: Props) {
           checked={question.content.multi}
           dataCy="multiple-answers-checkbox"
           handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+            updateQuestion(question.id, (question) => {
               if (!("multi" in question.content)) return;
 
               question.content.multi = target.checked;
@@ -88,7 +87,7 @@ export default function ResponseSettings({ question }: Props) {
           label={'Вариант "свой ответ"'}
           checked={question.content.own}
           handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+            updateQuestion(question.id, (question) => {
               if (!("own" in question.content)) return;
 
               question.content.own = target.checked;
@@ -122,10 +121,10 @@ export default function ResponseSettings({ question }: Props) {
         <CustomCheckbox
           sx={{ mr: isMobile ? "0px" : "16px" }}
           label={"Необязательный вопрос"}
-                    checked={!question.required}
+          checked={!question.content.required}
           handleChange={({ target }) => {
-                        updateQuestion(question.id, question => {
+            updateQuestion<QuizQuestionVariant>(question.id, (question) => {
-                            question.required = !target.checked;
+              question.content.required = !target.checked;
             });
           }}
         />
@@ -145,9 +144,11 @@ export default function ResponseSettings({ question }: Props) {
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {
-                            updateQuestion(question.id, question => {
+                updateQuestion<QuizQuestionVariant>(question.id, (question) => {
                 question.content.innerNameCheck = target.checked;
-                                question.content.innerName = target.checked ? question.content.innerName : "";
+                question.content.innerName = target.checked
+                  ? question.content.innerName
+                  : "";
               });
             }}
           />

src/pages/ViewPublicationPage/Footer.tsx

@@ -3,17 +3,14 @@ import { Box, Button, useTheme } from "@mui/material";
 
 import { useQuizViewStore } from "@root/quizView";
 
-import type {
+import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
-  AnyTypedQuizQuestion,
-  QuizQuestionBase,
-} from "../../model/questionTypes/shared";
 import { getQuestionByContentId } from "@root/questions/actions";
 import { enqueueSnackbar } from "notistack";
 
 type FooterProps = {
   questions: AnyTypedQuizQuestion[];
   setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
-  question: QuizQuestionBase;
+  question: AnyTypedQuizQuestion;
 };
 
 export const Footer = ({
@@ -21,9 +18,6 @@ export const Footer = ({
   questions,
   question,
 }: FooterProps) => {
-  const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
-    new Set()
-  );
   const [disablePreviousButton, setDisablePreviousButton] =
     useState<boolean>(false);
   const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
@@ -58,11 +52,17 @@ export const Footer = ({
       ({ questionId }) => questionId === question.content.id
     );
 
-    if (question.required && answer?.changed) {
+    if ("required" in question.content && question.content.required && answer) {
       setDisableNextButton(false);
+
+      return;
     }
 
-    if (question.required && !answer?.changed) {
+    if (
+      "required" in question.content &&
+      question.content.required &&
+      !answer
+    ) {
       setDisableNextButton(true);
 
       return;
@@ -103,7 +103,7 @@ export const Footer = ({
 
       let readyBeNextQuestion = "";
 
-      question.content.rule.main.forEach(({ next, rules }) => {
+      (question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
         let longerArray = Math.max(
           rules[0].answers.length,
           [answer?.answer].length

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,142 +1,295 @@
 import {
   Box,
   Button,
+  ButtonBase,
+  Link,
+  Paper,
   Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { useParams } from "react-router-dom";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
+import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
+import { notReachable } from "../../utils/notReachable";
+import { useUADevice } from "../../utils/hooks/useUADevice";
 
+export const StartPageViewPublication = () => {
+  console.log("startpage")
+  const theme = useTheme();
+  const quiz = useCurrentQuiz();
+  const { isMobileDevice } = useUADevice();
+  console.log(quiz)
 
-import { useQuizes } from "@root/quizes/hooks";
+  if (!quiz) return null;
 
-type StartPageViewPublicationProps = {
+  const handleCopyNumber = () => {
-  setVisualStartPage: (bool: boolean) => void;
+    navigator.clipboard.writeText(quiz.config.info.phonenumber);
-  showNextButton:boolean
   };
 
-export const StartPageViewPublication = ({
+  const background = quiz.config.startpage.background.type === "image"
-  setVisualStartPage,
+    ? quiz.config.startpage.background.desktop
-  showNextButton
+      ? (
-}: StartPageViewPublicationProps) => {
+        <img
-  const quizId = Number(useParams().quizId);
+          src={quiz.config.startpage.background.desktop}
-  const { quizes } = useQuizes();
+          alt=""
-  const theme = useTheme();
+          style={{
-  const isTablet = useMediaQuery(theme.breakpoints.down(630));
+            width: "100%",
-  const quiz = quizes.find(({ backendId }) => quizId === backendId);
+            height: "100%",
-  const isMediaFileExist =
+            objectFit: "cover",
-    quiz?.config.startpage.background.desktop ||
+            overflow: "hidden"
-    quiz?.config.startpage.background.video;
+          }}
+        />
+      )
+      : null
+    : quiz.config.startpage.background.type === "video"
+      ? quiz.config.startpage.background.video
+        ? (
+          <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video}
+            containerSX={{
+              width: quiz.config.startpageType === "centered" ? "550px" : quiz.config.startpageType === "expanded" ? "100vw" : "100%",
+              height: quiz.config.startpageType === "centered" ? "275px" : quiz.config.startpageType === "expanded" ? "100vh" : "100%",
+              borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
+              overflow: "hidden",
+              "& iframe": {
+                width: "100%",
+                height: "100%",
+                transform: quiz.config.startpageType === "centered" ? "" : quiz.config.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)",
+
+              }
+
+            }}
+          />
+        )
+        : null
+      : null;
 
   return (
-    <Box
+    <Paper className="quiz-preview-draghandle"
       sx={{
         height: "100vh",
-        display: "flex",
+        background: quiz.config.startpageType === "expanded" ?
-        flexDirection:
+          quiz.config.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" :
-          quiz?.config.startpage.position === "left" ? "row" : "row-reverse",
+          quiz.config.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" :
-        flexGrow: 1,
+          "linear-gradient(270deg,#272626,transparent)" 
-        "&::-webkit-scrollbar": { width: 0 },
+        : "",
-      }}
+        color: quiz.config.startpageType === "expanded" ? "white" : "black"
+      
+
+      }}>
+      <QuizPreviewLayoutByType
+        quizHeaderBlock={<Box 
+        p={quiz.config.startpageType === "standard" ? "" : "16px"}
         >
-      <Box
+          <Box sx={{
-        sx={{
-          width: isMediaFileExist && !isTablet ? "40%" : "100%",
-          padding: "16px",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
-        }}
-      >
-        <Box
-          sx={{
             display: "flex",
             alignItems: "center",
             gap: "20px",
-          }}
+            mb: "7px"
-        >
+          }}>
-          {quiz?.config.startpage.background.mobile && (
+            {quiz.config.startpage.logo && (
               <img
-              src={quiz.config.startpage.background.mobile}
+                src={quiz.config.startpage.logo}
                 style={{
-                height: "50px",
+                  height: "37px",
-                maxWidth: "100px",
+                  maxWidth: "43px",
                   objectFit: "cover",
                 }}
                 alt=""
               />
             )}
-          <Typography sx={{ fontSize: "18px" }}>
+            <Typography sx={{ fontSize: "14px" }}>
-            {quiz?.config.info.orgname}
+              {quiz.config.info.orgname}
             </Typography>
           </Box>
-        <Box
+          <Link mb="16px" href={quiz.config.info.site}>
-          sx={{
+            <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
-            flexGrow: 1,
+              {quiz.config.info.site}
+            </Typography>
+          </Link>
+        </Box>}
+        quizMainBlock={<>
+          <Box sx={{
             display: "flex",
-            gap: "10px",
             flexDirection: "column",
             justifyContent: "center",
-          }}
+            alignItems: quiz.config.startpageType === "centered" ? "center" :
-        >
+              quiz.config.startpageType === "expanded"
-          <Typography sx={{ fontWeight: "bold", fontSize: "20px" }}>
+                ? quiz.config.startpage.position === "center" ?
-            {quiz?.name}
+                "center"
+                : "start": "start",
+            mt: "28px",
+            width: "100%"
+          }}>
+            <Typography sx={{
+              fontWeight: "bold",
+              fontSize: "26px",
+              fontStyle: "normal",
+              fontStretch: "normal",
+              lineHeight: "1.2",
+            }}>{quiz.name}</Typography>
+            <Typography sx={{
+              fontSize: "16px",
+              m: "16px 0"
+            }}>
+              {quiz.config.startpage.description}
             </Typography>
-          <Typography sx={{ fontSize: "16px" }}>
+            <Box width={ quiz.config.startpageType === "standard" ? "100%" : "auto"}>
-            {quiz?.config.startpage.description}
-          </Typography>
-          <Box>
               <Button
                 variant="contained"
-              sx={{ fontSize: "16px", padding: "10px 15px" }}
+                sx={{
-              // disabled={!questions.length}
+                  fontSize: "16px",
-              onClick={() => setVisualStartPage(false)}
+                  padding: "10px 15px",
+                  width: quiz.config.startpageType === "standard" ? "100%" : "auto"
+                }}
               >
-              {quiz?.config.startpage.button
+                {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
-                ? quiz?.config.startpage.button
-                : "Пройти тест"}
               </Button>
             </Box>
           </Box>
-        <Box>
+          <Box
-          <Typography
+            sx={{
-            sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
+              mt: "46px"
+            }}
           >
-            {quiz?.config.info.phonenumber}
+            {quiz.config.info.clickable ? (
+              isMobileDevice ? (
+                <Link href={`tel:${quiz.config.info.phonenumber}`}>
+                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                    {quiz.config.info.phonenumber}
                   </Typography>
-          <Typography sx={{ fontSize: "12px" }}>
+                </Link>
-            {quiz?.config.info.law}
+              ) : (
+                <ButtonBase onClick={handleCopyNumber}>
+                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                    {quiz.config.info.phonenumber}
+                  </Typography>
+                </ButtonBase>
+              )
+            ) : (
+              <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
+                {quiz.config.info.phonenumber}
+              </Typography>
+            )}
+            <Typography sx={{ fontSize: "12px", textAlign: "end" }}>
+              {quiz.config.info.law}
             </Typography>
           </Box>
-      </Box>
+        </>}
-      {!isTablet && isMediaFileExist && (
+        backgroundBlock={background}
-        <Box sx={{ width: "60%" }}>
+        startpageType={quiz.config.startpageType}
-          {quiz?.config.startpage.background.mobile && (
+        alignType={quiz.config.startpage.position}
-            <img
-              src={quiz.config.startpage.background.mobile}
-              alt=""
-              style={{
-                display: "block",
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-              }}
       />
-          )}
+    </Paper>
-          {quiz.config.startpage.background.type === "video" &&
+  );
-            quiz.config.startpage.background.video && (
+}
-              <video
+
-                src={quiz.config.startpage.background.video}
+function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
-                controls
+  quizHeaderBlock: JSX.Element;
-                style={{
+  quizMainBlock: JSX.Element;
-                  width: "100%",
+  backgroundBlock: JSX.Element | null;
-                  height: "100%",
+  startpageType: QuizStartpageType;
-                  objectFit: "cover",
+  alignType: QuizStartpageAlignType;
-                }}
+}) {
-              />
+  const theme = useTheme();
-            )}
+  const isTablet = useMediaQuery(theme.breakpoints.down(630));
+
+  switch (startpageType) {
+    case null:
+    case "standard": {
+      return (
+        <Box sx={{
+          display: "flex",
+          flexDirection: alignType === "left" ? "row" : "row-reverse",
+          flexGrow: 1,
+          height: "100vh",
+          "&::-webkit-scrollbar": { width: 0 },
+        }}>
+          <Box sx={{
+            width: !isTablet ? "40%" : "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: !isTablet ? "flex-start" : "center",
+            p: "25px"
+          }}>
+            {quizHeaderBlock}
+            {quizMainBlock}
+          </Box>
+          <Box sx={{
+            width: "60%",
+            overflow: "hidden"
+          }}>
+            {backgroundBlock}
           </Box>
-      )}
         </Box>
       );
+    }
+    case "expanded": {
+      return (
+        <Box sx={{
+          position: "relative",
+          display: "flex",
+          justifyContent: startpageAlignTypeToJustifyContent[alignType],
+          flexGrow: 1,
+          height: "100%",
+          "&::-webkit-scrollbar": { width: 0 },
+        }}>
+          <Box sx={{
+            width: "40%",
+            position: "relative",
+            padding: "16px",
+            zIndex: 2,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: alignType === "center" ? "center" : "start",
+          }}>
+            {quizHeaderBlock}
+            {quizMainBlock}
+          </Box>
+          <Box sx={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            height: "100%",
+            width: "100%",
+            zIndex: 1,
+            overflow: "hidden"
+          }}>
+            {backgroundBlock}
+          </Box>
+        </Box>
+      );
+    }
+    case "centered": {
+      return (
+        <Box sx={{
+          padding: "16px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          "&::-webkit-scrollbar": { width: 0 },
+          overflow: "hidden"
+        }}>
+          {quizHeaderBlock}
+          {backgroundBlock &&
+            <Box>
+              {backgroundBlock}
+            </Box>
+          }
+          {quizMainBlock}
+        </Box>
+      );
+    }
+    default: notReachable(startpageType);
+  }
+}
+
+const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
+  left: "start",
+  center: "center",
+  right: "end",
 };

src/pages/ViewPublicationPage/index.tsx

@@ -5,11 +5,29 @@ import { StartPageViewPublication } from "./StartPageViewPublication";
 import { Question } from "./Question";
 import { useQuestions } from "@root/questions/hooks";
 import { useCurrentQuiz } from "@root/quizes/hooks";
+import useSWR from "swr";
+import { quizApi } from "@api/quiz";
+import { setQuizes } from "@root/quizes/actions";
+import { isAxiosError } from "axios";
+import { devlog } from "@frontend/kitui";
 
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
+import { enqueueSnackbar } from "notistack";
 
 export const ViewPage = () => {
+  useSWR("quizes", () => quizApi.getList(), {
+    onSuccess: setQuizes,
+    onError: error => {
+        const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
+
+        devlog("Error getting quiz list", error);
+        enqueueSnackbar(`Не удалось получить квизы. ${message}`);
+    },
+});
+
+
   const quiz = useCurrentQuiz();
+  console.log(quiz)
   const { questions } = useQuestions();
   const [visualStartPage, setVisualStartPage] = useState<boolean>(
     !quiz?.config.noStartPage
@@ -30,10 +48,7 @@ export const ViewPage = () => {
   return (
     <Box>
       {visualStartPage ? (
-        <StartPageViewPublication
+        <StartPageViewPublication/>
-          setVisualStartPage={setVisualStartPage}
-          showNextButton={!!filteredQuestions.length}
-        />
       ) : (
         <Question questions={filteredQuestions} />
       )}

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -57,8 +57,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         currentQuestion.content.id,
         currentQuestion.content.chooseRange
           ? `${currentQuestion.content.start}—${max}`
-          : String(currentQuestion.content.start),
+          : String(currentQuestion.content.start)
-        false
       );
 
       setMinRange(String(currentQuestion.content.start));

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -7,6 +7,12 @@ import {
 
 import { useQuizViewStore, updateAnswer } from "@root/quizView";
 
+import TropfyIcon from "@icons/questionsPage/tropfyIcon";
+import FlagIcon from "@icons/questionsPage/FlagIcon";
+import HeartIcon from "@icons/questionsPage/heartIcon";
+import LikeIcon from "@icons/questionsPage/likeIcon";
+import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
+import HashtagIcon from "@icons/questionsPage/hashtagIcon";
 import StarIconMini from "@icons/questionsPage/StarIconMini";
 
 import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
@@ -15,6 +21,37 @@ type RatingProps = {
   currentQuestion: QuizQuestionRating;
 };
 
+const buttonRatingForm = [
+  {
+    name: "star",
+    icon: (color: string) => <StarIconMini width={35} color={color} />,
+  },
+  {
+    name: "trophie",
+    icon: (color: string) => <TropfyIcon color={color} />,
+  },
+  {
+    name: "flag",
+    icon: (color: string) => <FlagIcon color={color} />,
+  },
+  {
+    name: "heart",
+    icon: (color: string) => <HeartIcon color={color} />,
+  },
+  {
+    name: "like",
+    icon: (color: string) => <LikeIcon color={color} />,
+  },
+  {
+    name: "bubble",
+    icon: (color: string) => <LightbulbIcon color={color} />,
+  },
+  {
+    name: "hashtag",
+    icon: (color: string) => <HashtagIcon color={color} />,
+  },
+];
+
 export const Rating = ({ currentQuestion }: RatingProps) => {
   const { answers } = useQuizViewStore();
   const theme = useTheme();
@@ -22,15 +59,28 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
     answers.find(
       ({ questionId }) => questionId === currentQuestion.content.id
     ) ?? {};
+  const form = buttonRatingForm.find(
+    ({ name }) => name === currentQuestion.content.form
+  );
 
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
+      <Box
+        sx={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "20px",
+          marginTop: "20px",
+        }}
+      >
+        <Typography sx={{ color: theme.palette.grey2.main }}>
+          {currentQuestion.content.ratingNegativeDescription}
+        </Typography>
         <Box
           sx={{
             display: "inline-block",
             width: "100%",
-          marginTop: "20px",
           }}
         >
           <RatingComponent
@@ -40,37 +90,14 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
             }
             sx={{ height: "50px", gap: "15px" }}
             max={currentQuestion.content.steps}
-          icon={
+            icon={form?.icon(theme.palette.brightPurple.main)}
-            <StarIconMini
+            emptyIcon={form?.icon(theme.palette.grey2.main)}
-              color={theme.palette.brightPurple.main}
-              width={50}
-              sx={{ transform: "scale(1.4)" }}
           />
-          }
+        </Box>
-          emptyIcon={
+        <Typography sx={{ color: theme.palette.grey2.main }}>
-            <StarIconMini
-              color={theme.palette.grey2.main}
-              width={50}
-              sx={{ transform: "scale(1.4)" }}
-            />
-          }
-        />
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            maxWidth: `${currentQuestion.content.steps * 50}px`,
-            color: theme.palette.grey2.main,
-          }}
-        >
-          <Typography>
-            {currentQuestion.content.ratingNegativeDescription}
-          </Typography>
-          <Typography>
           {currentQuestion.content.ratingPositiveDescription}
         </Typography>
       </Box>
     </Box>
-    </Box>
   );
 };

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import {
   Box,
   Typography,
@@ -6,32 +7,56 @@ import {
   FormControlLabel,
   Radio,
   Checkbox,
+  TextField,
   useTheme,
 } from "@mui/material";
 
-import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
+import {
+  useQuizViewStore,
+  updateAnswer,
+  deleteAnswer,
+  updateOwnVariant,
+  deleteOwnVariant,
+} from "@root/quizView";
 
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
 import { CheckboxIcon } from "@icons/Checkbox";
 
 import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
+import type { QuestionVariant } from "../../../model/questionTypes/shared";
 
 type VariantProps = {
   stepNumber: number;
   currentQuestion: QuizQuestionVariant;
 };
 
+type VariantItemProps = {
+  currentQuestion: QuizQuestionVariant;
+  variant: QuestionVariant;
+  answer: string | string[] | undefined;
+  index: number;
+  own?: boolean;
+};
+
 export const Variant = ({ currentQuestion }: VariantProps) => {
-  const { answers } = useQuizViewStore();
+  const { answers, ownVariants } = useQuizViewStore();
-  const theme = useTheme();
   const { answer } =
     answers.find(
       ({ questionId }) => questionId === currentQuestion.content.id
     ) ?? {};
+  const ownVariant = ownVariants.find(
+    (variant) => variant.contentId === currentQuestion.content.id
+  );
 
   const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
 
+  useEffect(() => {
+    if (!ownVariant) {
+      updateOwnVariant(currentQuestion.content.id, "");
+    }
+  }, []);
+
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
@@ -60,6 +85,49 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
             }}
           >
             {currentQuestion.content.variants.map((variant, index) => (
+              <VariantItem
+                key={variant.id}
+                currentQuestion={currentQuestion}
+                variant={variant}
+                answer={answer}
+                index={index}
+              />
+            ))}
+            {currentQuestion.content.own && ownVariant && (
+              <VariantItem
+                own
+                currentQuestion={currentQuestion}
+                variant={ownVariant.variant}
+                answer={answer}
+                index={currentQuestion.content.variants.length + 2}
+              />
+            )}
+          </Box>
+        </Group>
+        {currentQuestion.content.back && (
+          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
+            <img
+              src={currentQuestion.content.back}
+              style={{ width: "100%", height: "100%", objectFit: "cover" }}
+              alt=""
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+const VariantItem = ({
+  currentQuestion,
+  variant,
+  answer,
+  index,
+  own = false,
+}: VariantItemProps) => {
+  const theme = useTheme();
+
+  return (
     <FormControlLabel
       key={variant.id}
       sx={{
@@ -85,18 +153,17 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
           <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
         )
       }
-                label={variant.answer}
+      label={own ? <TextField label="Другое..." /> : variant.answer}
       onClick={(event) => {
         event.preventDefault();
         const variantId = currentQuestion.content.variants[index].id;
 
         if (currentQuestion.content.multi) {
-                    const currentAnswer =
+          const currentAnswer = typeof answer !== "string" ? answer || [] : [];
-                      typeof answer !== "string" ? answer || [] : [];
 
           updateAnswer(
             currentQuestion.content.id,
-                      currentAnswer?.includes(variantId)
+            currentAnswer.includes(variantId)
               ? currentAnswer?.filter((item) => item !== variantId)
               : [...currentAnswer, variantId]
           );
@@ -111,19 +178,5 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
         }
       }}
     />
-            ))}
-          </Box>
-        </Group>
-        {currentQuestion.content.back && (
-          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
-            <img
-              src={currentQuestion.content.back}
-              style={{ width: "100%", height: "100%", objectFit: "cover" }}
-              alt=""
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
   );
 };

src/pages/startPage/StartPageSettings.tsx

@@ -331,74 +331,7 @@ export default function StartPageSettings() {
 
                             <ModalSizeImage />
 
-                            <Box
+                           
-                                sx={{
-                                    mt: "10px",
-                                    display: "flex",
-                                    gap: "10px",
-                                    flexDirection: "column",
-                                }}
-                            >
-                                <FormControlLabel
-                                    control={
-                                        <Checkbox
-                                            icon={<IconCheck />}
-                                            checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
-                                        />
-                                    }
-                                    label="мобильная версия"
-                                    sx={{
-                                        color: theme.palette.brightPurple.main,
-                                        textDecorationLine: "underline",
-                                        textDecorationColor: theme.palette.brightPurple.main,
-                                        ml: "-9px",
-                                        userSelect: "none",
-                                        "& .css-14o5ia4-MuiTypography-root": {
-                                            fontSize: "16px"
-                                        }
-                                    }}
-                                    onClick={() => {
-                                        MobileVersionHC(!mobileVersion);
-                                    }}
-                                />
-                                {mobileVersion ? (
-                                    <Box sx={{ display: "flex", flexDirection: "column" }}>
-                                        <Typography
-                                            sx={{
-                                                fontWeight: 500,
-                                                color: theme.palette.grey3.main,
-                                                mt: "11px",
-                                                mb: "14px",
-                                            }}
-                                        >
-                                            Изображение для мобильной версии
-                                        </Typography>
-                                        <DropZone
-                                            text={"5 MB максимум"}
-                                            imageUrl={quiz.config.startpage.background.mobile}
-                                            originalImageUrl={quiz.config.startpage.background.originalMobile}
-                                            onImageUploadClick={file => {
-                                                uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                                    quiz.config.startpage.background.mobile = url;
-                                                    quiz.config.startpage.background.originalMobile = url;
-                                                });
-                                            }}
-                                            onImageSaveClick={file => {
-                                                uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                                    quiz.config.startpage.background.mobile = url;
-                                                });
-                                            }}
-                                            onDeleteClick={() => {
-                                                updateQuiz(quiz.id, quiz => {
-                                                    quiz.config.startpage.background.mobile = null;
-                                                });
-                                            }}
-                                        />
-                                    </Box>
-                                ) : (
-                                    <></>
-                                )}
-                            </Box>
                         </Box>
 
                         <Box
@@ -415,56 +348,11 @@ export default function StartPageSettings() {
                                     quiz.config.startpage.background.video = e.target.value;
                                 })}
                             />
-                            <Typography
+                            
-                                sx={{
-                                    fontWeight: 500,
-                                    color: theme.palette.grey3.main,
-                                    mt: "20px",
-                                    mb: "5px",
-                                }}
-                            >
-                                Настройки видео
-                            </Typography>
-                            <CustomCheckbox
-                                label="Зацикливать видео"
-                                checked={quiz.config.startpage.background.cycle}
-                                handleChange={e => updateQuiz(quiz.id, quiz => {
-                                    quiz.config.startpage.background.cycle = e.target.checked;
-                                })}
-                            />
-                            <Typography
-                                sx={{
-                                    fontWeight: 500,
-                                    color: theme.palette.grey3.main,
-                                    mt: "11px",
-                                    mb: "14px",
-                                }}
-                            >
-                                Изображение для мобильной версии
-                            </Typography>
-                            <DropZone
-                                text={"5 MB максимум"}
-                                imageUrl={quiz.config.startpage.background.mobile}
-                                originalImageUrl={quiz.config.startpage.background.originalMobile}
-                                onImageUploadClick={file => {
-                                    uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                        quiz.config.startpage.background.mobile = url;
-                                        quiz.config.startpage.background.originalMobile = url;
-                                    });
-                                }}
-                                onImageSaveClick={file => {
-                                    uploadQuizImage(quiz.id, file, (quiz, url) => {
-                                        quiz.config.startpage.background.mobile = url;
-                                    });
-                                }}
-                                onDeleteClick={() => {
-                                    updateQuiz(quiz.id, quiz => {
-                                        quiz.config.startpage.background.mobile = null;
-                                    });
-                                }}
-                            />
                         </Box>
 
+                        {designType !== "centered" &&
+                            <>
                                 <Typography
                                     sx={{
                                         fontWeight: 500,
@@ -475,7 +363,6 @@ export default function StartPageSettings() {
                                 >
                                     Расположение элементов
                                 </Typography>
-                        {designType !== "centered" &&
                                 <Box
                                     sx={{
                                         display: "flex",
@@ -505,6 +392,8 @@ export default function StartPageSettings() {
                                         Icon={AlignRightIcon}
                                     />
                                 </Box>
+                            </>
+
                         }
                         {(isTablet || !isSmallMonitor) && (
                             <>

src/stores/questions/actions.ts

@@ -176,9 +176,9 @@ const REQUEST_DEBOUNCE = 200;
 const requestQueue = new RequestQueue();
 let requestTimeoutId: ReturnType<typeof setTimeout>;
 
-export const updateQuestion = (
+export const updateQuestion = <T = AnyTypedQuizQuestion>(
     questionId: string,
-    updateFn: (question: AnyTypedQuizQuestion) => void,
+    updateFn: (question: T) => void,
     skipQueue = false,
 ) => {
     setProducedState(state => {
@@ -186,7 +186,7 @@ export const updateQuestion = (
         if (!question) return;
         if (question.type === null) throw new Error("Cannot update untyped question, use 'updateUntypedQuestion' instead");
 
-        updateFn(question);
+        updateFn(question as T);
     }, {
         type: "updateQuestion",
         questionId,

src/stores/quizView.ts

@@ -1,21 +1,28 @@
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 
+import type { QuestionVariant } from "../model/questionTypes/shared";
+
 type Answer = {
   questionId: string;
   answer: string | string[];
-  // Поле отвечающее за первое изменение ответа, нужно для галочки "Необязательный вопрос"
+};
-  changed: boolean;
+
+type OwnVariant = {
+  contentId: string;
+  variant: QuestionVariant;
 };
 
 interface QuizViewStore {
   answers: Answer[];
+  ownVariants: OwnVariant[];
 }
 
 export const useQuizViewStore = create<QuizViewStore>()(
   devtools(
     (set, get) => ({
       answers: [],
+      ownVariants: [],
     }),
     {
       name: "quizView",
@@ -23,20 +30,16 @@ export const useQuizViewStore = create<QuizViewStore>()(
   )
 );
 
-export const updateAnswer = (
+export const updateAnswer = (questionId: string, answer: string | string[]) => {
-  questionId: string,
-  answer: string | string[],
-  changed = true
-) => {
   const answers = [...useQuizViewStore.getState().answers];
   const answerIndex = answers.findIndex(
     (answer) => questionId === answer.questionId
   );
 
   if (answerIndex < 0) {
-    answers.push({ questionId, answer, changed });
+    answers.push({ questionId, answer });
   } else {
-    answers[answerIndex] = { questionId, answer, changed };
+    answers[answerIndex] = { questionId, answer };
   }
 
   useQuizViewStore.setState({ answers });
@@ -50,3 +53,44 @@ export const deleteAnswer = (questionId: string) => {
 
   useQuizViewStore.setState({ answers: filteredItems });
 };
+
+export const updateOwnVariant = (contentId: string, answer: string) => {
+  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+  const ownVariantIndex = ownVariants.findIndex(
+    (variant) => variant.contentId === contentId
+  );
+
+  if (ownVariantIndex < 0) {
+    ownVariants.push({
+      contentId,
+      variant: {
+        id: getRandom(),
+        answer,
+        extendedText: "",
+        hints: "",
+        originalImageUrl: "",
+      },
+    });
+  } else {
+    ownVariants[ownVariantIndex].variant.answer = answer;
+  }
+
+  useQuizViewStore.setState({ ownVariants });
+};
+
+export const deleteOwnVariant = (contentId: string) => {
+  const ownVariants = [...useQuizViewStore.getState().ownVariants];
+
+  const filteredOwnVariants = ownVariants.filter(
+    (variant) => variant.contentId !== contentId
+  );
+
+  useQuizViewStore.setState({ ownVariants: filteredOwnVariants });
+};
+
+function getRandom() {
+  const min = Math.ceil(1000000);
+  const max = Math.floor(10000000);
+
+  return String(Math.floor(Math.random() * (max - min)) + min);
+}

src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

@@ -1,12 +1,13 @@
-import { Box } from "@mui/material";
+import { Box, SxProps } from "@mui/material";
 
 
 
 interface Props {
     videoUrl: string;
+    containerSX?: SxProps;
 }
 
-export default function YoutubeEmbedIframe({ videoUrl }: Props) {
+export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
     const extractYoutubeVideoId = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
     const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
     if (!videoId) return null;
@@ -21,7 +22,8 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
             "& iframe": {
                 width: "100%",
                 height: "100%",
-            }
+            },
+            ...containerSX
         }}>
             <iframe
                 src={embedUrl}