diff --git a/src/ui_kit/QuizPreview/QuizPreview.tsx b/src/ui_kit/QuizPreview/QuizPreview.tsx
index 3e7e4f7b..f4cf528c 100644
--- a/src/ui_kit/QuizPreview/QuizPreview.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreview.tsx
@@ -1,4 +1,4 @@
-import PointsIcon from "@icons/questionsPage/PointsIcon";
+import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { Box, IconButton } from "@mui/material";
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
import { useLayoutEffect, useRef } from "react";
@@ -110,7 +110,7 @@ export default function QuizPreview() {
cursor: "move",
}}
>
-
+
}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
index 2ba85fbb..6f890147 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@@ -1,25 +1,24 @@
import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
-import { Question, questionStore } from "@root/questions";
+import { questionStore } from "@root/questions";
import { decrementCurrentQuestionIndex, incrementCurrentQuestionIndex, useQuizPreviewStore } from "@root/quizPreview";
+import { AnyQuizQuestion, QuizQuestionType } from "model/questionTypes/shared";
+import { FC, useEffect } from "react";
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 Emoji from "./QuizPreviewQuestionTypes/Emoji";
import File from "./QuizPreviewQuestionTypes/File";
+import Images from "./QuizPreviewQuestionTypes/Images";
+import Number from "./QuizPreviewQuestionTypes/Number";
import Page from "./QuizPreviewQuestionTypes/Page";
import Rating from "./QuizPreviewQuestionTypes/Rating";
+import Select from "./QuizPreviewQuestionTypes/Select";
+import Text from "./QuizPreviewQuestionTypes/Text";
+import Variant from "./QuizPreviewQuestionTypes/Variant";
+import Varimg from "./QuizPreviewQuestionTypes/Varimg";
-type QuizQuestionType = "variant" | "images" | "varimg" | "emoji" | "text" | "select" | "date" | "number" | "file" | "page" | "rating";
-
-const QuestionPreviewComponentByType: Record> = {
+const QuestionPreviewComponentByType: Record> = {
variant: Variant,
images: Images,
varimg: Varimg,
@@ -38,11 +37,12 @@ export default function QuizPreviewLayout() {
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 quizQuestions: AnyQuizQuestion[] | undefined = listQuestions[quizId];
+ const nonDeletedQuizQuestions = quizQuestions?.filter(question => !question.deleted);
+ const maxCurrentQuizStep = nonDeletedQuizQuestions?.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);
-
- const currentQuestion = quizQuestions[currentQuizStep];
+
+ const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];
const QuestionComponent = currentQuestion
? QuestionPreviewComponentByType[currentQuestion.type as QuizQuestionType]
: null;
@@ -88,12 +88,12 @@ export default function QuizPreviewLayout() {
gap: 1,
}}>
- {quizQuestions.length > 0
- ? `Вопрос ${currentQuizStep + 1} из ${quizQuestions.length}`
+ {nonDeletedQuizQuestions.length > 0
+ ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
: "Нет вопросов"
}
- {quizQuestions.length > 0 &&
+ {nonDeletedQuizQuestions.length > 0 &&
(
} label={
- {`${variant.emoji} ${variant.answer}`}
+ {`${variant.extendedText} ${variant.answer}`}
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
index bba47075..70cf227f 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
@@ -1,10 +1,10 @@
import { Box, Button, Typography } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionFile } from "model/questionTypes/file";
import { ChangeEvent, useRef, useState } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionFile;
}
export default function File({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
index 1d575d44..7373ba4b 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
@@ -1,11 +1,11 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionImages } from "model/questionTypes/images";
import { ChangeEvent, useState } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionImages;
}
export default function Images({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
index f0947540..c34985d3 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
@@ -1,11 +1,11 @@
import { Box, Typography } from "@mui/material";
-import { Question } from "@root/questions";
import { CustomSlider } from "@ui_kit/CustomSlider";
+import { QuizQuestionNumber } from "model/questionTypes/number";
import { useState } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionNumber;
}
export default function Number({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
index 9e382825..c56d1ad4 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
@@ -1,9 +1,9 @@
import { Box, Typography } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionPage } from "model/questionTypes/page";
interface Props {
- question: Question;
+ question: QuizQuestionPage;
}
export default function Page({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
index d471fbe6..3ea7e408 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
@@ -1,5 +1,4 @@
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";
@@ -8,6 +7,7 @@ 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";
+import { QuizQuestionRating } from "model/questionTypes/rating";
type RatingIconType = "star" | "trophie" | "flag" | "heart" | "like" | "bubble" | "hashtag";
@@ -23,7 +23,7 @@ const ratingIconComponentByType: Record>
};
interface Props {
- question: Question;
+ question: QuizQuestionRating;
}
export default function Rating({ question }: Props) {
@@ -31,6 +31,8 @@ export default function Rating({ question }: Props) {
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const [selectedRating, setSelectedRating] = useState(0);
+ console.log(question);
+
const RatingIconComponent = ratingIconComponentByType[question.content.form as RatingIconType];
return (
@@ -42,32 +44,47 @@ export default function Rating({ question }: Props) {
{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
- } />
-
- ))}
+
+ {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
+ } />
+
+ ))}
+
+
+ {question.content.ratingNegativeDescription}
+ {question.content.ratingPositiveDescription}
+
);
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
index 73d95091..136d82aa 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
@@ -1,11 +1,11 @@
import ArrowDownIcon from "@icons/ArrowDownIcon";
import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionSelect } from "model/questionTypes/select";
import { useState } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionSelect;
}
export default function Text({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
index 761cbeeb..9e7f9cfe 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
@@ -1,10 +1,10 @@
import { Box, Typography } from "@mui/material";
-import { Question } from "@root/questions";
import CustomTextField from "@ui_kit/CustomTextField";
+import { QuizQuestionText } from "model/questionTypes/text";
interface Props {
- question: Question;
+ question: QuizQuestionText;
}
export default function Text({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
index 9cabfe7f..cded6e77 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
@@ -1,11 +1,11 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionVariant } from "model/questionTypes/variant";
import { ChangeEvent, useState } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionVariant;
}
export default function Variant({ question }: Props) {
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
index 3303a00e..ead1f616 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -1,11 +1,11 @@
import InfoIcon from "@icons/InfoIcon";
import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Tooltip, Typography } from "@mui/material";
-import { Question } from "@root/questions";
+import { QuizQuestionVarImg } from "model/questionTypes/varimg";
import { useState, ChangeEvent } from "react";
interface Props {
- question: Question;
+ question: QuizQuestionVarImg;
}
export default function Varimg({ question }: Props) {