Skip to content

Commit

Permalink
added react-katex for question and answer
Browse files Browse the repository at this point in the history
  • Loading branch information
xeroxis-xs committed Sep 22, 2024
1 parent e0cf928 commit 60f0c5d
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 28 deletions.
14 changes: 6 additions & 8 deletions src/app/dashboard/course/[courseId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea

return (
<Stack spacing={3}>
<Stack direction="row" spacing={1} sx={{justifyContent: 'space-between'}}>
<Stack direction="row"sx={{justifyContent: 'space-between'}}>
<Button startIcon={<CaretLeftIcon fontSize="var(--icon-fontSize-md)"/>} component={RouterLink} href={paths.dashboard.course.all}>View all Courses</Button>

</Stack>
Expand Down Expand Up @@ -400,7 +400,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea
<Stack direction="row" sx={{justifyContent: 'space-between', alignItems: 'center', verticalAlign: 'center', pt:3}}>
<Box>
<Typography variant="h5">Groups</Typography>
<Typography variant="body2" color="text.secondary">Groups available for this course</Typography>
<Typography variant="body2" color="text.secondary" pb={2}>Groups available for this course</Typography>
</Box>
{ eduquestUser?.is_staff ?
<Stack direction='row' spacing={1}>
Expand Down Expand Up @@ -432,14 +432,14 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea
handleCourseGroupSelect={handleCourseGroupSelect}
/>
) : (
<Typography variant="body1">No groups available for this course</Typography>
<Typography variant="body1" pb={2}>No groups available for this course</Typography>
)}


<Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center', verticalAlign: 'center', pt: 3 }}>
<Box>
<Typography variant="h5">Quests</Typography>
<Typography variant="body2" color="text.secondary">Quests available for this group</Typography>
<Typography variant="h5" pt={4}>Quests</Typography>
<Typography variant="body2" color="text.secondary" pb={2}>Quests available for this group</Typography>
</Box>
{eduquestUser?.is_staff && selectedCourseGroupId? (
<Stack direction="row" spacing={1}>
Expand All @@ -458,8 +458,6 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea
) : null}
</Stack>



{showCreateQuestForm && course ?
<QuestNewForm onFormSubmitSuccess={fetchQuestsByCourseGroup} courseGroupId={selectedCourseGroupId} /> : null}

Expand All @@ -469,7 +467,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea
quests && quests.length > 0 ? (
<QuestCard rows={quests} onQuestDeleteSuccess={fetchQuests} />
) : (
<Typography variant="body1">No quests available for this group</Typography>
<Typography variant="body1" pb={2}>No quests available for this group</Typography>
)
) : (
<Typography variant="body1">Select a group to view the quests</Typography>
Expand Down
3 changes: 2 additions & 1 deletion src/app/dashboard/quest/[questId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {getUserAnswerAttemptByUserQuestAttempt} from "@/api/services/user-answer
import {type UserAnswerAttempt} from "@/types/user-answer-attempt";
import {AnswerAttemptCard} from "@/components/dashboard/quest/question/attempt/answer-attempt-card";
import Box from "@mui/material/Box";
import {SkeletonAnswerAttemptCard} from "@/components/dashboard/skeleton/skeleton-answer-attempt-card";


export default function Page({ params }: { params: { questId: string } }) : React.JSX.Element {
Expand Down Expand Up @@ -232,7 +233,7 @@ export default function Page({ params }: { params: { questId: string } }) : Reac

{showAnswerAttemptsMode ? (
loadingUserAnswerAttempts ? (
<SkeletonQuestAttemptTable />
<SkeletonAnswerAttemptCard />
) : (
userAnswerAttempts && userAnswerAttemptIdAndStatus ? (
<AnswerAttemptCard
Expand Down
29 changes: 16 additions & 13 deletions src/components/dashboard/course-group/course-group-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,19 +78,7 @@ export function CourseGroupCard({ rows = [], userCourseGroupEnrollments, handleC

return (
<Box>
{/* Pagination Controls - only show if pageCount > 1 */}
{pageCount > 1 && (
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
<Pagination
count={pageCount}
page={page}
onChange={handleChangePage}
color="primary"
siblingCount={0} // Optional: Adjust pagination appearance
boundaryCount={1} // Optional: Adjust pagination appearance
/>
</Box>
)}


{/* Grid Container */}
<Grid container spacing={2}>
Expand Down Expand Up @@ -170,6 +158,21 @@ export function CourseGroupCard({ rows = [], userCourseGroupEnrollments, handleC
</Grid>
))}
</Grid>

{/* Pagination Controls - only show if pageCount > 1 */}
{pageCount > 1 && (
<Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
<Pagination
count={pageCount}
page={page}
onChange={handleChangePage}
color="primary"
siblingCount={0} // Optional: Adjust pagination appearance
boundaryCount={1} // Optional: Adjust pagination appearance
/>
</Box>
)}

</Box>
);
}
8 changes: 4 additions & 4 deletions src/components/dashboard/quest/quest-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@ export function QuestCard({ rows = [], onQuestDeleteSuccess }: QuestCardProps):

return (
<Box>
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
<Pagination count={pageCount} page={page} onChange={handleChangePage} color="primary" />
</Box>

<Grid container spacing={4}>

{currentQuests.map((quest) => (
Expand Down Expand Up @@ -105,8 +103,10 @@ export function QuestCard({ rows = [], onQuestDeleteSuccess }: QuestCardProps):
</Grid>
))}


</Grid>
<Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
<Pagination count={pageCount} page={page} onChange={handleChangePage} color="primary" />
</Box>

</Box>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export function AnswerAttemptCard({ data, userQuestAttemptId, onAnswerChange, su
<Grid container spacing={3}>
<Grid xs={12}>
<Typography variant="subtitle1">
{question.text}
{parseKaTeX(question.text)}
</Typography>
</Grid>
{answers.map((attempt) => {
Expand All @@ -251,7 +251,7 @@ export function AnswerAttemptCard({ data, userQuestAttemptId, onAnswerChange, su
onChange={(e) => { handleCheckboxChange(attempt.id, attempt.answer.id, e.target.checked); }}
/>
}
label={attempt.answer.text}
label={parseKaTeX(attempt.answer.text)}
/>
{showExplanation[attempt.question.id] && attempt.answer.reason ? <Typography variant="body2" mt={1}>
{parseKaTeX(attempt.answer.reason)}
Expand Down
86 changes: 86 additions & 0 deletions src/components/dashboard/skeleton/skeleton-answer-attempt-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@

"use client";

import * as React from 'react';
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import CardHeader from "@mui/material/CardHeader";
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import { FloppyDisk as FloppyDiskIcon } from "@phosphor-icons/react/dist/ssr/FloppyDisk";
import { PaperPlaneTilt as PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/ssr/PaperPlaneTilt";
import {Divider, Stack, Skeleton} from "@mui/material";
import Points from "../../../../public/assets/point.svg";


export function SkeletonAnswerAttemptCard(): React.JSX.Element {
return (
<form >
<FormGroup>
<Card>
<CardHeader
title={<Skeleton variant="text" width={100} />}
subheader={
<Stack direction="row" spacing='6px' sx={{ alignItems: 'center', pt: 0.5 }}>
<Typography variant="body2"><Skeleton variant="text" width={30}/> </Typography>
<Points height={18} />
</Stack>
}
/>
<Divider />
<CardContent>
<Grid container spacing={3}>
<Grid xs={12}>
<Typography variant="subtitle1">
<Skeleton variant="text" width={400} />
</Typography>
<Typography variant="subtitle1">
<Skeleton variant="text" width={400} />
</Typography>
</Grid>
{Array.from({ length: 4 }).map((_, index) => (
<Grid key={index} md={6} xs={12}>
<FormControlLabel
control={
<Checkbox
checked={false}
/>
}
label={<Skeleton variant="text" width={200} />}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions sx={{ justifyContent: 'space-between' }}>
<Stack direction="row" pl={2}>
<Skeleton variant="text" width={100} />
</Stack>
<Stack direction="row" spacing={1}>
<Button
startIcon={<FloppyDiskIcon />}
variant="outlined"
disabled
>
Save All
</Button>
<Button
endIcon={<PaperPlaneTiltIcon />}
type="submit"
variant="contained"
disabled
>
Submit All
</Button>
</Stack>
</CardActions>
</Card>
</FormGroup>
</form>
);
}

0 comments on commit 60f0c5d

Please sign in to comment.