Merge branch 'dev' into 'main'

Dev

See merge request frontend/squiz!33

src/constants/base.ts

@@ -3,7 +3,7 @@ import type { QuizQuestionInitial } from "../model/questionTypes/shared";
 export const QUIZ_QUESTION_BASE: Omit<QuizQuestionInitial, "id"> = {
   title: "",
   type: "nonselected",
-  expanded: false,
+  expanded: true,
   required: false,
   deleted: false,
   deleteTimeoutId: 0,

src/constants/emoji.ts

@@ -15,7 +15,6 @@ export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
     variants: [
       {
         answer: "",
-        hints: "",
         extendedText: "",
       },
     ],

src/constants/images.ts

@@ -18,7 +18,6 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
     variants: [
       {
         answer: "",
-        hints: "",
         extendedText: "",
       },
     ],

src/constants/select.ts

@@ -12,6 +12,6 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
     innerNameCheck: false,
     innerName: "",
     default: "",
-    variants: [{ answer: "", hints: "", extendedText: "" }],
+    variants: [{ answer: "", extendedText: "" }],
   },
 };

src/constants/variant.ts

@@ -13,6 +13,6 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
     innerNameCheck: false,
     required: false,
     innerName: "",
-    variants: [{ answer: "", hints: "", extendedText: "" }],
+    variants: [{ answer: "", extendedText: "" }],
   },
 };

src/constants/varimg.ts

@@ -11,7 +11,7 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
     innerNameCheck: false,
     innerName: "",
     required: false,
-    variants: [{ answer: "", hints: "", extendedText: "" }],
+    variants: [{ answer: "", extendedText: "" }],
     largeCheck: false,
     replText: "",
   },

src/model/questionTypes/shared.ts

@@ -32,8 +32,6 @@ export interface QuestionHint {
 export type QuestionVariant = {
   /** Текст */
   answer: string;
-  /** Текст подсказки */
-  hints: string;
   /** Дополнительное поле для текста, emoji, ссылки на картинку */
   extendedText: string;
 };

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -7,7 +7,6 @@ import {
   FormControl,
   InputAdornment,
   IconButton,
-  Popover,
   useTheme,
   useMediaQuery,
 } from "@mui/material";
@@ -17,10 +16,9 @@ import { questionStore, updateQuestionsList } from "@root/questions";
 
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
-import { MessageIcon } from "@icons/messagIcon";
-import TextareaAutosize from "@mui/base/TextareaAutosize";
 
-import type { ChangeEvent, KeyboardEvent, ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+import type { DroppableProvided } from "react-beautiful-dnd";
 import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
 import type { QuestionVariant } from "../../../model/questionTypes/shared";
 
@@ -29,9 +27,9 @@ type AnswerItemProps = {
   totalIndex: number;
   variants: QuestionVariant[];
   variant: QuestionVariant;
+  provided: DroppableProvided;
   additionalContent?: ReactNode;
   additionalMobile?: ReactNode;
-  icon?: ReactNode;
 };
 
 export const AnswerItem = ({
@@ -39,6 +37,7 @@ export const AnswerItem = ({
   totalIndex,
   variants,
   variant,
+  provided,
   additionalContent,
   additionalMobile,
 }: AnswerItemProps) => {
@@ -59,21 +58,9 @@ export const AnswerItem = ({
     });
   }, 1000);
 
-  const [isOpen, setIsOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-  };
-
   const addNewAnswer = () => {
     const answerNew = variants.slice();
-    answerNew.push({ answer: "", hints: "", extendedText: "" });
+    answerNew.push({ answer: "", extendedText: "" });
 
     updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
       content: { ...question.content, variants: answerNew },
@@ -89,19 +76,8 @@ export const AnswerItem = ({
     });
   };
 
-  const changeAnswerHint = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    const answerNew = variants.slice();
-    answerNew[index].hints = event.target.value;
-
-    updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
-      content: { ...question.content, variants: answerNew },
-    });
-  };
-
   return (
-    <Draggable draggableId={String(index)} index={index}>
+    <Box>
-      {(provided) => (
-        <Box ref={provided.innerRef} {...provided.draggableProps}>
       <FormControl
         key={index}
         fullWidth
@@ -128,49 +104,14 @@ export const AnswerItem = ({
           InputProps={{
             startAdornment: (
               <>
-                    <InputAdornment
+                <InputAdornment {...provided.droppableProps} position="start">
-                      {...provided.dragHandleProps}
+                  <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
-                      position="start"
-                    >
-                      <PointsIcon
-                        style={{ color: "#9A9AAF", fontSize: "30px" }}
-                      />
                 </InputAdornment>
                 {additionalContent}
               </>
             ),
             endAdornment: (
               <InputAdornment position="end">
-                    <IconButton
-                      sx={{ padding: "0" }}
-                      aria-describedby="my-popover-id"
-                      onClick={handleClick}
-                    >
-                      <MessageIcon
-                        style={{
-                          color: "#9A9AAF",
-                          fontSize: "30px",
-                          marginRight: "6.5px",
-                        }}
-                      />
-                    </IconButton>
-                    <Popover
-                      id="my-popover-id"
-                      open={isOpen}
-                      anchorEl={anchorEl}
-                      onClose={handleClose}
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                        value={variant.hints}
-                        onChange={changeAnswerHint}
-                        onKeyDown={(
-                          event: KeyboardEvent<HTMLTextAreaElement>
-                        ) => event.stopPropagation()}
-                      />
-                    </Popover>
                 <IconButton sx={{ padding: "0" }} onClick={deleteAnswer}>
                   <DeleteIcon
                     style={{
@@ -184,7 +125,11 @@ export const AnswerItem = ({
           }}
           sx={{
             "& .MuiInputBase-root": {
-                  padding: additionalContent ? "5px 13px" : "13px",
+              padding: additionalContent
+                ? isTablet
+                  ? "13px"
+                  : "5px 13px"
+                : "13px",
               borderRadius: "10px",
               background: "#ffffff",
               "& input.MuiInputBase-input": {
@@ -205,7 +150,5 @@ export const AnswerItem = ({
         {additionalMobile}
       </FormControl>
     </Box>
-      )}
-    </Draggable>
   );
 };

src/pages/Questions/AnswerDraggableList/index.tsx

@@ -47,6 +47,7 @@ export const AnswerDraggableList = ({
                 totalIndex={totalIndex}
                 variants={variants}
                 variant={variant}
+                provided={provided}
                 additionalContent={additionalContent?.(variant, index)}
                 additionalMobile={additionalMobile?.(variant, index)}
               />

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -225,7 +225,7 @@ export default function QuestionsPageCard({
               sx={{
                 margin: isMobile ? "10px 0" : 0,
                 "& .MuiInputBase-root": {
-                  color: question.expanded ? "#9A9AAF" : "#4D4D4D",
+                  color: question.expanded ? "#000000" : "#4D4D4D",
                   backgroundColor: question.expanded
                     ? theme.palette.background.default
                     : "transparent",

src/pages/Questions/DropDown/DropDown.tsx

@@ -29,7 +29,7 @@ export default function DropDown({ totalIndex }: Props) {
 
   const addNewAnswer = () => {
     const answerNew = question.content.variants.slice();
-    answerNew.push({ answer: "", hints: "", extendedText: "" });
+    answerNew.push({ answer: "", extendedText: "" });
 
     updateQuestionsList<QuizQuestionSelect>(quizId, totalIndex, {
       content: { ...question.content, variants: answerNew },
@@ -94,12 +94,22 @@ export default function DropDown({ totalIndex }: Props) {
               >
                 или нажмите Enter
               </Typography>
-              <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
+              <EnterIcon
+                style={{
+                  color: "#7E2AEA",
+                  fontSize: "24px",
+                  marginLeft: "6px",
+                }}
+              />
             </>
           )}
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
       <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/Emoji/Emoji.tsx

@@ -28,7 +28,9 @@ interface Props {
 export default function Emoji({ totalIndex }: Props) {
   const [switchState, setSwitchState] = useState<string>("setting");
   const [open, setOpen] = useState<boolean>(false);
-  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);
+  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
+    null
+  );
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const { listQuestions } = questionStore();
   const quizId = Number(useParams().quizId);
@@ -37,7 +39,6 @@ export default function Emoji({ totalIndex }: Props) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
-
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
@@ -198,14 +199,21 @@ export default function Emoji({ totalIndex }: Props) {
             }}
           />
         </Popover>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: isMobile ? "17px" : "20px" }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            marginBottom: isMobile ? "17px" : "20px",
+          }}
+        >
           <Link
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
             onClick={() => {
               const answerNew = question.content.variants.slice();
-              answerNew.push({ answer: "", hints: "", extendedText: "" });
+              answerNew.push({ answer: "", extendedText: "" });
 
               updateQuestionsList<QuizQuestionEmoji>(quizId, totalIndex, {
                 content: { ...question.content, variants: answerNew },
@@ -237,7 +245,11 @@ export default function Emoji({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
       <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx

@@ -27,7 +27,7 @@ export default memo(
         {(provided) => (
           <ListItem
             ref={provided.innerRef}
-            {...provided.draggableProps}
+            {...(index !== 0 ? provided.draggableProps : {})}
             sx={{ userSelect: "none", padding: 0 }}
           >
             {questionData.deleted ? (

src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx

@@ -147,11 +147,13 @@ export default function QuestionsPageCard({
               ),
               endAdornment: (
                 <>
+                  {totalIndex !== 0 && (
                     <InputAdornment {...draggableProps} position="start">
                       <PointsIcon
                         style={{ color: "#9A9AAF", fontSize: "30px" }}
                       />
                     </InputAdornment>
+                  )}
                 </>
               ),
             }}

src/pages/Questions/Form/FormDraggableList/index.tsx

@@ -15,6 +15,10 @@ export const FormDraggableList = () => {
   const { listQuestions } = questionStore();
 
   const onDragEnd = ({ destination, source }: DropResult) => {
+    if (destination?.index === 0) {
+      return;
+    }
+
     if (destination) {
       const newItems = reorder(
         listQuestions[quizId],

src/pages/Questions/Form/FormQuestionsPage.tsx

@@ -93,13 +93,6 @@ export default function FormQuestionsPage() {
           }}
           onClick={() => {
             createQuestion(quizId);
-            updateQuestionsList<QuizQuestionBase>(
-              quizId,
-              listQuestions[quizId].length - 1 || 0,
-              {
-                expanded: true,
-              }
-            );
           }}
         >
           <AddAnswer color="#EEE4FC" />

src/pages/Questions/Form/FormTypeQuestions.tsx

@@ -5,18 +5,14 @@ import { Box } from "@mui/material";
 import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
+import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
 
 import Answer from "../../../assets/icons/questionsPage/answer";
-import OptionsPict from "../../../assets/icons/questionsPage/options_pict";
-import OptionsAndPict from "../../../assets/icons/questionsPage/options_and_pict";
-import Emoji from "../../../assets/icons/questionsPage/emoji";
 import Input from "../../../assets/icons/questionsPage/input";
 import DropDown from "../../../assets/icons/questionsPage/drop_down";
 import Date from "../../../assets/icons/questionsPage/date";
 import Slider from "../../../assets/icons/questionsPage/slider";
 import Download from "../../../assets/icons/questionsPage/download";
-import Page from "../../../assets/icons/questionsPage/page";
-import RatingIcon from "../../../assets/icons/questionsPage/rating";
 
 import {
   questionStore,
@@ -40,27 +36,12 @@ type ButtonTypeQuestion = {
   value: QuizQuestionType;
 };
 
-export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
+const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
   {
     icon: <Answer color="#9A9AAF" />,
     title: "Варианты ответов",
     value: "variant",
   },
-  {
-    icon: <OptionsPict color="#9A9AAF" />,
-    title: "Варианты с картинками",
-    value: "images",
-  },
-  {
-    icon: <OptionsAndPict color="#9A9AAF" />,
-    title: "Варианты и картинка",
-    value: "varimg",
-  },
-  {
-    icon: <Emoji color="#9A9AAF" />,
-    title: "Эмоджи",
-    value: "emoji",
-  },
   {
     icon: <Input color="#9A9AAF" />,
     title: "Своё поле для ввода",
@@ -86,16 +67,6 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
     title: "Загрузка файла",
     value: "file",
   },
-  {
-    icon: <Page color="#9A9AAF" />,
-    title: "Страница",
-    value: "page",
-  },
-  {
-    icon: <RatingIcon color="#9A9AAF" />,
-    title: "Рейтинг",
-    value: "rating",
-  },
 ];
 
 export default function FormTypeQuestions({ totalIndex }: Props) {
@@ -114,7 +85,10 @@ export default function FormTypeQuestions({ totalIndex }: Props) {
           margin: "20px",
         }}
       >
-        {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
+        {(totalIndex === 0
+          ? BUTTON_TYPE_QUESTIONS
+          : BUTTON_TYPE_SHORT_QUESTIONS
+        ).map(({ icon, title, value }) => (
           <QuestionsMiniButton
             key={title}
             onClick={() => {

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -208,8 +208,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
           opened={opened}
           onClose={() => setOpened(false)}
           picture={question.content.variants[currentIndex]?.extendedText}
-                    onCropPress={url => {
+          onCropPress={(url) => {
-                        const content = produce(question.content, draft => {
+            const content = produce(question.content, (draft) => {
               draft.variants[currentIndex].extendedText = url;
             });
             updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
@@ -217,181 +217,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
             });
           }}
         />
-                <Box
-                    sx={{
-                        width: "100%",
-                        border: "1px solid #9A9AAF",
-                        borderRadius: "8px",
-                        display: isTablet ? "block" : "none",
-                    }}
-                >
-                    <TextField
-                        fullWidth
-                        focused={false}
-                        placeholder={"Добавьте ответ"}
-                        multiline={question.content.largeCheck}
-                        InputProps={{
-                            startAdornment: (
-                                <>
-                                    <InputAdornment position="start">
-                                        <PointsIcon
-                                            style={{ color: "#9A9AAF", fontSize: "30px" }}
-                                        />
-                                    </InputAdornment>
-                                    {!isMobile && (
-                                        <Box
-                                            sx={{
-                                                width: "60px",
-                                                height: "40px",
-                                                background: "#EEE4FC",
-                                                display: "flex",
-                                                justifyContent: "space-between",
-                                                marginRight: "20px",
-                                                marginLeft: "12px",
-                                            }}
-                                        >
-                                            <Box
-                                                sx={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    width: "100%",
-                                                }}
-                                            >
-                                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />
-                                            </Box>
-                                            <span
-                                                style={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "center",
-                                                    background: "#7E2AEA",
-                                                    height: "100%",
-                                                    width: "25px",
-                                                    color: "white",
-                                                    fontSize: "15px",
-                                                }}
-                                            >
-                                                +
-                                            </span>
-                                        </Box>
-                                    )}
-                                </>
-                            ),
-                            endAdornment: (
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        sx={{ padding: "0" }}
-                                        aria-describedby="my-popover-id"
-                                    >
-                                        <MessageIcon
-                                            style={{
-                                                color: "#9A9AAF",
-                                                fontSize: "30px",
-                                                marginRight: "6.5px",
-                                            }}
-                                        />
-                                    </IconButton>
-                                    <Popover
-                                        id="my-popover-id"
-                                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                                        open={false}
-                                    >
-                                        <TextareaAutosize
-                                            style={{ margin: "10px" }}
-                                            placeholder="Подсказка для этого ответа"
-                                        />
-                                    </Popover>
-                                    <IconButton sx={{ padding: "0" }}>
-                                        <DeleteIcon
-                                            style={{
-                                                color: theme.palette.grey2.main,
-                                                marginRight: "-1px",
-                                            }}
-                                        />
-                                    </IconButton>
-                                </InputAdornment>
-                            ),
-                        }}
-                        sx={{
-                            "& .MuiInputBase-root": {
-                                padding: "13.5px",
-                                borderRadius: "10px",
-                                background: "#ffffff",
-                                height: "48px",
-                            },
-                            "& .MuiOutlinedInput-notchedOutline": {
-                                border: "none",
-                            },
-                        }}
-                        inputProps={{
-                            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
-                        }}
-                    />
-
-                    {isMobile && (
-                        <Box
-                            sx={{
-                                display: "flex",
-                                alignItems: "center",
-                                m: "8px",
-                                position: "relative",
-                            }}
-                        >
-                            <Box
-                                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                            />
-                            <ImageAddIcons
-                                style={{
-                                    position: "absolute",
-                                    color: "#7E2AEA",
-                                    fontSize: "20px",
-                                    left: "45%",
-                                    right: "55%",
-                                }}
-                            />
-                            <Box
-                                sx={{
-                                    display: "flex",
-                                    justifyContent: "center",
-                                    alignItems: "center",
-                                    width: "20px",
-                                    background: "#EEE4FC",
-                                    height: "40px",
-                                    color: "white",
-                                    backgroundColor: "#7E2AEA",
-                                }}
-                            >
-                                <Box
-                                    sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                                />
-                                <ImageAddIcons
-                                    style={{
-                                        position: "absolute",
-                                        color: "#7E2AEA",
-                                        fontSize: "20px",
-                                        left: "45%",
-                                        right: "55%",
-                                    }}
-                                />
-                                <Box
-                                    sx={{
-                                        display: "flex",
-                                        justifyContent: "center",
-                                        alignItems: "center",
-                                        width: "20px",
-                                        background: "#EEE4FC",
-                                        height: "40px",
-                                        color: "white",
-                                        backgroundColor: "#7E2AEA",
-                                    }}
-                                >
-                                    +
-                                </Box>
-                            </Box>
-                        </Box>
-                    )}
-                </Box>
         <Box
           sx={{
             display: "flex",
@@ -413,7 +238,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
               const clonedContent = { ...question.content };
               clonedContent.variants.push({
                 answer: "",
-                                hints: "",
                 extendedText: "",
               });
               updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
   Button,
   useTheme,
-    useMediaQuery
+  useMediaQuery,
 } from "@mui/material";
 
 import ButtonsOptions from "../ButtonsOptions";
@@ -62,7 +62,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
 
   const addNewAnswer = () => {
     const answerNew = question.content.variants.slice();
-        answerNew.push({ answer: "", hints: "", extendedText: "" });
+    answerNew.push({ answer: "", extendedText: "" });
 
     updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
       content: { ...question.content, variants: answerNew },
@@ -203,8 +203,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
           opened={opened}
           onClose={() => setOpened(false)}
           picture={question.content.variants[currentIndex]?.extendedText}
-                    onCropPress={url => {
+          onCropPress={(url) => {
-                        const content = produce(question.content, draft => {
+            const content = produce(question.content, (draft) => {
               draft.variants[currentIndex].extendedText = url;
             });
             updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
@@ -244,8 +244,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptions
-            <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
+      <SwitchAnswerOptionsPict
+        switchState={switchState}
+        totalIndex={totalIndex}
+      />
     </>
   );
 }

src/pages/Questions/QuestionsPage.tsx

@@ -44,11 +44,10 @@ export default function QuestionsPage() {
   };
 
   const theme = useTheme();
-    const isTablet = useMediaQuery(theme.breakpoints.up(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(660));
 
   return (
     <>
-      {/* <Stepper activeStep={activeStep} desc={"Задайте вопросы"} /> */}
       <Box
         sx={{
           maxWidth: "796px",
@@ -85,10 +84,15 @@ export default function QuestionsPage() {
           onClick={() => {
             createQuestion(quizId);
           }}
+          sx={{
+            position: "fixed",
+            left: isMobile ? "20px" : "250px",
+            bottom: "20px",
+          }}
         >
           <AddPlus />
         </IconButton>
-        <Box sx={{ display: "flex", gap: "8px" }}>
+        <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
           <Button
             variant="outlined"
             sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -27,7 +27,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
 
   const addNewAnswer = () => {
     const answerNew = question.content.variants.slice();
-    answerNew.push({ answer: "", hints: "", extendedText: "" });
+    answerNew.push({ answer: "", extendedText: "" });
 
     updateQuestionsList<QuizQuestionVariant>(quizId, totalIndex, {
       content: { ...question.content, variants: answerNew },
@@ -89,12 +89,22 @@ export default function AnswerOptions({ totalIndex }: Props) {
               >
                 или нажмите Enter
               </Typography>
-              <EnterIcon style={{ color: "#7E2AEA", fontSize: "24px", marginLeft: "6px" }} />
+              <EnterIcon
+                style={{
+                  color: "#7E2AEA",
+                  fontSize: "24px",
+                  marginLeft: "6px",
+                }}
+              />
             </>
           )}
         </Box>
       </Box>
-      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
+      <ButtonsOptionsAndPict
+        switchState={switchState}
+        SSHC={SSHC}
+        totalIndex={totalIndex}
+      />
       <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/stores/quizes.ts

@@ -126,7 +126,7 @@ export const quizStore = create<QuizStore>()(
                         "logo": "hub.pena.digital/img/logo",
                         "startpage": {
                             "description": "",// приветственный текст опроса
-                            "button": "Начать", // текст на кнопке начала опроса
+                            "button": "", // текст на кнопке начала опроса
                             "position": "ltr", // ltr или rtl. отображение элементов поверх фона
                             "background": {
                                 "type": "image", //image или video
@@ -137,11 +137,11 @@ export const quizStore = create<QuizStore>()(
                             },
                         },
                         "info": {
-                            "phonenumber": "+79885895677",
+                            "phonenumber": "",
                             "clickable": true,
-                            "orgname": "ООО \"Пена\"",
+                            "orgname": "",
-                            "site": "hub.pena.digital",
+                            "site": "",
-                            "law": "юридическая информация"
+                            "law": ""
                         },
                         "meta": "что-то"
                     }

src/ui_kit/QuizPreview/QuizPreview.tsx

@@ -1,16 +1,14 @@
-import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { Box, IconButton } from "@mui/material";
 import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
 import { useLayoutEffect, useRef } from "react";
 import { Rnd } from "react-rnd";
 import QuizPreviewLayout from "./QuizPreviewLayout";
 import ResizeIcon from "./ResizeIcon";
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
-
+const DRAG_PARENT_MARGIN = 0;
-const DRAG_PARENT_MARGIN = 25;
+const NAVBAR_HEIGHT = 0;
-const NAVBAR_HEIGHT = 81;
+const DRAG_PARENT_BOTTOM_MARGIN = 0;
-const DRAG_PARENT_BOTTOM_MARGIN = 65;
 
 interface RndPositionAndSize {
   x: number;
@@ -20,16 +18,28 @@ interface RndPositionAndSize {
 }
 
 export default function QuizPreview() {
-    const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
+  const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
   const rndParentRef = useRef<HTMLDivElement>(null);
   const rndRef = useRef<Rnd | null>(null);
-    const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ x: 0, y: 0, width: "340", height: "480" });
+  const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
+    x: 0,
+    y: 0,
+    width: "340",
+    height: "480",
+  });
   const isFirstShowRef = useRef<boolean>(true);
 
-    useLayoutEffect(function stickPreviewToBottomRight() {
+  useLayoutEffect(
+    function stickPreviewToBottomRight() {
       const rnd = rndRef.current;
       const rndSelfElement = rnd?.getSelfElement();
-        if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
+      if (
+        !rnd ||
+        !rndSelfElement ||
+        !rndParentRef.current ||
+        !isFirstShowRef.current
+      )
+        return;
 
       const rndParentRect = rndParentRef.current.getBoundingClientRect();
       const rndRect = rndSelfElement.getBoundingClientRect();
@@ -42,7 +52,9 @@ export default function QuizPreview() {
       rndPositionAndSizeRef.current.y = y;
 
       isFirstShowRef.current = false;
-    }, [isPreviewShown]);
+    },
+    [isPreviewShown]
+  );
 
   return (
     <Box
@@ -58,10 +70,10 @@ export default function QuizPreview() {
         zIndex: 100,
       }}
     >
-            {isPreviewShown &&
+      {isPreviewShown && (
         <Rnd
-                    minHeight={300}
+          minHeight={20}
-                    minWidth={340}
+          minWidth={20}
           bounds="parent"
           ref={rndRef}
           dragHandleClassName="quiz-preview-draghandle"
@@ -69,7 +81,7 @@ export default function QuizPreview() {
             x: rndPositionAndSizeRef.current.x,
             y: rndPositionAndSizeRef.current.y,
             width: rndPositionAndSizeRef.current.width,
-                        height: rndPositionAndSizeRef.current.height
+            height: rndPositionAndSizeRef.current.height,
           }}
           onResizeStop={(e, direction, ref, delta, position) => {
             rndPositionAndSizeRef.current.x = position.x;
@@ -88,32 +100,22 @@ export default function QuizPreview() {
             topLeft: isPreviewShown,
           }}
           resizeHandleComponent={{
-                        topLeft: <ResizeIcon />
+            topLeft: <ResizeIcon />,
           }}
           resizeHandleStyles={{
             topLeft: {
               top: "-1px",
               left: "-1px",
-                        }
+            },
           }}
           style={{
+            overflow: "hidden",
             pointerEvents: "auto",
           }}
         >
           <QuizPreviewLayout />
-                    <IconButton
-                        className="quiz-preview-draghandle"
-                        sx={{
-                            position: "absolute",
-                            bottom: -54,
-                            right: 46,
-                            cursor: "move",
-                        }}
-                    >
-                        <PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
-                    </IconButton>
         </Rnd>
-            }
+      )}
       <IconButton
         onClick={toggleQuizPreview}
         sx={{

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -1,6 +1,10 @@
 import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
 import { questionStore } from "@root/questions";
-import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
+import {
+  decrementCurrentQuestionIndex,
+  incrementCurrentQuestionIndex,
+  useQuizPreviewStore,
+} from "@root/quizPreview";
 import { DefiniteQuestionType } from "model/questionTypes/shared";
 import { FC, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -17,7 +21,6 @@ import Text from "./QuizPreviewQuestionTypes/Text";
 import Variant from "./QuizPreviewQuestionTypes/Variant";
 import Varimg from "./QuizPreviewQuestionTypes/Varimg";
 
-
 const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
   variant: Variant,
   images: Images,
@@ -34,66 +37,89 @@ const QuestionPreviewComponentByType: Record<DefiniteQuestionType, FC<any>> = {
 
 export default function QuizPreviewLayout() {
   const quizId = useParams().quizId ?? 0;
-    const listQuestions = questionStore(state => state.listQuestions);
+  const listQuestions = questionStore((state) => state.listQuestions);
-    const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex);
+  const currentQuizStep = useQuizPreviewStore(
+    (state) => state.currentQuestionIndex
+  );
 
   const quizQuestions = listQuestions[quizId] ?? [];
-    const nonDeletedQuizQuestions = quizQuestions.filter(question => !question.deleted);
+  const nonDeletedQuizQuestions = quizQuestions.filter(
-    const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
+    (question) => !question.deleted
-    const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
+  );
+  const maxCurrentQuizStep =
+    nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
+  const currentProgress = Math.floor(
+    (currentQuizStep / maxCurrentQuizStep) * 100
+  );
 
   const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
   const QuestionComponent = currentQuestion
-        ? QuestionPreviewComponentByType[currentQuestion.type as DefiniteQuestionType]
+    ? QuestionPreviewComponentByType[
+        currentQuestion.type as DefiniteQuestionType
+      ]
     : null;
 
-    const questionElement = QuestionComponent
+  const questionElement = QuestionComponent ? (
-        ? <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
+    <QuestionComponent key={currentQuestion.id} question={currentQuestion} />
-        : null;
+  ) : null;
 
-    useEffect(function resetCurrentQuizStep() {
+  useEffect(
+    function resetCurrentQuizStep() {
       if (currentQuizStep > maxCurrentQuizStep) {
         decrementCurrentQuestionIndex();
       }
-    }, [currentQuizStep, maxCurrentQuizStep]);
+    },
+    [currentQuizStep, maxCurrentQuizStep]
+  );
 
   return (
-        <Paper sx={{
+    <Paper
+      className="quiz-preview-draghandle"
+      sx={{
         height: "100%",
         display: "flex",
         flexDirection: "column",
         flexGrow: 1,
         borderRadius: "12px",
         pointerEvents: "auto",
-        }}>
+      }}
-            <Box sx={{
+    >
+      <Box
+        sx={{
           p: "16px",
           whiteSpace: "break-spaces",
           overflowY: "auto",
           flexGrow: 1,
-            }}>
+          "&::-webkit-scrollbar": { width: 0 },
+        }}
+      >
         {questionElement}
       </Box>
-            <Box sx={{
+      <Box
+        sx={{
           mt: "auto",
           p: "16px",
           display: "flex",
           borderTop: "1px solid #E3E3E3",
           alignItems: "center",
-            }}>
+        }}
-                <Box sx={{
+      >
+        <Box
+          sx={{
             flexGrow: 1,
             display: "flex",
             flexDirection: "column",
             gap: 1,
-                }}>
+          }}
+        >
           <Typography>
             {nonDeletedQuizQuestions.length > 0
-                            ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
+              ? `Вопрос ${currentQuizStep + 1} из ${
-                            : "Нет вопросов"
+                  nonDeletedQuizQuestions.length
-                        }
+                }`
+              : "Нет вопросов"}
           </Typography>
-                    {nonDeletedQuizQuestions.length > 0 &&
+          {nonDeletedQuizQuestions.length > 0 && (
             <LinearProgress
               variant="determinate"
               value={currentProgress}
@@ -106,13 +132,15 @@ export default function QuizPreviewLayout() {
                 },
               }}
             />
-                    }
+          )}
         </Box>
-                <Box sx={{
+        <Box
+          sx={{
             ml: 2,
             display: "flex",
             gap: 1,
-                }}>
+          }}
+        >
           <Button
             variant="outlined"
             onClick={decrementCurrentQuestionIndex}
@@ -125,7 +153,9 @@ export default function QuizPreviewLayout() {
             variant="contained"
             onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
             disabled={currentQuizStep >= maxCurrentQuizStep}
-                    >Далее</Button>
+          >
+            Далее
+          </Button>
         </Box>
       </Box>
     </Paper>

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx

@@ -1,9 +1,17 @@
 import InfoIcon from "@icons/InfoIcon";
-import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { QuizQuestionEmoji } from "model/questionTypes/emoji";
 import { useState, ChangeEvent } from "react";
 
-
 interface Props {
   question: QuizQuestionEmoji;
 }
@@ -24,14 +32,21 @@ export default function Emoji({ question }: Props) {
         onChange={handleChange}
       >
         {question.content.variants.map((variant, index) => (
-                    <FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
+          <FormControlLabel
+            key={index}
+            value={variant.answer}
+            control={<Radio />}
+            label={
               <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                 <Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
-                            <Tooltip title={variant.hints} placement="right">
+                <Tooltip title="Подсказка" placement="right">
-                                <Box><InfoIcon /></Box>
+                  <Box>
+                    <InfoIcon />
+                  </Box>
                 </Tooltip>
               </Box>
-                    } />
+            }
+          />
         ))}
       </RadioGroup>
     </FormControl>

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx

@@ -1,9 +1,15 @@
 import InfoIcon from "@icons/InfoIcon";
-import { Box, ButtonBase, Divider, Tooltip, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  ButtonBase,
+  Divider,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { QuizQuestionImages } from "model/questionTypes/images";
 import { useEffect, useState } from "react";
 
-
 interface Props {
   question: QuizQuestionImages;
 }
@@ -24,22 +30,29 @@ export default function Images({ question }: Props) {
     setSelectedVariants(newSelectedVariants);
   }
 
-    useEffect(function resetSelectedVariants() {
+  useEffect(
+    function resetSelectedVariants() {
       setSelectedVariants([]);
-    }, [question.content.multi]);
+    },
+    [question.content.multi]
+  );
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
         display: "flex",
         flexDirection: "column",
         gap: 1,
-        }}>
+      }}
+    >
       <Typography variant="h6">{question.title}</Typography>
-            <Box sx={{
+      <Box
+        sx={{
           display: "grid",
           gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
           gap: 1,
-            }}>
+        }}
+      >
         {question.content.variants.map((variant, index) => (
           <ButtonBase
             key={index}
@@ -50,10 +63,12 @@ export default function Images({ question }: Props) {
               borderRadius: "8px",
               overflow: "hidden",
               border: "1px solid",
-                            borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
+              borderColor: selectedVariants.includes(index)
+                ? theme.palette.brightPurple.main
+                : "#E3E3E3",
             }}
           >
-                        {variant.extendedText ?
+            {variant.extendedText ? (
               <img
                 src={variant.extendedText}
                 alt="question variant"
@@ -64,19 +79,21 @@ export default function Images({ question }: Props) {
                   flexGrow: 1,
                 }}
               />
-                            :
+            ) : (
               <Typography p={2}>Картинка отсутствует</Typography>
-                        }
+            )}
             <Divider sx={{ width: "100%" }} />
-                        <Box sx={{
+            <Box
+              sx={{
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "space-between",
                 gap: 2,
                 p: 1,
-                        }}>
+              }}
+            >
               <Typography>{variant.answer}</Typography>
-                            <Tooltip title={variant.hints} placement="right">
+              <Tooltip title="Подсказка" placement="right">
                 <Box>
                   <InfoIcon />
                 </Box>

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx

@@ -1,9 +1,17 @@
 import InfoIcon from "@icons/InfoIcon";
-import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { QuizQuestionVariant } from "model/questionTypes/variant";
 import { ChangeEvent, useState } from "react";
 
-
 interface Props {
   question: QuizQuestionVariant;
 }
@@ -24,16 +32,21 @@ export default function Variant({ question }: Props) {
         onChange={handleChange}
       >
         {question.content.variants.map((variant, index) => (
-                    <FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
+          <FormControlLabel
+            key={index}
+            value={variant.answer}
+            control={<Radio />}
+            label={
               <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                 <Typography>{variant.answer}</Typography>
-                            <Tooltip title={variant.hints} placement="right">
+                <Tooltip title="Подсказка" placement="right">
                   <Box>
                     <InfoIcon />
                   </Box>
                 </Tooltip>
               </Box>
-                    } />
+            }
+          />
         ))}
       </RadioGroup>
     </FormControl>

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx

@@ -1,10 +1,18 @@
 import InfoIcon from "@icons/InfoIcon";
-import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { QuestionVariant } from "model/questionTypes/shared";
 import { QuizQuestionVarImg } from "model/questionTypes/varimg";
 import { useState, ChangeEvent } from "react";
 
-
 interface Props {
   question: QuizQuestionVarImg;
 }
@@ -13,19 +21,24 @@ export default function Varimg({ question }: Props) {
   const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-        setSelectedVariantIndex(question.content.variants.findIndex(
+    setSelectedVariantIndex(
-            variant => variant.answer === event.target.value
+      question.content.variants.findIndex(
-        ));
+        (variant) => variant.answer === event.target.value
+      )
+    );
   };
 
-    const currentVariant: QuestionVariant | undefined = question.content.variants[selectedVariantIndex];
+  const currentVariant: QuestionVariant | undefined =
+    question.content.variants[selectedVariantIndex];
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
         display: "flex",
         flexWrap: "wrap",
         gap: 2,
-        }}>
+      }}
+    >
       <FormControl>
         <FormLabel id="quiz-question-radio-group">{question.title}</FormLabel>
         <RadioGroup
@@ -41,7 +54,7 @@ export default function Varimg({ question }: Props) {
               label={
                 <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                   <Typography>{variant.answer}</Typography>
-                                    <Tooltip title={variant.hints} placement="right">
+                  <Tooltip title="Подсказка" placement="right">
                     <Box>
                       <InfoIcon />
                     </Box>
@@ -52,15 +65,17 @@ export default function Varimg({ question }: Props) {
           ))}
         </RadioGroup>
       </FormControl>
-            <Box sx={{
+      <Box
+        sx={{
           border: "1px solid #E3E3E3",
           maxWidth: "400px",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
           borderRadius: "8px",
-            }}>
+        }}
-                {currentVariant?.extendedText ?
+      >
+        {currentVariant?.extendedText ? (
           <img
             src={currentVariant.extendedText}
             alt="question variant"
@@ -71,9 +86,13 @@ export default function Varimg({ question }: Props) {
               flexGrow: 1,
             }}
           />
-                    :
+        ) : (
-                    <Typography p={2}>{selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"}</Typography>
+          <Typography p={2}>
-                }
+            {selectedVariantIndex === -1
+              ? "Выберите вариант"
+              : "Картинка отсутствует"}
+          </Typography>
+        )}
       </Box>
     </Box>
   );