diff --git a/package.json b/package.json
index a0bb8ce6..9aa51b0c 100755
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
+ "@mui/x-date-pickers": "^6.16.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
@@ -17,6 +18,7 @@
"@types/react": "^18.0.0",
"@types/react-dnd": "^3.0.2",
"@types/react-dom": "^18.0.0",
+ "dayjs": "^1.11.10",
"emoji-mart": "^5.5.2",
"file-saver": "^2.0.5",
"html-to-image": "^1.11.11",
diff --git a/src/assets/icons/CalendarIcon.tsx b/src/assets/icons/CalendarIcon.tsx
new file mode 100644
index 00000000..a3c91293
--- /dev/null
+++ b/src/assets/icons/CalendarIcon.tsx
@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+
+export default function CalendarIcon() {
+ return (
+
+
+
+ );
+}
diff --git a/src/index.tsx b/src/index.tsx
index eb2ac964..4f7ccc9c 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,6 @@ import "./index.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from "@mui/material";
-
import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main";
import QuestionsPage from "./pages/Questions/QuestionsPage";
@@ -16,40 +15,52 @@ import { Result } from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import ImageCrop from "@ui_kit/Modal/ImageCrop";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import "dayjs/locale/ru";
+import dayjs from "dayjs";
+import { ruRU } from '@mui/x-date-pickers/locales';
+
+
+dayjs.locale("ru");
+
+const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
const routeslink: {
- path: string;
- page: JSX.Element;
- header: boolean;
- sidebar: boolean;
+ path: string;
+ page: JSX.Element;
+ header: boolean;
+ sidebar: boolean;
}[] = [
- { path: "/", page: , header: false, sidebar: false },
- {
- path: "/questions/:quizId",
- page: ,
- header: true,
- sidebar: true,
- },
- { path: "/contacts", page: , header: true, sidebar: true },
- { path: "/result", page: , header: true, sidebar: true },
- { path: "/settings", page: , header: true, sidebar: true },
- { path: "/install", page: , header: true, sidebar: true },
-];
+ { path: "/", page: , header: false, sidebar: false },
+ {
+ path: "/questions/:quizId",
+ page: ,
+ header: true,
+ sidebar: true,
+ },
+ { path: "/contacts", page: , header: true, sidebar: true },
+ { path: "/result", page: , header: true, sidebar: true },
+ { path: "/settings", page: , header: true, sidebar: true },
+ { path: "/install", page: , header: true, sidebar: true },
+ ];
const root = createRoot(document.getElementById("root")!);
root.render(
-
-
-
-
- {routeslink.map((e, i) => (
- } />
- ))}
- } />
- } />
-
-
-
-
+
+
+
+
+
+ {routeslink.map((e, i) => (
+ } />
+ ))}
+ } />
+ } />
+
+
+
+
+
);
diff --git a/src/stores/quizPreview.ts b/src/stores/quizPreview.ts
index 9a0eaf40..9b0d6e6a 100644
--- a/src/stores/quizPreview.ts
+++ b/src/stores/quizPreview.ts
@@ -4,14 +4,14 @@ import { devtools } from "zustand/middleware";
interface QuizPreviewStore {
isPreviewShown: boolean;
- currentQuizStep: number;
+ currentQuestionIndex: number;
}
export const useQuizPreviewStore = create()(
devtools(
(set, get) => ({
isPreviewShown: true,
- currentQuizStep: 0,
+ currentQuestionIndex: 0,
}),
{
name: "quizPreview",
@@ -28,10 +28,10 @@ export const toggleQuizPreview = () => useQuizPreviewStore.setState(
state => ({ isPreviewShown: !state.isPreviewShown })
);
-export const incrementCurrentQuizStep = (maxStep: number) => useQuizPreviewStore.setState(
- state => ({ currentQuizStep: Math.min(state.currentQuizStep + 1, maxStep) })
+export const incrementCurrentQuestionIndex = (maxStep: number) => useQuizPreviewStore.setState(
+ state => ({ currentQuestionIndex: Math.min(state.currentQuestionIndex + 1, maxStep) })
);
-export const decrementCurrentQuizStep = () => useQuizPreviewStore.setState(
- state => ({ currentQuizStep: Math.max(state.currentQuizStep - 1, 0) })
+export const decrementCurrentQuestionIndex = () => useQuizPreviewStore.setState(
+ state => ({ currentQuestionIndex: Math.max(state.currentQuestionIndex - 1, 0) })
);
diff --git a/src/ui_kit/CustomSlider.tsx b/src/ui_kit/CustomSlider.tsx
new file mode 100644
index 00000000..be6b7ec0
--- /dev/null
+++ b/src/ui_kit/CustomSlider.tsx
@@ -0,0 +1,61 @@
+import { Slider } from "@mui/material";
+
+type CustomSliderProps = {
+ defaultValue?: number;
+ value?: number;
+ min?: number;
+ max?: number;
+ step?: number;
+ onChange?: (value: number | number[]) => void;
+};
+
+export const CustomSlider = ({
+ defaultValue,
+ value,
+ min = 0,
+ max = 100,
+ step,
+ onChange,
+}: CustomSliderProps) => {
+ const handleChange = ({ type }: Event, newValue: number | number[]) => {
+ // Для корректной работы слайдера в FireFox
+ if (type !== "change") {
+ onChange?.(newValue);
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/ui_kit/LabeledDatePicker.tsx b/src/ui_kit/LabeledDatePicker.tsx
new file mode 100644
index 00000000..3d94fc33
--- /dev/null
+++ b/src/ui_kit/LabeledDatePicker.tsx
@@ -0,0 +1,68 @@
+import CalendarIcon from "@icons/CalendarIcon";
+import { Typography, Box, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import { Dayjs } from "dayjs";
+
+
+interface Props {
+ label?: string;
+ sx?: SxProps;
+ value?: Dayjs | null;
+ onChange?: (value: Dayjs | null) => void;
+}
+
+export default function LabeledDatePicker({ label, value, onChange, sx }: Props) {
+ const theme = useTheme();
+ const upLg = useMediaQuery(theme.breakpoints.up("md"));
+
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+ ,
+ }}
+ slotProps={{
+ openPickerButton: {
+ sx: {
+ p: 0,
+ },
+ },
+ }}
+ sx={{
+ "& .MuiInputBase-root": {
+ backgroundColor: "#F2F3F7",
+ borderRadius: "10px",
+ pr: "22px",
+ "& input": {
+ py: "11px",
+ pl: upLg ? "20px" : "13px",
+ lineHeight: "19px",
+ },
+ "& fieldset": {
+ borderColor: "#9A9AAF",
+ },
+ },
+ }}
+ />
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx
index 7627ceea..3e7e4f7b 100644
--- a/src/ui_kit/QuizPreview/QuizPreview.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreview.tsx
@@ -3,7 +3,7 @@ import { Box, IconButton } from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react";
import { Rnd } from "react-rnd";
-import QuizPreviewContent from "./QuizPreviewContent";
+import QuizPreviewLayout from "./QuizPreviewLayout";
import ResizeIcon from "./ResizeIcon";
import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -23,7 +23,7 @@ export default function QuizPreview() {
const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
const rndParentRef = useRef(null);
const rndRef = useRef(null);
- const rndPositionAndSizeRef = useRef({ x: 0, y: 0, width: "0", height: "0" });
+ const rndPositionAndSizeRef = useRef({ x: 0, y: 0, width: "340", height: "480" });
const isFirstShowRef = useRef(true);
useLayoutEffect(function stickPreviewToBottomRight() {
@@ -60,8 +60,8 @@ export default function QuizPreview() {
>
{isPreviewShown &&
-
+
state.listQuestions);
- const currentQuizStep = useQuizPreviewStore(state => state.currentQuizStep);
-
- const quizQuestions: Question[] | undefined = listQuestions[quizId];
- const currentProgress = Math.floor((currentQuizStep / quizQuestions.length) * 100);
- const currentQuestion = quizQuestions[currentQuizStep];
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
new file mode 100644
index 00000000..2ba85fbb
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@@ -0,0 +1,133 @@
+import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
+import { Question, questionStore } from "@root/questions";
+import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
+import { useParams } from "react-router-dom";
+import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
+import Variant from "./QuizPreviewQuestionTypes/Variant";
+import { FC, useEffect } from "react";
+import Images from "./QuizPreviewQuestionTypes/Images";
+import Varimg from "./QuizPreviewQuestionTypes/Varimg";
+import Emoji from "./QuizPreviewQuestionTypes/Emoji";
+import Text from "./QuizPreviewQuestionTypes/Text";
+import Select from "./QuizPreviewQuestionTypes/Select";
+import Date from "./QuizPreviewQuestionTypes/Date";
+import Number from "./QuizPreviewQuestionTypes/Number";
+import File from "./QuizPreviewQuestionTypes/File";
+import Page from "./QuizPreviewQuestionTypes/Page";
+import Rating from "./QuizPreviewQuestionTypes/Rating";
+
+
+type QuizQuestionType = "variant" | "images" | "varimg" | "emoji" | "text" | "select" | "date" | "number" | "file" | "page" | "rating";
+
+const QuestionPreviewComponentByType: Record> = {
+ variant: Variant,
+ images: Images,
+ varimg: Varimg,
+ emoji: Emoji,
+ text: Text,
+ select: Select,
+ date: Date,
+ number: Number,
+ file: File,
+ page: Page,
+ rating: Rating,
+};
+
+export default function QuizPreviewLayout() {
+ const quizId = useParams().quizId ?? 0;
+ const listQuestions = questionStore(state => state.listQuestions);
+ const currentQuizStep = useQuizPreviewStore(state => state.currentQuestionIndex);
+
+ const quizQuestions: Question[] | undefined = listQuestions[quizId];
+ const maxCurrentQuizStep = quizQuestions?.length > 0 ? quizQuestions.length - 1 : 0;
+ const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
+
+ const currentQuestion = quizQuestions[currentQuizStep];
+ const QuestionComponent = currentQuestion
+ ? QuestionPreviewComponentByType[currentQuestion.type as QuizQuestionType]
+ : null;
+
+ const questionElement = QuestionComponent
+ ?
+ : null;
+
+ useEffect(function resetCurrentQuizStep() {
+ if (currentQuizStep > maxCurrentQuizStep) {
+ decrementCurrentQuestionIndex();
+ }
+ }, [currentQuizStep, maxCurrentQuizStep]);
+
+ return (
+
+
+ {questionElement}
+
+
+
+
+ {quizQuestions.length > 0
+ ? `Вопрос ${currentQuizStep + 1} из ${quizQuestions.length}`
+ : "Нет вопросов"
+ }
+
+ {quizQuestions.length > 0 &&
+
+ }
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
new file mode 100644
index 00000000..85de9827
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Date({ question }: Props) {
+
+ return (
+
+ {question.title}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
new file mode 100644
index 00000000..04e9dcf2
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
@@ -0,0 +1,39 @@
+import InfoIcon from "@icons/InfoIcon";
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { useState, ChangeEvent } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Emoji({ question }: Props) {
+ const [value, setValue] = useState(null);
+
+ const handleChange = (event: ChangeEvent) => {
+ setValue((event.target as HTMLInputElement).value);
+ };
+
+ return (
+
+ {question.title}
+
+ {question.content.variants.map((variant, index) => (
+ } label={
+
+ {`${variant.emoji} ${variant.answer}`}
+
+
+
+
+ } />
+ ))}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
new file mode 100644
index 00000000..bba47075
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
@@ -0,0 +1,44 @@
+import { Box, Button, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { ChangeEvent, useRef, useState } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function File({ question }: Props) {
+ const fileInputRef = useRef(null);
+ const [files, setFiles] = useState(null);
+
+ function handleFileChange(event: ChangeEvent) {
+ if (!event.target.files) return setFiles(null);
+ setFiles(Array.from(event.target.files));
+ }
+
+ return (
+
+ {question.title}
+
+
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
new file mode 100644
index 00000000..1d575d44
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
@@ -0,0 +1,41 @@
+import InfoIcon from "@icons/InfoIcon";
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { ChangeEvent, useState } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Images({ question }: Props) {
+ const [value, setValue] = useState(null);
+
+ const handleChange = (event: ChangeEvent) => {
+ setValue((event.target as HTMLInputElement).value);
+ };
+
+ return (
+
+ {question.title}
+
+ {question.content.variants.map((variant, index) => (
+ } label={
+
+ {variant.answer}
+
+
+
+
+
+
+ } />
+ ))}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
new file mode 100644
index 00000000..f0947540
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
@@ -0,0 +1,35 @@
+import { Box, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { CustomSlider } from "@ui_kit/CustomSlider";
+import { useState } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Number({ question }: Props) {
+ const [sliderValue, setSliderValue] = useState(question.content.start);
+
+ return (
+
+ {question.title}
+
+ setSliderValue(v as number)}
+ min={parseInt(question.content.range.split("—")[0])}
+ max={parseInt(question.content.range.split("—")[1])}
+ defaultValue={question.content.start}
+ step={question.content.step}
+ />
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
new file mode 100644
index 00000000..9e382825
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
@@ -0,0 +1,23 @@
+import { Box, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Page({ question }: Props) {
+
+ return (
+
+ {question.title}
+
+ {question.content.text}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
new file mode 100644
index 00000000..d471fbe6
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
@@ -0,0 +1,74 @@
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Question } from "@root/questions";
+import { FC, useState } from "react";
+import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
+import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
+import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
+import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
+import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
+import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
+import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
+
+
+type RatingIconType = "star" | "trophie" | "flag" | "heart" | "like" | "bubble" | "hashtag";
+
+const ratingIconComponentByType: Record> = {
+ "star": StarIconMini,
+ "trophie": TropfyIcon,
+ "flag": FlagIcon,
+ "heart": HeartIcon,
+ "like": LikeIcon,
+ "bubble": LightbulbIcon,
+ "hashtag": HashtagIcon,
+};
+
+interface Props {
+ question: Question;
+}
+
+export default function Rating({ question }: Props) {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(790));
+ const [selectedRating, setSelectedRating] = useState(0);
+
+ const RatingIconComponent = ratingIconComponentByType[question.content.form as RatingIconType];
+
+ return (
+
+ {question.title}
+
+ {Array.from(
+ { length: question.content.steps },
+ (_, index) => index
+ ).map((itemNumber) => (
+ setSelectedRating(itemNumber + 1)}
+ sx={{
+ cursor: "pointer",
+ transform: "scale(1.5)",
+ ":hover": {
+ transform: "scale(1.7)",
+ transition: "0.2s",
+ },
+ }}
+ >
+ itemNumber
+ ? theme.palette.brightPurple.main
+ : theme.palette.grey2.main
+ } />
+
+ ))}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
new file mode 100644
index 00000000..73d95091
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
@@ -0,0 +1,102 @@
+import ArrowDownIcon from "@icons/ArrowDownIcon";
+import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from "@mui/material";
+import { Question } from "@root/questions";
+import { useState } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Text({ question }: Props) {
+ const theme = useTheme();
+ const [selectValue, setSelectValue] = useState("");
+
+ function handleChange(event: SelectChangeEvent) {
+ setSelectValue((event.target as HTMLInputElement).value);
+ }
+
+ return (
+
+ {question.title}
+
+
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
new file mode 100644
index 00000000..761cbeeb
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
@@ -0,0 +1,24 @@
+import { Box, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import CustomTextField from "@ui_kit/CustomTextField";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Text({ question }: Props) {
+
+ return (
+
+ {question.title}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
new file mode 100644
index 00000000..9cabfe7f
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@@ -0,0 +1,41 @@
+import InfoIcon from "@icons/InfoIcon";
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { ChangeEvent, useState } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Variant({ question }: Props) {
+ const [value, setValue] = useState(null);
+
+ const handleChange = (event: ChangeEvent) => {
+ setValue((event.target as HTMLInputElement).value);
+ };
+
+ return (
+
+ {question.title}
+
+ {question.content.variants.map((variant, index) => (
+ } label={
+
+ {variant.answer}
+
+
+
+
+
+
+ } />
+ ))}
+
+
+ );
+}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
new file mode 100644
index 00000000..3303a00e
--- /dev/null
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -0,0 +1,41 @@
+import InfoIcon from "@icons/InfoIcon";
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
+import { Question } from "@root/questions";
+import { useState, ChangeEvent } from "react";
+
+
+interface Props {
+ question: Question;
+}
+
+export default function Varimg({ question }: Props) {
+ const [value, setValue] = useState(null);
+
+ const handleChange = (event: ChangeEvent) => {
+ setValue((event.target as HTMLInputElement).value);
+ };
+
+ return (
+
+ {question.title}
+
+ {question.content.variants.map((variant, index) => (
+ } label={
+
+ {variant.answer}
+
+
+
+
+
+
+ } />
+ ))}
+
+
+ );
+}
diff --git a/yarn.lock b/yarn.lock
index 193c77e9..09cdb0cd 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -1048,6 +1048,13 @@
dependencies:
regenerator-runtime "^0.13.11"
+"@babel/runtime@^7.23.1":
+ version "7.23.1"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+ integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
version "7.20.7"
resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
@@ -1351,6 +1358,33 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
+"@floating-ui/core@^1.4.2":
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+ integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+ dependencies:
+ "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@^1.5.1":
+ version "1.5.3"
+ resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+ integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+ dependencies:
+ "@floating-ui/core" "^1.4.2"
+ "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/react-dom@^2.0.2":
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+ integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+ dependencies:
+ "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+ version "0.1.6"
+ resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+ integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
"@humanwhocodes/config-array@^0.11.6":
version "0.11.7"
resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz"
@@ -1671,6 +1705,19 @@
prop-types "^15.8.1"
react-is "^18.2.0"
+"@mui/base@^5.0.0-beta.17":
+ version "5.0.0-beta.18"
+ resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.18.tgz#f95d393cf80974e77c0823170cc15c854d5af84b"
+ integrity sha512-e9ZCy/ndhyt5MTshAS3qAUy/40UiO0jX+kAo6a+XirrPJE+rrQW+mKPSI0uyp+5z4Vh+z0pvNoJ2S2gSrNz3BQ==
+ dependencies:
+ "@babel/runtime" "^7.23.1"
+ "@floating-ui/react-dom" "^2.0.2"
+ "@mui/types" "^7.2.5"
+ "@mui/utils" "^5.14.12"
+ "@popperjs/core" "^2.11.8"
+ clsx "^2.0.0"
+ prop-types "^15.8.1"
+
"@mui/core-downloads-tracker@^5.10.16":
version "5.10.16"
resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz"
@@ -1739,6 +1786,11 @@
resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz"
integrity sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==
+"@mui/types@^7.2.5":
+ version "7.2.5"
+ resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.5.tgz#cd62a1fc5eb1044137ccab2053b431dd7cfc3cb8"
+ integrity sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA==
+
"@mui/utils@^5.10.16":
version "5.10.16"
resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz"
@@ -1750,6 +1802,29 @@
prop-types "^15.8.1"
react-is "^18.2.0"
+"@mui/utils@^5.14.11", "@mui/utils@^5.14.12":
+ version "5.14.12"
+ resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.12.tgz#58b570839e22e0fba71e17d37d9c083fe233704d"
+ integrity sha512-RFNXnhKQlzIkIUig6mmv0r5VbtjPdWoaBPYicq25LETdZux59HAqoRdWw15T7lp3c7gXOoE8y67+hTB8C64m2g==
+ dependencies:
+ "@babel/runtime" "^7.23.1"
+ "@types/prop-types" "^15.7.7"
+ prop-types "^15.8.1"
+ react-is "^18.2.0"
+
+"@mui/x-date-pickers@^6.16.1":
+ version "6.16.1"
+ resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.16.1.tgz#76341384ef51db5f405f779fe5f2e9456b2cdc53"
+ integrity sha512-4B2+DU7aywYdvmr10o2qai6kbbR26zta/v1y8x3bmTilI/KcbhZ2OlsyArPKmTRNC8VYirejSnhLkPR/+JIkPg==
+ dependencies:
+ "@babel/runtime" "^7.23.1"
+ "@mui/base" "^5.0.0-beta.17"
+ "@mui/utils" "^5.14.11"
+ "@types/react-transition-group" "^4.4.7"
+ clsx "^2.0.0"
+ prop-types "^15.8.1"
+ react-transition-group "^4.4.5"
+
"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
version "5.1.1-v1"
resolved "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz"
@@ -1798,6 +1873,11 @@
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz"
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+"@popperjs/core@^2.11.8":
+ version "2.11.8"
+ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+ integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
"@react-dnd/asap@^5.0.1":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
@@ -2279,6 +2359,11 @@
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+"@types/prop-types@^15.7.7":
+ version "15.7.8"
+ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
+ integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
+
"@types/q@^1.5.1":
version "1.5.5"
resolved "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz"
@@ -2339,6 +2424,13 @@
dependencies:
"@types/react" "*"
+"@types/react-transition-group@^4.4.7":
+ version "4.4.7"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
+ integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
+ dependencies:
+ "@types/react" "*"
+
"@types/react@*", "@types/react@^18.0.0":
version "18.0.26"
resolved "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz"
@@ -3405,6 +3497,11 @@ clsx@^1.1.0, clsx@^1.1.1, clsx@^1.2.1:
resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+ integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
co@^4.6.0:
version "4.6.0"
resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -3849,6 +3946,11 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
+dayjs@^1.11.10:
+ version "1.11.10"
+ resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+ integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -8117,6 +8219,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+regenerator-runtime@^0.14.0:
+ version "0.14.0"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+ integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
regenerator-transform@^0.15.1:
version "0.15.1"
resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz"