added options to question settings

2024-05-29 20:41:41 +04:00 · 2024-05-29 20:41:41 +04:00 · b3444ba020
commit b3444ba020
parent dfc5d648f9
13 changed files with 509 additions and 146 deletions
--- a/src/model/questionTypes/text.ts
+++ b/src/model/questionTypes/text.ts
@ -1,4 +1,4 @@
-import type { QuizQuestionBase, QuestionHint, PreviewRule } from "./shared";
+import type { PreviewRule, QuestionHint, QuizQuestionBase } from "./shared";

 export interface QuizQuestionText extends QuizQuestionBase {
  type: "text";
@ -13,7 +13,7 @@ export interface QuizQuestionText extends QuizQuestionBase {
    required: boolean;
    /** Чекбокс "Автозаполнение адреса" */
    autofill: boolean;
-    answerType: "single" | "multi";
+    answerType: "single" | "multi" | "numberOnly";
    hint: QuestionHint;
    rule: PreviewRule;
    back: string;
--- a/src/pages/Questions/DataOptions/settingData.tsx
+++ b/src/pages/Questions/DataOptions/settingData.tsx
@ -4,13 +4,17 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import type { QuizQuestionDate } from "../../../model/questionTypes/date";

 type SettingsDataProps = {
-  question: QuizQuestionDate;
+  questionId: string;
+  isRequired: boolean;
+  isDateRange: boolean;
+  isTime: boolean;
 };

-export default function SettingsData({ question }: SettingsDataProps) {
+export default function SettingsData({ questionId, isRequired, isDateRange, isTime }: SettingsDataProps) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const isTablet = useMediaQuery(theme.breakpoints.down(900));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

  return (
@ -18,19 +22,66 @@ export default function SettingsData({ question }: SettingsDataProps) {
      sx={{
        display: "flex",
        justifyContent: "space-between",
-        flexDirection: isWrappColumn ? "column" : null,
+        flexDirection: isTablet ? "column" : "row",
+        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
+        pb: "20px",
+        pl: "20px",
+        pt: isTablet ? "5px" : "0px",
      }}
    >
      <Box
        sx={{
+          boxSizing: "border-box",
          pt: "20px",
-          pb: "20px",
-          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
-          width: isMobile ? "auto" : "100%",
+          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
+          Настройки ответов
+        </Typography>
+        <CustomCheckbox
+          dataCy="checkbox-dateRange"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={"Выбор диапазона дат"}
+          checked={isDateRange}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionDate>(questionId, (question) => {
+              question.content.dateRange = target.checked;
+            });
+          }}
+        />
+        <CustomCheckbox
+          dataCy="checkbox-time"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={"Выбор времени"}
+          checked={isTime}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionDate>(questionId, (question) => {
+              question.content.time = target.checked;
+            });
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          boxSizing: "border-box",
+          pt: "20px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
        }}
      >
        <Typography
@ -47,9 +98,9 @@ export default function SettingsData({ question }: SettingsDataProps) {
          dataCy="checkbox-optional-question"
          sx={{ mr: isMobile ? "0px" : "16px" }}
          label={"Необязательный вопрос"}
-          checked={!question.content.required}
+          checked={!isRequired}
          handleChange={({ target }) => {
-            updateQuestion<QuizQuestionDate>(question.id, (question) => {
+            updateQuestion<QuizQuestionDate>(questionId, (question) => {
              question.content.required = !target.checked;
            });
          }}
--- a/src/pages/Questions/DataOptions/switchData.tsx
+++ b/src/pages/Questions/DataOptions/switchData.tsx
@ -7,13 +7,17 @@ interface Props {
  question: QuizQuestionDate;
 }

-export default function SwitchData({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchData({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
-      return <SettingData question={question} />;
+      return (
+        <SettingData
+          questionId={question.id}
+          isRequired={question.content.required}
+          isDateRange={question.content.dateRange}
+          isTime={question.content.time}
+        />
+      );
    case "help":
      return (
        <HelpQuestions
--- a/src/pages/Questions/Emoji/settingEmoji.tsx
+++ b/src/pages/Questions/Emoji/settingEmoji.tsx
@ -3,19 +3,20 @@ import { updateQuestion } from "@root/questions/actions";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
 import { memo } from "react";
+import type { QuizQuestionVariant } from "@model/questionTypes/variant";

 type SettingEmojiProps = {
  questionId: string;
  isRequired: boolean;
+  isMulti: boolean;
+  isOwn: boolean;
 };

-const SettingEmoji = memo<SettingEmojiProps>(function ({
-  questionId,
-  isRequired,
-}) {
+const SettingEmoji = memo<SettingEmojiProps>(function ({ questionId, isRequired, isMulti, isOwn }) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
+  const isTablet = useMediaQuery(theme.breakpoints.down(985));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
@ -24,13 +25,58 @@ const SettingEmoji = memo<SettingEmojiProps>(function ({
        display: "flex",
        justifyContent: "space-between",
        flexDirection: isWrappColumn ? "column" : "none",
+        pb: "20px",
+        pl: "20px",
+        pt: isTablet ? "5px" : "0px",
      }}
    >
+      <Box
+        sx={{
+          boxSizing: "border-box",
+          pt: "20px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
+          Настройки ответов
+        </Typography>
+        <CustomCheckbox
+          dataCy="checkbox-multiple-answers"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={"Можно несколько"}
+          checked={isMulti}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+              question.content.multi = target.checked;
+            });
+          }}
+        />
+        <CustomCheckbox
+          dataCy="checkbox-own-answer"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={'Вариант "свой ответ"'}
+          checked={isOwn}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+              question.content.own = target.checked;
+            });
+          }}
+        />
+      </Box>
      <Box
        sx={{
          pt: "20px",
-          pb: "20px",
-          pl: "20px",
          pr: isFigmaTablte ? "30px" : "20px",
          display: "flex",
          flexDirection: "column",
--- a/src/pages/Questions/Emoji/switchEmoji.tsx
+++ b/src/pages/Questions/Emoji/switchEmoji.tsx
@ -7,16 +7,15 @@ interface Props {
  question: QuizQuestionEmoji;
 }

-export default function SwitchEmoji({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchEmoji({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
      return (
        <SettingEmoji
          questionId={question.id}
          isRequired={question.content.required}
+          isOwn={question.content.own}
+          isMulti={question.content.multi}
        />
      );
    case "help":
--- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
+++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx
@ -4,21 +4,20 @@ import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 import { memo } from "react";
+import type { QuizQuestionVariant } from "@model/questionTypes/variant";

 type SettingOptionsAndPictProps = {
  questionId: string;
  replText: string;
  isRequired: boolean;
+  isOwn: boolean;
 };

-const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
-  questionId,
-  replText,
-  isRequired,
-}) {
+const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({ questionId, replText, isRequired, isOwn }) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
+  const isTablet = useMediaQuery(theme.breakpoints.down(985));
  const isMobile = useMediaQuery(theme.breakpoints.down(680));

  const setReplText = (replText: string) => {
@ -36,13 +35,14 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
          display: "flex",
          justifyContent: "space-between",
          flexDirection: isWrappColumn ? "column" : "none",
+          pb: "20px",
+          pl: "20px",
+          pt: isTablet ? "5px" : "0px",
        }}
      >
        <Box
          sx={{
-            pt: isMobile ? "30px" : "20px",
-            pb: isMobile ? "25px" : "20px",
-            pl: "20px",
+            pt: "20px",
            display: "flex",
            flexDirection: "column",
            gap: "14px",
@ -60,6 +60,17 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
          >
            Настройки ответов
          </Typography>
+          <CustomCheckbox
+            dataCy="checkbox-own-answer"
+            sx={{ mr: isMobile ? "0px" : "16px" }}
+            label={'Вариант "свой ответ"'}
+            checked={isOwn}
+            handleChange={({ target }) => {
+              updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+                question.content.own = target.checked;
+              });
+            }}
+          />
          {!isWrappColumn && (
            <Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
              <Typography
@ -90,8 +101,6 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
        <Box
          sx={{
            pt: isMobile ? "0px" : "20px",
-            pb: "20px",
-            pl: isFigmaTablte ? (isWrappColumn ? "20px" : "31px") : "20px",
            pr: isFigmaTablte ? "19px" : "20px",
            display: "flex",
            flexDirection: "column",
@ -123,7 +132,16 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
            }
          />
          {isWrappColumn && (
-            <>
+            <Box
+              sx={{
+                pt: "20px",
+                display: "flex",
+                flexDirection: "column",
+                gap: "14px",
+                maxWidth: isFigmaTablte ? "297px" : "360px",
+                width: "100%",
+              }}
+            >
              <Typography
                sx={{
                  height: isMobile ? "18px" : "auto",
@ -141,7 +159,7 @@ const SettingOptionsAndPict = memo<SettingOptionsAndPictProps>(function ({
                maxLength={60}
                onChange={({ target }) => setReplText(target.value)}
              />
-            </>
+            </Box>
          )}
        </Box>
      </Box>
--- a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx
+++ b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx
@ -8,10 +8,7 @@ interface Props {
  question: QuizQuestionVarImg;
 }

-export default function SwitchOptionsAndPict({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchOptionsAndPict({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
      return (
@ -19,6 +16,7 @@ export default function SwitchOptionsAndPict({
          questionId={question.id}
          replText={question.content.replText}
          isRequired={question.content.required}
+          isOwn={question.content.own}
        />
      );
    case "help":
@ -30,12 +28,7 @@ export default function SwitchOptionsAndPict({
        />
      );
    case "image":
-      return (
-        <UploadImage
-          question={question}
-          cropAspectRatio={{ width: 380, height: 300 }}
-        />
-      );
+      return <UploadImage question={question} cropAspectRatio={{ width: 380, height: 300 }} />;
    default:
      return null;
  }
--- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx
@ -1,10 +1,4 @@
-import {
-  Box,
-  Button,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { updateQuestion } from "@root/questions/actions";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
@ -12,6 +6,9 @@ import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIc
 import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
 import type { QuizQuestionImages } from "../../../model/questionTypes/images";
 import { memo } from "react";
+import type { QuizQuestionVariant } from "@model/questionTypes/variant";
+import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
+import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";

 type Proportion = "1:1" | "2:1" | "1:2";

@ -26,14 +23,34 @@ const PROPORTIONS: ProportionItem[] = [
  { value: "1:2", icon: ProportionsIcon12 },
 ];

+type Format = "carousel" | "masonry";
+
+type FormatItem = {
+  value: Format;
+  icon: (props: { color: string }) => JSX.Element;
+};
+
+const FORMATS: FormatItem[] = [
+  { value: "masonry", icon: FormatIcon2 },
+  { value: "carousel", icon: FormatIcon1 },
+];
+
 type SettingOpytionsPictProps = {
  questionId: string;
  isRequired: boolean;
+  isMulti: boolean;
+  isOwn: boolean;
+  proportions: Proportion;
+  format: Format;
 };

 const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
  questionId,
  isRequired,
+  isMulti,
+  isOwn,
+  proportions,
+  format,
 }) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(985));
@ -47,38 +64,167 @@ const SettingOptionsPict = memo<SettingOpytionsPictProps>(function ({
        justifyContent: "space-between",
        flexDirection: isTablet ? "column" : null,
        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
+        pb: "20px",
+        pl: "20px",
+        pt: isTablet ? "5px" : "0px",
      }}
    >
-      <Box
-        sx={{
-          pt: isMobile ? "25px" : "20px",
-          pb: isMobile ? "25px" : "20px",
-          pl: "20px",
-          pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "14px",
-          width: "100%",
-        }}
-      >
-        <Typography
-          sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+      <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+        <Box
+          sx={{
+            boxSizing: "border-box",
+            pt: "20px",
+            pr: isFigmaTablte ? "19px" : "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            width: "100%",
+          }}
        >
-          Настройки вопросов
-        </Typography>
-        <CustomCheckbox
-          dataCy="checkbox-optional-question"
-          sx={{ alignItems: isMobile ? "flex-start" : "" }}
-          label={"Необязательный вопрос"}
-          checked={!isRequired}
-          handleChange={({ target }) =>
-            updateQuestion<QuizQuestionImages>(questionId, (question) => {
-              if (question.type !== "images") return;
+          <Typography
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
+          >
+            Пропорции
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+            }}
+          >
+            {PROPORTIONS.map((proportionItem, index) => (
+              <SelectIconButton
+                key={index}
+                Icon={proportionItem.icon}
+                isActive={proportionItem.value === proportions}
+                onClick={() => {
+                  updateQuestion<QuizQuestionImages>(questionId, (question) => {
+                    if (question.type !== "images") return;
+                    question.content.xy = proportionItem.value;
+                  });
+                }}
+              />
+            ))}
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            boxSizing: "border-box",
+            pt: "20px",
+            pr: isFigmaTablte ? "19px" : "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            width: "100%",
+          }}
+        >
+          <Typography
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
+          >
+            Настройки ответов
+          </Typography>
+          <CustomCheckbox
+            dataCy="checkbox-multiple-answers"
+            sx={{ mr: isMobile ? "0px" : "16px" }}
+            label={"Можно несколько"}
+            checked={isMulti}
+            handleChange={({ target }) => {
+              updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+                question.content.multi = target.checked;
+              });
+            }}
+          />
+          <CustomCheckbox
+            dataCy="checkbox-own-answer"
+            sx={{ mr: isMobile ? "0px" : "16px" }}
+            label={'Вариант "свой ответ"'}
+            checked={isOwn}
+            handleChange={({ target }) => {
+              updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+                question.content.own = target.checked;
+              });
+            }}
+          />
+        </Box>
+      </Box>
+      <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+        <Box
+          sx={{
+            boxSizing: "border-box",
+            pt: "20px",
+            pr: isFigmaTablte ? "19px" : "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            width: "100%",
+          }}
+        >
+          <Typography
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
+          >
+            Формат
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              gap: "10px",
+            }}
+          >
+            {FORMATS.map((formatItem, index) => (
+              <SelectIconButton
+                key={index}
+                Icon={formatItem.icon}
+                isActive={formatItem.value === format}
+                onClick={() => {
+                  updateQuestion<QuizQuestionImages>(questionId, (question) => {
+                    if (question.type !== "images") return;
+                    question.content.format = formatItem.value;
+                  });
+                }}
+              />
+            ))}
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            pt: "20px",
+            pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            width: "100%",
+          }}
+        >
+          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
+          <CustomCheckbox
+            dataCy="checkbox-optional-question"
+            sx={{ alignItems: isMobile ? "flex-start" : "" }}
+            label={"Необязательный вопрос"}
+            checked={!isRequired}
+            handleChange={({ target }) =>
+              updateQuestion<QuizQuestionImages>(questionId, (question) => {
+                if (question.type !== "images") return;

-              question.content.required = !target.checked;
-            })
-          }
-        />
+                question.content.required = !target.checked;
+              })
+            }
+          />
+        </Box>
      </Box>
    </Box>
  );
@ -101,23 +247,13 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
    <Button
      onClick={onClick}
      variant="outlined"
-      startIcon={
-        <Icon
-          color={
-            isActive
-              ? theme.palette.navbarbg.main
-              : theme.palette.brightPurple.main
-          }
-        />
-      }
+      startIcon={<Icon color={isActive ? theme.palette.navbarbg.main : theme.palette.brightPurple.main} />}
      sx={{
        backgroundColor: isActive ? theme.palette.brightPurple.main : "#eee4fc",

        borderRadius: 0,
        border: "none",
-        color: isActive
-          ? theme.palette.brightPurple.main
-          : theme.palette.grey2.main,
+        color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
        p: "7px",
        width: "40px",
        height: "40px",
@ -128,9 +264,7 @@ export function SelectIconButton({ Icon, isActive = false, onClick }: Props) {
        },
        "&:hover": {
          border: "none",
-          borderColor: isActive
-            ? theme.palette.brightPurple.main
-            : theme.palette.grey2.main,
+          borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
        },
      }}
    />
--- a/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
+++ b/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx
@ -7,16 +7,17 @@ interface Props {
  question: QuizQuestionImages;
 }

-export default function SwitchAnswerOptionsPict({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchAnswerOptionsPict({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
      return (
        <SettingOpytionsPict
          questionId={question.id}
          isRequired={question.content.required}
+          isMulti={question.content.multi}
+          isOwn={question.content.own}
+          proportions={question.content.xy}
+          format={question.content.format}
        />
      );
    case "help":
--- a/src/pages/Questions/OwnTextField/settingTextField.tsx
+++ b/src/pages/Questions/OwnTextField/settingTextField.tsx
@ -1,31 +1,36 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Box, FormControlLabel, Radio, RadioGroup, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { updateQuestion } from "@root/questions/actions";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import type { QuizQuestionText } from "../../../model/questionTypes/text";
 import { memo } from "react";
+import RadioCheck from "@ui_kit/RadioCheck";
+import RadioIcon from "@ui_kit/RadioIcon";
+
+type Answer = "single" | "multi" | "numberOnly";
+
+type AnswerItem = {
+  name: string;
+  value: Answer;
+};
+
+const ANSWER_TYPES: AnswerItem[] = [
+  { name: "Однострочное", value: "single" },
+  { name: "Многострочное", value: "multi" },
+  { name: "Только числа", value: "numberOnly" },
+];

 type SettingTextFieldProps = {
  questionId: string;
  isRequired: boolean;
+  isAutofill: boolean;
+  answerType: Answer;
 };

-type Answer = {
-  name: string;
-  value: "single" | "multi";
-};
-
-const ANSWER_TYPES: Answer[] = [
-  { name: "Однострочное", value: "single" },
-  { name: "Многострочное", value: "multi" },
-];
-
-const SettingTextField = memo<SettingTextFieldProps>(function ({
-  questionId,
-  isRequired,
-}) {
+const SettingTextField = memo<SettingTextFieldProps>(function ({ questionId, isRequired, isAutofill, answerType }) {
  const theme = useTheme();
  const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const isTablet = useMediaQuery(theme.breakpoints.down(900));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));

  return (
@ -33,19 +38,67 @@ const SettingTextField = memo<SettingTextFieldProps>(function ({
      sx={{
        display: "flex",
        justifyContent: "space-between",
-        flexDirection: isWrappColumn ? "column" : null,
-        marginRight: isFigmaTablte ? "0px" : "32px",
+        flexDirection: isTablet ? "column" : "row",
+        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
+        pb: "20px",
+        pl: "20px",
+        pt: isTablet ? "5px" : "0px",
      }}
    >
      <Box
        sx={{
+          boxSizing: "border-box",
          pt: "20px",
-          pb: "20px",
-          pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
-          pr: "20px",
+          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
+          Настройки ответов
+        </Typography>
+        <RadioGroup
+          value={answerType}
+          onChange={(event) => {
+            updateQuestion<QuizQuestionText>(questionId, (question) => {
+              question.content.answerType = event.target.value as Answer;
+            });
+          }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {ANSWER_TYPES.map((answerTypeItem, index) => (
+            <FormControlLabel
+              value={answerTypeItem.value}
+              control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+              label={answerTypeItem.name}
+              sx={{
+                color: theme.palette.grey2.main,
+              }}
+            />
+          ))}
+        </RadioGroup>
+      </Box>
+      <Box
+        sx={{
+          boxSizing: "border-box",
+          pt: "20px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
        }}
      >
        <Typography
@ -58,6 +111,21 @@ const SettingTextField = memo<SettingTextFieldProps>(function ({
        >
          Настройки вопросов
        </Typography>
+        <CustomCheckbox
+          dataCy="checkbox-optional-autofill"
+          sx={{
+            display: isMobile ? "flex" : "block",
+            mr: isMobile ? "0px" : "16px",
+            alignItems: isMobile ? "flex-end" : "center",
+          }}
+          label={"Автозаполнение адреса"}
+          checked={isAutofill}
+          handleChange={(e) => {
+            updateQuestion<QuizQuestionText>(questionId, (question) => {
+              question.content.autofill = e.target.checked;
+            });
+          }}
+        />
        <CustomCheckbox
          dataCy="checkbox-optional-question"
          sx={{
--- a/src/pages/Questions/OwnTextField/switchTextField.tsx
+++ b/src/pages/Questions/OwnTextField/switchTextField.tsx
@ -8,25 +8,20 @@ interface Props {
  question: QuizQuestionText;
 }

-export default function SwitchTextField({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchTextField({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
      return (
        <SettingTextField
          questionId={question.id}
          isRequired={question.content.required}
+          isAutofill={question.content.autofill}
+          isOnlyNumbers={question.content.onlyNumbers}
+          answerType={question.content.answerType}
        />
      );
    case "image":
-      return (
-        <UploadImage
-          question={question}
-          cropAspectRatio={{ width: 400, height: 300 }}
-        />
-      );
+      return <UploadImage question={question} cropAspectRatio={{ width: 400, height: 300 }} />;
    case "help":
      return (
        <HelpQuestions
--- a/src/pages/Questions/answerOptions/responseSettings.tsx
+++ b/src/pages/Questions/answerOptions/responseSettings.tsx
@ -7,9 +7,12 @@ import { memo } from "react";
 interface Props {
  questionId: string;
  isRequired: boolean;
+  isLargeCheck: boolean;
+  isMulti: boolean;
+  isOwn: boolean;
 }

-const ResponseSettings = memo<Props>(function ({ questionId, isRequired }) {
+const ResponseSettings = memo<Props>(function ({ questionId, isRequired, isLargeCheck, isMulti, isOwn }) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(900));
  const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
@ -20,16 +23,72 @@ const ResponseSettings = memo<Props>(function ({ questionId, isRequired }) {
      sx={{
        display: "flex",
        justifyContent: "space-between",
-        flexDirection: isTablet ? "column" : "none",
+        flexDirection: isTablet ? "column" : "row",
        marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
+        pb: "20px",
+        pl: "20px",
+        pt: isTablet ? "5px" : "0px",
      }}
    >
      <Box
        sx={{
          boxSizing: "border-box",
          pt: "20px",
-          pb: "20px",
-          pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
+          pr: isFigmaTablte ? "19px" : "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "14px",
+          width: "100%",
+        }}
+      >
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
+          Настройки ответов
+        </Typography>
+        <CustomCheckbox
+          dataCy="checkbox-long-text-answer"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={"Длинный текстовый ответ"}
+          checked={isLargeCheck}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+              question.content.largeCheck = target.checked;
+            });
+          }}
+        />
+        <CustomCheckbox
+          dataCy="checkbox-multiple-answers"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={"Можно несколько"}
+          checked={isMulti}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+              question.content.multi = target.checked;
+            });
+          }}
+        />
+        <CustomCheckbox
+          dataCy="checkbox-own-answer"
+          sx={{ mr: isMobile ? "0px" : "16px" }}
+          label={'Вариант "свой ответ"'}
+          checked={isOwn}
+          handleChange={({ target }) => {
+            updateQuestion<QuizQuestionVariant>(questionId, (question) => {
+              question.content.own = target.checked;
+            });
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          boxSizing: "border-box",
+          pt: "20px",
          pr: isFigmaTablte ? "19px" : "20px",
          display: "flex",
          flexDirection: "column",
--- a/src/pages/Questions/answerOptions/switchAnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/switchAnswerOptions.tsx
@ -8,16 +8,16 @@ interface Props {
  question: QuizQuestionVariant;
 }

-export default function SwitchAnswerOptions({
-  switchState = "setting",
-  question,
-}: Props) {
+export default function SwitchAnswerOptions({ switchState = "setting", question }: Props) {
  switch (switchState) {
    case "setting":
      return (
        <ResponseSettings
          questionId={question.id}
          isRequired={question.content.required}
+          isLargeCheck={question.content.largeCheck}
+          isMulti={question.content.multi}
+          isOwn={question.content.own}
        />
      );
    case "help":
@ -29,12 +29,7 @@ export default function SwitchAnswerOptions({
        />
      );
    case "image":
-      return (
-        <UploadImage
-          question={question}
-          cropAspectRatio={{ width: 380, height: 300 }}
-        />
-      );
+      return <UploadImage question={question} cropAspectRatio={{ width: 380, height: 300 }} />;
    default:
      return null;
  }