SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'staging'

Browse Source 
Dev

See merge request frontend/squzanswerer!93
This commit is contained in:
Nastya 2024-03-11 20:54:49 +00:00
commit 9862b439f0
40 changed files with 3422 additions and 2452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
lib/assets/icons/PenaLogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
lib/assets/icons/designs/design1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
lib/assets/icons/designs/design10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 692 KiB

BIN
lib/assets/icons/designs/design2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
lib/assets/icons/designs/design3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 599 KiB

BIN
lib/assets/icons/designs/design4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 719 KiB

BIN
lib/assets/icons/designs/design5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
lib/assets/icons/designs/design6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
lib/assets/icons/designs/design7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
lib/assets/icons/designs/design8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 303 KiB

BIN
lib/assets/icons/designs/design9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

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

@ -16,6 +16,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -153,6 +154,11 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
},
scrollbarWidth: "none",
msOverflowStyle: "none",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
<Box
@ -160,6 +166,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
width: isWide && !isMobile ? "100%" : isMobile ? undefined : "530px",
borderRadius: "4px",
height: "100%",
minHeight: "100vh",
display: isWide && !isMobile ? "flex" : undefined,
}}
>
@ -238,6 +245,13 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
disabled={!(ready && !fire)}
variant="contained"
onClick={handleShowResultsClick}
sx={{
border: `1px solid ${theme.palette.primary.main}`,
"&:disabled": {
border: "1px solid #9A9AAF",
color: "#9A9AAF"
}
}}
>
{settings.cfg.formContact?.button || "Получить результаты"}
</Button>
@ -416,6 +430,9 @@ const CustomInput = ({ title, desc, Icon, onChange, id }: {
onChange={onChange}
sx={{
width: isMobile ? "300px" : "350px",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#9A9AAF"
}
}}
placeholder={desc}
InputProps={{

57
lib/components/ViewPublicationPage/Footer.tsx
View File

@ -1,7 +1,9 @@
import { useQuizData } from "@contexts/QuizDataContext";
import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import Stepper from "@ui_kit/Stepper";
type FooterProps = {
stepNumber: number | null;
@ -11,8 +13,10 @@ type FooterProps = {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme();
const { questions } = useQuizData();
console.log(questions)
const { questions, settings } = useQuizData();
const questionsAmount = questions.filter(
({ type }) => type !== "result"
).length;
return (
<Box
@ -20,15 +24,18 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
position: "relative",
padding: "15px 0",
borderTop: `1px solid ${theme.palette.grey[400]}`,
height: '75px',
height: "75px",
display: "flex",
background: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: "transparent",
}}
>
<Box
sx={{
width: "100%",
maxWidth: "1000px",
padding: "0 10px",
maxWidth: "1410px",
padding: "10px",
margin: "0 auto",
display: "flex",
alignItems: "center",
@ -40,38 +47,14 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{stepNumber !== null &&
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
color: theme.palette.text.primary,
}}
>
<Typography>Шаг</Typography>
<Typography
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
borderRadius: "50%",
width: "30px",
height: "30px",
color: "#FFF",
background: theme.palette.primary.main,
}}
>
{stepNumber}
</Typography>
<Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{questions.filter(q => q.type !== "result").length}
{stepNumber !== null && (
<Box sx={{ flexGrow: 1 }}>
<Typography sx={{ color: theme.palette.text.primary }}>
Вопрос {stepNumber} из {questionsAmount}
</Typography>
<Stepper activeStep={stepNumber} steps={questionsAmount} />
</Box>
}
)}
<Box
sx={{

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

@ -20,7 +20,20 @@ import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { ReactNode } from "react";
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 { QuizTheme } from "@model/settingsData";
type Props = {
currentQuestion: RealTypedQuizQuestion;
@ -29,6 +42,30 @@ type Props = {
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 = ({
currentQuestion,
currentQuestionStepNumber,
@ -37,35 +74,58 @@ export const Question = ({
}: Props) => {
const theme = useTheme();
const { settings, show_badge } = useQuizData();
console.log(currentQuestionStepNumber)
return (
<Box sx={{
backgroundColor: theme.palette.background.default,
height: "100%",
}}>
<Box sx={{
<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,
}}
>
<Box
sx={{
height: "calc(100% - 75px)",
width: "100%",
minHeight: "calc(100vh - 75px)",
maxWidth: "1440px",
padding: "40px 25px 20px",
margin: "0 auto",
overflow: "auto",
display: "flex",
flexDirection: "column",
justifyContent: "space-between"
}}>
<QuestionByType key={currentQuestion.id} question={currentQuestion} stepNumber={currentQuestionStepNumber} />
{show_badge ? (quizThemes[settings.cfg.theme].isLight ? (
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
</Link>
justifyContent: "space-between",
}}
>
<QuestionByType
key={currentQuestion.id}
question={currentQuestion}
stepNumber={currentQuestionStepNumber}
/>
{show_badge && (
<Link target="_blank" href="https://quiz.pena.digital">
{quizThemes[settings.cfg.theme].isLight ? (
<NameplateLogoFQ
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
) : (
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
<NameplateLogoFQDark
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
)}
</Link>
)) : <></>}
)}
</Box>
<Footer
stepNumber={currentQuestionStepNumber}
@ -73,25 +133,41 @@ export const Question = ({
nextButton={nextButton}
/>
</Box>
</Box>
);
};
function QuestionByType({ question, stepNumber }: {
function QuestionByType({
question,
stepNumber,
}: {
question: RealTypedQuizQuestion;
stepNumber: number | null;
}) {
switch (question.type) {
case "variant": return <Variant currentQuestion={question} />;
case "images": return <Images currentQuestion={question} />;
case "varimg": return <Varimg currentQuestion={question} />;
case "emoji": return <Emoji currentQuestion={question} />;
case "text": return <Text currentQuestion={question} stepNumber={stepNumber}/>;
case "select": return <Select currentQuestion={question} />;
case "date": return <Date currentQuestion={question} />;
case "number": return <Number currentQuestion={question} />;
case "file": return <File currentQuestion={question} />;
case "page": return <Page currentQuestion={question} />;
case "rating": return <Rating currentQuestion={question} />;
default: notReachable(question);
case "variant":
return <Variant currentQuestion={question} />;
case "images":
return <Images currentQuestion={question} />;
case "varimg":
return <Varimg currentQuestion={question} />;
case "emoji":
return <Emoji currentQuestion={question} />;
case "text":
return <Text currentQuestion={question} stepNumber={stepNumber} />;
case "select":
return <Select currentQuestion={question} />;
case "date":
return <Date currentQuestion={question} />;
case "number":
return <Number currentQuestion={question} />;
case "file":
return <File currentQuestion={question} />;
case "page":
return <Page currentQuestion={question} />;
case "rating":
return <Rating currentQuestion={question} />;
default:
notReachable(question);
}
}

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

@ -13,7 +13,7 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import type { QuizQuestionResult } from "../../model/questionTypes/result";
import { setCurrentQuizStep } from "@stores/quizView";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
type ResultFormProps = {
resultQuestion: QuizQuestionResult;
@ -22,6 +22,7 @@ type ResultFormProps = {
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 1000;
const { settings, show_badge } = useQuizData();
const spec = settings.cfg.spec
@ -33,10 +34,16 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
alignItems: "center",
justifyContent: "space-between",
height: "100%",
minHeight: "100vh",
width: "100%",
pt: "28px",
overflow: "auto",
backgroundColor: theme.palette.background.default,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
<Box
@ -44,8 +51,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
display: "flex",
flexDirection: "column",
alignItems: "start",
width: isMobile ? "100%" : "490px",
padding: isMobile ? "0 16px" : undefined,
maxWidth: "844px",
width: "100%",
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
}}
>
{
@ -65,8 +73,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
component="img"
src={resultQuestion.content.back}
sx={{
width: spec ? "100%" : isMobile ? "100%" : "490px",
height: spec ? "auto" : isMobile ? "100%" : "280px",
width: "100%",
maxWidth: "844px",
height: spec ? "auto" : isMobile ? "100%" : "306px",
borderRadius: "8px"
}}
></Box>
)

497
lib/components/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -1,497 +0,0 @@
import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui/material";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { notReachable } from "../../utils/notReachable";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
import { useQuizData } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings, show_badge } = useQuizData();
const { isMobileDevice } = useUADevice();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 800;
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
};
console.log(settings.cfg.startpage.background.type);
const background =
settings.cfg.startpage.background.type === "image" ? (
settings.cfg.startpage.background.desktop ? (
<img
src={settings.cfg.startpage.background.desktop}
alt=""
style={{
width: (isMobile || settings.cfg.startpageType === "expanded") ? "100%" : undefined,
height: "100%",
objectFit: "cover",
overflow: "hidden",
}}
/>
) : null
) : 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 (
<Paper
className="settings-preview-draghandle"
sx={{
borderRadius: 0,
height: "100%",
width: "100%",
background:
settings.cfg.startpageType === "expanded" && !isMobile
? 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 p={settings.cfg.startpageType === "standard" ? "" : "16px"}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo && (
<img
src={settings.cfg.startpage.logo}
style={{
height: "37px",
maxWidth: "43px",
objectFit: "cover",
}}
alt=""
/>
)}
<Typography
sx={{
fontSize: "14px",
color: settings.cfg.startpageType === "expanded"
&& !isMobile ? "white" : theme.palette.text.primary,
wordBreak: "break-word"
}}
>{settings.cfg.info.orgname}</Typography>
</Box>
<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>
</Box>
}
quizMainBlock={
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems:
settings.cfg.startpageType === "centered"
? "center"
: settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center"
? "center"
: "start"
: "start",
mt: "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" && !isMobile ? "white" : theme.palette.text.primary
}}
>
{settings.name}
</Typography>
<Typography
sx={{
fontSize: "16px",
m: "16px 0",
overflowWrap: "break-word",
width: "100%",
textAlign: settings.cfg.startpageType === "centered" || settings.cfg.startpage.position === "center" ? "center" : "-moz-initial",
color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
}}
>
{settings.cfg.startpage.description}
</Typography>
<Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
}}
onClick={() => setCurrentQuizStep("question")}
>
{settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{
mt: "46px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
flexDirection: "column"
}}
>
<Box sx={{ maxWidth: isTablet ? "240px" : "300px", marginBottom: "10px", }}>
{settings.cfg.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
)}
<Typography sx={{
width: "100%",
overflowWrap: "break-word",
fontSize: "12px",
textAlign: "end",
maxHeight: "120px",
overflow: "auto",
"&::-webkit-scrollbar": { width: 0 },
color:
settings.cfg.startpageType === "expanded" && !isMobile
? "white"
: theme.palette.text.primary,
}}>
{settings.cfg.info.law}
</Typography>
</Box>
{show_badge &&
<Box
component={Link}
target={"_blank"}
href={"https://quiz.pena.digital"}
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
textDecoration: "none"
}}
>
<NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF") }} />
<Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#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>
);
};
function QuizPreviewLayoutByType({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const isMobile = useRootContainerSize() < 650;
function StartPageMobile() {
return (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
width: "100%"
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
);
}
switch (startpageType) {
case null:
case "standard": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
id="pain"
sx={{
display: "flex",
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
overflow: "auto"
}}
>
<Box
sx={{
width: isMobile ? "100%" : "40%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: isMobile ? "80%" : undefined
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
width: isMobile ? "100%" : "60%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)}
</>
);
}
case "expanded": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
overflow: "auto",
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 3,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
position: "absolute",
zIndex: -1,
left: 0,
top: 0,
height: "100%",
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)
}
</>
);
}
case "centered": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
overflow: "auto",
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
{quizHeaderBlock}
{backgroundBlock && (
<Box
sx={{
width: "60%",
height: "275px",
// overflow: "hidden",
display: "flex",
justifyContent: "center"
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box>
)
}
</>
);
}
default:
notReachable(startpageType);
}
}
const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
left: "start",
center: "center",
right: "end",
};

44
lib/components/ViewPublicationPage/StartPageViewPublication/QuizPreviewLayoutByType.tsx Normal file
View File

@ -0,0 +1,44 @@
import { StartPageDesktop } from "./StartPageDesktop";
import { StartPageMobile } from "./StartPageMobile";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import type {
QuizStartpageAlignType,
QuizStartpageType,
} from "@model/settingsData";
type QuizPreviewLayoutByTypeProps = {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
};
export const QuizPreviewLayoutByType = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: QuizPreviewLayoutByTypeProps) => {
const isMobile = useRootContainerSize() < 700;
return isMobile ? (
<StartPageMobile
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock}
startpageType={startpageType}
/>
) : (
<StartPageDesktop
alignType={alignType}
startpageType={startpageType}
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock}
/>
);
};

214
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx Normal file
View File

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

265
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx Normal file
View File

@ -0,0 +1,265 @@
import { Box } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
import type { QuizStartpageType } from "@model/settingsData";
type StartPageMobileProps = {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
};
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
const StandartMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => {
const { settings } = useQuizData();
return (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100vh",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizMainBlock}
</Box>
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
)}
</Box>
);
};
const ExpandedMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100vh",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
zIndex: 3,
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": { width: "4px" },
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
}}
>
{quizHeaderBlock}
<Box
sx={{
padding: "16px",
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
zIndex: -1,
position: "absolute",
left: 0,
top: 0,
width: "100%",
minHeight: "100vh",
overflow: "hidden",
"& > img": {
display: "block",
minHeight: "100vh",
},
}}
>
{backgroundBlock}
</Box>
</Box>
);
const CenteredMobileLayout = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
}: MobileLayoutProps) => {
const {settings} = useQuizData();
return (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100vh",
height: "100%",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
"&::-webkit-scrollbar": {width: 0},
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
padding: "10px 25px 25px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": {width: "4px"},
"&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
}}
>
{quizHeaderBlock}
{settings.cfg.startpage.background.desktop && (
<Box
sx={{
width: "100%",
overflow: "hidden",
"& > img": {width: "100%", borderRadius: "12px"},
}}
>
{backgroundBlock}
</Box>
)}
<Box
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizMainBlock}
</Box>
</Box>
</Box>
);
}
export const StartPageMobile = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
}: StartPageMobileProps) => {
switch (startpageType) {
case null:
case "standard": {
return (
<StandartMobileLayout
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock}
/>
);
}
case "expanded": {
return (
<ExpandedMobileLayout
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock}
/>
);
}
case "centered": {
return (
<CenteredMobileLayout
quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock}
/>
);
}
default:
notReachable(startpageType);
}
};

374
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx Normal file
View File

@ -0,0 +1,374 @@
import {
Box,
Button,
ButtonBase,
Link,
Paper,
Typography,
useTheme,
} from "@mui/material";
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";
import { useUADevice } from "@utils/hooks/useUADevice";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "../Question";
import { NameplateLogo } from "@icons/NameplateLogo";
import PenaLogo from "@icons/PenaLogo.png";
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings, show_badge } = useQuizData();
const { isMobileDevice } = useUADevice();
const isMobile = useRootContainerSize() < 700;
const isTablet = useRootContainerSize() < 800;
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
};
const background =
settings.cfg.startpage.background.type === "image" ? (
<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: "100vh",
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 (
<Paper
className="settings-preview-draghandle"
sx={{
borderRadius: 0,
// height: "100%",
minHeight: "100vh",
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",
}}
>
<img
src={settings.cfg.startpage.logo || PenaLogo}
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"
}
>
<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://quiz.pena.digital"}
sx={{
display: "flex",
alignItems: "center",
gap: "15px",
textDecoration: "none",
}}
>
<NameplateLogo
style={{
fontSize: "34px",
color:
settings.cfg.startpageType === "expanded"
? "#FFFFFF"
: quizThemes[settings.cfg.theme].isLight
? "#151515"
: "#FFFFFF",
}}
/>
<Typography
sx={{
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>
);
};

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

@ -11,10 +11,9 @@ import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
export default function ViewPublicationPage() {
const { settings, recentlyCompleted } = useQuizData();
let currentQuizStep = useQuizViewStore(state => state.currentQuizStep);
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
const isMobileMini = useRootContainerSize() < 382;
const {
currentQuestion,
@ -26,17 +25,21 @@ export default function ViewPublicationPage() {
showResultAfterContactForm,
} = useQuestionFlowControl();
useEffect(function setFaviconAndTitle() {
useEffect(
function setFaviconAndTitle() {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings.cfg.startpage.favIcon);
}
document.title = settings.name;
}, [settings]);
},
[settings]
);
if (recentlyCompleted) throw new Error("Quiz already completed");
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
currentQuizStep = "question";
let quizStepElement: ReactElement;
switch (currentQuizStep) {
@ -58,7 +61,16 @@ export default function ViewPublicationPage() {
<Button
disabled={!isPreviousButtonEnabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
sx={{
fontSize: "16px",
padding: "10px 15px",
color: "#FFFFFF",
border: "1px solid #9A9AAF",
background: "rgba(154,154,175, 0.2)",
"&:disabled": {
color: "#9A9AAF",
},
}}
onClick={moveToPrevQuestion}
>
{isMobileMini ? "←" : "← Назад"}
@ -87,11 +99,14 @@ export default function ViewPublicationPage() {
);
break;
}
default: notReachable(currentQuizStep);
default:
notReachable(currentQuizStep);
}
return (
<ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
<ThemeProvider
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
>
{quizStepElement}
</ThemeProvider>
);

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

@ -29,7 +29,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
@ -63,11 +67,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
qid: quizId,
});
updateAnswer(
currentQuestion.id,
date,
0
);
updateAnswer(currentQuestion.id, date, 0);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
@ -87,7 +87,11 @@ export const Date = ({ currentQuestion }: DateProps) => {
}}
sx={{
"& .MuiInputBase-root": {
backgroundColor: quizThemes[settings.cfg.theme].isLight
backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
borderRadius: "10px",

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

@ -5,7 +5,7 @@ import {
Radio,
RadioGroup,
Typography,
useTheme
useTheme,
} from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -19,7 +19,7 @@ import { enqueueSnackbar } from "notistack";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { useQuizData } from "@contexts/QuizDataContext";
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
import { quizThemes } from "@utils/themes/Publication/themePublication";
polyfillCountryFlagEmojis();
import { useState } from "react";
@ -30,12 +30,10 @@ type EmojiProps = {
export const Emoji = ({ currentQuestion }: EmojiProps) => {
const theme = useTheme();
const { quizId } = useQuizData();
const { quizId, settings } = useQuizData();
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const [isSending, setIsSending] = useState<boolean>(false);
return (
@ -44,7 +42,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>{currentQuestion.title}</Typography>
>
{currentQuestion.title}
</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
@ -56,8 +56,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
currentQuestion.content.variants[Number(target.value)].answer,
currentQuestion.content.variants[Number(target.value)].points || 0
);
}
}
}}
sx={{
display: "flex",
flexWrap: "wrap",
@ -66,7 +65,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
marginTop: "20px",
}}
>
<Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
<Box
sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}
>
{currentQuestion.content.variants.map((variant, index) => (
<FormControl
key={variant.id}
@ -74,11 +75,19 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
sx={{
borderRadius: "12px",
border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
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
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
}}
>
<Box
@ -125,7 +134,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
},
}}
value={index}
@ -137,7 +146,10 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
body:
currentQuestion.content.variants[index].extendedText +
" " +
currentQuestion.content.variants[index].answer,
qid: quizId,
});
@ -165,16 +177,24 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
setIsSending(false);
}}
control={
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography sx={{
<Typography
sx={{
wordBreak: "break-word",
lineHeight: "normal",
}}>{variant.answer}</Typography>
}}
>
{variant.answer}
</Typography>
</Box>
}
/>

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

@ -189,7 +189,7 @@ export const File = ({ currentQuestion }: FileProps) => {
justifyContent: "flex-start",
alignItems: "center",
padding: "33px 44px 33px 55px",
backgroundColor: theme.palette.background.default,
backgroundColor: "#F2F3F7",
border: `1px solid ${isDropzoneHighlighted ? "red" : "#9A9AAF"}`,
borderRadius: "8px",
}}

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

@ -4,7 +4,7 @@ import {
Radio,
RadioGroup,
Typography,
useTheme
useTheme,
} from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -17,6 +17,7 @@ import { useRootContainerSize } from "../../../contexts/RootContainerWidthContex
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication";
type ImagesProps = {
currentQuestion: QuizQuestionImages;
@ -26,14 +27,23 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
const { quizId } = useQuizData();
const { answers } = useQuizViewStore();
const theme = useTheme();
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id
)?.answer;
const { settings } = useQuizData();
const [isSending, setIsSending] = useState<boolean>(false);
const isTablet = useRootContainerSize() < 1000;
const isMobile = useRootContainerSize() < 500;
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
@ -66,7 +76,15 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
cursor: "pointer",
borderRadius: "5px",
border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: "transparent",
transition: "opacity 0.5s ease",
opacity: isSending ? 0.5 : 1,
pointerEvents: isSending ? "none" : "auto",
@ -147,12 +165,17 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
},
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={variant.answer}
/>

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

@ -43,8 +43,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
const reversed = minBorder > maxBorder;
useEffect(() => {
console.log("reversed:", reversed)
}, [reversed])
console.log("reversed:", reversed);
}, [reversed]);
const sendAnswerToBackend = async (value: string, noUpdate = false) => {
setIsSending(true);
@ -361,7 +361,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
@ -404,11 +408,13 @@ export const Number = ({ currentQuestion }: NumberProps) => {
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
"& .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"
},
}}
/>
@ -430,11 +436,13 @@ export const Number = ({ currentQuestion }: NumberProps) => {
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
"& .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"
},
}}
/>
@ -445,12 +453,13 @@ export const Number = ({ currentQuestion }: NumberProps) => {
onChange={onMaxInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
"& .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"
},
}}
/>

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

@ -9,6 +9,7 @@ import { enqueueSnackbar } from "notistack";
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";
import { quizThemes } from "@utils/themes/Publication/themePublication";
type SelectProps = {
currentQuestion: QuizQuestionSelect;
@ -16,17 +17,21 @@ type SelectProps = {
export const Select = ({ currentQuestion }: SelectProps) => {
const theme = useTheme();
const { quizId } = useQuizData();
const { quizId, settings } = useQuizData();
const [isSending, setIsSending] = useState<boolean>(false);
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
@ -41,18 +46,26 @@ export const Select = ({ currentQuestion }: SelectProps) => {
activeItemIndex={answer ? Number(answer) : -1}
items={currentQuestion.content.variants.map(({ answer }) => answer)}
colorMain={theme.palette.primary.main}
sx={{
"& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "transparent",
},
}}
onChange={async (_, value) => {
setIsSending(true);
if (value < 0) {
deleteAnswer(currentQuestion.id);
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
@ -60,15 +73,15 @@ export const Select = ({ currentQuestion }: SelectProps) => {
}
try {
await sendAnswer({
questionId: currentQuestion.id,
body: String(currentQuestion.content.variants[Number(value)].answer),
body: String(
currentQuestion.content.variants[Number(value)].answer
),
qid: quizId,
});
updateAnswer(currentQuestion.id, String(value), 0);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}

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

@ -1,4 +1,10 @@
import {Box, TextField as MuiTextField, TextFieldProps, Typography, useTheme} from "@mui/material";
import {
Box,
TextField as MuiTextField,
TextFieldProps,
Typography,
useTheme,
} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
@ -8,8 +14,9 @@ import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { enqueueSnackbar } from "notistack";
import {ChangeEvent, FC, useEffect, useState} from "react";
import { ChangeEvent, FC, useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -20,40 +27,41 @@ type TextProps = {
};
const Orientation = [
{horizontal: true},
{horizontal: false},
{horizontal: true},
{horizontal: true},
{horizontal: false},
{horizontal: true},
{horizontal: true},
{horizontal: true},
{horizontal: true},
{horizontal: true},
{horizontal: true},
{horizontal: false},
{horizontal: true},
{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: false },
{ horizontal: true },
{ horizontal: true },
{ horizontal: false },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: false },
{ horizontal: true },
{ horizontal: false },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: false },
{ horizontal: false },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
{ horizontal: true },
];
export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
const theme = useTheme();
const { settings } = useQuizData();
const spec = settings.cfg.spec
const spec = settings.cfg.spec;
const { quizId } = useQuizData();
const { answers } = useQuizViewStore();
const isMobile = useRootContainerSize() < 650;
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const { answer } =
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const [isSending, setIsSending] = useState<boolean>(false);
const inputHC = useDebouncedCallback(async (text) => {
@ -78,34 +86,61 @@ export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
);
switch (spec) {
case true:
return <TextSpecial currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} stepNumber={stepNumber}/>;
return (
<TextSpecial
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
stepNumber={stepNumber}
/>
);
case undefined:
return <TextNormal currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} />;
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
default:
return <TextNormal currentQuestion={currentQuestion} answer={answer} inputHC={inputHC} />;
return (
<TextNormal
currentQuestion={currentQuestion}
answer={answer}
inputHC={inputHC}
/>
);
}
};
interface Props {
currentQuestion: QuizQuestionText;
answer: any,
answer: any;
inputHC: (a: string) => void;
stepNumber?: number | null;
}
const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
const isMobile = useRootContainerSize() < 650;
const theme = useTheme();
return(
const { settings } = useQuizData();
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
width: "100%",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
alignItems: "center"
alignItems: "center",
}}
>
<CustomTextField
@ -116,13 +151,29 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
inputHC(target.value);
}}
sx={{
"&:focus-visible": {
borderColor: theme.palette.primary.main
}
"& .MuiOutlinedInput-root": {
background: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#F2F3F7"
: "rgba(154,154,175, 0.2)"
: "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" }}>
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box
sx={{
maxWidth: "400px",
width: "100%",
height: "300px",
margin: "15px",
}}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
@ -133,15 +184,28 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
)}
</Box>
</Box>
)
);
};
const TextSpecial = ({currentQuestion, answer, inputHC, stepNumber}: Props) => {
const TextSpecial = ({
currentQuestion,
answer,
inputHC,
stepNumber,
}: Props) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const isHorizontal = Orientation[Number(stepNumber) -1].horizontal
return(
<Box sx={{display: "flex", flexDirection: isMobile? "column" : undefined, alignItems: isMobile ? "center" : undefined,}}>
const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal;
const { settings } = useQuizData();
return (
<Box
sx={{
display: "flex",
flexDirection: isMobile ? "column" : undefined,
alignItems: isMobile ? "center" : undefined,
}}
>
<Box
sx={{
display: "flex",
@ -149,12 +213,20 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
marginTop: "20px",
flexDirection: "column",
alignItems: "center",
gap: "20px"
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" }}>
<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}
@ -164,30 +236,42 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
</Box>
)}
{
(<TextField
<TextField
autoFocus={true}
multiline
maxRows={4}
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }:ChangeEvent<HTMLInputElement>) => {
onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}
}
inputProps={{maxLength:400}}
}}
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
}
borderColor: theme.palette.primary.main,
},
}}
/>)
/>
}
</Box>
{!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{margin: "15px", width: "40vw" }}>
{!isHorizontal &&
currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ margin: "15px", width: "40vw" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
@ -197,5 +281,5 @@ const TextNormal = ({currentQuestion, answer, inputHC}: Props) => {
</Box>
)}
</Box>
)
}
);
};

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

@ -8,7 +8,7 @@ import {
RadioGroup,
TextFieldProps,
Typography,
useTheme
useTheme,
} from "@mui/material";
import { FC, useEffect, useState } from "react";
@ -16,7 +16,7 @@ import {
deleteAnswer,
updateAnswer,
updateOwnVariant,
useQuizViewStore
useQuizViewStore,
} from "@stores/quizView";
import { CheckboxIcon } from "@icons/Checkbox";
@ -44,9 +44,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
const isMobile = useRootContainerSize() < 650;
const { answers, ownVariants } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const ownVariant = ownVariants.find(
(variant) => variant.id === currentQuestion.id
);
@ -61,15 +59,26 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
}
}, []);
if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
if (moment.isMoment(answer))
throw new Error("Answer is Moment in Variant question");
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Box sx={{
display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined
}}>
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
alignItems: isMobile ? "center" : undefined,
}}
>
<Group
name={currentQuestion.id.toString()}
value={currentQuestion.content.variants.findIndex(
@ -82,7 +91,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
justifyContent: "space-between",
flexBasis: "100%",
marginTop: "20px",
width: isMobile ? "100%" : undefined
width: isMobile ? "100%" : undefined,
}}
>
<Box
@ -118,7 +127,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
)}
</Box>
</Group>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
key={currentQuestion.id}
@ -163,10 +173,13 @@ const VariantItem = ({
color: theme.palette.text.primary,
padding: "15px",
border: `1px solid`,
borderColor: answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
backgroundColor: quizThemes[settings.cfg.theme].isLight
borderColor:
answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
display: "flex",
@ -187,20 +200,26 @@ const VariantItem = ({
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
}
},
},
}}
value={index}
labelPlacement="start"
control={
currentQuestion.content.multi ?
currentQuestion.content.multi ? (
<Checkbox
checked={!!answer?.includes(variant.id)}
checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
checkedIcon={
<CheckboxIcon checked color={theme.palette.primary.main} />
}
icon={<CheckboxIcon />}
/>
:
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
) : (
<Radio
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
icon={<RadioIcon />}
/>
)
}
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
@ -246,12 +265,13 @@ const VariantItem = ({
qid: quizId,
});
updateAnswer(currentQuestion.id, variantId,
answer === variantId ? 0
:
currentQuestion.content.variants[index].points || 0
updateAnswer(
currentQuestion.id,
variantId,
answer === variantId
? 0
: currentQuestion.content.variants[index].points || 0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
@ -259,13 +279,11 @@ const VariantItem = ({
if (answer === variantId) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");

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

@ -4,7 +4,7 @@ import {
Radio,
RadioGroup,
Typography,
useTheme
useTheme,
} from "@mui/material";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -32,24 +32,29 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
const [isSending, setIsSending] = useState<boolean>(false);
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
const variant = currentQuestion.content.variants.find(
({ id }) => answer === id
);
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
<Box sx={{
<Typography
variant="h5"
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
gap: isMobile ? "30px" : undefined,
alignItems: isMobile ? "center" : undefined
}}>
alignItems: isMobile ? "center" : undefined,
}}
>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
@ -61,10 +66,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
flexDirection: "row",
justifyContent: "space-between",
flexBasis: "100%",
width: isMobile ? "100%" : undefined
width: isMobile ? "100%" : undefined,
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
gap: isMobile ? "20px" : undefined,
}}
>
<Box sx={{ display: "flex", flexDirection: "column", width: "100%", gap: isMobile ? "20px" : undefined }}>
{currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel
key={variant.id}
@ -74,9 +86,18 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
borderRadius: "5px",
padding: "15px",
color: theme.palette.text.primary,
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
backgroundColor: settings.cfg.design
? quizThemes[settings.cfg.theme].isLight
? "#FFFFFF"
: "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
borderColor:
answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
display: "flex",
margin: isMobile ? 0 : undefined,
"& .MuiFormControlLabel-label": {
@ -90,7 +111,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
},
}}
value={index}
@ -99,7 +120,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
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}"/>`,
@ -111,21 +131,17 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
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,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
@ -135,7 +151,12 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
setIsSending(false);
}}
control={
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
<Radio
checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
}
icon={<RadioIcon />}
/>
}
label={variant.answer}
/>
@ -155,8 +176,8 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#9A9AAF12",
color: "#9A9AAF",
textAlign: "center"
color: theme.palette.text.primary,
textAlign: "center",
}}
>
{answer ? (
@ -169,25 +190,25 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
) : (
<BlankImage />
)
) : currentQuestion.content.back !== " "
&& currentQuestion.content.back !== null
&& currentQuestion.content.back.length > 0
? (
) : 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 ? (
) : currentQuestion.content.replText !== " " &&
currentQuestion.content.replText.length > 0 ? (
currentQuestion.content.replText
) : variant?.extendedText || isMobile ? (
"Выберите вариант ответа ниже"
) : (
"Выберите вариант ответа слева"
)}
</Box>
{/* )} */}
</Box>
</Box>
);
};

5
lib/components/ViewPublicationPage/tools/Select.tsx
View File

@ -121,8 +121,7 @@ export const Select = ({
"& .MuiTypography-root": {
overflow: "hidden",
textOverflow: "ellipsis",
}
},
},
}}
IconComponent={(props) => <ArrowDown {...props} />}
@ -139,7 +138,7 @@ export const Select = ({
borderRadius: "5px",
color: colorPlaceholder,
whiteSpace: "normal",
wordBreak: "break-word"
wordBreak: "break-word",
}}
>
{item}

15
lib/model/settingsData.ts
View File

@ -21,7 +21,17 @@ export type QuizTheme =
| "GoldDarkTheme"
| "PurpleTheme"
| "BlueTheme"
| "BlueDarkTheme";
| "BlueDarkTheme"
| "Design1"
| "Design2"
| "Design3"
| "Design4"
| "Design5"
| "Design6"
| "Design7"
| "Design8"
| "Design9"
| "Design10";
export type FCField = {
text: string;
@ -49,7 +59,7 @@ export type QuizSettings = {
};
export interface QuizConfig {
spec: undefined | true,
spec: undefined | true;
type: QuizType;
noStartPage: boolean;
startpageType: QuizStartpageType;
@ -57,6 +67,7 @@ export interface QuizConfig {
results: QuizResultsType;
haveRoot: string | null;
theme: QuizTheme;
design: boolean;
resultInfo: {
when: "email" | "";
share: boolean;

37
lib/ui_kit/Stepper.tsx Normal file
View File

@ -0,0 +1,37 @@
import { useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
import { hexToRgba } from "@utils/hexToRgba";
interface Props {
activeStep: number;
steps: number;
}
export default function ProgressMobileStepper({ activeStep, steps }: Props) {
const theme = useTheme();
return (
<MobileStepper
variant="progress"
steps={steps + 1}
position="static"
activeStep={activeStep}
sx={{
width: "100%",
padding: "10px 0 0",
background: "transparent",
"& .MuiLinearProgress-root": {
height: "4px",
background: theme.palette.primary.light,
width: "100%",
},
"& .MuiLinearProgress-bar": { background: theme.palette.primary.main },
"& .MuiMobileStepper-progress": {
background: hexToRgba(theme.palette.primary.main, 0.5),
},
}}
nextButton={<></>}
backButton={<></>}
/>
);
}

7
lib/utils/hexToRgba.ts Normal file
View File

@ -0,0 +1,7 @@
import hexRgb from "hex-rgb";
export const hexToRgba = (hexColor: string, opacity?: number): string => {
const { red, green, blue, alpha } = hexRgb(hexColor);
return `rgba(${red}, ${green}, ${blue}, ${opacity || alpha})`;
};

284
lib/utils/themes/Publication/themePublication.ts
View File

@ -1,7 +1,8 @@
import { QuizTheme } from "@model/settingsData";
import { Theme, createTheme } from "@mui/material";
import { createTheme } from "@mui/material";
import themePublic from "./genericPublication";
import type { Theme } from "@mui/material";
import type { QuizTheme } from "@model/settingsData";
const StandardTheme = createTheme({
...themePublic,
@ -10,7 +11,7 @@ const StandardTheme = createTheme({
main: "#7E2AEA",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -20,8 +21,8 @@ const StandardTheme = createTheme({
background: {
default: "#FFFFFF",
},
}
})
},
});
const StandardDarkTheme = createTheme({
...themePublic,
@ -30,7 +31,7 @@ const StandardDarkTheme = createTheme({
main: "#7E2AEA",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#FFFFFF",
@ -40,8 +41,8 @@ const StandardDarkTheme = createTheme({
background: {
default: "#333647",
},
}
})
},
});
const PinkTheme = createTheme({
...themePublic,
@ -50,7 +51,7 @@ const PinkTheme = createTheme({
main: "#D34085",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -60,8 +61,8 @@ const PinkTheme = createTheme({
background: {
default: "#FFF9FC",
},
}
})
},
});
const PinkDarkTheme = createTheme({
...themePublic,
@ -70,7 +71,7 @@ const PinkDarkTheme = createTheme({
main: "#D34085",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#FFFFFF",
@ -80,8 +81,8 @@ const PinkDarkTheme = createTheme({
background: {
default: "#333647",
},
}
})
},
});
const BlackWhiteTheme = createTheme({
...themePublic,
@ -90,7 +91,7 @@ const BlackWhiteTheme = createTheme({
main: "#4E4D51",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -100,8 +101,8 @@ const BlackWhiteTheme = createTheme({
background: {
default: "#FFFFFF",
},
}
})
},
});
const OliveTheme = createTheme({
...themePublic,
@ -110,7 +111,7 @@ const OliveTheme = createTheme({
main: "#758E4F",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -120,8 +121,8 @@ const OliveTheme = createTheme({
background: {
default: "#F9FBF1",
},
}
})
},
});
const PurpleTheme = createTheme({
...themePublic,
@ -130,7 +131,7 @@ const PurpleTheme = createTheme({
main: "#7E2AEA",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -140,8 +141,8 @@ const PurpleTheme = createTheme({
background: {
default: "#FBF8FF",
},
}
})
},
});
const YellowTheme = createTheme({
...themePublic,
@ -150,7 +151,7 @@ const YellowTheme = createTheme({
main: "#F2B133",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -160,8 +161,8 @@ const YellowTheme = createTheme({
background: {
default: "#FFFCF6",
},
}
})
},
});
const GoldDarkTheme = createTheme({
...themePublic,
@ -180,8 +181,8 @@ const GoldDarkTheme = createTheme({
background: {
default: "#333647",
},
}
})
},
});
const BlueTheme = createTheme({
...themePublic,
@ -190,7 +191,7 @@ const BlueTheme = createTheme({
main: "#4964ED",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#333647",
@ -200,8 +201,8 @@ const BlueTheme = createTheme({
background: {
default: "#F5F7FF",
},
}
})
},
});
const BlueDarkTheme = createTheme({
...themePublic,
@ -210,7 +211,7 @@ const BlueDarkTheme = createTheme({
main: "#07A0C3",
},
secondary: {
main: "#252734"
main: "#252734",
},
text: {
primary: "#FFFFFF",
@ -220,10 +221,211 @@ const BlueDarkTheme = createTheme({
background: {
default: "#333647",
},
}
})
},
});
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
const Design1 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#F2B133",
},
background: {
default: "#333647",
},
},
});
const Design2 = createTheme({
...themePublic,
palette: {
primary: {
main: "#3D9A63",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#3D9A63",
},
background: {
default: "#333647",
},
},
});
const Design3 = createTheme({
...themePublic,
palette: {
primary: {
main: "#4B6A99",
},
secondary: {
main: "#252734",
},
text: {
primary: "#252734",
secondary: "#4B6A99",
},
background: {
default: "#F5F7FF",
},
},
});
const Design4 = createTheme({
...themePublic,
palette: {
primary: {
main: "#FF9431",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#FF9431",
},
background: {
default: "#333647",
},
},
});
const Design5 = createTheme({
...themePublic,
palette: {
primary: {
main: "#2D99BA",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#2D99BA",
},
background: {
default: "#333647",
},
},
});
const Design6 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
},
background: {
default: "#333647",
},
},
});
const Design7 = createTheme({
...themePublic,
palette: {
primary: {
main: "#B47C3B",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#B47C3B",
},
background: {
default: "#333647",
},
},
});
const Design8 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F0B136",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#F0B136",
},
background: {
default: "#333647",
},
},
});
const Design9 = createTheme({
...themePublic,
palette: {
primary: {
main: "#678F48",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#678F48",
},
background: {
default: "#333647",
},
},
});
const Design10 = createTheme({
...themePublic,
palette: {
primary: {
main: "#3666AF",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#3666AF",
},
background: {
default: "#333647",
},
},
});
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean }> =
{
StandardTheme: { theme: StandardTheme, isLight: true },
StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
PinkTheme: { theme: PinkTheme, isLight: true },
@ -235,4 +437,14 @@ export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }>
PurpleTheme: { theme: PurpleTheme, isLight: true },
BlueTheme: { theme: BlueTheme, isLight: true },
BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
};
Design1: { theme: Design1, isLight: false },
Design2: { theme: Design2, isLight: false },
Design3: { theme: Design3, isLight: true },
Design4: { theme: Design4, isLight: false },
Design5: { theme: Design5, isLight: false },
Design6: { theme: Design6, isLight: false },
Design7: { theme: Design7, isLight: false },
Design8: { theme: Design8, isLight: false },
Design9: { theme: Design9, isLight: false },
Design10: { theme: Design10, isLight: false },
};

3
package.json
View File

@ -85,6 +85,7 @@
"zustand": "^4.3.8"
},
"dependencies": {
"country-flag-emoji-polyfill": "^0.1.8"
"country-flag-emoji-polyfill": "^0.1.8",
"hex-rgb": "^5.0.0"
}
}

25
src/App.tsx
View File

@ -7,32 +7,33 @@ import QuizAnswerer from "../lib/components/QuizAnswerer";
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
// const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
const defaultQuizId = "cde381db-8ccb-402c-b55f-2c814be9bf25"; //looooong header
const defaultQuizId = "eb1a0fd5-8484-4c96-8d73-4af747eaf02d"; //looooong header
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
export default function App() {
const quizId = useParams().quizId ?? defaultQuizId;
const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
const { data, error, isLoading } = useSWR(
["quizData", quizId],
(params) => getQuizData(params[1]),
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
shouldRetryOnError: false,
refreshInterval: 0,
});
}
);
if (isLoading) return <LoadingSkeleton />;
if (error) return <ApologyPage error={error} />;
if (!data) throw new Error("Quiz data is null");
return (
<Box sx={{
// height: "100dvh",
height: "600px",
width: "600px",
}}>
<QuizAnswerer
quizSettings={data}
quizId={quizId}
/>
<Box
sx={{
height: "100dvh",
}}
>
<QuizAnswerer quizSettings={data} quizId={quizId} />
</Box>
);
}

3
tsconfig.json
View File

@ -20,6 +20,9 @@
"strict": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"@/*": [
"./lib/*"
],
"@ui_kit/*": [
"./lib/ui_kit/*"
],

1
vite.config.ts
View File

@ -3,6 +3,7 @@ import { resolve } from "path";
import { defineConfig } from "vite";
export const alias = {
"@": resolve(__dirname, "./lib/"),
"@ui_kit": resolve(__dirname, "./lib/ui_kit"),
"@icons": resolve(__dirname, "./lib/assets/icons"),
"@stores": resolve(__dirname, "./lib/stores"),

5
yarn.lock
View File

@ -2269,6 +2269,11 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hex-rgb@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"