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

Merge branch 'staging' into 'main'

Browse Source 
Staging

See merge request frontend/squzanswerer!183
This commit is contained in:
Nastya 2024-12-28 23:27:07 +00:00
commit da25702a76
22 changed files with 241 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lib/components/QuizAnswerer.tsx
View File

@ -24,9 +24,6 @@ import "moment/dist/locale/ru";
moment.locale("ru");
const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
console.log(localeText);
console.log(moment);
type Props = {
quizSettings?: QuizSettings;
quizId: string;
@ -128,7 +125,6 @@ function QuizAnswererInner({
</QuizViewContext.Provider>
);
}
export default function QuizAnswerer(props: Props) {
return (
<HelmetProvider>
@ -142,6 +138,19 @@ export default function QuizAnswerer(props: Props) {
preventDuplicate={true}
style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
>
<Box
id="hideoverlay"
sx={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: "black",
zIndex: 999,
opacity: 0,
}}
/>
<QuizAnswererInner {...props} />
</SnackbarProvider>
</ThemeProvider>

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

@ -42,7 +42,7 @@ export const Question = ({
}: Props) => {
const theme = useTheme();
const { settings, show_badge, quizId } = useQuizSettings();
console.log(theme);
return (
<Box
sx={{

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

@ -183,6 +183,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
display: "flex",
justifyContent: "center",
}}
onClick={(event) => event.preventDefault()}
>
<img
alt="resultImage"

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

@ -87,6 +87,7 @@ const StandartLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundB
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
}}
onClick={(event) => event.preventDefault()}
>
{backgroundBlock}
</Box>
@ -204,6 +205,7 @@ const CenteredLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock }: Lay
justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" },
}}
onClick={(event) => event.preventDefault()}
>
{backgroundBlock}
</Box>

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

@ -73,6 +73,7 @@ const StandartMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
borderRadius: "12px",
},
}}
onClick={(event) => event.preventDefault()}
>
{backgroundBlock}
</Box>
@ -154,6 +155,7 @@ const ExpandedMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
minHeight: "100%",
},
}}
onClick={(event) => event.preventDefault()}
>
{backgroundBlock}
</Box>
@ -205,6 +207,7 @@ const CenteredMobileLayout = ({ quizHeaderBlock, quizMainBlock, backgroundBlock
overflow: "hidden",
"& > img": { width: "100%", borderRadius: "12px" },
}}
onClick={(event) => event.preventDefault()}
>
{backgroundBlock}
</Box>

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

@ -105,6 +105,7 @@ export const StartPageViewPublication = () => {
? "center"
: undefined,
}}
onClick={(event) => event.preventDefault()}
>
{settings.cfg.startpage.logo && (
<img
@ -220,6 +221,7 @@ export const StartPageViewPublication = () => {
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
}}
onClick={(event) => event.preventDefault()}
>
<QuizPreviewLayoutByType
quizHeaderBlock={quizHeaderBlock}

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

@ -18,6 +18,7 @@ import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
import NextButton from "./tools/NextButton";
import PrevButton from "./tools/PrevButton";
import unscreen from "@/ui_kit/unscreen";
export default function ViewPublicationPage() {
const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle, questions } = useQuizSettings();
@ -38,6 +39,16 @@ export default function ViewPublicationPage() {
useYandexMetrics(settings?.cfg?.yandexMetricsNumber, preview);
useVKMetrics(settings?.cfg?.vkMetricsNumber, preview);
useEffect(() => {
const root = document.getElementById("root");
const overlay = document.getElementById("hideoverlay");
if (root !== null && overlay !== null && settings.cfg?.isUnSc) {
overlay.style.cssText = "pointerEvents = auto;";
unscreen(overlay, root);
}
}, []);
useEffect(
function setFaviconAndTitle() {
if (!changeFaviconAndTitle) return;

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

@ -11,7 +11,7 @@ import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
type DateProps = {
currentQuestion: QuizQuestionDate;
};
console.log(moment.locale());
export default ({ currentQuestion }: DateProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 690;

8
lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
View File

@ -187,25 +187,25 @@ export const EmojiVariant = ({
<FormControlLabel
key={variant.id}
sx={{
textAlign: "center",
color: theme.palette.text.primary,
margin: 0,
padding: "15px",
color: theme.palette.text.primary,
display: "flex",
gap: "10px",
alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
position: "relative",
height: "80px",
overflow: "auto",
justifyContent: "center",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
height: variant.answer.length <= 60 ? "100%" : "60px",
overflow: "auto",
"&::-webkit-scrollbar": { width: "4px" },
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.primary.main,
},
scrollbarColor: theme.palette.primary.main,
width: "100%",
},
"& .MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.text.primary,

23
lib/components/ViewPublicationPage/questions/File/index.tsx
View File

@ -28,7 +28,11 @@ export const File = ({ currentQuestion }: FileProps) => {
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
@ -39,9 +43,13 @@ export const File = ({ currentQuestion }: FileProps) => {
marginTop: "20px",
maxWidth: answer?.split("|")[0] ? "640px" : "600px",
}}
onClick={(event) => event.preventDefault()}
>
{answer?.split("|")[0] ? (
<UploadedFile currentQuestion={currentQuestion} setIsSending={setIsSending} />
<UploadedFile
currentQuestion={currentQuestion}
setIsSending={setIsSending}
/>
) : (
<UploadFile
currentQuestion={currentQuestion}
@ -51,7 +59,11 @@ export const File = ({ currentQuestion }: FileProps) => {
/>
)}
{answer && currentQuestion.content.type === "picture" && (
<img src={answer.split("|")[1]} style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }} alt="" />
<img
src={answer.split("|")[1]}
style={{ marginTop: "15px", maxWidth: "300px", maxHeight: "300px" }}
alt=""
/>
)}
{answer && currentQuestion.content.type === "video" && (
<video
@ -65,7 +77,10 @@ export const File = ({ currentQuestion }: FileProps) => {
/>
)}
</Box>
<Modal open={modalWarningType !== null} onClose={() => setModalWarningType(null)}>
<Modal
open={modalWarningType !== null}
onClose={() => setModalWarningType(null)}
>
<Box
sx={{
position: "absolute",

40
lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
View File

@ -6,7 +6,7 @@ import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useMemo, type MouseEvent } from "react";
import { useMemo, type MouseEvent, useRef, useEffect } from "react";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
type ImagesProps = {
@ -99,6 +99,9 @@ export const ImageVariant = ({
const isMobile = useRootContainerSize() < 450;
const isTablet = useRootContainerSize() < 850;
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const containerCanvasRef = useRef<HTMLDivElement | null>(null);
const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
event.preventDefault();
@ -130,6 +133,23 @@ export const ImageVariant = ({
}
}, []);
useEffect(() => {
if (canvasRef.current !== null) {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
if (ctx !== null) {
const img = new Image();
img.src = choiceImgUrl;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
}
}
}, []);
return (
<Box
sx={{
@ -151,9 +171,8 @@ export const ImageVariant = ({
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box sx={{ width: "100%", height: "300px" }}>
{variant.extendedText && (
<img
src={choiceImgUrl}
alt=""
<canvas
ref={canvasRef}
style={{
display: "block",
width: "100%",
@ -162,6 +181,18 @@ export const ImageVariant = ({
borderRadius: "12px 12px 0 0",
}}
/>
// <img
// src={choiceImgUrl}
// alt=""
// style={{
// display: "block",
// width: "100%",
// height: "100%",
// objectFit: "cover",
// borderRadius: "12px 12px 0 0",
// }}
// />
)}
</Box>
</Box>
@ -209,7 +240,6 @@ export const ImageVariant = ({
control={
isMulti ? (
<Checkbox
id="cock"
checked={!!answer?.includes(variant.id)}
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
icon={<RadioIcon />}

6
lib/components/ViewPublicationPage/questions/Page/index.tsx
View File

@ -21,7 +21,10 @@ export const Page = ({ currentQuestion }: PageProps) => {
>
{currentQuestion.title}
</Typography>
<Typography color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
<Typography
color={theme.palette.text.primary}
sx={{ wordBreak: "break-word" }}
>
{currentQuestion.content.text}
</Typography>
<Box
@ -40,6 +43,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
border: "1px solid #9A9AAF",
overflow: "hidden",
}}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}

10
lib/components/ViewPublicationPage/questions/Text/TextNormal.tsx
View File

@ -37,6 +37,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
return currentQuestion.content.back;
}
}, [currentQuestion]);
let isCrutch23022025 = window.location.pathname === "/bf8cae3a-e150-479d-befa-7f264087b223";
return (
<Box>
<Typography
@ -51,7 +52,7 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
display: "flex",
width: "100%",
marginTop: "20px",
flexDirection: isMobile ? "column-reverse" : undefined,
flexDirection: isCrutch23022025 ? "column" : isMobile ? "column-reverse" : undefined,
alignItems: "center",
}}
>
@ -74,11 +75,12 @@ export const TextNormal = ({ currentQuestion, answer }: TextNormalProps) => {
{choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
<Box
sx={{
maxWidth: "400px",
width: "100%",
height: "300px",
maxWidth: isCrutch23022025 ? undefined : "400px",
width: isCrutch23022025 ? "auto" : "100%",
height: isCrutch23022025 ? "auto" : "300px",
margin: "15px",
}}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}

10
lib/components/ViewPublicationPage/questions/Text/TextSpecial.tsx
View File

@ -81,7 +81,10 @@ export const TextSpecial = ({ currentQuestion, answer, stepNumber }: TextSpecial
{currentQuestion.title}
</Typography>
{isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
<Box
sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
@ -119,7 +122,10 @@ export const TextSpecial = ({ currentQuestion, answer, stepNumber }: TextSpecial
}
</Box>
{!isHorizontal && currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{ margin: "15px", width: "40vw" }}>
<Box
sx={{ margin: "15px", width: "40vw" }}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}

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

@ -32,7 +32,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
const { updateOwnVariant } = useQuizViewStore((state) => state);
const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || "";
console.log(theme);
return largeCheck ? (
<TextareaAutosize
placeholder={ownPlaceholder || "|"}

41
lib/components/ViewPublicationPage/questions/Variant/index.tsx
View File

@ -13,6 +13,35 @@ type VariantProps = {
currentQuestion: QuizQuestionVariant;
};
// 23.02.2025
const crutchlist = {
115048: { x: 629, y: 491 },
115101: { x: 979, y: 980 },
115109: { x: 746, y: 745 },
115122: { x: 959, y: 960 },
115132: { x: 541, y: 541 },
115142: { x: 834, y: 544 },
115178: { x: 1127, y: 1127 },
115191: { x: 1106, y: 1106 },
115207: { x: 905, y: 906 },
115254: { x: 637, y: 637 },
115270: { x: 702, y: 703 },
115287: { x: 714, y: 715 },
115329: { x: 915, y: 916 },
115348: { x: 700, y: 701 },
115368: { x: 400, y: 300 },
115389: { x: 839, y: 840 },
115411: { x: 612, y: 610 },
115434: { x: 474, y: 473 },
115462: { x: 385, y: 385 },
115487: { x: 676, y: 677 },
115515: { x: 341, y: 341 },
115547: { x: 402, y: 403 },
115575: { x: 502, y: 503 },
115612: { x: 400, y: 300 },
115642: { x: 603, y: 603 },
};
export const Variant = ({ currentQuestion }: VariantProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
@ -26,6 +55,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
//let isCrutch23022025Question = isCrutch23022025 && crutchlist.hasOwnProperty(currentQuestion.id)
useEffect(() => {
if (!ownVariant) {
updateOwnVariant(currentQuestion.id, "");
@ -55,6 +86,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
{currentQuestion.title}
</Typography>
<Box
id="batya"
sx={{
display: "flex",
gap: "20px",
@ -105,7 +137,14 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
</Box>
</Group>
{choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<Box
sx={{
maxWidth: "400px",
width: "100%",
height: "300px",
}}
onClick={(event) => event.preventDefault()}
>
<img
key={currentQuestion.id}
src={choiceImgUrlQuestion}

1
lib/components/ViewPublicationPage/questions/Varimg/index.tsx
View File

@ -134,6 +134,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
color: theme.palette.text.primary,
textAlign: "center",
}}
onClick={(event) => event.preventDefault()}
>
{answer ? (
choiceImgUrlAnswer ? (

1
lib/model/settingsData.ts
View File

@ -61,6 +61,7 @@ export type QuizSettings = {
};
export interface QuizConfig {
isUnSc?: boolean;
spec: undefined | true;
type: QuizType;
noStartPage: boolean;

1
lib/model/widget/side.ts
View File

@ -6,6 +6,7 @@ export interface SideWidgetComponentProps {
dialogDimensions?: { width: string; height: string };
fullScreen?: boolean;
buttonFlash?: boolean;
buttonText?: string;
/**
* Показывать виджет через X секунд
*/

79
lib/ui_kit/unscreen.ts Normal file
View File

@ -0,0 +1,79 @@
function addOverlay(overlay: HTMLElement) {
// const overlay = document.getElementById('overlay');
overlay.style.opacity = "1"; // Затемнено
overlay.style.pointerEvents = "auto"; // Включить клики
}
function removeOverlay(overlay: HTMLElement) {
overlay.style.opacity = "0"; // Вернуть в исходное состояние
overlay.style.pointerEvents = "none"; // Игнорировать клики
}
function addRemoveOverlayTimer(overlay: HTMLElement, time = 1000) {
addOverlay(overlay);
setTimeout(() => {
removeOverlay(overlay);
}, time); // 1 секунда затемнения
}
// Флаги для отслеживания состояния
let isMouseInside = true;
let isWindowFocused = true;
export default function unscreen(overlay: HTMLElement, root: HTMLElement) {
let focusTimeout: NodeJS.Timeout | undefined;
// Проверка состояния и выполнение нужного действия
function checkFocusAndMouse() {
if (!isWindowFocused || !isMouseInside) {
// ИЛИ
addOverlay(overlay);
} else if (isWindowFocused && isMouseInside) {
// И
removeOverlay(overlay);
}
}
// Добавляем обработчики событий
window.addEventListener("blur", () => {
console.log("blur");
isWindowFocused = false;
checkFocusAndMouse(); // Проверяем состояние
}); // Когда окно теряет фокус
window.addEventListener("focus", () => {
console.log("focus");
isWindowFocused = true;
checkFocusAndMouse(); // Проверяем состояние
}); // Когда окно получает фокус
window.addEventListener("mouseleave", () => {
console.log("mouseleave");
isMouseInside = false;
checkFocusAndMouse(); // Проверяем состояние
}); // Когда мышка покидает окно
window.addEventListener("mouseenter", () => {
console.log("mouseenter");
isMouseInside = true;
checkFocusAndMouse(); // Проверяем состояние
}); // Когда мышка возвращается в окно
root.addEventListener("contextmenu", (event) => event.preventDefault());
window.addEventListener("keydown", function (event) {
event.preventDefault();
if (event.key === "PrintScreen" || (event.ctrlKey && event.key === "p")) {
addRemoveOverlayTimer(overlay);
}
});
// Проверка для мобильных устройств
root.addEventListener("touchstart", function (event) {
// Пример: если есть более чем один жест
if (event.touches.length > 1) {
addRemoveOverlayTimer(overlay);
}
});
window.addEventListener("beforeprint", function () {
addRemoveOverlayTimer(overlay);
});
}

2
package.json
View File

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

8
src/widgets/side/QuizSideButton.tsx
View File

@ -19,6 +19,7 @@ export default function QuizSideButton({
buttonTextColor,
dialogDimensions,
fullScreen = false,
buttonText,
buttonFlash = false,
autoShowWidgetTime = 0,
autoShowQuizTime = null,
@ -89,7 +90,10 @@ export default function QuizSideButton({
},
]}
/>
<Fade in={!isWidgetHidden} timeout={400}>
<Fade
in={!isWidgetHidden}
timeout={400}
>
<Button
className="pena-quiz-widget-button"
variant="contained"
@ -116,7 +120,7 @@ export default function QuizSideButton({
},
]}
>
Пройти квиз
{buttonText || "Пройти квиз"}
{showButtonFlash && <RunningStripe />}
</Button>
</Fade>