SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

improve questions preview

Browse Source
This commit is contained in:
nflnkr 2023-10-13 15:10:14 +03:00
parent d8fca6a339
commit db8e8029d0
4 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
View File

@ -9,36 +9,36 @@ interface Props {
export default function File({ question }: Props) {
const fileInputRef = useRef<HTMLInputElement>(null);
const [files, setFiles] = useState<File[] | null>(null);
const [file, setFile] = useState<File | null>(null);
function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files) return setFiles(null);
setFiles(Array.from(event.target.files));
if (!event.target.files?.[0]) return setFile(null);
setFile(event.target.files[0]);
}
return (
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Box>
<Button
variant="contained"
onClick={() => fileInputRef.current?.click()}
>
Загрузить файл
<input
ref={fileInputRef}
onChange={handleFileChange}
type="file"
style={{
display: "none",
}}
/>
</Button>
</Box>
<Button
variant="contained"
onClick={() => fileInputRef.current?.click()}
>
Загрузить файл
<input
ref={fileInputRef}
onChange={handleFileChange}
type="file"
style={{
display: "none",
}}
/>
</Button>
{file && <Typography>Выбран файл: {file.name}</Typography>}
</Box>
);
}

24
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
View File

@ -53,16 +53,20 @@ export default function Images({ question }: Props) {
borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
}}
>
<img
src={variant.extendedText}
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
{variant.extendedText ?
<img
src={variant.extendedText}
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
:
<Typography p={2}>Картинка отсутствует</Typography>
}
<Divider sx={{ width: "100%" }} />
<Box sx={{
display: "flex",

17
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
View File

@ -12,12 +12,23 @@ export default function Page({ question }: Props) {
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<Box>
<Typography>{question.content.text}</Typography>
</Box>
<Typography>{question.content.text}</Typography>
{question.content.picture &&
<img
src={question.content.picture}
alt=""
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
}
</Box>
);
}

6
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -55,8 +55,6 @@ export default function Varimg({ question }: Props) {
<Box sx={{
border: "1px solid #E3E3E3",
maxWidth: "400px",
minWidth: "200px",
minHeight: "150px",
display: "flex",
justifyContent: "center",
alignItems: "center",
@ -64,7 +62,7 @@ export default function Varimg({ question }: Props) {
}}>
{currentVariant?.extendedText ?
<img
src={currentVariant?.extendedText}
src={currentVariant.extendedText}
alt="question variant"
style={{
width: "100%",
@ -74,7 +72,7 @@ export default function Varimg({ question }: Props) {
}}
/>
:
<Typography>Выберите вариант</Typography>
<Typography p={2}>{selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"}</Typography>
}
</Box>
</Box>