SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

use new question types

Browse Source
This commit is contained in:
nflnkr 2023-10-09 19:04:12 +03:00
parent 5fc077c884
commit 36c13f96e9
13 changed files with 86 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui_kit/QuizPreview/QuizPreview.tsx
View File

@ -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",
}}
>
<PointsIcon />
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
</IconButton>
</Rnd>
}

38
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -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<QuizQuestionType, FC<{ question: Question; }>> = {
const QuestionPreviewComponentByType: Record<QuizQuestionType, FC<any>> = {
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,
}}>
<Typography>
{quizQuestions.length > 0
? `Вопрос ${currentQuizStep + 1} из ${quizQuestions.length}`
{nonDeletedQuizQuestions.length > 0
? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
: "Нет вопросов"
}
</Typography>
{quizQuestions.length > 0 &&
{nonDeletedQuizQuestions.length > 0 &&
<LinearProgress
variant="determinate"
value={currentProgress}

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
View File

@ -1,10 +1,10 @@
import { Box, Typography } from "@mui/material";
import { Question } from "@root/questions";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import { QuizQuestionDate } from "model/questionTypes/date";
interface Props {
question: Question;
question: QuizQuestionDate;
}
export default function Date({ question }: Props) {

6
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
View File

@ -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 { QuizQuestionEmoji } from "model/questionTypes/emoji";
import { useState, ChangeEvent } from "react";
interface Props {
question: Question;
question: QuizQuestionEmoji;
}
export default function Emoji({ question }: Props) {
@ -26,7 +26,7 @@ export default function Emoji({ question }: Props) {
{question.content.variants.map((variant, index) => (
<FormControlLabel key={index} value={variant.answer} control={<Radio />} label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{`${variant.emoji} ${variant.answer}`}</Typography>
<Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
<Tooltip title={variant.hints} placement="right">
<Box><InfoIcon /></Box>
</Tooltip>

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Number.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
View File

@ -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) {

71
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Rating.tsx
View File

@ -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<RatingIconType, FC<{ color: string; }>>
};
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<number>(0);
console.log(question);
const RatingIconComponent = ratingIconComponentByType[question.content.form as RatingIconType];
return (
@ -42,32 +44,47 @@ export default function Rating({ question }: Props) {
<Typography variant="h6">{question.title}</Typography>
<Box sx={{
display: "flex",
gap: isMobile ? "10px" : "15px",
flexWrap: "wrap",
flexDirection: "column",
gap: 1,
width: "fit-content",
}}>
{Array.from(
{ length: question.content.steps },
(_, index) => index
).map((itemNumber) => (
<Box
key={itemNumber}
onClick={() => setSelectedRating(itemNumber + 1)}
sx={{
cursor: "pointer",
transform: "scale(1.5)",
":hover": {
transform: "scale(1.7)",
transition: "0.2s",
},
}}
>
<RatingIconComponent color={
selectedRating > itemNumber
? theme.palette.brightPurple.main
: theme.palette.grey2.main
} />
</Box>
))}
<Box sx={{
display: "flex",
gap: isMobile ? "10px" : "15px",
flexWrap: "wrap",
}}>
{Array.from(
{ length: question.content.steps },
(_, index) => index
).map((itemNumber) => (
<Box
key={itemNumber}
onClick={() => setSelectedRating(itemNumber + 1)}
sx={{
cursor: "pointer",
transform: "scale(1.5)",
":hover": {
transform: "scale(1.7)",
transition: "0.2s",
},
}}
>
<RatingIconComponent color={
selectedRating > itemNumber
? theme.palette.brightPurple.main
: theme.palette.grey2.main
} />
</Box>
))}
</Box>
<Box sx={{
display: "flex",
justifyContent: "space-between",
gap: 2,
}}>
<Typography>{question.content.ratingNegativeDescription}</Typography>
<Typography>{question.content.ratingPositiveDescription}</Typography>
</Box>
</Box>
</Box>
);

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Text.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -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) {

4
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -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) {