длинные ответы не помещались в окошке для ответов

This commit is contained in:
Tamara 2024-01-07 22:17:41 +03:00
parent b013b254fe
commit 33754ed4a7
13 changed files with 81 additions and 29 deletions

@ -116,7 +116,7 @@ export const Footer = ({
}
const isEmpty = checkEmptyData({ resultData: nextQuestion });
console.log("isEmpty", isEmpty)
console.log("isEmpty", isEmpty);
if (nextQuestion) {
if (nextQuestion && quiz?.config.resultInfo.when === "before") {
if (isEmpty) {

@ -126,7 +126,9 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
}
label={
<Box sx={{ display: "flex", gap: "10px" }}>
<Typography>{variant.answer}</Typography>
<Typography sx={{ wordBreak: "break-word" }}>
{variant.answer}
</Typography>
</Box>
}
/>

@ -81,10 +81,19 @@ export const File = ({ currentQuestion }: FileProps) => {
color: "#FFFFFF",
display: "flex",
alignItems: "center",
overflow: "hidden",
gap: "15px",
}}
>
<Typography>{answer?.split("|")[0]}</Typography>
<Typography
sx={{
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
}}
>
{answer?.split("|")[0]}
</Typography>
<IconButton
sx={{ p: 0 }}
onClick={() => {

@ -102,10 +102,14 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
<FormControlLabel
key={variant.id}
sx={{
display: "block",
textAlign: "center",
color: theme.palette.text.primary,
marginTop: "10px",
marginLeft: 0,
padding: "10px",
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
},
}}
value={index}
control={

@ -117,15 +117,21 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
)}
</Box>
</Group>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover", margin: "10px" }}
alt=""
/>
</Box>
)}
{currentQuestion.content.back &&
currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
src={currentQuestion.content.back}
style={{
width: "100%",
height: "100%",
objectFit: "cover",
margin: "10px",
}}
alt=""
/>
</Box>
)}
</Box>
</Box>
);
@ -163,6 +169,9 @@ const VariantItem = ({
"&.MuiFormControl-root": {
width: "100%",
},
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
},
}}
value={index}
labelPlacement="start"

@ -89,6 +89,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
: "#9A9AAF",
display: "flex",
margin: isMobile ? 0 : undefined,
"& .MuiFormControlLabel-label": {
wordBreak: "break-word",
},
}}
value={index}
onClick={(event) => {
@ -138,8 +141,11 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
) : (currentQuestion.content.replText !== " " && currentQuestion.content.replText.length > 0) ? currentQuestion.content.replText : variant?.extendedText || isMobile ? (
"Выберите вариант ответа ниже"
) : currentQuestion.content.replText !== " " &&
currentQuestion.content.replText.length > 0 ? (
currentQuestion.content.replText
) : variant?.extendedText || isMobile ? (
"Выберите вариант ответа ниже"
) : (
"Выберите вариант ответа слева"
)}

@ -76,13 +76,22 @@ export default function MyQuizzesFull({
}}
>
{quizes.map((quiz) => {
return <QuizCard
key={quiz.id}
quiz={quiz}
openCount={quiz.sessions_count}
applicationCount={quiz.passed_count}
conversionPercent={quiz.sessions_count ? (quiz.passed_count/quiz.sessions_count * 100).toFixed(1) : 0}
/>
return (
<QuizCard
key={quiz.id}
quiz={quiz}
openCount={quiz.sessions_count}
applicationCount={quiz.passed_count}
conversionPercent={
quiz.sessions_count
? (
(quiz.passed_count / quiz.sessions_count) *
100
).toFixed(1)
: 0
}
/>
);
})}
</Box>
{children}

@ -107,7 +107,7 @@ export default function EditPage({
const isConditionMet =
[1].includes(currentStep) && quizConfig.type !== "form";
console.log(quiz)
console.log(quiz);
return (
<>
<Box

@ -219,7 +219,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
/>
</ButtonBase>
{resultData.content.video ? (
<video src={resultData.content.video} width="400" controls />
<video src={resultData.content.video} width="300" controls />
) : null}
</>
)}

@ -58,7 +58,6 @@ export default function Emoji({ question }: Props) {
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
}}
>
<Box
@ -110,7 +109,9 @@ export default function Emoji({ question }: Props) {
sx={{ display: "flex", alignItems: "center", gap: 2 }}
data-cy="variant-answer"
>
<Typography>{`${variant.answer}`}</Typography>
<Typography
sx={{ wordBreak: "break-word" }}
>{`${variant.answer}`}</Typography>
{variant.hints && (
<Tooltip title="Подсказка" placement="right">
<Box>

@ -104,7 +104,9 @@ export default function Images({ question, widthPreview }: Props) {
p: 1,
}}
>
<Typography>{variant.answer}</Typography>
<Typography sx={{ wordBreak: "break-word" }}>
{variant.answer}
</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>

@ -81,6 +81,9 @@ export default function Variant({ question }: Props) {
: theme.palette.background.default,
width: "100%",
margin: 0,
// "& .MuiFormControlLabel-label": {
// overflow: "hidden",
// }
}}
control={
question.content.multi ? (
@ -107,7 +110,12 @@ export default function Variant({ question }: Props) {
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography color={theme.palette.text.primary}>
<Typography
color={theme.palette.text.primary}
sx={{
wordBreak: "break-word",
}}
>
{variant.answer}
</Typography>
{variant.hints && (

@ -122,7 +122,9 @@ export default function Varimg({ question, widthPreview }: Props) {
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Typography sx={{ wordBreak: "break-word" }}>
{variant.answer}
</Typography>
{variant.hints && (
<Tooltip title={variant.hints} placement="right">
<Box>