SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

make quiz view store component store

Browse Source 
move design list to separate file
This commit is contained in:
nflnkr 2024-04-03 15:42:12 +03:00
parent 73e6a95902
commit 979d0e7138
22 changed files with 2740 additions and 2731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
lib/components/QuizAnswerer.tsx
View File

@ -16,6 +16,7 @@ import { ErrorBoundary } from "react-error-boundary";
import useSWR from "swr"; import useSWR from "swr";
import { ApologyPage } from "./ViewPublicationPage/ApologyPage"; import { ApologyPage } from "./ViewPublicationPage/ApologyPage";
import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage"; import ViewPublicationPage from "./ViewPublicationPage/ViewPublicationPage";
import { QuizViewContext, createQuizViewStore } from "@/stores/quizView";
moment.locale("ru"); moment.locale("ru");
@ -28,6 +29,7 @@ type Props = {
}; };
export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) { export default function QuizAnswerer({ quizSettings, quizId, preview = false }: Props) {
const [quizViewStore] = useState(createQuizViewStore);
const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth); const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
const rootContainerRef = useRef<HTMLDivElement>(null); const rootContainerRef = useRef<HTMLDivElement>(null);
const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), { const { data, error, isLoading } = useSWR(quizSettings ? null : ["quizData", quizId], params => getQuizData(params[1]), {
@ -61,33 +63,35 @@ export default function QuizAnswerer({ quizSettings, quizId, preview = false }:
if (!quizSettings) throw new Error("Quiz data is null"); if (!quizSettings) throw new Error("Quiz data is null");
return ( return (
<RootContainerWidthContext.Provider value={rootContainerWidth}> <QuizViewContext.Provider value={quizViewStore}>
<QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}> <RootContainerWidthContext.Provider value={rootContainerWidth}>
<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}> <QuizDataContext.Provider value={{ ...quizSettings, quizId, preview }}>
<ThemeProvider theme={lightTheme}> <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="ru" localeText={localeText}>
<SnackbarProvider <ThemeProvider theme={lightTheme}>
preventDuplicate={true} <SnackbarProvider
style={{ backgroundColor: lightTheme.palette.brightPurple.main }} preventDuplicate={true}
> style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
<CssBaseline />
<Box
ref={rootContainerRef}
sx={{
width: "100%",
height: "100%",
}}
> >
<ErrorBoundary <CssBaseline />
FallbackComponent={ApologyPage} <Box
onError={handleComponentError} ref={rootContainerRef}
sx={{
width: "100%",
height: "100%",
}}
> >
<ViewPublicationPage /> <ErrorBoundary
</ErrorBoundary> FallbackComponent={ApologyPage}
</Box> onError={handleComponentError}
</SnackbarProvider> >
</ThemeProvider> <ViewPublicationPage />
</LocalizationProvider> </ErrorBoundary>
</QuizDataContext.Provider> </Box>
</RootContainerWidthContext.Provider> </SnackbarProvider>
</ThemeProvider>
</LocalizationProvider>
</QuizDataContext.Provider>
</RootContainerWidthContext.Provider>
</QuizViewContext.Provider>
); );
} }

2
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -25,7 +25,7 @@ import {quizThemes} from "@utils/themes/Publication/themePublication";
import {enqueueSnackbar} from "notistack"; import {enqueueSnackbar} from "notistack";
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext"; import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
import {useQuizData} from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question"; import { DESIGN_LIST } from "@/utils/designList";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590) const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)

245
lib/components/ViewPublicationPage/Question.tsx
View File

@ -21,161 +21,128 @@ import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import Desgin1 from "@icons/designs/design1.jpg";
import Desgin2 from "@icons/designs/design2.jpg";
import Desgin3 from "@icons/designs/design3.jpg";
import Desgin4 from "@icons/designs/design4.jpg";
import Desgin5 from "@icons/designs/design5.jpg";
import Desgin6 from "@icons/designs/design6.jpg";
import Desgin7 from "@icons/designs/design7.jpg";
import Desgin8 from "@icons/designs/design8.jpg";
import Desgin9 from "@icons/designs/design9.jpg";
import Desgin10 from "@icons/designs/design10.jpg";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import type { QuizTheme } from "@model/settingsData"; import { DESIGN_LIST } from "@/utils/designList";
type Props = { type Props = {
currentQuestion: RealTypedQuizQuestion; currentQuestion: RealTypedQuizQuestion;
currentQuestionStepNumber: number | null; currentQuestionStepNumber: number | null;
nextButton: ReactNode; nextButton: ReactNode;
prevButton: ReactNode; prevButton: ReactNode;
};
export const DESIGN_LIST: Record<QuizTheme, string> = {
Design1: Desgin1,
Design2: Desgin2,
Design3: Desgin3,
Design4: Desgin4,
Design5: Desgin5,
Design6: Desgin6,
Design7: Desgin7,
Design8: Desgin8,
Design9: Desgin9,
Design10: Desgin10,
StandardTheme: "",
StandardDarkTheme: "",
PinkTheme: "",
PinkDarkTheme: "",
BlackWhiteTheme: "",
OliveTheme: "",
YellowTheme: "",
GoldDarkTheme: "",
PurpleTheme: "",
BlueTheme: "",
BlueDarkTheme: "",
}; };
export const Question = ({ export const Question = ({
currentQuestion, currentQuestion,
currentQuestionStepNumber, currentQuestionStepNumber,
nextButton, nextButton,
prevButton, prevButton,
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings, show_badge } = useQuizData(); const { settings, show_badge } = useQuizData();
return ( return (
<Box
sx={{
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
<Box
sx={{
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "transparent"
: "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default,
overflow: "hidden"
}}
>
<Box <Box
sx={{ sx={{
height: "calc(100% - 75px)", height: "100%",
overflow: "auto", backgroundPosition: "center",
width: "100%" backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}} }}
> >
<Box <Box
sx={{ sx={{
height: "calc(100% - 75px)", height: "100%",
width: "100%", background: settings.cfg.design
maxWidth: "1440px", ? quizThemes[settings.cfg.theme].isLight
padding: "40px 25px 20px", ? "transparent"
margin: "0 auto", : "linear-gradient(90deg,#272626, transparent)"
//overflow: "auto", : theme.palette.background.default,
display: "flex", overflow: "hidden"
flexDirection: "column", }}
justifyContent: "space-between", >
}} <Box
> sx={{
<QuestionByType height: "calc(100% - 75px)",
key={currentQuestion.id} overflow: "auto",
question={currentQuestion} width: "100%"
stepNumber={currentQuestionStepNumber} }}
/> >
{show_badge && ( <Box
<Link target="_blank" href="https://quiz.pena.digital" sx={{mt: "20px", textAlign: "end"}}> sx={{
{quizThemes[settings.cfg.theme].isLight ? ( height: "calc(100% - 75px)",
<NameplateLogoFQ width: "100%",
style={{ fontSize: "34px", width: "200px", height: "auto" }} maxWidth: "1440px",
/> padding: "40px 25px 20px",
) : ( margin: "0 auto",
<NameplateLogoFQDark //overflow: "auto",
style={{ fontSize: "34px", width: "200px", height: "auto" }} display: "flex",
/> flexDirection: "column",
)} justifyContent: "space-between",
</Link> }}
)} >
</Box> <QuestionByType
key={currentQuestion.id}
question={currentQuestion}
stepNumber={currentQuestionStepNumber}
/>
{show_badge && (
<Link target="_blank" href="https://quiz.pena.digital" sx={{ mt: "20px", textAlign: "end" }}>
{quizThemes[settings.cfg.theme].isLight ? (
<NameplateLogoFQ
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
) : (
<NameplateLogoFQDark
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
)}
</Link>
)}
</Box>
</Box>
<Footer
stepNumber={currentQuestionStepNumber}
prevButton={prevButton}
nextButton={nextButton}
/>
</Box>
</Box> </Box>
<Footer );
stepNumber={currentQuestionStepNumber}
prevButton={prevButton}
nextButton={nextButton}
/>
</Box>
</Box>
);
}; };
function QuestionByType({ function QuestionByType({
question, question,
stepNumber, stepNumber,
}: { }: {
question: RealTypedQuizQuestion; question: RealTypedQuizQuestion;
stepNumber: number | null; stepNumber: number | null;
}) { }) {
switch (question.type) { switch (question.type) {
case "variant": case "variant":
return <Variant currentQuestion={question} />; return <Variant currentQuestion={question} />;
case "images": case "images":
return <Images currentQuestion={question} />; return <Images currentQuestion={question} />;
case "varimg": case "varimg":
return <Varimg currentQuestion={question} />; return <Varimg currentQuestion={question} />;
case "emoji": case "emoji":
return <Emoji currentQuestion={question} />; return <Emoji currentQuestion={question} />;
case "text": case "text":
return <Text currentQuestion={question} stepNumber={stepNumber} />; return <Text currentQuestion={question} stepNumber={stepNumber} />;
case "select": case "select":
return <Select currentQuestion={question} />; return <Select currentQuestion={question} />;
case "date": case "date":
return <Date currentQuestion={question} />; return <Date currentQuestion={question} />;
case "number": case "number":
return <Number currentQuestion={question} />; return <Number currentQuestion={question} />;
case "file": case "file":
return <File currentQuestion={question} />; return <File currentQuestion={question} />;
case "page": case "page":
return <Page currentQuestion={question} />; return <Page currentQuestion={question} />;
case "rating": case "rating":
return <Rating currentQuestion={question} />; return <Rating currentQuestion={question} />;
default: default:
notReachable(question); notReachable(question);
} }
} }

153
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -5,27 +5,28 @@ import {
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import {NameplateLogo} from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import {useQuizData} from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import {quizThemes} from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext"; import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import type {QuizQuestionResult} from "../../model/questionTypes/result"; import type { QuizQuestionResult } from "../../model/questionTypes/result";
import {setCurrentQuizStep} from "@stores/quizView"; import { useQuizViewStore } from "@/stores/quizView";
import {DESIGN_LIST} from "@/components/ViewPublicationPage/Question"; import { DESIGN_LIST } from "@/utils/designList";
type ResultFormProps = { type ResultFormProps = {
resultQuestion: QuizQuestionResult; resultQuestion: QuizQuestionResult;
}; };
export const ResultForm = ({resultQuestion}: ResultFormProps) => { export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000; const isTablet = useRootContainerSize() < 1000;
const {settings, show_badge, quizId} = useQuizData(); const { settings, show_badge, quizId } = useQuizData();
const spec = settings.cfg.spec const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
console.log(quizThemes[settings.cfg.theme].isLight) const spec = settings.cfg.spec;
console.log(quizThemes[settings.cfg.theme].isLight);
return ( return (
<Box <Box
@ -73,15 +74,15 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
}} }}
> >
{settings.cfg.startpage.logo && {settings.cfg.startpage.logo &&
<img <img
src={settings.cfg.startpage.logo} src={settings.cfg.startpage.logo}
style={{ style={{
height: "40px", height: "40px",
maxWidth: "110px", maxWidth: "110px",
objectFit: "cover", objectFit: "cover",
}} }}
alt="" alt=""
/> />
} }
<Typography <Typography
sx={{ sx={{
@ -133,19 +134,19 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
) )
} }
{resultQuestion.description !== "" && {resultQuestion.description !== "" &&
resultQuestion.description !== " " && ( resultQuestion.description !== " " && (
<Typography <Typography
sx={{ sx={{
fontSize: "23px", fontSize: "23px",
fontWeight: 700, fontWeight: 700,
m: "20px 0", m: "20px 0",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word" wordBreak: "break-word"
}} }}
> >
{resultQuestion.description} {resultQuestion.description}
</Typography> </Typography>
)} )}
<Typography <Typography
sx={{ sx={{
@ -187,37 +188,37 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
}} }}
> >
{show_badge && {show_badge &&
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={ href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
} }
sx={{
display: "flex",
alignItems: "center",
mt: "15px",
gap: "10px",
textDecoration: "none",
mb: "15px"
}}
>
<NameplateLogo
style={{
fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{ sx={{
fontSize: "14px", display: "flex",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", alignItems: "center",
whiteSpace: "nowrap", mt: "15px",
gap: "10px",
textDecoration: "none",
mb: "15px"
}} }}
> >
Сделано на PenaQuiz <NameplateLogo
</Typography> style={{
</Box> fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{
fontSize: "14px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
} }
</Box> </Box>
@ -234,16 +235,16 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
p: p:
( (
settings.cfg.resultInfo.showResultForm === "before" && settings.cfg.resultInfo.showResultForm === "before" &&
!Boolean(settings.cfg.score) !settings.cfg.score
) || ) ||
( (
settings.cfg.resultInfo.showResultForm === "after" && settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect resultQuestion.content.redirect
) )
? "20px" : "0", ? "20px" : "0",
}} }}
> >
{settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && ( {settings.cfg.resultInfo.showResultForm === "before" && !settings.cfg.score && (
<Button <Button
onClick={() => setCurrentQuizStep("contactform")} onClick={() => setCurrentQuizStep("contactform")}
variant="contained" variant="contained"
@ -257,15 +258,15 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
</Button> </Button>
)} )}
{settings.cfg.resultInfo.showResultForm === "after" && {settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && ( resultQuestion.content.redirect && (
<Button <Button
href={resultQuestion.content.redirect} href={resultQuestion.content.redirect}
variant="contained" variant="contained"
sx={{p: "10px 20px", width: "auto", height: "50px"}} sx={{ p: "10px 20px", width: "auto", height: "50px" }}
> >
{resultQuestion.content.hint.text || "Перейти на сайт"} {resultQuestion.content.hint.text || "Перейти на сайт"}
</Button> </Button>
)} )}
</Box> </Box>
</Box> </Box>
</Box> </Box>

354
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
View File

@ -5,209 +5,215 @@ import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
import type { import type {
QuizStartpageAlignType, QuizStartpageAlignType,
QuizStartpageType, QuizStartpageType,
} from "@model/settingsData"; } from "@model/settingsData";
import { DESIGN_LIST } from "@/utils/designList";
type StartPageDesktopProps = { type StartPageDesktopProps = {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element; quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null; backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType; startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType; alignType: QuizStartpageAlignType;
}; };
type LayoutProps = Omit<StartPageDesktopProps, "startpageType">; type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
const StandartLayout = ({ const StandartLayout = ({
alignType, alignType,
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const { settings } = useQuizData(); const { settings } = useQuizData();
return ( return (
<Box <Box
id="pain" id="pain"
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: alignType === "left" ? "row" : "row-reverse", flexDirection: alignType === "left" ? "row" : "row-reverse",
height: "100%", height: "100%",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}} "&::-webkit-scrollbar": { width: 0 },
> overflowY: "auto",
<Box }}
sx={{ >
width: "40%", <Box
display: "flex", sx={{
flexDirection: "column", width: "40%",
justifyContent: "space-between", height: "100%",
alignItems: "flex-start", display: "flex",
p: "25px", flexDirection: "column",
background: justifyContent: "space-between",
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight alignItems: "flex-start",
? "linear-gradient(90deg,#272626,transparent)" p: "25px",
: null, background:
}} settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
> ? "linear-gradient(90deg,#272626,transparent)"
{quizHeaderBlock} : null,
{quizMainBlock} }}
</Box> >
{settings.cfg.startpage.background.desktop && ( {quizHeaderBlock}
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box> {quizMainBlock}
)} </Box>
</Box> {settings.cfg.startpage.background.desktop && (
); <Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
)}
</Box>
);
}; };
const ExpandedLayout = ({ const ExpandedLayout = ({
alignType, alignType,
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => ( }: LayoutProps) => (
<> <>
<Box <Box
sx={{ sx={{
height: "100%", height: "100%",
width: "40%", width: "40%",
padding: "16px", padding: "16px",
margin: margin:
alignType === "center" alignType === "center"
? "0 auto" ? "0 auto"
: alignType === "left" : alignType === "left"
? "0" ? "0"
: "0 0 0 auto", : "0 0 0 auto",
}} "&::-webkit-scrollbar": { width: 0 },
> overflowY: "auto",
<Box }}
sx={{ >
padding: "16px", <Box
minHeight: "calc(100% - 32px)", sx={{
position: "relative", padding: "16px",
display: "flex", minHeight: "calc(100% - 32px)",
flexDirection: "column", position: "relative",
justifyContent: "space-between", display: "flex",
alignItems: alignType === "center" ? "center" : "start", flexDirection: "column",
borderRight: alignType === "left" ? "1px solid #9A9AAF80" : null, justifyContent: "space-between",
borderLeft: alignType === "right" ? "1px solid #9A9AAF80" : null, alignItems: alignType === "center" ? "center" : "start",
}} borderRight: alignType === "left" ? "1px solid #9A9AAF80" : null,
> borderLeft: alignType === "right" ? "1px solid #9A9AAF80" : null,
{quizHeaderBlock} }}
{quizMainBlock} >
</Box> {quizHeaderBlock}
</Box> {quizMainBlock}
<Box </Box>
sx={{ </Box>
position: "absolute", <Box
zIndex: -1, sx={{
left: 0, position: "absolute",
top: 0, zIndex: -1,
height: "100%", left: 0,
width: "100%", top: 0,
overflow: "hidden", height: "100%",
}} width: "100%",
> overflow: "hidden",
{backgroundBlock} }}
</Box> >
</> {backgroundBlock}
</Box>
</>
); );
const CenteredLayout = ({ const CenteredLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100; const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData(); const { settings } = useQuizData();
return ( return (
<Box
sx={{
overflow: "auto",
padding: "10px 25px 25px",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
"&::-webkit-scrollbar": { width: 0 },
}}
>
{quizHeaderBlock}
{backgroundBlock && settings.cfg.startpage.background.desktop && (
<Box <Box
sx={{ sx={{
width: "100%", overflow: "auto",
maxWidth: "844px", padding: "10px 25px 25px",
height: isTablet ? "530px" : "306px", display: "flex",
display: "flex", flexDirection: "column",
justifyContent: "center", alignItems: "center",
"& > img": { width: "100%", borderRadius: "12px" }, height: "100%",
}} backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
"&::-webkit-scrollbar": { width: 0 },
overflowY: "auto",
}}
> >
{backgroundBlock} {quizHeaderBlock}
{backgroundBlock && settings.cfg.startpage.background.desktop && (
<Box
sx={{
width: "100%",
maxWidth: "844px",
height: isTablet ? "530px" : "306px",
display: "flex",
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box> </Box>
)} );
{quizMainBlock}
</Box>
);
}; };
export const StartPageDesktop = ({ export const StartPageDesktop = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
startpageType, startpageType,
alignType, alignType,
}: StartPageDesktopProps) => { }: StartPageDesktopProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {
return ( return (
<StandartLayout <StandartLayout
alignType={alignType} alignType={alignType}
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "expanded": { case "expanded": {
return ( return (
<ExpandedLayout <ExpandedLayout
alignType={alignType} alignType={alignType}
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "centered": { case "centered": {
return ( return (
<CenteredLayout <CenteredLayout
alignType={alignType} alignType={alignType}
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
default: default:
notReachable(startpageType); notReachable(startpageType);
} }
}; };

2
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
View File

@ -4,9 +4,9 @@ import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
import type { QuizStartpageType } from "@model/settingsData"; import type { QuizStartpageType } from "@model/settingsData";
import { DESIGN_LIST } from "@/utils/designList";
type StartPageMobileProps = { type StartPageMobileProps = {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;

709
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -1,11 +1,11 @@
import { import {
Box, Box,
Button, Button,
ButtonBase, ButtonBase,
Link, Link,
Paper, Paper,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType"; import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
@ -13,365 +13,366 @@ import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";
import { useUADevice } from "@utils/hooks/useUADevice"; import { useUADevice } from "@utils/hooks/useUADevice";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "../Question";
import { NameplateLogo } from "@icons/NameplateLogo"; import { NameplateLogo } from "@icons/NameplateLogo";
import { useQuizViewStore } from "@/stores/quizView";
import { DESIGN_LIST } from "@/utils/designList";
export const StartPageViewPublication = () => { export const StartPageViewPublication = () => {
const theme = useTheme(); const theme = useTheme();
const { settings, show_badge, quizId } = useQuizData(); const { settings, show_badge, quizId } = useQuizData();
const { isMobileDevice } = useUADevice(); const { isMobileDevice } = useUADevice();
const isMobile = useRootContainerSize() < 700; const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
const isTablet = useRootContainerSize() < 800;
const handleCopyNumber = () => { const isMobile = useRootContainerSize() < 700;
navigator.clipboard.writeText(settings.cfg.info.phonenumber); const isTablet = useRootContainerSize() < 800;
};
const background = const handleCopyNumber = () => {
settings.cfg.startpage.background.type === "image" ? ( navigator.clipboard.writeText(settings.cfg.info.phonenumber);
<img };
src={
settings.cfg.startpage.background.desktop ||
DESIGN_LIST[settings.cfg.theme] ||
""
}
alt=""
style={{
display: "block",
width:
isMobile || settings.cfg.startpageType === "expanded"
? "100%"
: undefined,
height: "100%",
minWidth: "100%",
maxHeight: "100%",
objectFit: "cover",
overflow: "hidden",
}}
/>
) : settings.cfg.startpage.background.type === "video" ? (
settings.cfg.startpage.background.video ? (
<YoutubeEmbedIframe
videoUrl={settings.cfg.startpage.background.video}
containerSX={{
width: settings.cfg.startpageType === "centered" ? "550px" : "100%",
height:
settings.cfg.startpageType === "centered" ? "275px" : "100%",
borderRadius:
settings.cfg.startpageType === "centered" ? "10px" : "0",
overflow: "hidden",
"& iframe": {
width: "100%",
height: "100%",
transform:
settings.cfg.startpageType === "centered"
? ""
: settings.cfg.startpageType === "expanded"
? "scale(1.5)"
: "scale(2.4)",
},
}}
/>
) : null
) : null;
return ( const background =
<Paper settings.cfg.startpage.background.type === "image" ? (
className="settings-preview-draghandle" <img
sx={{ src={
borderRadius: 0, settings.cfg.startpage.background.desktop ||
height: "100%", DESIGN_LIST[settings.cfg.theme] ||
width: "100%", ""
background:
settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "left"
? "linear-gradient(90deg,#272626,transparent)"
: settings.cfg.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: theme.palette.background.default,
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
}}
>
<QuizPreviewLayoutByType
quizHeaderBlock={
<Box
sx={{
margin:
settings.cfg.startpageType === "centered" ? "0 auto" : null,
padding: settings.cfg.startpageType === "standard" ? "" : "16px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: "30px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo &&
<img
src={settings.cfg.startpage.logo}
style={{
height: "40px",
maxWidth: "110px",
objectFit: "cover",
}}
alt=""
/>
}
<Typography
sx={{
fontSize: "14px",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
wordBreak: "break-word",
}}
>
{settings.cfg.info.orgname}
</Typography>
</Box>
</Box>
}
quizMainBlock={
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
alignItems:
settings.cfg.startpageType === "centered"
? "center"
: settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center"
? "center"
: "start"
: "start",
marginTop: "28px",
width: "100%",
}}
>
<Typography
sx={{
fontWeight: "bold",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign:
settings.cfg.startpageType === "centered" ||
settings.cfg.startpage.position === "center"
? "center"
: "-moz-initial",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.name}
</Typography>
<Typography
sx={{
fontSize: "16px",
margin: "16px 0 30px",
overflowWrap: "break-word",
width: "100%",
textAlign:
settings.cfg.startpageType === "centered" ||
settings.cfg.startpage.position === "center"
? "center"
: "-moz-initial",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.cfg.startpage.description}
</Typography>
<Box
width={
settings.cfg.startpageType === "standard" ? "100%" : "auto"
} }
> alt=""
<Button style={{
variant="contained" display: "block",
sx={{ width:
fontSize: "18px", isMobile || settings.cfg.startpageType === "expanded"
padding: "10px 30px", ? "100%"
width: "auto", : undefined,
background: theme.palette.primary.main, height: "100%",
}} minWidth: "100%",
onClick={() => setCurrentQuizStep("question")} maxHeight: "100%",
> objectFit: "cover",
{settings.cfg.startpage.button.trim() overflow: "hidden",
? settings.cfg.startpage.button }}
: "Пройти тест"} />
</Button> ) : settings.cfg.startpage.background.type === "video" ? (
</Box> settings.cfg.startpage.background.video ? (
</Box> <YoutubeEmbedIframe
videoUrl={settings.cfg.startpage.background.video}
<Box containerSX={{
sx={{ width: settings.cfg.startpageType === "centered" ? "550px" : "100%",
mt: "46px", height:
display: "flex", settings.cfg.startpageType === "centered" ? "275px" : "100%",
flexGrow: borderRadius:
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered" ? "10px" : "0",
? isMobile
? 0
: 1
: 0,
gap: "20px",
alignItems: "flex-end",
justifyContent: "space-between",
width: "100%",
flexWrap: "wrap",
}}
>
<Box sx={{ maxWidth: "300px" }}>
{settings.cfg.info.site && (
<Link mb="16px" href={settings.cfg.info.site}>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", "& iframe": {
whiteSpace: "nowrap", width: "100%",
maxWidth: isTablet ? "200px" : "300px", height: "100%",
}} transform:
> settings.cfg.startpageType === "centered"
{settings.cfg.info.site} ? ""
</Typography> : settings.cfg.startpageType === "expanded"
</Link> ? "scale(1.5)"
)} : "scale(2.4)",
{settings.cfg.info.clickable ? ( },
isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography
sx={{
fontSize: "16px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography
sx={{
fontSize: "16px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography
sx={{
fontSize: "16px",
marginTop: "5px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}} }}
> />
{settings.cfg.info.phonenumber} ) : null
</Typography> ) : null;
)}
<Typography
sx={{
width: "100%",
overflowWrap: "break-word",
fontSize: "12px",
maxHeight: "120px",
overflow: "auto",
marginTop: "5px",
"&::-webkit-scrollbar": { width: 0 },
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.law}
</Typography>
</Box>
{show_badge && ( return (
<Box <Paper
component={Link} className="settings-preview-draghandle"
target={"_blank"} sx={{
href={ borderRadius: 0,
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` height: "100%",
} width: "100%",
sx={{ background:
display: "flex", settings.cfg.startpageType === "expanded"
alignItems: "center", ? settings.cfg.startpage.position === "left"
gap: "15px", ? "linear-gradient(90deg,#272626,transparent)"
textDecoration: "none", : settings.cfg.startpage.position === "center"
}} ? "linear-gradient(180deg,transparent,#272626)"
> : "linear-gradient(270deg,#272626,transparent)"
<NameplateLogo : theme.palette.background.default,
style={{
fontSize: "23px", color: settings.cfg.startpageType === "expanded" ? "white" : "black",
color: }}
settings.cfg.startpageType === "expanded" >
? "#FFFFFF" <QuizPreviewLayoutByType
: quizThemes[settings.cfg.theme].isLight quizHeaderBlock={
? "#151515" <Box
: "#FFFFFF", sx={{
}} margin:
/> settings.cfg.startpageType === "centered" ? "0 auto" : null,
<Typography padding: settings.cfg.startpageType === "standard" ? "" : "16px",
sx={{ }}
fontSize: "14px", >
color: <Box
settings.cfg.startpageType === "expanded" sx={{
? "#F5F7FF" display: "flex",
: quizThemes[settings.cfg.theme].isLight alignItems: "center",
? "#4D4D4D" flexWrap: "wrap",
: "#F5F7FF", gap: "30px",
whiteSpace: "nowrap", mb: "7px",
}} }}
> >
Сделано на PenaQuiz {settings.cfg.startpage.logo &&
</Typography> <img
</Box> src={settings.cfg.startpage.logo}
)} style={{
</Box> height: "40px",
</> maxWidth: "110px",
} objectFit: "cover",
backgroundBlock={background} }}
startpageType={settings.cfg.startpageType} alt=""
alignType={settings.cfg.startpage.position} />
/> }
</Paper> <Typography
); sx={{
fontSize: "14px",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
wordBreak: "break-word",
}}
>
{settings.cfg.info.orgname}
</Typography>
</Box>
</Box>
}
quizMainBlock={
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
alignItems:
settings.cfg.startpageType === "centered"
? "center"
: settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center"
? "center"
: "start"
: "start",
marginTop: "28px",
width: "100%",
}}
>
<Typography
sx={{
fontWeight: "bold",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign:
settings.cfg.startpageType === "centered" ||
settings.cfg.startpage.position === "center"
? "center"
: "-moz-initial",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.name}
</Typography>
<Typography
sx={{
fontSize: "16px",
margin: "16px 0 30px",
overflowWrap: "break-word",
width: "100%",
textAlign:
settings.cfg.startpageType === "centered" ||
settings.cfg.startpage.position === "center"
? "center"
: "-moz-initial",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.cfg.startpage.description}
</Typography>
<Box
width={
settings.cfg.startpageType === "standard" ? "100%" : "auto"
}
>
<Button
variant="contained"
sx={{
fontSize: "18px",
padding: "10px 30px",
width: "auto",
background: theme.palette.primary.main,
}}
onClick={() => setCurrentQuizStep("question")}
>
{settings.cfg.startpage.button.trim()
? settings.cfg.startpage.button
: "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{
mt: "46px",
display: "flex",
flexGrow:
settings.cfg.startpageType === "centered"
? isMobile
? 0
: 1
: 0,
gap: "20px",
alignItems: "flex-end",
justifyContent: "space-between",
width: "100%",
flexWrap: "wrap",
}}
>
<Box sx={{ maxWidth: "300px" }}>
{settings.cfg.info.site && (
<Link mb="16px" href={settings.cfg.info.site}>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: isTablet ? "200px" : "300px",
}}
>
{settings.cfg.info.site}
</Typography>
</Link>
)}
{settings.cfg.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography
sx={{
fontSize: "16px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography
sx={{
fontSize: "16px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography
sx={{
fontSize: "16px",
marginTop: "5px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber}
</Typography>
)}
<Typography
sx={{
width: "100%",
overflowWrap: "break-word",
fontSize: "12px",
maxHeight: "120px",
overflow: "auto",
marginTop: "5px",
"&::-webkit-scrollbar": { width: 0 },
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
}}
>
{settings.cfg.info.law}
</Typography>
</Box>
{show_badge && (
<Box
component={Link}
target={"_blank"}
href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
}
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
textDecoration: "none",
}}
>
<NameplateLogo
style={{
fontSize: "23px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
}}
/>
<Typography
sx={{
fontSize: "14px",
color:
settings.cfg.startpageType === "expanded"
? "#F5F7FF"
: quizThemes[settings.cfg.theme].isLight
? "#4D4D4D"
: "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
)}
</Box>
</>
}
backgroundBlock={background}
startpageType={settings.cfg.startpageType}
alignType={settings.cfg.startpage.position}
/>
</Paper>
);
}; };

2
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -16,7 +16,7 @@ import PrevButton from "./tools/PrevButton";
export default function ViewPublicationPage() { export default function ViewPublicationPage() {
const { settings, recentlyCompleted, quizId, preview } = useQuizData(); const { settings, recentlyCompleted, quizId, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep); let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
const { const {
currentQuestion, currentQuestion,

184
lib/components/ViewPublicationPage/questions/Date.tsx
View File

@ -2,8 +2,6 @@ import moment from "moment";
import { DatePicker } from "@mui/x-date-pickers"; import { DatePicker } from "@mui/x-date-pickers";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@stores/quizView";
import type { QuizQuestionDate } from "../../../model/questionTypes/date"; import type { QuizQuestionDate } from "../../../model/questionTypes/date";
import CalendarIcon from "@icons/CalendarIcon"; import CalendarIcon from "@icons/CalendarIcon";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
@ -12,105 +10,107 @@ import { sendAnswer } from "@api/quizRelase";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react"; import { useState } from "react";
import { useQuizViewStore } from "@/stores/quizView";
type DateProps = { type DateProps = {
currentQuestion: QuizQuestionDate; currentQuestion: QuizQuestionDate;
}; };
export const Date = ({ currentQuestion }: DateProps) => { export const Date = ({ currentQuestion }: DateProps) => {
const theme = useTheme(); const theme = useTheme();
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const answer = answers.find( const updateAnswer = useQuizViewStore(state => state.updateAnswer);
({ questionId }) => questionId === currentQuestion.id const answer = answers.find(
)?.answer as string; ({ questionId }) => questionId === currentQuestion.id
const currentAnswer = moment(answer) || moment(); )?.answer as string;
const [isSending, setIsSending] = useState<boolean>(false); const currentAnswer = moment(answer) || moment();
const [isSending, setIsSending] = useState<boolean>(false);
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
> >
{currentQuestion.title} {currentQuestion.title}
</Typography> </Typography>
<Box <Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
}}
>
<DatePicker
format="DD/MM/YYYY"
slots={{
openPickerIcon: () => (
<CalendarIcon
sx={{ sx={{
"& path": { stroke: theme.palette.primary.main }, display: "flex",
"& rect": { stroke: theme.palette.primary.main }, flexDirection: "column",
width: "100%",
marginTop: "20px",
}} }}
/> >
), <DatePicker
}} format="DD/MM/YYYY"
value={currentAnswer} slots={{
onChange={async (date) => { openPickerIcon: () => (
if (isSending || !date) return; <CalendarIcon
sx={{
"& path": { stroke: theme.palette.primary.main },
"& rect": { stroke: theme.palette.primary.main },
}}
/>
),
}}
value={currentAnswer}
onChange={async (date) => {
if (isSending || !date) return;
setIsSending(true); setIsSending(true);
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: moment(date).format("YYYY.MM.DD"), body: moment(date).format("YYYY.MM.DD"),
qid: quizId, qid: quizId,
preview preview
}); });
updateAnswer(currentQuestion.id, date, 0); updateAnswer(currentQuestion.id, date, 0);
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
setIsSending(false); setIsSending(false);
}} }}
slotProps={{ slotProps={{
openPickerButton: { openPickerButton: {
sx: { sx: {
p: 0, p: 0,
}, },
"data-cy": "open-datepicker", "data-cy": "open-datepicker",
}, },
layout: { layout: {
sx: { backgroundColor: theme.palette.background.default }, sx: { backgroundColor: theme.palette.background.default },
}, },
}} }}
sx={{ sx={{
"& .MuiInputBase-root": { "& .MuiInputBase-root": {
backgroundColor: settings.cfg.design backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7" ? "#F2F3F7"
: "rgba(154,154,175, 0.2)" : "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight : quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
borderRadius: "10px", borderRadius: "10px",
maxWidth: "250px", maxWidth: "250px",
pr: "30px", pr: "30px",
"& input": { "& input": {
py: "11px", py: "11px",
pl: "20px", pl: "20px",
lineHeight: "19px", lineHeight: "19px",
}, },
"& fieldset": { "& fieldset": {
borderColor: "#9A9AAF", borderColor: "#9A9AAF",
}, },
}, },
}} }}
/> />
</Box> </Box>
</Box> </Box>
); );
}; };

381
lib/components/ViewPublicationPage/questions/Emoji.tsx
View File

@ -1,14 +1,14 @@
import { import {
Box, Box,
FormControl, FormControl,
FormControlLabel, FormControlLabel,
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -25,195 +25,196 @@ polyfillCountryFlagEmojis();
import { useState } from "react"; import { useState } from "react";
type EmojiProps = { type EmojiProps = {
currentQuestion: QuizQuestionEmoji; currentQuestion: QuizQuestionEmoji;
}; };
export const Emoji = ({ currentQuestion }: EmojiProps) => { export const Emoji = ({ currentQuestion }: EmojiProps) => {
const theme = useTheme(); const theme = useTheme();
const { quizId, settings, preview } = useQuizData(); const { quizId, settings, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const { answer } = const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const [isSending, setIsSending] = useState<boolean>(false); const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const [isSending, setIsSending] = useState<boolean>(false);
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
)}
onChange={({ target }) => {
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[Number(target.value)].answer,
currentQuestion.content.variants[Number(target.value)].points || 0
);
}}
sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "20px",
}}
>
<Box
sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
>
{currentQuestion.content.variants.map((variant, index) => (
<FormControl
key={index}
disabled={isSending}
sx={{
borderRadius: "12px",
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "transparent",
"&:hover": {borderColor: theme.palette.primary.main},
}}
// value={index}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body:
currentQuestion.content.variants[index].extendedText +
" " +
currentQuestion.content.variants[index].answer,
qid: quizId,
preview
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
preview
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
> >
<Box {currentQuestion.title}
sx={{ </Typography>
display: "flex", <RadioGroup
alignItems: "center", name={currentQuestion.id}
height: "193px", value={currentQuestion.content.variants.findIndex(
background: "#ffffff", ({ id }) => answer === id
cursor: "pointer" )}
onChange={({ target }) => {
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[Number(target.value)].answer,
currentQuestion.content.variants[Number(target.value)].points || 0
);
}} }}
> sx={{
<Box
sx={{
width: "100%",
display: "flex", display: "flex",
justifyContent: "center", flexWrap: "wrap",
}} flexDirection: "row",
> justifyContent: "space-between",
{variant.extendedText && ( marginTop: "20px",
<Typography fontSize={"100px"}>
{variant.extendedText}
</Typography>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{
margin: 0,
padding: "15px",
color: theme.palette.text.primary,
display: "flex",
gap: "10px",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
"& .MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.text.primary,
}
}} }}
value={index} >
control={ <Box
<Radio sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
checkedIcon={ >
<RadioCheck color={theme.palette.primary.main} /> {currentQuestion.content.variants.map((variant, index) => (
} <FormControl
icon={<RadioIcon />} key={index}
sx={{ disabled={isSending}
position: "absolute", sx={{
top: "-162px", borderRadius: "12px",
right: "12px", border: `1px solid`,
}} borderColor:
/> answer === variant.id
} ? theme.palette.primary.main
label={ : "#9A9AAF",
<Box sx={{ display: "flex", gap: "10px" }}> overflow: "hidden",
<Typography maxWidth: "317px",
sx={{ width: "100%",
wordBreak: "break-word", height: "255px",
lineHeight: "normal", background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
}} ? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
> ? "#FFFFFF"
{variant.answer} : "transparent",
</Typography> "&:hover": { borderColor: theme.palette.primary.main },
</Box> }}
} // value={index}
/> onClick={async (event) => {
</FormControl> event.preventDefault();
))} if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body:
currentQuestion.content.variants[index].extendedText +
" " +
currentQuestion.content.variants[index].answer,
qid: quizId,
preview
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
preview
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
height: "193px",
background: "#ffffff",
cursor: "pointer"
}}
>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{variant.extendedText && (
<Typography fontSize={"100px"}>
{variant.extendedText}
</Typography>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{
margin: 0,
padding: "15px",
color: theme.palette.text.primary,
display: "flex",
gap: "10px",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
"& .MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.text.primary,
}
}}
value={index}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
sx={{
position: "absolute",
top: "-162px",
right: "12px",
}}
/>
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography
sx={{
wordBreak: "break-word",
lineHeight: "normal",
}}
>
{variant.answer}
</Typography>
</Box>
}
/>
</FormControl>
))}
</Box>
</RadioGroup>
</Box> </Box>
</RadioGroup> );
</Box>
);
}; };

9
lib/components/ViewPublicationPage/questions/File.tsx
View File

@ -7,7 +7,7 @@ import {
Typography, Typography,
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import { updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import CloseBold from "@icons/CloseBold"; import CloseBold from "@icons/CloseBold";
import UploadIcon from "@icons/UploadIcon"; import UploadIcon from "@icons/UploadIcon";
@ -29,7 +29,8 @@ type FileProps = {
export const File = ({ currentQuestion }: FileProps) => { export const File = ({ currentQuestion }: FileProps) => {
const theme = useTheme(); const theme = useTheme();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizData();
const [modalWarningType, setModalWarningType] = useState<ModalWarningType>(null); const [modalWarningType, setModalWarningType] = useState<ModalWarningType>(null);
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
@ -43,8 +44,8 @@ export const File = ({ currentQuestion }: FileProps) => {
const uploadFile = async (file: File | undefined) => { const uploadFile = async (file: File | undefined) => {
if (isSending) return; if (isSending) return;
if (!file) return; if (!file) return;
console.log(file.size) console.log(file.size);
console.log(MAX_FILE_SIZE) console.log(MAX_FILE_SIZE);
if (file.size > MAX_FILE_SIZE) return setModalWarningType("errorSize"); if (file.size > MAX_FILE_SIZE) return setModalWarningType("errorSize");
const isFileTypeAccepted = ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].some( const isFileTypeAccepted = ACCEPT_SEND_FILE_TYPES_MAP[currentQuestion.content.type].some(

336
lib/components/ViewPublicationPage/questions/Images.tsx
View File

@ -1,13 +1,13 @@
import { import {
Box, Box,
FormControlLabel, FormControlLabel,
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -20,174 +20,176 @@ import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
type ImagesProps = { type ImagesProps = {
currentQuestion: QuizQuestionImages; currentQuestion: QuizQuestionImages;
}; };
export const Images = ({ currentQuestion }: ImagesProps) => { export const Images = ({ currentQuestion }: ImagesProps) => {
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const theme = useTheme(); const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
const answer = answers.find( const updateAnswer = useQuizViewStore(state => state.updateAnswer);
({ questionId }) => questionId === currentQuestion.id const theme = useTheme();
)?.answer; const answer = answers.find(
const { settings } = useQuizData(); ({ questionId }) => questionId === currentQuestion.id
const [isSending, setIsSending] = useState<boolean>(false); )?.answer;
const isTablet = useRootContainerSize() < 1000; const { settings } = useQuizData();
const isMobile = useRootContainerSize() < 500; const [isSending, setIsSending] = useState<boolean>(false);
const isTablet = useRootContainerSize() < 1000;
const isMobile = useRootContainerSize() < 500;
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
)}
sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "20px",
}}
>
<Box
sx={{
display: "grid",
gap: "15px",
gridTemplateColumns: isTablet
? isMobile
? "repeat(1, 1fr)"
: "repeat(2, 1fr)"
: "repeat(3, 1fr)",
width: "100%",
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<Box
key={index}
sx={{
cursor: "pointer",
borderRadius: "12px",
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
"&:hover": {borderColor: theme.palette.primary.main},
background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "transparent",
}}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: quizId,
preview
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
preview
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
> >
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}> {currentQuestion.title}
<Box sx={{ width: "100%", height: "300px" }}> </Typography>
{variant.extendedText && ( <RadioGroup
<img name={currentQuestion.id}
src={variant.extendedText} value={currentQuestion.content.variants.findIndex(
alt="" ({ id }) => answer === id
style={{ )}
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "12px 12px 0 0"
}}
/>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{ sx={{
textAlign: "center", display: "flex",
color: theme.palette.text.primary, flexWrap: "wrap",
marginTop: "10px", flexDirection: "row",
marginLeft: 0, justifyContent: "space-between",
padding: "10px", marginTop: "20px",
display: "flex",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
justifyContent: "center",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
}} }}
value={index} >
control={ <Box
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
sx={{ sx={{
position: "absolute", display: "grid",
top: "-297px", gap: "15px",
right: 0 gridTemplateColumns: isTablet
? isMobile
? "repeat(1, 1fr)"
: "repeat(2, 1fr)"
: "repeat(3, 1fr)",
width: "100%",
}} }}
/> >
} {currentQuestion.content.variants.map((variant, index) => (
label={variant.answer} <Box
/> key={index}
</Box> sx={{
))} cursor: "pointer",
borderRadius: "12px",
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
"&:hover": { borderColor: theme.palette.primary.main },
background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "rgba(255,255,255, 0.3)" : settings.cfg.design && quizThemes[settings.cfg.theme].isLight || quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "transparent",
}}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: quizId,
preview
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
preview
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
setIsSending(false);
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ width: "100%", height: "300px" }}>
{variant.extendedText && (
<img
src={variant.extendedText}
alt=""
style={{
display: "block",
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "12px 12px 0 0"
}}
/>
)}
</Box>
</Box>
<FormControlLabel
key={variant.id}
sx={{
textAlign: "center",
color: theme.palette.text.primary,
marginTop: "10px",
marginLeft: 0,
padding: "10px",
display: "flex",
alignItems:
variant.answer.length <= 60 ? "center" : "flex-start",
justifyContent: "center",
position: "relative",
height: "80px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
}}
value={index}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
sx={{
position: "absolute",
top: "-297px",
right: 0
}}
/>
}
label={variant.answer}
/>
</Box>
))}
</Box>
</RadioGroup>
</Box> </Box>
</RadioGroup> );
</Box>
);
}; };

808
lib/components/ViewPublicationPage/questions/Number.tsx
View File

@ -5,7 +5,7 @@ import { useDebouncedCallback } from "use-debounce";
import { CustomSlider } from "@ui_kit/CustomSlider"; import { CustomSlider } from "@ui_kit/CustomSlider";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
@ -18,458 +18,460 @@ import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import type { ChangeEvent, SyntheticEvent } from "react"; import type { ChangeEvent, SyntheticEvent } from "react";
type NumberProps = { type NumberProps = {
currentQuestion: QuizQuestionNumber; currentQuestion: QuizQuestionNumber;
}; };
export const Number = ({ currentQuestion }: NumberProps) => { export const Number = ({ currentQuestion }: NumberProps) => {
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizData();
const [inputValue, setInputValue] = useState<string>("0"); const [inputValue, setInputValue] = useState<string>("0");
const [minRange, setMinRange] = useState<string>("0"); const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100000000000"); const [maxRange, setMaxRange] = useState<string>("100000000000");
const [reversedInputValue, setReversedInputValue] = useState<string>("0"); const [reversedInputValue, setReversedInputValue] = useState<string>("0");
const [reversedMinRange, setReversedMinRange] = useState<string>("0"); const [reversedMinRange, setReversedMinRange] = useState<string>("0");
const [reversedMaxRange, setReversedMaxRange] = const [reversedMaxRange, setReversedMaxRange] =
useState<string>("100000000000"); useState<string>("100000000000");
const theme = useTheme(); const theme = useTheme();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const [isSending, setIsSending] = useState<boolean>(false); const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const [isSending, setIsSending] = useState<boolean>(false);
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const [minBorder, maxBorder] = currentQuestion.content.range const [minBorder, maxBorder] = currentQuestion.content.range
.split("—") .split("—")
.map(window.Number); .map(window.Number);
const min = minBorder < maxBorder ? minBorder : maxBorder; const min = minBorder < maxBorder ? minBorder : maxBorder;
const max = minBorder < maxBorder ? maxBorder : minBorder; const max = minBorder < maxBorder ? maxBorder : minBorder;
const reversed = minBorder > maxBorder; const reversed = minBorder > maxBorder;
useEffect(() => { useEffect(() => {
console.log("reversed:", reversed); console.log("reversed:", reversed);
}, [reversed]); }, [reversed]);
const sendAnswerToBackend = async (value: string, noUpdate = false) => { const sendAnswerToBackend = async (value: string, noUpdate = false) => {
setIsSending(true); setIsSending(true);
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: value, body: value,
qid: quizId, qid: quizId,
preview preview
}); });
if (!noUpdate) { if (!noUpdate) {
updateAnswer(currentQuestion.id, value, 0); updateAnswer(currentQuestion.id, value, 0);
} }
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
}
setIsSending(false);
};
const updateValueDebounced = useDebouncedCallback(async (value: string) => {
if (reversed) {
const newValue =
window.Number(value) < window.Number(min)
? String(min)
: window.Number(value) > window.Number(max)
? String(max)
: value;
setReversedInputValue(newValue);
updateAnswer(
currentQuestion.id,
String(max + min - window.Number(newValue)),
0
);
await sendAnswerToBackend(String(window.Number(newValue)), true);
return;
}
const newValue =
window.Number(value) < window.Number(minRange)
? minRange
: window.Number(value) > window.Number(maxRange)
? maxRange
: value;
setInputValue(newValue);
await sendAnswerToBackend(newValue);
}, 1000);
const updateMinRangeDebounced = useDebouncedCallback(
async (value: string, crowded = false) => {
if (reversed) {
const newMinRange = crowded
? window.Number(value.split("—")[1])
: max + min - window.Number(value.split("—")[0]) < min
? min
: max + min - window.Number(value.split("—")[0]);
const newMinValue =
window.Number(value.split("—")[0]) > max
? String(max)
: value.split("—")[0];
setReversedMinRange(
crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
);
updateAnswer(
currentQuestion.id,
`${newMinRange}—${value.split("—")[1]}`,
0
);
await sendAnswerToBackend(
`${newMinValue}—${value.split("—")[1]}`,
true
);
return;
}
const newMinValue = crowded
? maxRange
: window.Number(value.split("—")[0]) < min
? String(min)
: value.split("—")[0];
setMinRange(newMinValue);
await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
},
1000
);
const updateMaxRangeDebounced = useDebouncedCallback(
async (value: string, crowded = false) => {
if (reversed) {
const newMaxRange = crowded
? window.Number(value.split("—")[1])
: max + min - window.Number(value.split("—")[1]) > max
? max
: max + min - window.Number(value.split("—")[1]);
const newMaxValue =
window.Number(value.split("—")[1]) < min
? String(min)
: value.split("—")[1];
setReversedMaxRange(
crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
);
updateAnswer(
currentQuestion.id,
`${value.split("—")[0]}—${newMaxRange}`,
0
);
await sendAnswerToBackend(
`${value.split("—")[0]}—${newMaxValue}`,
true
);
return;
}
const newMaxValue = crowded
? minRange
: window.Number(value.split("—")[1]) > max
? String(max)
: value.split("—")[1];
setMaxRange(newMaxValue);
await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
},
1000
);
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id
)?.answer as string;
const sliderValue =
answer ||
(reversed
? max + min - currentQuestion.content.start + "—" + max
: currentQuestion.content.start + "—" + max);
useEffect(() => {
if (answer) {
if (answer.includes("—")) {
if (reversed) {
setReversedMinRange(
String(max + min - window.Number(answer.split("—")[0]))
);
setReversedMaxRange(
String(max + min - window.Number(answer.split("—")[1]))
);
} else {
setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);
} }
} else {
setIsSending(false);
};
const updateValueDebounced = useDebouncedCallback(async (value: string) => {
if (reversed) { if (reversed) {
setReversedInputValue(String(max + min - window.Number(answer))); const newValue =
} else { window.Number(value) < window.Number(min)
setInputValue(answer); ? String(min)
: window.Number(value) > window.Number(max)
? String(max)
: value;
setReversedInputValue(newValue);
updateAnswer(
currentQuestion.id,
String(max + min - window.Number(newValue)),
0
);
await sendAnswerToBackend(String(window.Number(newValue)), true);
return;
} }
}
}
if (!answer) { const newValue =
setMinRange(String(currentQuestion.content.start)); window.Number(value) < window.Number(minRange)
setMaxRange(String(max)); ? minRange
: window.Number(value) > window.Number(maxRange)
? maxRange
: value;
if (currentQuestion.content.chooseRange) { setInputValue(newValue);
setReversedMinRange(String(currentQuestion.content.start)); await sendAnswerToBackend(newValue);
setReversedMaxRange(String(min)); }, 1000);
} const updateMinRangeDebounced = useDebouncedCallback(
async (value: string, crowded = false) => {
if (reversed) {
const newMinRange = crowded
? window.Number(value.split("—")[1])
: max + min - window.Number(value.split("—")[0]) < min
? min
: max + min - window.Number(value.split("—")[0]);
setReversedInputValue(String(currentQuestion.content.start)); const newMinValue =
setInputValue(String(currentQuestion.content.start)); window.Number(value.split("—")[0]) > max
} ? String(max)
}, []); : value.split("—")[0];
const onSliderChange = (_: Event, value: number | number[]) => { setReversedMinRange(
const range = Array.isArray(value) crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
? `${value[0]}—${value[1]}` );
: String(value); updateAnswer(
currentQuestion.id,
`${newMinRange}—${value.split("—")[1]}`,
0
);
await sendAnswerToBackend(
`${newMinValue}—${value.split("—")[1]}`,
true
);
updateAnswer(currentQuestion.id, range, 0); return;
}; }
const onChangeCommitted = async ( const newMinValue = crowded
_: Event | SyntheticEvent<Element, Event>, ? maxRange
value: number | number[] : window.Number(value.split("—")[0]) < min
) => { ? String(min)
if (currentQuestion.content.chooseRange && Array.isArray(value)) { : value.split("—")[0];
if (reversed) {
const newMinReversedValue = String(max + min - value[0]);
const newMaxReversedValue = String(max + min - value[1]);
setMinRange(String(value[0])); setMinRange(newMinValue);
setMaxRange(String(value[1])); await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
setReversedMinRange(newMinReversedValue); },
setReversedMaxRange(newMaxReversedValue); 1000
await sendAnswerToBackend( );
`${newMinReversedValue}—${newMaxReversedValue}`, const updateMaxRangeDebounced = useDebouncedCallback(
true async (value: string, crowded = false) => {
); if (reversed) {
const newMaxRange = crowded
? window.Number(value.split("—")[1])
: max + min - window.Number(value.split("—")[1]) > max
? max
: max + min - window.Number(value.split("—")[1]);
return; const newMaxValue =
} window.Number(value.split("—")[1]) < min
? String(min)
: value.split("—")[1];
setMinRange(String(value[0])); setReversedMaxRange(
setMaxRange(String(value[1])); crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
await sendAnswerToBackend(`${value[0]}—${value[1]}`); );
updateAnswer(
currentQuestion.id,
`${value.split("—")[0]}—${newMaxRange}`,
0
);
await sendAnswerToBackend(
`${value.split("—")[0]}—${newMaxValue}`,
true
);
return; return;
} }
if (reversed) { const newMaxValue = crowded
setReversedInputValue(String(max + min - window.Number(value))); ? minRange
} else { : window.Number(value.split("—")[1]) > max
setInputValue(String(value)); ? String(max)
} : value.split("—")[1];
await sendAnswerToBackend(String(value)); setMaxRange(newMaxValue);
}; await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
},
1000
);
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id
)?.answer as string;
const changeValueLabelFormat = (value: number) => { const sliderValue =
if (!reversed) { answer ||
return value; (reversed
} ? max + min - currentQuestion.content.start + "—" + max
: currentQuestion.content.start + "—" + max);
const [minSliderBorder, maxSliderBorder] = sliderValue useEffect(() => {
.split("—") if (answer) {
.map(window.Number); if (answer.includes("—")) {
if (reversed) {
setReversedMinRange(
String(max + min - window.Number(answer.split("—")[0]))
);
setReversedMaxRange(
String(max + min - window.Number(answer.split("—")[1]))
);
} else {
setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);
}
} else {
if (reversed) {
setReversedInputValue(String(max + min - window.Number(answer)));
} else {
setInputValue(answer);
}
}
}
if (value === minSliderBorder) { if (!answer) {
return max + min - minSliderBorder; setMinRange(String(currentQuestion.content.start));
} setMaxRange(String(max));
return max + min - maxSliderBorder; if (currentQuestion.content.chooseRange) {
}; setReversedMinRange(String(currentQuestion.content.start));
setReversedMaxRange(String(min));
}
const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => { setReversedInputValue(String(currentQuestion.content.start));
const value = target.value.replace(/\D/g, ""); setInputValue(String(currentQuestion.content.start));
}
}, []);
if (reversed) { const onSliderChange = (_: Event, value: number | number[]) => {
setReversedInputValue(value); const range = Array.isArray(value)
} else { ? `${value[0]}—${value[1]}`
setInputValue(value); : String(value);
}
updateValueDebounced(value); updateAnswer(currentQuestion.id, range, 0);
}; };
const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => { const onChangeCommitted = async (
const newValue = target.value.replace(/\D/g, ""); _: Event | SyntheticEvent<Element, Event>,
value: number | number[]
) => {
if (currentQuestion.content.chooseRange && Array.isArray(value)) {
if (reversed) {
const newMinReversedValue = String(max + min - value[0]);
const newMaxReversedValue = String(max + min - value[1]);
if (reversed) { setMinRange(String(value[0]));
setReversedMinRange(newValue); setMaxRange(String(value[1]));
setReversedMinRange(newMinReversedValue);
setReversedMaxRange(newMaxReversedValue);
await sendAnswerToBackend(
`${newMinReversedValue}—${newMaxReversedValue}`,
true
);
if (window.Number(newValue) <= window.Number(reversedMaxRange)) { return;
const value = max + min - window.Number(reversedMaxRange); }
updateMinRangeDebounced(`${value}—${value}`, true);
return; setMinRange(String(value[0]));
} setMaxRange(String(value[1]));
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
updateMinRangeDebounced( return;
`${newValue}—${max + min - window.Number(reversedMaxRange)}` }
);
return; if (reversed) {
} setReversedInputValue(String(max + min - window.Number(value)));
} else {
setInputValue(String(value));
}
setMinRange(newValue); await sendAnswerToBackend(String(value));
};
if (window.Number(newValue) >= window.Number(maxRange)) { const changeValueLabelFormat = (value: number) => {
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); if (!reversed) {
return value;
}
return; const [minSliderBorder, maxSliderBorder] = sliderValue
} .split("—")
.map(window.Number);
updateMinRangeDebounced(`${newValue}—${maxRange}`); if (value === minSliderBorder) {
}; return max + min - minSliderBorder;
}
const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => { return max + min - maxSliderBorder;
const newValue = target.value.replace(/\D/g, ""); };
if (reversed) { const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
setReversedMaxRange(newValue); const value = target.value.replace(/\D/g, "");
if (window.Number(newValue) >= window.Number(reversedMinRange)) { if (reversed) {
const value = max + min - window.Number(reversedMinRange); setReversedInputValue(value);
updateMaxRangeDebounced(`${value}—${value}`, true); } else {
setInputValue(value);
}
return; updateValueDebounced(value);
} };
updateMaxRangeDebounced( const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
`${max + min - window.Number(reversedMinRange)}—${newValue}` const newValue = target.value.replace(/\D/g, "");
);
return; if (reversed) {
} setReversedMinRange(newValue);
setMaxRange(newValue); if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
const value = max + min - window.Number(reversedMaxRange);
updateMinRangeDebounced(`${value}—${value}`, true);
if (window.Number(newValue) <= window.Number(minRange)) { return;
updateMaxRangeDebounced(`${minRange}—${minRange}`, true); }
return; updateMinRangeDebounced(
} `${newValue}—${max + min - window.Number(reversedMaxRange)}`
);
updateMaxRangeDebounced(`${minRange}—${newValue}`); return;
}; }
return ( setMinRange(newValue);
<Box>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
padding: "0 30px",
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={onSliderChange}
onChangeCommitted={onChangeCommitted}
valueLabelFormat={changeValueLabelFormat}
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,
borderRadius: "8px",
minWidth: "60px",
height: "36px"
},
}}
/>
{!currentQuestion.content.chooseRange && ( if (window.Number(newValue) >= window.Number(maxRange)) {
<CustomTextField updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
placeholder="0"
value={reversed ? reversedInputValue : inputValue}
onChange={onInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
borderColor: "#9A9AAF"
},
}}
/>
)}
{currentQuestion.content.chooseRange && ( return;
<Box }
sx={{
display: "flex", updateMinRangeDebounced(`${newValue}—${maxRange}`);
gap: "15px", };
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" }, const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
}} const newValue = target.value.replace(/\D/g, "");
>
<CustomTextField if (reversed) {
placeholder="0" setReversedMaxRange(newValue);
value={reversed ? String(reversedMinRange) : minRange}
onChange={onMinInputChange} if (window.Number(newValue) >= window.Number(reversedMinRange)) {
sx={{ const value = max + min - window.Number(reversedMinRange);
maxWidth: "80px", updateMaxRangeDebounced(`${value}—${value}`, true);
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" }, return;
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 }, }
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: quizThemes[settings.cfg.theme].isLight updateMaxRangeDebounced(
? "white" `${max + min - window.Number(reversedMinRange)}—${newValue}`
: theme.palette.background.default, );
borderColor: "#9A9AAF"
}, return;
}} }
/>
<Typography color={theme.palette.text.primary}>до</Typography> setMaxRange(newValue);
<CustomTextField
placeholder="0" if (window.Number(newValue) <= window.Number(minRange)) {
value={reversed ? String(reversedMaxRange) : maxRange} updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
onChange={onMaxInputChange}
sx={{ return;
maxWidth: "80px", }
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 }, updateMaxRangeDebounced(`${minRange}—${newValue}`);
"& .MuiOutlinedInput-notchedOutline": { };
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white" return (
: theme.palette.background.default, <Box>
borderColor: "#9A9AAF" <Typography
}, variant="h5"
}} color={theme.palette.text.primary}
/> sx={{ wordBreak: "break-word" }}
</Box> >
)} {currentQuestion.title}
</Box> </Typography>
</Box> <Box
); sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
padding: "0 30px",
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={onSliderChange}
onChangeCommitted={onChangeCommitted}
valueLabelFormat={changeValueLabelFormat}
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,
borderRadius: "8px",
minWidth: "60px",
height: "36px"
},
}}
/>
{!currentQuestion.content.chooseRange && (
<CustomTextField
placeholder="0"
value={reversed ? reversedInputValue : inputValue}
onChange={onInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
borderColor: "#9A9AAF"
},
}}
/>
)}
{currentQuestion.content.chooseRange && (
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={reversed ? String(reversedMinRange) : minRange}
onChange={onMinInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
borderColor: "#9A9AAF"
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={reversed ? String(reversedMaxRange) : maxRange}
onChange={onMaxInputChange}
sx={{
maxWidth: "80px",
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
borderColor: "#9A9AAF"
},
}}
/>
</Box>
)}
</Box>
</Box>
);
}; };

7
lib/components/ViewPublicationPage/questions/Rating.tsx
View File

@ -5,7 +5,7 @@ import {
useTheme useTheme
} from "@mui/material"; } from "@mui/material";
import { updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import FlagIcon from "@icons/questionsPage/FlagIcon"; import FlagIcon from "@icons/questionsPage/FlagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini"; import StarIconMini from "@icons/questionsPage/StarIconMini";
@ -59,7 +59,8 @@ const buttonRatingForm = [
export const Rating = ({ currentQuestion }: RatingProps) => { export const Rating = ({ currentQuestion }: RatingProps) => {
const { quizId, preview } = useQuizData(); const { quizId, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 750; const isTablet = useRootContainerSize() < 750;
@ -117,7 +118,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
height: "50px", height: "50px",
gap: isMobile ? undefined : "15px", gap: isMobile ? undefined : "15px",
opacity: "1!important", opacity: "1!important",
"& .MuiRating-root.Mui-disabled": {opacity: "1!important"} "& .MuiRating-root.Mui-disabled": { opacity: "1!important" }
}} }}
max={currentQuestion.content.steps} max={currentQuestion.content.steps}
icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)} icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)}

154
lib/components/ViewPublicationPage/questions/Select.tsx
View File

@ -2,7 +2,7 @@ import { Box, Typography, useTheme } from "@mui/material";
import { Select as SelectComponent } from "../tools//Select"; import { Select as SelectComponent } from "../tools//Select";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
@ -12,86 +12,88 @@ import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import { quizThemes } from "@utils/themes/Publication/themePublication";
type SelectProps = { type SelectProps = {
currentQuestion: QuizQuestionSelect; currentQuestion: QuizQuestionSelect;
}; };
export const Select = ({ currentQuestion }: SelectProps) => { export const Select = ({ currentQuestion }: SelectProps) => {
const theme = useTheme(); const theme = useTheme();
const { quizId, settings, preview } = useQuizData(); const { quizId, settings, preview } = useQuizData();
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const { answer } = const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const { answer } =
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
> >
{currentQuestion.title} {currentQuestion.title}
</Typography> </Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
width: "100%", width: "100%",
marginTop: "20px", marginTop: "20px",
}} }}
> >
<SelectComponent <SelectComponent
disabled={isSending} disabled={isSending}
placeholder={currentQuestion.content.default} placeholder={currentQuestion.content.default}
activeItemIndex={answer ? Number(answer) : -1} activeItemIndex={answer ? Number(answer) : -1}
items={currentQuestion.content.variants.map(({ answer }) => answer)} items={currentQuestion.content.variants.map(({ answer }) => answer)}
colorMain={theme.palette.primary.main} colorMain={theme.palette.primary.main}
sx={{ sx={{
"& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 }, "& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
background: settings.cfg.design background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7" ? "#F2F3F7"
: "rgba(255,255,255, 0.3)" : "rgba(255,255,255, 0.3)"
: "transparent", : "transparent",
}, },
}} }}
onChange={async (_, value) => { onChange={async (_, value) => {
setIsSending(true); setIsSending(true);
if (value < 0) { if (value < 0) {
deleteAnswer(currentQuestion.id); deleteAnswer(currentQuestion.id);
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: "", body: "",
qid: quizId, qid: quizId,
preview preview
}); });
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
return setIsSending(false); return setIsSending(false);
} }
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: String( body: String(
currentQuestion.content.variants[Number(value)].answer currentQuestion.content.variants[Number(value)].answer
), ),
qid: quizId, qid: quizId,
preview preview
}); });
updateAnswer(currentQuestion.id, String(value), 0); updateAnswer(currentQuestion.id, String(value), 0);
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
setIsSending(false); setIsSending(false);
}} }}
/> />
</Box> </Box>
</Box> </Box>
); );
}; };

486
lib/components/ViewPublicationPage/questions/Text.tsx
View File

@ -1,14 +1,14 @@
import { import {
Box, Box,
TextField as MuiTextField, TextField as MuiTextField,
TextFieldProps, TextFieldProps,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase"; import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
@ -22,265 +22,265 @@ import type { QuizQuestionText } from "../../../model/questionTypes/text";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590) const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
type TextProps = { type TextProps = {
currentQuestion: QuizQuestionText; currentQuestion: QuizQuestionText;
stepNumber: number | null; stepNumber: number | null;
}; };
const Orientation = [ const Orientation = [
{ horizontal: true }, { horizontal: true },
{ horizontal: false }, { horizontal: false },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: false }, { horizontal: false },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: false }, { horizontal: false },
{ horizontal: true }, { horizontal: true },
{ horizontal: false }, { horizontal: false },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: false }, { horizontal: false },
{ horizontal: false }, { horizontal: false },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
{ horizontal: true }, { horizontal: true },
]; ];
export const Text = ({ currentQuestion, stepNumber }: TextProps) => { export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
const theme = useTheme(); const { settings, preview } = useQuizData();
const { settings, preview } = useQuizData(); const spec = settings.cfg.spec;
const spec = settings.cfg.spec; const { quizId } = useQuizData();
const { quizId } = useQuizData(); const answers = useQuizViewStore(state => state.answers);
const { answers } = useQuizViewStore(); const { answer } =
const isMobile = useRootContainerSize() < 650; answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const { answer } = const [isSending, setIsSending] = useState<boolean>(false);
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const [isSending, setIsSending] = useState<boolean>(false);
const inputHC = useDebouncedCallback(async (text) => { const inputHC = useDebouncedCallback(async (text) => {
setIsSending(true); setIsSending(true);
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: text, body: text,
qid: quizId, qid: quizId,
preview preview
}); });
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
}
setIsSending(false);
}, 400);
useEffect(
() => () => {
inputHC.flush();
},
[inputHC]
);
switch (spec) {
case true:
return (
<TextSpecial
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
stepNumber={stepNumber}
/>
);
case undefined:
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
default:
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
} }
setIsSending(false);
}, 400);
useEffect(
() => () => {
inputHC.flush();
},
[inputHC]
);
switch (spec) {
case true:
return (
<TextSpecial
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
stepNumber={stepNumber}
/>
);
case undefined:
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
default:
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
}
}; };
interface Props { interface Props {
currentQuestion: QuizQuestionText; currentQuestion: QuizQuestionText;
answer: any; answer: any;
inputHC: (a: string) => void; inputHC: (a: string) => void;
stepNumber?: number | null; stepNumber?: number | null;
} }
const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => { const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const theme = useTheme(); const theme = useTheme();
const { settings } = useQuizData(); const { settings } = useQuizData();
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
return ( return (
<Box> <Box>
<Typography <Typography
variant="h5" variant="h5"
color={theme.palette.text.primary} color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }} sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
width: "100%",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
alignItems: "center",
}}
>
<CustomTextField
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}}
sx={{
"& .MuiOutlinedInput-root": {
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(255,255,255, 0.3)"
: "transparent",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF"
},
"&:focus-visible": { borderColor: theme.palette.primary.main },
}}
/>
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box
sx={{
maxWidth: "400px",
width: "100%",
height: "300px",
margin: "15px",
}}
> >
<img {currentQuestion.title}
key={currentQuestion.id} </Typography>
src={currentQuestion.content.back} <Box
style={{ width: "100%", height: "100%", objectFit: "cover" }} sx={{
alt="" display: "flex",
/> width: "100%",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
alignItems: "center",
}}
>
<CustomTextField
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}}
sx={{
"& .MuiOutlinedInput-root": {
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(255,255,255, 0.3)"
: "transparent",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF"
},
"&:focus-visible": { borderColor: theme.palette.primary.main },
}}
/>
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box
sx={{
maxWidth: "400px",
width: "100%",
height: "300px",
margin: "15px",
}}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
</Box> </Box>
)} </Box>
</Box> );
</Box>
);
}; };
const TextSpecial = ({ const TextSpecial = ({
currentQuestion, currentQuestion,
answer, answer,
inputHC, inputHC,
stepNumber, stepNumber,
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal; const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal;
const { settings } = useQuizData(); const { settings } = useQuizData();
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
return ( return (
<Box <Box
sx={{
display: "flex",
flexDirection: isMobile ? "column" : undefined,
alignItems: isMobile ? "center" : undefined,
}}
>
<Box
sx={{
display: "flex",
width: "100%",
marginTop: "20px",
flexDirection: "column",
alignItems: "center",
gap: "20px",
}}
>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
{isHorizontal &&
currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
{
<TextField
autoFocus={true}
multiline
maxRows={4}
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}}
inputProps={{
maxLength: 400,
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
sx={{ sx={{
width: "100%", display: "flex",
"& .MuiOutlinedInput-root": { flexDirection: isMobile ? "column" : undefined,
backgroundColor: settings.cfg.design alignItems: isMobile ? "center" : undefined,
? "rgba(154,154,175, 0.2)"
: "#FFFFFF",
},
"&:focus-visible": {
borderColor: theme.palette.primary.main,
},
}} }}
/> >
} <Box
</Box> sx={{
{!isHorizontal && display: "flex",
currentQuestion.content.back && width: "100%",
currentQuestion.content.back !== " " && ( marginTop: "20px",
<Box sx={{ margin: "15px", width: "40vw" }}> flexDirection: "column",
<img alignItems: "center",
key={currentQuestion.id} gap: "20px",
src={currentQuestion.content.back} }}
style={{ width: "100%", height: "100%", objectFit: "cover" }} >
alt="" <Typography
/> variant="h5"
</Box> color={theme.palette.text.primary}
)} sx={{ wordBreak: "break-word" }}
</Box> >
); {currentQuestion.title}
</Typography>
{isHorizontal &&
currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
{
<TextField
autoFocus={true}
multiline
maxRows={4}
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}}
inputProps={{
maxLength: 400,
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
sx={{
width: "100%",
"& .MuiOutlinedInput-root": {
backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: "#FFFFFF",
},
"&:focus-visible": {
borderColor: theme.palette.primary.main,
},
}}
/>
}
</Box>
{!isHorizontal &&
currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ margin: "15px", width: "40vw" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
</Box>
);
}; };

512
lib/components/ViewPublicationPage/questions/Variant.tsx
View File

@ -1,22 +1,19 @@
import { import {
Box, Box,
Checkbox, Checkbox,
FormControlLabel, FormControlLabel,
FormGroup, FormGroup,
TextField as MuiTextField, TextField as MuiTextField,
Radio, Radio,
RadioGroup, RadioGroup,
TextFieldProps, TextFieldProps,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { import {
deleteAnswer, useQuizViewStore,
updateAnswer,
updateOwnVariant,
useQuizViewStore,
} from "@stores/quizView"; } from "@stores/quizView";
import { CheckboxIcon } from "@icons/Checkbox"; import { CheckboxIcon } from "@icons/Checkbox";
@ -36,270 +33,275 @@ import moment from "moment";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; const TextField = MuiTextField as unknown as FC<TextFieldProps>;
type VariantProps = { type VariantProps = {
currentQuestion: QuizQuestionVariant; currentQuestion: QuizQuestionVariant;
}; };
export const Variant = ({ currentQuestion }: VariantProps) => { export const Variant = ({ currentQuestion }: VariantProps) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const { answers, ownVariants } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const { answer } = const ownVariants = useQuizViewStore(state => state.ownVariants);
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const updateOwnVariant = useQuizViewStore(state => state.updateOwnVariant);
const ownVariant = ownVariants.find(
(variant) => variant.id === currentQuestion.id
);
const [isSending, setIsSending] = useState(false); const { answer } =
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const ownVariant = ownVariants.find(
(variant) => variant.id === currentQuestion.id
);
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup; const [isSending, setIsSending] = useState(false);
useEffect(() => { const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
if (!ownVariant) {
updateOwnVariant(currentQuestion.id, "");
}
}, []);
if (moment.isMoment(answer)) useEffect(() => {
throw new Error("Answer is Moment in Variant question"); if (!ownVariant) {
updateOwnVariant(currentQuestion.id, "");
}
}, []);
return ( if (moment.isMoment(answer))
<Box> throw new Error("Answer is Moment in Variant question");
<Typography
variant="h5" return (
color={theme.palette.text.primary} <Box>
sx={{ wordBreak: "break-word" }} <Typography
> variant="h5"
{currentQuestion.title} color={theme.palette.text.primary}
</Typography> sx={{ wordBreak: "break-word" }}
<Box >
sx={{ {currentQuestion.title}
display: "flex", </Typography>
gap: "20px", <Box
flexDirection: isMobile ? "column-reverse" : undefined, sx={{
alignItems: isMobile ? "center" : undefined, display: "flex",
}} gap: "20px",
> flexDirection: isMobile ? "column-reverse" : undefined,
<Group alignItems: isMobile ? "center" : undefined,
name={currentQuestion.id.toString()} }}
value={currentQuestion.content.variants.findIndex( >
({ id }) => answer === id <Group
)} name={currentQuestion.id.toString()}
sx={{ value={currentQuestion.content.variants.findIndex(
display: "flex", ({ id }) => answer === id
flexWrap: "wrap", )}
flexDirection: "row", sx={{
justifyContent: "space-between", display: "flex",
flexBasis: "100%", flexWrap: "wrap",
marginTop: "20px", flexDirection: "row",
width: isMobile ? "100%" : undefined, justifyContent: "space-between",
}} flexBasis: "100%",
> marginTop: "20px",
<Box width: isMobile ? "100%" : undefined,
sx={{ }}
display: "flex", >
flexDirection: "row", <Box
flexWrap: "wrap", sx={{
width: "100%", display: "flex",
gap: "20px", flexDirection: "row",
}} flexWrap: "wrap",
> width: "100%",
{currentQuestion.content.variants.map((variant, index) => ( gap: "20px",
<VariantItem }}
key={variant.id} >
currentQuestion={currentQuestion} {currentQuestion.content.variants.map((variant, index) => (
variant={variant} <VariantItem
answer={answer} key={variant.id}
index={index} currentQuestion={currentQuestion}
isSending={isSending} variant={variant}
setIsSending={setIsSending} answer={answer}
/> index={index}
))} isSending={isSending}
{currentQuestion.content.own && ownVariant && ( setIsSending={setIsSending}
<VariantItem />
own ))}
currentQuestion={currentQuestion} {currentQuestion.content.own && ownVariant && (
variant={ownVariant.variant} <VariantItem
answer={answer} own
index={currentQuestion.content.variants.length + 2} currentQuestion={currentQuestion}
isSending={isSending} variant={ownVariant.variant}
setIsSending={setIsSending} answer={answer}
/> index={currentQuestion.content.variants.length + 2}
)} isSending={isSending}
</Box> setIsSending={setIsSending}
</Group> />
{currentQuestion.content.back && )}
currentQuestion.content.back !== " " && ( </Box>
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}> </Group>
<img {currentQuestion.content.back &&
key={currentQuestion.id} currentQuestion.content.back !== " " && (
src={currentQuestion.content.back} <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
style={{ width: "100%", height: "100%", objectFit: "cover" }} <img
alt="" key={currentQuestion.id}
/> src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
</Box> </Box>
)} </Box>
</Box> );
</Box>
);
}; };
const VariantItem = ({ const VariantItem = ({
currentQuestion, currentQuestion,
variant, variant,
answer, answer,
index, index,
own = false, own = false,
isSending, isSending,
setIsSending, setIsSending,
}: { }: {
currentQuestion: QuizQuestionVariant; currentQuestion: QuizQuestionVariant;
variant: QuestionVariant; variant: QuestionVariant;
answer: string | string[] | undefined; answer: string | string[] | undefined;
index: number; index: number;
own?: boolean; own?: boolean;
isSending: boolean; isSending: boolean;
setIsSending: (a: boolean) => void; setIsSending: (a: boolean) => void;
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizData();
const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
return ( return (
<FormControlLabel <FormControlLabel
key={variant.id} key={variant.id}
disabled={isSending} disabled={isSending}
sx={{ sx={{
margin: "0", margin: "0",
borderRadius: "12px", borderRadius: "12px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
padding: "15px", padding: "15px",
border: `1px solid`, border: `1px solid`,
borderColor: borderColor:
answer === variant.id ? theme.palette.primary.main : "#9A9AAF", answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
backgroundColor: settings.cfg.design backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF" ? "#FFFFFF"
: "rgba(255,255,255, 0.3)" : "rgba(255,255,255, 0.3)"
: quizThemes[settings.cfg.theme].isLight : quizThemes[settings.cfg.theme].isLight
? "white" ? "white"
: theme.palette.background.default, : theme.palette.background.default,
display: "flex", display: "flex",
maxWidth: "685px", maxWidth: "685px",
maxHeight: "85px", maxHeight: "85px",
justifyContent: "space-between", justifyContent: "space-between",
width: "100%", width: "100%",
"&:hover": {borderColor: theme.palette.primary.main}, "&:hover": { borderColor: theme.palette.primary.main },
"&.MuiFormControl-root": { "&.MuiFormControl-root": {
width: "100%", width: "100%",
}, },
"& .MuiFormControlLabel-label": { "& .MuiFormControlLabel-label": {
wordBreak: "break-word", wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px", height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto", overflow: "auto",
lineHeight: "normal", lineHeight: "normal",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: "4px", width: "4px",
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf", backgroundColor: "#b8babf",
}, },
}, },
"& .MuiFormControlLabel-label.Mui-disabled": { "& .MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.text.primary, color: theme.palette.text.primary,
} }
}} }}
value={index} value={index}
labelPlacement="start" labelPlacement="start"
control={ control={
currentQuestion.content.multi ? ( currentQuestion.content.multi ? (
<Checkbox <Checkbox
checked={!!answer?.includes(variant.id)} checked={!!answer?.includes(variant.id)}
checkedIcon={ checkedIcon={
<CheckboxIcon checked color={theme.palette.primary.main} /> <CheckboxIcon checked color={theme.palette.primary.main} />
}
icon={<CheckboxIcon />}
/>
) : (
<Radio
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
icon={<RadioIcon />}
/>
)
} }
icon={<CheckboxIcon />} label={own ? <TextField label="Другое..." /> : variant.answer}
/> onClick={async (event) => {
) : ( event.preventDefault();
<Radio if (isSending) return;
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
icon={<RadioIcon />}
/>
)
}
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
event.preventDefault();
if (isSending) return;
setIsSending(true); setIsSending(true);
const variantId = currentQuestion.content.variants[index].id; const variantId = currentQuestion.content.variants[index].id;
console.log(answer); console.log(answer);
if (currentQuestion.content.multi) { if (currentQuestion.content.multi) {
const currentAnswer = typeof answer !== "string" ? answer || [] : []; const currentAnswer = typeof answer !== "string" ? answer || [] : [];
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: currentAnswer.includes(variantId) body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId) ? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId], : [...currentAnswer, variantId],
qid: quizId, qid: quizId,
preview preview
}); });
updateAnswer( updateAnswer(
currentQuestion.id, currentQuestion.id,
currentAnswer.includes(variantId) currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId) ? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId], : [...currentAnswer, variantId],
currentQuestion.content.variants[index].points || 0 currentQuestion.content.variants[index].points || 0
); );
} catch (e) { } catch (e) {
console.log(e); console.log(e);
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
setIsSending(false); setIsSending(false);
return; return;
} }
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].answer, body: currentQuestion.content.variants[index].answer,
qid: quizId, qid: quizId,
preview preview
}); });
updateAnswer( updateAnswer(
currentQuestion.id, currentQuestion.id,
variantId, variantId,
answer === variantId answer === variantId
? 0 ? 0
: currentQuestion.content.variants[index].points || 0 : currentQuestion.content.variants[index].points || 0
); );
} catch (e) { } catch (e) {
console.log(e); console.log(e);
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
if (answer === variantId) { if (answer === variantId) {
try { try {
await sendAnswer({ await sendAnswer({
questionId: currentQuestion.id, questionId: currentQuestion.id,
body: "", body: "",
qid: quizId, qid: quizId,
preview preview
}); });
} catch (e) { } catch (e) {
console.log(e); console.log(e);
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
} }
deleteAnswer(currentQuestion.id); deleteAnswer(currentQuestion.id);
} }
setIsSending(false); setIsSending(false);
}} }}
/> />
); );
}; };

397
lib/components/ViewPublicationPage/questions/Varimg.tsx
View File

@ -1,12 +1,12 @@
import { import {
Box, Box,
FormControlLabel, FormControlLabel,
Radio, Radio,
RadioGroup, RadioGroup,
Typography, Typography,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -21,202 +21,205 @@ import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
import { useState } from "react"; import { useState } from "react";
type VarimgProps = { type VarimgProps = {
currentQuestion: QuizQuestionVarImg; currentQuestion: QuizQuestionVarImg;
}; };
export const Varimg = ({ currentQuestion }: VarimgProps) => { export const Varimg = ({ currentQuestion }: VarimgProps) => {
const { settings, quizId, preview } = useQuizData(); const { settings, quizId, preview } = useQuizData();
const { answers } = useQuizViewStore(); const answers = useQuizViewStore(state => state.answers);
const theme = useTheme(); const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
const isMobile = useRootContainerSize() < 650; const updateAnswer = useQuizViewStore(state => state.updateAnswer);
const [isSending, setIsSending] = useState<boolean>(false);
const { answer } = const theme = useTheme();
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {}; const isMobile = useRootContainerSize() < 650;
const variant = currentQuestion.content.variants.find( const [isSending, setIsSending] = useState<boolean>(false);
({ id }) => answer === id
);
return ( const { answer } =
<Box> answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
<Typography const variant = currentQuestion.content.variants.find(
variant="h5" ({ id }) => answer === id
color={theme.palette.text.primary} );
sx={{ wordBreak: "break-word" }}
> return (
{currentQuestion.title} <Box>
</Typography> <Typography
<Box variant="h5"
sx={{ color={theme.palette.text.primary}
display: "flex", sx={{ wordBreak: "break-word" }}
marginTop: "20px", >
flexDirection: isMobile ? "column-reverse" : undefined, {currentQuestion.title}
gap: "30px", </Typography>
alignItems: isMobile ? "center" : undefined, <Box
}}
>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
)}
sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
flexBasis: "100%",
width: isMobile ? "100%" : undefined,
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: "20px",
"&:focus": {color: theme.palette.text.primary },
"&:active": {color: theme.palette.text.primary }
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel
key={variant.id}
disabled={isSending}
sx={{ sx={{
marginBottom: "15px", display: "flex",
borderRadius: "12px", marginTop: "20px",
padding: "20px", flexDirection: isMobile ? "column-reverse" : undefined,
color: theme.palette.text.primary, gap: "30px",
backgroundColor: settings.cfg.design alignItems: isMobile ? "center" : undefined,
? quizThemes[settings.cfg.theme].isLight }}
? "#FFFFFF" >
: "rgba(255,255,255, 0.3)" <RadioGroup
: quizThemes[settings.cfg.theme].isLight name={currentQuestion.id}
? "white" value={currentQuestion.content.variants.findIndex(
: theme.palette.background.default, ({ id }) => answer === id
border: `1px solid`, )}
borderColor: sx={{
answer === variant.id display: "flex",
? theme.palette.primary.main flexWrap: "wrap",
: "#9A9AAF", flexDirection: "row",
display: "flex", justifyContent: "space-between",
margin: 0, flexBasis: "100%",
"&:hover": {borderColor: theme.palette.primary.main}, width: isMobile ? "100%" : undefined,
"& .MuiFormControlLabel-label": { }}
wordBreak: "break-word", >
height: variant.answer.length <= 60 ? undefined : "60px", <Box
overflow: "auto", sx={{
lineHeight: "normal", display: "flex",
"&::-webkit-scrollbar": { flexDirection: "column",
width: "4px", width: "100%",
}, gap: "20px",
"&::-webkit-scrollbar-thumb": { "&:focus": { color: theme.palette.text.primary },
backgroundColor: "#b8babf", "&:active": { color: theme.palette.text.primary }
}, }}
}, >
"& .MuiFormControlLabel-label.Mui-disabled": { {currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel
key={variant.id}
disabled={isSending}
sx={{
marginBottom: "15px",
borderRadius: "12px",
padding: "20px",
color: theme.palette.text.primary,
backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(255,255,255, 0.3)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
border: `1px solid`,
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
display: "flex",
margin: 0,
"&:hover": { borderColor: theme.palette.primary.main },
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
"& .MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.text.primary,
}
}}
labelPlacement="start"
value={index}
onClick={async (event) => {
event.preventDefault();
setIsSending(true);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: quizId,
preview
});
updateAnswer(
currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
if (answer === currentQuestion.content.variants[index].id) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
preview
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
setIsSending(false);
}}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={variant.answer}
/>
))}
</Box>
</RadioGroup>
{/* {(variant?.extendedText || currentQuestion.content.back) && ( */}
<Box
sx={{
maxWidth: "450px",
width: "100%",
height: "450px",
border: "1px solid #9A9AAF",
borderRadius: "12px",
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#9A9AAF30",
color: theme.palette.text.primary, color: theme.palette.text.primary,
} textAlign: "center",
}} }}
labelPlacement="start" >
value={index} {answer ? (
onClick={async (event) => { variant?.extendedText ? (
event.preventDefault(); <img
src={variant?.extendedText}
setIsSending(true); style={{ width: "100%", height: "100%", objectFit: "cover" }}
try { alt=""
await sendAnswer({ />
questionId: currentQuestion.id, ) : (
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`, <BlankImage />
qid: quizId, )
preview ) : currentQuestion.content.back !== " " &&
}); currentQuestion.content.back !== null &&
currentQuestion.content.back.length > 0 ? (
updateAnswer( <img
currentQuestion.id, src={currentQuestion.content.back}
currentQuestion.content.variants[index].id, style={{ width: "100%", height: "100%", objectFit: "cover" }}
currentQuestion.content.variants[index].points || 0 alt=""
); />
} catch (e) { ) : currentQuestion.content.replText !== " " &&
enqueueSnackbar("ответ не был засчитан"); currentQuestion.content.replText.length > 0 ? (
} currentQuestion.content.replText
) : variant?.extendedText || isMobile ? (
if (answer === currentQuestion.content.variants[index].id) { "Выберите вариант ответа ниже"
try { ) : (
await sendAnswer({ "Выберите вариант ответа слева"
questionId: currentQuestion.id, )}
body: "", </Box>
qid: quizId, {/* )} */}
preview </Box>
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
setIsSending(false);
}}
control={
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={variant.answer}
/>
))}
</Box>
</RadioGroup>
{/* {(variant?.extendedText || currentQuestion.content.back) && ( */}
<Box
sx={{
maxWidth: "450px",
width: "100%",
height: "450px",
border: "1px solid #9A9AAF",
borderRadius: "12px",
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#9A9AAF30",
color: theme.palette.text.primary,
textAlign: "center",
}}
>
{answer ? (
variant?.extendedText ? (
<img
src={variant?.extendedText}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
) : (
<BlankImage />
)
) : currentQuestion.content.back !== " " &&
currentQuestion.content.back !== null &&
currentQuestion.content.back.length > 0 ? (
<img
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
) : currentQuestion.content.replText !== " " &&
currentQuestion.content.replText.length > 0 ? (
currentQuestion.content.replText
) : variant?.extendedText || isMobile ? (
"Выберите вариант ответа ниже"
) : (
"Выберите вариант ответа слева"
)}
</Box> </Box>
{/* )} */} );
</Box>
</Box>
);
}; };

225
lib/stores/quizView.ts
View File

@ -1,123 +1,102 @@
import { QuestionVariant } from "@model/questionTypes/shared"; import { QuestionVariant } from "@model/questionTypes/shared";
import { produce } from "immer"; import { QuizStep } from "@model/settingsData";
import { nanoid } from "nanoid"; import type { Moment } from "moment";
import { create } from "zustand"; import { nanoid } from "nanoid";
import { devtools } from "zustand/middleware"; import { createContext, useContext } from "react";
import type { Moment } from "moment"; import { createStore, useStore } from "zustand";
import { QuizStep } from "@model/settingsData"; import { immer } from "zustand/middleware/immer";
type QuestionAnswer = { type QuestionAnswer = {
questionId: string; questionId: string;
answer: string | string[] | Moment; answer: string | string[] | Moment;
}; };
type OwnVariant = { type OwnVariant = {
id: string; id: string;
variant: QuestionVariant; variant: QuestionVariant;
}; };
interface QuizViewStore { interface QuizViewStore {
answers: QuestionAnswer[]; answers: QuestionAnswer[];
ownVariants: OwnVariant[]; ownVariants: OwnVariant[];
pointsSum: number; pointsSum: number;
points: Record<string, number>; points: Record<string, number>;
currentQuizStep: QuizStep; currentQuizStep: QuizStep;
} }
export const useQuizViewStore = create<QuizViewStore>()( interface QuizViewActions {
devtools( updateAnswer: (questionId: string, answer: string | string[] | Moment, points: number) => void;
(set, get) => ({ deleteAnswer: (questionId: string) => void;
answers: [], updateOwnVariant: (id: string, answer: string) => void;
ownVariants: [], deleteOwnVariant: (id: string) => void;
points: {}, setCurrentQuizStep: (step: QuizStep) => void;
pointsSum: 0, }
currentQuizStep: "startpage",
}), export const QuizViewContext = createContext<ReturnType<typeof createQuizViewStore> | null>(null);
{
name: "quizView", export function useQuizViewStore<U>(selector: (state: QuizViewStore & QuizViewActions) => U): U {
enabled: import.meta.env.DEV, const context = useContext(QuizViewContext);
trace: import.meta.env.DEV, if (!context) throw new Error("QuizViewStore context is null");
}
) return useStore(context, selector);
); }
function setProducedState<A extends string | { type: string; }>( export const createQuizViewStore = () => createStore<QuizViewStore & QuizViewActions>()(
recipe: (state: QuizViewStore) => void, immer(
action?: A, (set, get) => ({
) { answers: [],
useQuizViewStore.setState(state => produce(state, recipe), false, action); ownVariants: [],
} points: {},
pointsSum: 0,
const calcPoints = () => { currentQuizStep: "startpage",
const storePoints = useQuizViewStore.getState().points; updateAnswer(questionId, answer, points) {
let sum = Object.values(storePoints).reduce((accumulator, currentValue) => accumulator + currentValue) set(state => {
console.log("сумма ", sum) const index = state.answers.findIndex(answer => questionId === answer.questionId);
useQuizViewStore.setState({ pointsSum: sum })
} if (index < 0) {
state.answers.push({ questionId, answer });
export const updateAnswer = ( } else {
questionId: string, state.answers[index] = { questionId, answer };
answer: string | string[] | Moment, }
points: number
) => { state.points = { ...state.points, ...{ [questionId]: points } };
setProducedState(state => {
const index = state.answers.findIndex(answer => questionId === answer.questionId); state.pointsSum = Object.values(state.points).reduce((sum, value) => sum + value);
});
if (index < 0) { },
state.answers.push({ questionId, answer }); deleteAnswer(questionId) {
} else { set(state => {
state.answers[index] = { questionId, answer }; state.answers = state.answers.filter(answer => questionId !== answer.questionId);
} });
}, { },
type: "updateAnswer", updateOwnVariant(id, answer) {
questionId, set(state => {
answer const index = state.ownVariants.findIndex((variant) => variant.id === id);
})
const storePoints = useQuizViewStore.getState().points; if (index < 0) {
useQuizViewStore.setState({ points: { ...storePoints, ...{ [questionId]: points } } }) state.ownVariants.push({
calcPoints() id,
}; variant: {
id: nanoid(),
export const deleteAnswer = (questionId: string) => useQuizViewStore.setState(state => ({ answer,
answers: state.answers.filter(answer => questionId !== answer.questionId) extendedText: "",
}), false, { hints: "",
type: "deleteAnswer", originalImageUrl: "",
questionId },
}); });
} else {
export const updateOwnVariant = (id: string, answer: string) => setProducedState(state => { state.ownVariants[index].variant.answer = answer;
const index = state.ownVariants.findIndex((variant) => variant.id === id); }
});
if (index < 0) { },
state.ownVariants.push({ deleteOwnVariant(id) {
id, set(state => {
variant: { state.ownVariants = state.ownVariants.filter((variant) => variant.id !== id);
id: nanoid(), });
answer, },
extendedText: "", setCurrentQuizStep(step) {
hints: "", set({ currentQuizStep: step });
originalImageUrl: "", },
}, })
}); )
} else { );
state.ownVariants[index].variant.answer = answer;
}
}, {
type: "updateOwnVariant",
id,
answer
});
export const deleteOwnVariant = (id: string) => useQuizViewStore.setState(state => ({
ownVariants: state.ownVariants.filter((variant) => variant.id !== id)
}), false, {
type: "deleteOwnVariant",
id
});
export const setCurrentQuizStep = (currentQuizStep: QuizStep) => useQuizViewStore.setState({
currentQuizStep
}, false, {
type: "setCurrentQuizStep",
currentQuizStep
});

36
lib/utils/designList.ts Normal file
View File

@ -0,0 +1,36 @@
import type { QuizTheme } from "@model/settingsData";
import Desgin1 from "@icons/designs/design1.jpg";
import Desgin2 from "@icons/designs/design2.jpg";
import Desgin3 from "@icons/designs/design3.jpg";
import Desgin4 from "@icons/designs/design4.jpg";
import Desgin5 from "@icons/designs/design5.jpg";
import Desgin6 from "@icons/designs/design6.jpg";
import Desgin7 from "@icons/designs/design7.jpg";
import Desgin8 from "@icons/designs/design8.jpg";
import Desgin9 from "@icons/designs/design9.jpg";
import Desgin10 from "@icons/designs/design10.jpg";
export const DESIGN_LIST: Record<QuizTheme, string> = {
Design1: Desgin1,
Design2: Desgin2,
Design3: Desgin3,
Design4: Desgin4,
Design5: Desgin5,
Design6: Desgin6,
Design7: Desgin7,
Design8: Desgin8,
Design9: Desgin9,
Design10: Desgin10,
StandardTheme: "",
StandardDarkTheme: "",
PinkTheme: "",
PinkDarkTheme: "",
BlackWhiteTheme: "",
OliveTheme: "",
YellowTheme: "",
GoldDarkTheme: "",
PurpleTheme: "",
BlueTheme: "",
BlueDarkTheme: "",
};

411
lib/utils/hooks/useQuestionFlowControl.ts
View File

@ -1,205 +1,206 @@
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"; import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { setCurrentQuizStep, useQuizViewStore } from "@stores/quizView"; import { useQuizViewStore } from "@stores/quizView";
import { useCallback, useDebugValue, useMemo, useState } from "react"; import { useCallback, useDebugValue, useMemo, useState } from "react";
import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData"; import { isResultQuestionEmpty } from "../../components/ViewPublicationPage/tools/checkEmptyData";
import moment from "moment"; import moment from "moment";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
export function useQuestionFlowControl() { export function useQuestionFlowControl() {
const { settings, questions } = useQuizData(); const { settings, questions } = useQuizData();
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>(getFirstQuestion); const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>(getFirstQuestion);
const { answers, pointsSum } = useQuizViewStore(state => state); const answers = useQuizViewStore(state => state.answers);
const pointsSum = useQuizViewStore(state => state.pointsSum);
const setCurrentQuizStep = useQuizViewStore(state => state.setCurrentQuizStep);
const linearQuestionIndex = questions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
? questions.indexOf(currentQuestion) const linearQuestionIndex = questions.every(({ content }) => content.rule.parentId !== "root") // null when branching enabled
: null; ? questions.indexOf(currentQuestion)
: null;
function getFirstQuestion() {
if (questions.length === 0) throw new Error("No questions found"); function getFirstQuestion() {
if (questions.length === 0) throw new Error("No questions found");
if (settings.cfg.haveRoot) {
const nextQuestion = questions.find( if (settings.cfg.haveRoot) {
question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot const nextQuestion = questions.find(
); question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
if (!nextQuestion) throw new Error("Root question not found"); );
if (!nextQuestion) throw new Error("Root question not found");
return nextQuestion;
} return nextQuestion;
}
return questions[0];
} return questions[0];
}
const nextQuestionIdPointsLogic = () => {
return questions.find(question => const nextQuestionIdPointsLogic = () => {
question.type === "result" && question.content.rule.parentId === "line" return questions.find(question =>
); question.type === "result" && question.content.rule.parentId === "line"
}; );
};
const nextQuestionIdMainLogic = () => {
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id); const nextQuestionIdMainLogic = () => {
const questionAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
//Если ответ существует и не является объектом момента
if (questionAnswer && !moment.isMoment(questionAnswer.answer)) { //Если ответ существует и не является объектом момента
//Ответы должны храниться в массиве if (questionAnswer && !moment.isMoment(questionAnswer.answer)) {
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer]; //Ответы должны храниться в массиве
const userAnswers = Array.isArray(questionAnswer.answer) ? questionAnswer.answer : [questionAnswer.answer];
//Сравниваем список условий ветвления и выбираем подходящее
for (const branchingRule of currentQuestion.content.rule.main) { //Сравниваем список условий ветвления и выбираем подходящее
if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) { for (const branchingRule of currentQuestion.content.rule.main) {
return branchingRule.next; if (userAnswers.some(answer => branchingRule.rules[0].answers.includes(answer))) {
} return branchingRule.next;
} }
} }
}
if (!currentQuestion.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
const defaultNextQuestionId = currentQuestion.content.rule.default; if (!currentQuestion.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId; const defaultNextQuestionId = currentQuestion.content.rule.default;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт if (defaultNextQuestionId.length > 1 && defaultNextQuestionId !== " ") return defaultNextQuestionId;
//Кинуть на ребёнка надо даже если там нет дефолта //Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
if ( //Кинуть на ребёнка надо даже если там нет дефолта
["date", "page", "text", "number"].includes(currentQuestion.type) if (
&& currentQuestion.content.rule.children.length === 1 ["date", "page", "text", "number"].includes(currentQuestion.type)
) return currentQuestion.content.rule.children[0]; && currentQuestion.content.rule.children.length === 1
} ) return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
return questions.find(q => { //ничё не нашли, ищем резулт
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id; return questions.find(q => {
})?.id; return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
}; })?.id;
const calculateNextQuestionId = useMemo(() => { };
if (Boolean(settings.cfg.score)) { const calculateNextQuestionId = useMemo(() => {
return nextQuestionIdPointsLogic(); if (settings.cfg.score) {
} return nextQuestionIdPointsLogic();
return nextQuestionIdMainLogic(); }
}, [answers, currentQuestion, questions]); return nextQuestionIdMainLogic();
}, [answers, currentQuestion, questions]);
const prevQuestion = linearQuestionIndex !== null
? questions[linearQuestionIndex - 1] const prevQuestion = linearQuestionIndex !== null
: questions.find(q => ? questions[linearQuestionIndex - 1]
q.id === currentQuestion.content.rule.parentId : questions.find(q =>
|| q.content.id === currentQuestion.content.rule.parentId q.id === currentQuestion.content.rule.parentId
); || q.content.id === currentQuestion.content.rule.parentId
);
const findResultPointsLogic = () => {
const results = questions const findResultPointsLogic = () => {
.filter(e => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum); const results = questions
const numbers = results.map(e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0); .filter(e => e.type === "result" && e.content.rule.minScore !== undefined && e.content.rule.minScore <= pointsSum);
const indexOfNext = Math.max(...numbers); const numbers = results.map(e => e.type === "result" && e.content.rule.minScore !== undefined ? e.content.rule.minScore : 0);
console.log(results); const indexOfNext = Math.max(...numbers);
console.log(numbers); console.log(results);
console.log(indexOfNext); console.log(numbers);
return results[numbers.indexOf(indexOfNext)]; console.log(indexOfNext);
}; return results[numbers.indexOf(indexOfNext)];
};
const getNextQuestion = () => {
let next; const getNextQuestion = () => {
console.log(11111111111); let next;
//Искать можно двумя логиками. Основной и балловой console.log(11111111111);
if (Boolean(settings.cfg.score)) { //Искать можно двумя логиками. Основной и балловой
//Балловая if (settings.cfg.score) {
console.log(222222222); //Балловая
console.log(222222222);
//Ищем линейно
if (linearQuestionIndex !== null) { //Ищем линейно
console.log(33333333333); if (linearQuestionIndex !== null) {
console.log(33333333333);
next = questions[linearQuestionIndex + 1];
console.log(4444444); next = questions[linearQuestionIndex + 1];
console.log("перед ифом", next); console.log(4444444);
if (next?.type === "result" || next == undefined) next = findResultPointsLogic(); console.log("перед ифом", next);
console.log(5555555555); if (next?.type === "result" || next == undefined) next = findResultPointsLogic();
console.log(5555555555);
}
}
} else {
console.log(6666666); } else {
//Основная console.log(6666666);
if (linearQuestionIndex !== null) { //Основная
console.log(777777777); if (linearQuestionIndex !== null) {
//Ищем линейно console.log(777777777);
next = questions[linearQuestionIndex + 1] ?? questions.find(question => //Ищем линейно
question.type === "result" && question.content.rule.parentId === "line" next = questions[linearQuestionIndex + 1] ?? questions.find(question =>
); question.type === "result" && question.content.rule.parentId === "line"
} else { );
console.log(88888888888888); } else {
//Ищем ветвлением console.log(88888888888888);
next = questions.find(q => q.id === calculateNextQuestionId || q.content.id === calculateNextQuestionId); //Ищем ветвлением
} next = questions.find(q => q.id === calculateNextQuestionId || q.content.id === calculateNextQuestionId);
} }
console.log("next", next); }
if (!next && currentQuestion.type !== "result") throw new Error("Не найден следующий вопрос"); console.log("next", next);
return next; if (!next && currentQuestion.type !== "result") throw new Error("Не найден следующий вопрос");
}; return next;
const nextQuestion = getNextQuestion(); };
const showResult = useCallback(() => { const nextQuestion = getNextQuestion();
if (nextQuestion?.type !== "result") throw new Error("Current question is not result"); const showResult = useCallback(() => {
if (nextQuestion?.type !== "result") throw new Error("Current question is not result");
setCurrentQuestion(nextQuestion);
if ( setCurrentQuestion(nextQuestion);
settings.cfg.resultInfo.showResultForm === "after" if (
|| isResultQuestionEmpty(nextQuestion) settings.cfg.resultInfo.showResultForm === "after"
) setCurrentQuizStep("contactform"); || isResultQuestionEmpty(nextQuestion)
}, [nextQuestion, settings.cfg.resultInfo.showResultForm]); ) setCurrentQuizStep("contactform");
}, [nextQuestion, settings.cfg.resultInfo.showResultForm]);
const showResultAfterContactForm = useCallback(() => {
if (currentQuestion.type !== "result") throw new Error("Current question is not result"); const showResultAfterContactForm = useCallback(() => {
if (isResultQuestionEmpty(currentQuestion)) { if (currentQuestion.type !== "result") throw new Error("Current question is not result");
enqueueSnackbar("Данные отправлены"); if (isResultQuestionEmpty(currentQuestion)) {
return; enqueueSnackbar("Данные отправлены");
} return;
}
setCurrentQuizStep("question");
}, [currentQuestion]); setCurrentQuizStep("question");
}, [currentQuestion]);
const moveToPrevQuestion = useCallback(() => {
if (!prevQuestion) throw new Error("Previous question not found"); const moveToPrevQuestion = useCallback(() => {
if (!prevQuestion) throw new Error("Previous question not found");
setCurrentQuestion(prevQuestion);
}, [prevQuestion]); setCurrentQuestion(prevQuestion);
}, [prevQuestion]);
const moveToNextQuestion = useCallback(() => {
if (!nextQuestion) throw new Error("Next question not found"); const moveToNextQuestion = useCallback(() => {
if (!nextQuestion) throw new Error("Next question not found");
if (nextQuestion.type === "result") return showResult();
if (nextQuestion.type === "result") return showResult();
setCurrentQuestion(nextQuestion);
}, [nextQuestion, showResult]); setCurrentQuestion(nextQuestion);
}, [nextQuestion, showResult]);
const isPreviousButtonEnabled = Boolean(prevQuestion);
const isPreviousButtonEnabled = Boolean(prevQuestion);
const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id); const isNextButtonEnabled = useMemo(() => {
const hasAnswer = answers.some(({ questionId }) => questionId === currentQuestion.id);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
return hasAnswer; if ("required" in currentQuestion.content && currentQuestion.content.required) {
} return hasAnswer;
}
return Boolean(nextQuestion);
}, [answers, currentQuestion.content, currentQuestion.id, nextQuestion]); return Boolean(nextQuestion);
}, [answers, currentQuestion.content, currentQuestion.id, nextQuestion]);
useDebugValue({
linearQuestionIndex, useDebugValue({
currentQuestion: currentQuestion, linearQuestionIndex,
prevQuestion: prevQuestion, currentQuestion: currentQuestion,
nextQuestion: nextQuestion, prevQuestion: prevQuestion,
}); nextQuestion: nextQuestion,
});
return {
currentQuestion, return {
currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1, currentQuestion,
isNextButtonEnabled, currentQuestionStepNumber: linearQuestionIndex === null ? null : linearQuestionIndex + 1,
isPreviousButtonEnabled, isNextButtonEnabled,
moveToPrevQuestion, isPreviousButtonEnabled,
moveToNextQuestion, moveToPrevQuestion,
showResultAfterContactForm, moveToNextQuestion,
}; showResultAfterContactForm,
} };
}

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@frontend/squzanswerer", "name": "@frontend/squzanswerer",
"version": "1.0.16", "version": "1.0.17",
"type": "module", "type": "module",
"main": "./dist-package/index.js", "main": "./dist-package/index.js",
"module": "./dist-package/index.js", "module": "./dist-package/index.js",