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

feat: design logic

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-04 19:40:53 +03:00
parent 284472c5bb
commit 69ea201ddc
14 changed files with 1719 additions and 1328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
import { useQuizData } from "@contexts/QuizDataContext";
import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import Stepper from "@ui_kit/Stepper";
type FooterProps = { type FooterProps = {
stepNumber: number | null; stepNumber: number | null;
@ -10,8 +13,10 @@ type FooterProps = {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => { export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme(); const theme = useTheme();
const { questions } = useQuizData(); const { questions, settings } = useQuizData();
console.log(questions); const questionsAmount = questions.filter(
({ type }) => type !== "result"
).length;
return ( return (
<Box <Box
@ -21,13 +26,16 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
borderTop: `1px solid ${theme.palette.grey[400]}`, borderTop: `1px solid ${theme.palette.grey[400]}`,
height: "75px", height: "75px",
display: "flex", display: "flex",
background: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: "transparent",
}} }}
> >
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
maxWidth: "1000px", maxWidth: "1410px",
padding: "0 10px", padding: "10px",
margin: "0 auto", margin: "0 auto",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -40,35 +48,11 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/} {/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/} {/*)}*/}
{stepNumber !== null && ( {stepNumber !== null && (
<Box <Box sx={{ flexGrow: 1 }}>
sx={{ <Typography sx={{ color: theme.palette.text.primary }}>
display: "flex", Вопрос {stepNumber} из {questionsAmount}
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}
</Typography> </Typography>
<Stepper activeStep={stepNumber} steps={questionsAmount} />
</Box> </Box>
)} )}

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

@ -33,7 +33,7 @@ import Desgin9 from "@icons/designs/design9.jpg";
import Desgin10 from "@icons/designs/design10.jpg"; import Desgin10 from "@icons/designs/design10.jpg";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import type { Design } from "@model/settingsData"; import type { QuizTheme } from "@model/settingsData";
type Props = { type Props = {
currentQuestion: RealTypedQuizQuestion; currentQuestion: RealTypedQuizQuestion;
@ -42,18 +42,28 @@ type Props = {
prevButton: ReactNode; prevButton: ReactNode;
}; };
export const DESIGN_LIST: Record<Design, string> = { export const DESIGN_LIST: Record<QuizTheme, string> = {
"": "", Design1: Desgin1,
design1: Desgin1, Design2: Desgin2,
design2: Desgin2, Design3: Desgin3,
design3: Desgin3, Design4: Desgin4,
design4: Desgin4, Design5: Desgin5,
design5: Desgin5, Design6: Desgin6,
design6: Desgin6, Design7: Desgin7,
design7: Desgin7, Design8: Desgin8,
design8: Desgin8, Design9: Desgin9,
design9: Desgin9, Design10: Desgin10,
design10: Desgin10, StandardTheme: "",
StandardDarkTheme: "",
PinkTheme: "",
PinkDarkTheme: "",
BlackWhiteTheme: "",
OliveTheme: "",
YellowTheme: "",
GoldDarkTheme: "",
PurpleTheme: "",
BlueTheme: "",
BlueDarkTheme: "",
}; };
export const Question = ({ export const Question = ({
@ -64,19 +74,20 @@ export const Question = ({
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings } = useQuizData(); const { settings } = useQuizData();
const design = DESIGN_LIST[settings.cfg.design];
return ( return (
<Box <Box
sx={{ sx={{
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: `url(${design})`, backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}} }}
> >
<Box <Box
sx={{ sx={{
background: design background: settings.cfg.design
? "linear-gradient(90deg,#272626, transparent)" ? "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default, : theme.palette.background.default,
}} }}
@ -100,19 +111,21 @@ export const Question = ({
question={currentQuestion} question={currentQuestion}
stepNumber={currentQuestionStepNumber} stepNumber={currentQuestionStepNumber}
/> />
{quizThemes[settings.cfg.theme].isLight ? ( <Box sx={{ marginLeft: "auto" }}>
<Link target={"_blank"} href={"https://quiz.pena.digital"}> {quizThemes[settings.cfg.theme].isLight ? (
<NameplateLogoFQ <Link target={"_blank"} href={"https://quiz.pena.digital"}>
style={{ fontSize: "34px", width: "200px", height: "auto" }} <NameplateLogoFQ
/> style={{ fontSize: "34px", width: "200px", height: "auto" }}
</Link> />
) : ( </Link>
<Link target={"_blank"} href={"https://quiz.pena.digital"}> ) : (
<NameplateLogoFQDark <Link target={"_blank"} href={"https://quiz.pena.digital"}>
style={{ fontSize: "34px", width: "200px", height: "auto" }} <NameplateLogoFQDark
/> style={{ fontSize: "34px", width: "200px", height: "auto" }}
</Link> />
)} </Link>
)}
</Box>
</Box> </Box>
<Footer <Footer
stepNumber={currentQuestionStepNumber} stepNumber={currentQuestionStepNumber}

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

@ -44,11 +44,13 @@ export const StartPageViewPublication = () => {
} }
alt="" alt=""
style={{ style={{
display: "block",
width: width:
isMobile || settings.cfg.startpageType === "expanded" isMobile || settings.cfg.startpageType === "expanded"
? "100%" ? "100%"
: undefined, : undefined,
height: "100%", height: "100%",
maxHeight: "100vh",
objectFit: "cover", objectFit: "cover",
overflow: "hidden", overflow: "hidden",
}} }}
@ -214,7 +216,7 @@ export const StartPageViewPublication = () => {
fontSize: "18px", fontSize: "18px",
padding: "10px 30px", padding: "10px 30px",
width: "auto", width: "auto",
background: "#7E2AEA", background: theme.palette.primary.main,
}} }}
onClick={() => setCurrentQuizStep("question")} onClick={() => setCurrentQuizStep("question")}
> >
@ -248,7 +250,7 @@ export const StartPageViewPublication = () => {
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
color: "#7E2AEA", color: theme.palette.primary.main,
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
whiteSpace: "nowrap", whiteSpace: "nowrap",
@ -262,19 +264,35 @@ export const StartPageViewPublication = () => {
{settings.cfg.info.clickable ? ( {settings.cfg.info.clickable ? (
isMobileDevice ? ( isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}> <Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px" }}> <Typography
sx={{
fontSize: "16px",
color: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
</Typography> </Typography>
</Link> </Link>
) : ( ) : (
<ButtonBase onClick={handleCopyNumber}> <ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px" }}> <Typography
sx={{
fontSize: "16px",
color: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
</Typography> </Typography>
</ButtonBase> </ButtonBase>
) )
) : ( ) : (
<Typography sx={{ fontSize: "16px", marginTop: "5px" }}> <Typography
sx={{
fontSize: "16px",
marginTop: "5px",
color: theme.palette.text.primary,
}}
>
{settings.cfg.info.phonenumber} {settings.cfg.info.phonenumber}
</Typography> </Typography>
)} )}

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

@ -61,7 +61,16 @@ export default function ViewPublicationPage() {
<Button <Button
disabled={!isPreviousButtonEnabled} disabled={!isPreviousButtonEnabled}
variant="contained" 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} onClick={moveToPrevQuestion}
> >
{isMobileMini ? "←" : "← Назад"} {isMobileMini ? "←" : "← Назад"}

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

@ -14,97 +14,99 @@ import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react"; import { useState } from "react";
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 } = useQuizData(); const { settings, quizId } = useQuizData();
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const answer = answers.find( const answer = answers.find(
({ questionId }) => questionId === currentQuestion.id ({ questionId }) => questionId === currentQuestion.id
)?.answer as string; )?.answer as string;
const currentAnswer = moment(answer) || moment(); const currentAnswer = moment(answer) || moment();
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}> <Typography
{currentQuestion.title} variant="h5"
</Typography> color={theme.palette.text.primary}
<Box sx={{ wordBreak: "break-word" }}
>
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
}}
>
<DatePicker
slots={{
openPickerIcon: () => (
<CalendarIcon
sx={{ sx={{
display: "flex", "& path": { stroke: theme.palette.primary.main },
flexDirection: "column", "& rect": { stroke: theme.palette.primary.main },
width: "100%",
marginTop: "20px",
}} }}
> />
<DatePicker ),
slots={{ }}
openPickerIcon: () => ( value={currentAnswer}
<CalendarIcon onChange={async (date) => {
sx={{ if (isSending || !date) return;
"& 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,
}); });
updateAnswer( updateAnswer(currentQuestion.id, date, 0);
currentQuestion.id, } catch (e) {
date, enqueueSnackbar("ответ не был засчитан");
0 }
);
} catch (e) {
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: quizThemes[settings.cfg.theme].isLight backgroundColor: settings.cfg.design
? "white" ? "rgba(154,154,175, 0.2)"
: theme.palette.background.default, : quizThemes[settings.cfg.theme].isLight
borderRadius: "10px", ? "white"
maxWidth: "250px", : theme.palette.background.default,
pr: "22px", borderRadius: "10px",
"& input": { maxWidth: "250px",
py: "11px", pr: "22px",
pl: "20px", "& input": {
lineHeight: "19px", py: "11px",
}, pl: "20px",
"& fieldset": { lineHeight: "19px",
borderColor: "#9A9AAF", },
}, "& fieldset": {
}, borderColor: "#9A9AAF",
}} },
/> },
</Box> }}
</Box> />
); </Box>
</Box>
);
}; };

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

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

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

@ -18,445 +18,458 @@ 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 } = useQuizData(); const { settings, quizId } = 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();
const [isSending, setIsSending] = useState<boolean>(false); 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(() => {
console.log("reversed:", reversed)
}, [reversed])
const sendAnswerToBackend = async (value: string, noUpdate = false) => { useEffect(() => {
setIsSending(true); console.log("reversed:", reversed);
try { }, [reversed]);
await sendAnswer({
questionId: currentQuestion.id,
body: value,
qid: quizId,
});
if (!noUpdate) { const sendAnswerToBackend = async (value: string, noUpdate = false) => {
updateAnswer(currentQuestion.id, value, 0); setIsSending(true);
} try {
} catch (e) { await sendAnswer({
enqueueSnackbar("ответ не был засчитан"); questionId: currentQuestion.id,
} body: value,
qid: quizId,
});
setIsSending(false); if (!noUpdate) {
}; updateAnswer(currentQuestion.id, value, 0);
}
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
const updateValueDebounced = useDebouncedCallback(async (value: string) => { 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) { if (reversed) {
const newValue = setReversedMinRange(
window.Number(value) < window.Number(min) String(max + min - window.Number(answer.split("—")[0]))
? String(min) );
: window.Number(value) > window.Number(max) setReversedMaxRange(
? String(max) String(max + min - window.Number(answer.split("—")[1]))
: 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 {
if (reversed) {
setReversedInputValue(String(max + min - window.Number(answer)));
} else {
setInputValue(answer);
}
}
}
if (!answer) {
setMinRange(String(currentQuestion.content.start));
setMaxRange(String(max));
if (currentQuestion.content.chooseRange) {
setReversedMinRange(String(currentQuestion.content.start));
setReversedMaxRange(String(min));
}
setReversedInputValue(String(currentQuestion.content.start));
setInputValue(String(currentQuestion.content.start));
}
}, []);
const onSliderChange = (_: Event, value: number | number[]) => {
const range = Array.isArray(value)
? `${value[0]}—${value[1]}`
: String(value);
updateAnswer(currentQuestion.id, range, 0);
};
const onChangeCommitted = async (
_: 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]);
setMinRange(String(value[0]));
setMaxRange(String(value[1]));
setReversedMinRange(newMinReversedValue);
setReversedMaxRange(newMaxReversedValue);
await sendAnswerToBackend(
`${newMinReversedValue}—${newMaxReversedValue}`,
true
);
return;
}
setMinRange(String(value[0]));
setMaxRange(String(value[1]));
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
return;
}
if (reversed) {
setReversedInputValue(String(max + min - window.Number(value)));
} else { } else {
setInputValue(String(value)); setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);
} }
} else {
await sendAnswerToBackend(String(value));
};
const changeValueLabelFormat = (value: number) => {
if (!reversed) {
return value;
}
const [minSliderBorder, maxSliderBorder] = sliderValue
.split("—")
.map(window.Number);
if (value === minSliderBorder) {
return max + min - minSliderBorder;
}
return max + min - maxSliderBorder;
};
const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
const value = target.value.replace(/\D/g, "");
if (reversed) { if (reversed) {
setReversedInputValue(value); setReversedInputValue(String(max + min - window.Number(answer)));
} else { } else {
setInputValue(value); setInputValue(answer);
} }
}
}
updateValueDebounced(value); if (!answer) {
}; setMinRange(String(currentQuestion.content.start));
setMaxRange(String(max));
const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => { if (currentQuestion.content.chooseRange) {
const newValue = target.value.replace(/\D/g, ""); setReversedMinRange(String(currentQuestion.content.start));
setReversedMaxRange(String(min));
}
if (reversed) { setReversedInputValue(String(currentQuestion.content.start));
setReversedMinRange(newValue); setInputValue(String(currentQuestion.content.start));
}
}, []);
if (window.Number(newValue) <= window.Number(reversedMaxRange)) { const onSliderChange = (_: Event, value: number | number[]) => {
const value = max + min - window.Number(reversedMaxRange); const range = Array.isArray(value)
updateMinRangeDebounced(`${value}—${value}`, true); ? `${value[0]}—${value[1]}`
: String(value);
return; updateAnswer(currentQuestion.id, range, 0);
} };
updateMinRangeDebounced( const onChangeCommitted = async (
`${newValue}—${max + min - window.Number(reversedMaxRange)}` _: 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]);
return; setMinRange(String(value[0]));
} setMaxRange(String(value[1]));
setReversedMinRange(newMinReversedValue);
setReversedMaxRange(newMaxReversedValue);
await sendAnswerToBackend(
`${newMinReversedValue}—${newMaxReversedValue}`,
true
);
setMinRange(newValue); return;
}
if (window.Number(newValue) >= window.Number(maxRange)) { setMinRange(String(value[0]));
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true); setMaxRange(String(value[1]));
await sendAnswerToBackend(`${value[0]}—${value[1]}`);
return; return;
} }
updateMinRangeDebounced(`${newValue}—${maxRange}`); if (reversed) {
}; setReversedInputValue(String(max + min - window.Number(value)));
} else {
setInputValue(String(value));
}
const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => { await sendAnswerToBackend(String(value));
const newValue = target.value.replace(/\D/g, ""); };
if (reversed) { const changeValueLabelFormat = (value: number) => {
setReversedMaxRange(newValue); if (!reversed) {
return value;
}
if (window.Number(newValue) >= window.Number(reversedMinRange)) { const [minSliderBorder, maxSliderBorder] = sliderValue
const value = max + min - window.Number(reversedMinRange); .split("—")
updateMaxRangeDebounced(`${value}—${value}`, true); .map(window.Number);
return; if (value === minSliderBorder) {
} return max + min - minSliderBorder;
}
updateMaxRangeDebounced( return max + min - maxSliderBorder;
`${max + min - window.Number(reversedMinRange)}—${newValue}` };
);
return; const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
} const value = target.value.replace(/\D/g, "");
setMaxRange(newValue); if (reversed) {
setReversedInputValue(value);
} else {
setInputValue(value);
}
if (window.Number(newValue) <= window.Number(minRange)) { updateValueDebounced(value);
updateMaxRangeDebounced(`${minRange}—${minRange}`, true); };
return; const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
} const newValue = target.value.replace(/\D/g, "");
updateMaxRangeDebounced(`${minRange}—${newValue}`); if (reversed) {
}; setReversedMinRange(newValue);
return ( if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
<Box> const value = max + min - window.Number(reversedMaxRange);
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}> updateMinRangeDebounced(`${value}—${value}`, true);
{currentQuestion.title}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
paddingRight: isMobile ? "10px" : undefined,
}}
>
<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,
},
}}
/>
{!currentQuestion.content.chooseRange && ( return;
<CustomTextField }
placeholder="0"
value={reversed ? reversedInputValue : inputValue}
onChange={onInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
)}
{currentQuestion.content.chooseRange && ( updateMinRangeDebounced(
<Box `${newValue}—${max + min - window.Number(reversedMaxRange)}`
sx={{ );
display: "flex",
gap: "15px", return;
alignItems: "center", }
"& .MuiFormControl-root": { width: "auto" },
}} setMinRange(newValue);
>
<CustomTextField if (window.Number(newValue) >= window.Number(maxRange)) {
placeholder="0" updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
value={reversed ? String(reversedMinRange) : minRange}
onChange={onMinInputChange} return;
sx={{ }
maxWidth: "80px",
borderColor: theme.palette.text.primary, updateMinRangeDebounced(`${newValue}—${maxRange}`);
"& .MuiInputBase-input": { };
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
? "white" const newValue = target.value.replace(/\D/g, "");
: theme.palette.background.default,
}, if (reversed) {
}} setReversedMaxRange(newValue);
/>
<Typography color={theme.palette.text.primary}>до</Typography> if (window.Number(newValue) >= window.Number(reversedMinRange)) {
<CustomTextField const value = max + min - window.Number(reversedMinRange);
placeholder="0" updateMaxRangeDebounced(`${value}—${value}`, true);
value={reversed ? String(reversedMaxRange) : maxRange}
onChange={onMaxInputChange} return;
sx={{ }
maxWidth: "80px",
borderColor: theme.palette.text.primary, updateMaxRangeDebounced(
"& .MuiInputBase-input": { `${max + min - window.Number(reversedMinRange)}—${newValue}`
textAlign: "center", );
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white" return;
: theme.palette.background.default, }
},
}} setMaxRange(newValue);
/>
</Box> if (window.Number(newValue) <= window.Number(minRange)) {
)} updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
</Box>
</Box> return;
); }
updateMaxRangeDebounced(`${minRange}—${newValue}`);
};
return (
<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",
paddingRight: isMobile ? "10px" : undefined,
}}
>
<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,
},
}}
/>
{!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: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
)}
{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: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={reversed ? String(reversedMaxRange) : maxRange}
onChange={onMaxInputChange}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiOutlinedInput-root": { background: "transparent" },
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
"& .MuiOutlinedInput-notchedOutline": {
backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
},
}}
/>
</Box>
)}
</Box>
</Box>
);
}; };

407
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"; import CustomTextField from "@ui_kit/CustomTextField";
@ -8,194 +14,259 @@ import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext"; import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { enqueueSnackbar } from "notistack"; import { enqueueSnackbar } from "notistack";
import {ChangeEvent, FC, useEffect, useState} from "react"; import { ChangeEvent, FC, useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce"; import { useDebouncedCallback } from "use-debounce";
import type { QuizQuestionText } from "../../../model/questionTypes/text"; 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 theme = useTheme();
const { settings } = useQuizData(); const { settings } = useQuizData();
const spec = settings.cfg.spec const spec = settings.cfg.spec;
const { quizId } = useQuizData(); const { quizId } = useQuizData();
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const { answer } = 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,
}); });
} 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();
return( const { settings } = useQuizData();
<Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> return (
<Box>
<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",
}}
>
<CustomTextField
placeholder={currentQuestion.content.placeholder}
value={answer || ""}
onChange={async ({ target }) => {
updateAnswer(currentQuestion.id, target.value, 0);
inputHC(target.value);
}}
sx={{
"& .MuiOutlinedInput-root": {
backgroundColor: settings.cfg.design
? "rgba(154,154,175, 0.2)"
: "#FFFFFF",
},
"&:focus-visible": { borderColor: theme.palette.primary.main },
}}
/>
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box <Box
sx={{ sx={{
display: "flex", maxWidth: "400px",
width: "100%", width: "100%",
marginTop: "20px", height: "300px",
flexDirection: isMobile ? "column-reverse" : undefined, margin: "15px",
alignItems: "center" }}
}}
> >
<CustomTextField <img
placeholder={currentQuestion.content.placeholder} key={currentQuestion.id}
value={answer || ""} src={currentQuestion.content.back}
onChange={async ({ target }) => { style={{ width: "100%", height: "100%", objectFit: "cover" }}
updateAnswer(currentQuestion.id, target.value, 0); alt=""
inputHC(target.value); />
}}
sx={{
"&: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 = ({currentQuestion, answer, inputHC, stepNumber}: Props) => { const TextSpecial = ({
const theme = useTheme(); currentQuestion,
const isMobile = useRootContainerSize() < 650; answer,
const isHorizontal = Orientation[Number(stepNumber) -1].horizontal inputHC,
return( stepNumber,
<Box sx={{display: "flex", flexDirection: isMobile? "column" : undefined, alignItems: isMobile ? "center" : undefined,}}> }: Props) => {
<Box const theme = useTheme();
sx={{ const isMobile = useRootContainerSize() < 650;
display: "flex", const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal;
width: "100%", const { settings } = useQuizData();
marginTop: "20px",
flexDirection: "column", return (
alignItems: "center", <Box
gap: "20px" sx={{
}} display: "flex",
> flexDirection: isMobile ? "column" : undefined,
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> alignItems: isMobile ? "center" : undefined,
{isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && ( }}
<Box sx={{margin: "30px", width: "50vw", maxHeight: "550px" }}> >
<img <Box
key={currentQuestion.id} sx={{
src={currentQuestion.content.back} display: "flex",
style={{ width: "100%", height: "100%", objectFit: "cover" }} width: "100%",
alt="" marginTop: "20px",
/> flexDirection: "column",
</Box> alignItems: "center",
)} gap: "20px",
{ }}
(<TextField >
autoFocus={true} <Typography
multiline variant="h5"
maxRows={4} color={theme.palette.text.primary}
placeholder={currentQuestion.content.placeholder} sx={{ wordBreak: "break-word" }}
value={answer || ""} >
onChange={async ({ target }:ChangeEvent<HTMLInputElement>) => { {currentQuestion.title}
updateAnswer(currentQuestion.id, target.value, 0); </Typography>
inputHC(target.value); {isHorizontal &&
} currentQuestion.content.back &&
} currentQuestion.content.back !== " " && (
inputProps={{maxLength:400}} <Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
sx={{ <img
width: "100%", key={currentQuestion.id}
"&:focus-visible": { src={currentQuestion.content.back}
borderColor: theme.palette.primary.main style={{ width: "100%", height: "100%", objectFit: "cover" }}
} alt=""
}} />
/>)
}
</Box> </Box>
{!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && ( )}
<Box sx={{margin: "15px", width: "40vw" }}> {
<img <TextField
key={currentQuestion.id} autoFocus={true}
src={currentQuestion.content.back} multiline
style={{ width: "100%", height: "100%", objectFit: "cover" }} maxRows={4}
alt="" placeholder={currentQuestion.content.placeholder}
/> value={answer || ""}
</Box> onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
)} updateAnswer(currentQuestion.id, target.value, 0);
</Box> inputHC(target.value);
) }}
} inputProps={{ maxLength: 400 }}
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>
);
};

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

@ -1,22 +1,22 @@
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, deleteAnswer,
updateAnswer, updateAnswer,
updateOwnVariant, updateOwnVariant,
useQuizViewStore useQuizViewStore,
} from "@stores/quizView"; } from "@stores/quizView";
import { CheckboxIcon } from "@icons/Checkbox"; import { CheckboxIcon } from "@icons/Checkbox";
@ -36,245 +36,261 @@ 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, ownVariants } = useQuizViewStore();
const { answer } = const { answer } =
answers.find( answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
({ questionId }) => questionId === currentQuestion.id const ownVariant = ownVariants.find(
) ?? {}; (variant) => variant.id === currentQuestion.id
const ownVariant = ownVariants.find( );
(variant) => variant.id === currentQuestion.id
);
const [isSending, setIsSending] = useState(false); const [isSending, setIsSending] = useState(false);
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup; const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
useEffect(() => { useEffect(() => {
if (!ownVariant) { if (!ownVariant) {
updateOwnVariant(currentQuestion.id, ""); updateOwnVariant(currentQuestion.id, "");
} }
}, []); }, []);
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 ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> <Typography
<Box sx={{ variant="h5"
display: "flex", gap: "20px", color={theme.palette.text.primary}
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined sx={{ wordBreak: "break-word" }}
}}> >
<Group {currentQuestion.title}
name={currentQuestion.id.toString()} </Typography>
value={currentQuestion.content.variants.findIndex( <Box
({ id }) => answer === id sx={{
)} display: "flex",
sx={{ gap: "20px",
display: "flex", flexDirection: isMobile ? "column-reverse" : undefined,
flexWrap: "wrap", alignItems: isMobile ? "center" : undefined,
flexDirection: "row", }}
justifyContent: "space-between", >
flexBasis: "100%", <Group
marginTop: "20px", name={currentQuestion.id.toString()}
width: isMobile ? "100%" : undefined value={currentQuestion.content.variants.findIndex(
}} ({ id }) => answer === id
> )}
<Box sx={{
sx={{ display: "flex",
display: "flex", flexWrap: "wrap",
flexDirection: "row", flexDirection: "row",
flexWrap: "wrap", justifyContent: "space-between",
width: "100%", flexBasis: "100%",
gap: "20px", marginTop: "20px",
}} width: isMobile ? "100%" : undefined,
> }}
{currentQuestion.content.variants.map((variant, index) => ( >
<VariantItem <Box
key={variant.id} sx={{
currentQuestion={currentQuestion} display: "flex",
variant={variant} flexDirection: "row",
answer={answer} flexWrap: "wrap",
index={index} width: "100%",
isSending={isSending} gap: "20px",
setIsSending={setIsSending} }}
/> >
))} {currentQuestion.content.variants.map((variant, index) => (
{currentQuestion.content.own && ownVariant && ( <VariantItem
<VariantItem key={variant.id}
own currentQuestion={currentQuestion}
currentQuestion={currentQuestion} variant={variant}
variant={ownVariant.variant} answer={answer}
answer={answer} index={index}
index={currentQuestion.content.variants.length + 2} isSending={isSending}
isSending={isSending} setIsSending={setIsSending}
setIsSending={setIsSending} />
/> ))}
)} {currentQuestion.content.own && ownVariant && (
</Box> <VariantItem
</Group> own
{currentQuestion.content.back && currentQuestion.content.back !== " " && ( currentQuestion={currentQuestion}
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}> variant={ownVariant.variant}
<img answer={answer}
key={currentQuestion.id} index={currentQuestion.content.variants.length + 2}
src={currentQuestion.content.back} isSending={isSending}
style={{ width: "100%", height: "100%", objectFit: "cover" }} setIsSending={setIsSending}
alt="" />
/> )}
</Box> </Box>
)} </Group>
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</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 } = useQuizData(); const { settings, quizId } = useQuizData();
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: answer === variant.id borderColor:
? theme.palette.primary.main answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
: "#9A9AAF", backgroundColor: settings.cfg.design
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "rgba(154,154,175, 0.2)"
? "white" : quizThemes[settings.cfg.theme].isLight
: theme.palette.background.default, ? "white"
display: "flex", : theme.palette.background.default,
maxWidth: "685px", display: "flex",
maxHeight: "85px", maxWidth: "685px",
justifyContent: "space-between", maxHeight: "85px",
width: "100%", justifyContent: "space-between",
"&.MuiFormControl-root": { width: "100%",
width: "100%", "&.MuiFormControl-root": {
}, width: "100%",
"& .MuiFormControlLabel-label": { },
wordBreak: "break-word", "& .MuiFormControlLabel-label": {
height: variant.answer.length <= 60 ? undefined : "60px", wordBreak: "break-word",
overflow: "auto", height: variant.answer.length <= 60 ? undefined : "60px",
lineHeight: "normal", overflow: "auto",
"&::-webkit-scrollbar": { lineHeight: "normal",
width: "4px", "&::-webkit-scrollbar": {
}, width: "4px",
"&::-webkit-scrollbar-thumb": { },
backgroundColor: "#b8babf", "&::-webkit-scrollbar-thumb": {
} backgroundColor: "#b8babf",
} },
}} },
value={index} }}
labelPlacement="start" value={index}
control={ labelPlacement="start"
currentQuestion.content.multi ? control={
<Checkbox currentQuestion.content.multi ? (
checked={!!answer?.includes(variant.id)} <Checkbox
checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />} checked={!!answer?.includes(variant.id)}
icon={<CheckboxIcon />} checkedIcon={
/> <CheckboxIcon checked color={theme.palette.primary.main} />
:
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
} }
label={own ? <TextField label="Другое..." /> : variant.answer} icon={<CheckboxIcon />}
onClick={async (event) => { />
event.preventDefault(); ) : (
if (isSending) return; <Radio
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,
}); });
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,
}); });
updateAnswer(currentQuestion.id, variantId, updateAnswer(
answer === variantId ? 0 currentQuestion.id,
: variantId,
currentQuestion.content.variants[index].points || 0 answer === variantId
); ? 0
: currentQuestion.content.variants[index].points || 0
);
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
} catch (e) { if (answer === variantId) {
console.log(e); try {
enqueueSnackbar("ответ не был засчитан"); await sendAnswer({
} questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
if (answer === variantId) { setIsSending(false);
try { }}
/>
await sendAnswer({ );
questionId: currentQuestion.id,
body: "",
qid: quizId,
});
} catch (e) {
console.log(e);
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
setIsSending(false);
}}
/>
);
}; };

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

@ -1,10 +1,10 @@
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 { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView";
@ -21,173 +21,192 @@ 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 } = useQuizData(); const { settings, quizId } = useQuizData();
const { answers } = useQuizViewStore(); const { answers } = useQuizViewStore();
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 650; const isMobile = useRootContainerSize() < 650;
const [isSending, setIsSending] = useState<boolean>(false); const [isSending, setIsSending] = useState<boolean>(false);
const { answer } = const { answer } =
answers.find( answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
({ questionId }) => questionId === currentQuestion.id const variant = currentQuestion.content.variants.find(
) ?? {}; ({ id }) => answer === id
const variant = currentQuestion.content.variants.find( );
({ id }) => answer === id
);
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography> <Typography
<Box sx={{ variant="h5"
display: "flex", color={theme.palette.text.primary}
marginTop: "20px", sx={{ wordBreak: "break-word" }}
flexDirection: isMobile ? "column-reverse" : undefined, >
gap: isMobile ? "30px" : undefined, {currentQuestion.title}
alignItems: isMobile ? "center" : undefined </Typography>
<Box
sx={{
display: "flex",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
gap: isMobile ? "30px" : undefined,
alignItems: isMobile ? "center" : undefined,
}}
>
<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: isMobile ? "20px" : undefined,
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel
key={variant.id}
disabled={isSending}
sx={{
marginBottom: "15px",
borderRadius: "5px",
padding: "15px",
color: theme.palette.text.primary,
backgroundColor: settings.cfg.design
? "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",
display: "flex",
margin: isMobile ? 0 : undefined,
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
},
}}
value={index}
onClick={async (event) => {
event.preventDefault();
}}> setIsSending(true);
<RadioGroup try {
name={currentQuestion.id} await sendAnswer({
value={currentQuestion.content.variants.findIndex( questionId: currentQuestion.id,
({ id }) => answer === 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,
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: isMobile ? "20px" : undefined }}>
{currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel
key={variant.id}
disabled={isSending}
sx={{
marginBottom: "15px",
borderRadius: "5px",
padding: "15px",
color: theme.palette.text.primary,
backgroundColor: 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: isMobile ? 0 : undefined,
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
lineHeight: "normal",
paddingLeft: "45px",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
}
},
}}
value={index}
onClick={async (event) => {
event.preventDefault();
setIsSending(true); updateAnswer(
try { currentQuestion.id,
currentQuestion.content.variants[index].id,
currentQuestion.content.variants[index].points || 0
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
await sendAnswer({ if (answer === currentQuestion.content.variants[index].id) {
questionId: currentQuestion.id, try {
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`, await sendAnswer({
qid: quizId, questionId: currentQuestion.id,
}); body: "",
qid: quizId,
});
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
deleteAnswer(currentQuestion.id);
}
updateAnswer( setIsSending(false);
currentQuestion.id, }}
currentQuestion.content.variants[index].id, control={
currentQuestion.content.variants[index].points || 0 <Radio
); checkedIcon={
<RadioCheck color={theme.palette.primary.main} />
} catch (e) { }
enqueueSnackbar("ответ не был засчитан"); icon={<RadioIcon />}
} />
}
label={variant.answer}
if (answer === currentQuestion.content.variants[index].id) { />
try { ))}
</Box>
await sendAnswer({ </RadioGroup>
questionId: currentQuestion.id, {/* {(variant?.extendedText || currentQuestion.content.back) && ( */}
body: "", <Box
qid: quizId, sx={{
}); maxWidth: "450px",
width: "100%",
} catch (e) { height: "450px",
enqueueSnackbar("ответ не был засчитан"); border: "1px solid #9A9AAF",
} borderRadius: "12px",
deleteAnswer(currentQuestion.id); overflow: "hidden",
} display: "flex",
alignItems: "center",
setIsSending(false); justifyContent: "center",
}} backgroundColor: "#9A9AAF12",
control={ color: "#9A9AAF",
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} /> textAlign: "center",
} }}
label={variant.answer} >
/> {answer ? (
))} variant?.extendedText ? (
</Box> <img
</RadioGroup> src={variant?.extendedText}
{/* {(variant?.extendedText || currentQuestion.content.back) && ( */} style={{ width: "100%", height: "100%", objectFit: "cover" }}
<Box alt=""
sx={{ />
maxWidth: "450px", ) : (
width: "100%", <BlankImage />
height: "450px", )
border: "1px solid #9A9AAF", ) : currentQuestion.content.back !== " " &&
borderRadius: "12px", currentQuestion.content.back !== null &&
overflow: "hidden", currentQuestion.content.back.length > 0 ? (
display: "flex", <img
alignItems: "center", src={currentQuestion.content.back}
justifyContent: "center", style={{ width: "100%", height: "100%", objectFit: "cover" }}
backgroundColor: "#9A9AAF12", alt=""
color: "#9A9AAF", />
textAlign: "center" ) : currentQuestion.content.replText !== " " &&
}} currentQuestion.content.replText.length > 0 ? (
> currentQuestion.content.replText
{answer ? ( ) : variant?.extendedText || isMobile ? (
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>
); {/* )} */}
</Box>
</Box>
);
}; };

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

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

26
lib/model/settingsData.ts
View File

@ -21,7 +21,17 @@ export type QuizTheme =
| "GoldDarkTheme" | "GoldDarkTheme"
| "PurpleTheme" | "PurpleTheme"
| "BlueTheme" | "BlueTheme"
| "BlueDarkTheme"; | "BlueDarkTheme"
| "Design1"
| "Design2"
| "Design3"
| "Design4"
| "Design5"
| "Design6"
| "Design7"
| "Design8"
| "Design9"
| "Design10";
export type FCField = { export type FCField = {
text: string; text: string;
@ -47,18 +57,6 @@ export type QuizSettings = {
recentlyCompleted: boolean; recentlyCompleted: boolean;
}; };
export type Design =
| ""
| "design1"
| "design2"
| "design3"
| "design4"
| "design5"
| "design6"
| "design7"
| "design8"
| "design9"
| "design10";
export interface QuizConfig { export interface QuizConfig {
spec: undefined | true; spec: undefined | true;
@ -69,7 +67,7 @@ export interface QuizConfig {
results: QuizResultsType; results: QuizResultsType;
haveRoot: string | null; haveRoot: string | null;
theme: QuizTheme; theme: QuizTheme;
design: Design; design: boolean;
resultInfo: { resultInfo: {
when: "email" | ""; when: "email" | "";
share: boolean; 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";
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%",
opacity: 0.5,
},
"& .MuiLinearProgress-bar": {
background: theme.palette.primary.main,
opacity: 1,
},
}}
nextButton={<></>}
backButton={<></>}
/>
);
}

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

@ -1,229 +1,431 @@
import { QuizTheme } from "@model/settingsData"; import { createTheme } from "@mui/material";
import { Theme, createTheme } from "@mui/material";
import themePublic from "./genericPublication"; import themePublic from "./genericPublication";
import type { Theme } from "@mui/material";
import type { QuizTheme } from "@model/settingsData";
const StandardTheme = createTheme({ const StandardTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#7E2AEA", main: "#7E2AEA",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#7E2AEA", secondary: "#7E2AEA",
}, },
background: { background: {
default: "#FFFFFF", default: "#FFFFFF",
}, },
} },
}) });
const StandardDarkTheme = createTheme({ const StandardDarkTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#7E2AEA", main: "#7E2AEA",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#FFFFFF", primary: "#FFFFFF",
secondary: "#7E2AEA", secondary: "#7E2AEA",
}, },
background: { background: {
default: "#333647", default: "#333647",
}, },
} },
}) });
const PinkTheme = createTheme({ const PinkTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#D34085", main: "#D34085",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#D34085", secondary: "#D34085",
}, },
background: { background: {
default: "#FFF9FC", default: "#FFF9FC",
}, },
} },
}) });
const PinkDarkTheme = createTheme({ const PinkDarkTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#D34085", main: "#D34085",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#FFFFFF", primary: "#FFFFFF",
secondary: "#D34085", secondary: "#D34085",
}, },
background: { background: {
default: "#333647", default: "#333647",
}, },
} },
}) });
const BlackWhiteTheme = createTheme({ const BlackWhiteTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#4E4D51", main: "#4E4D51",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#FFF9FC", secondary: "#FFF9FC",
}, },
background: { background: {
default: "#FFFFFF", default: "#FFFFFF",
}, },
} },
}) });
const OliveTheme = createTheme({ const OliveTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#758E4F", main: "#758E4F",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#758E4F", secondary: "#758E4F",
}, },
background: { background: {
default: "#F9FBF1", default: "#F9FBF1",
}, },
} },
}) });
const PurpleTheme = createTheme({ const PurpleTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#7E2AEA", main: "#7E2AEA",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#7E2AEA", secondary: "#7E2AEA",
}, },
background: { background: {
default: "#FBF8FF", default: "#FBF8FF",
}, },
} },
}) });
const YellowTheme = createTheme({ const YellowTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#F2B133", main: "#F2B133",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#F2B133", secondary: "#F2B133",
}, },
background: { background: {
default: "#FFFCF6", default: "#FFFCF6",
}, },
} },
}) });
const GoldDarkTheme = createTheme({ const GoldDarkTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#E6AA37", main: "#E6AA37",
}, },
secondary: { secondary: {
main: "#FFFCF6", main: "#FFFCF6",
}, },
text: { text: {
primary: "#FFFFFF", primary: "#FFFFFF",
secondary: "#F2B133", secondary: "#F2B133",
}, },
background: { background: {
default: "#333647", default: "#333647",
}, },
} },
}) });
const BlueTheme = createTheme({ const BlueTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#4964ED", main: "#4964ED",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#333647", primary: "#333647",
secondary: "#4964ED", secondary: "#4964ED",
}, },
background: { background: {
default: "#F5F7FF", default: "#F5F7FF",
}, },
} },
}) });
const BlueDarkTheme = createTheme({ const BlueDarkTheme = createTheme({
...themePublic, ...themePublic,
palette: { palette: {
primary: { primary: {
main: "#07A0C3", main: "#07A0C3",
}, },
secondary: { secondary: {
main: "#252734" main: "#252734",
}, },
text: { text: {
primary: "#FFFFFF", primary: "#FFFFFF",
secondary: "#07A0C3", secondary: "#07A0C3",
}, },
background: { background: {
default: "#333647", default: "#333647",
}, },
} },
}) });
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = { const Design1 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design2 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#758E4F",
},
background: {
default: "#F9FBF1",
},
},
});
const Design3 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
const Design4 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design5 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
const Design6 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
},
background: {
default: "#333647",
},
},
});
const Design8 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
},
background: {
default: "#333647",
},
},
});
const Design7 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#F2B133",
},
background: {
default: "#FFFCF6",
},
},
});
const Design9 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#758E4F",
},
background: {
default: "#F9FBF1",
},
},
});
const Design10 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
},
background: {
default: "#333647",
},
},
});
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean }> =
{
StandardTheme: { theme: StandardTheme, isLight: true }, StandardTheme: { theme: StandardTheme, isLight: true },
StandardDarkTheme: { theme: StandardDarkTheme, isLight: false }, StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
PinkTheme: { theme: PinkTheme, isLight: true }, PinkTheme: { theme: PinkTheme, isLight: true },
@ -235,4 +437,14 @@ export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }>
PurpleTheme: { theme: PurpleTheme, isLight: true }, PurpleTheme: { theme: PurpleTheme, isLight: true },
BlueTheme: { theme: BlueTheme, isLight: true }, BlueTheme: { theme: BlueTheme, isLight: true },
BlueDarkTheme: { theme: BlueDarkTheme, isLight: false }, 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 },
};