From 60f0c5d6ddd8a24c064686fc23126d1288c1efa4 Mon Sep 17 00:00:00 2001 From: Teoh Xi Sheng Date: Mon, 23 Sep 2024 04:22:53 +0800 Subject: [PATCH] added react-katex for question and answer --- src/app/dashboard/course/[courseId]/page.tsx | 14 ++- src/app/dashboard/quest/[questId]/page.tsx | 3 +- .../course-group/course-group-card.tsx | 29 ++++--- src/components/dashboard/quest/quest-card.tsx | 8 +- .../question/attempt/answer-attempt-card.tsx | 4 +- .../skeleton/skeleton-answer-attempt-card.tsx | 86 +++++++++++++++++++ 6 files changed, 116 insertions(+), 28 deletions(-) create mode 100644 src/components/dashboard/skeleton/skeleton-answer-attempt-card.tsx diff --git a/src/app/dashboard/course/[courseId]/page.tsx b/src/app/dashboard/course/[courseId]/page.tsx index 921db63..9adbed1 100644 --- a/src/app/dashboard/course/[courseId]/page.tsx +++ b/src/app/dashboard/course/[courseId]/page.tsx @@ -209,7 +209,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea return ( - + @@ -400,7 +400,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea Groups - Groups available for this course + Groups available for this course { eduquestUser?.is_staff ? @@ -432,14 +432,14 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea handleCourseGroupSelect={handleCourseGroupSelect} /> ) : ( - No groups available for this course + No groups available for this course )} - Quests - Quests available for this group + Quests + Quests available for this group {eduquestUser?.is_staff && selectedCourseGroupId? ( @@ -458,8 +458,6 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea ) : null} - - {showCreateQuestForm && course ? : null} @@ -469,7 +467,7 @@ export default function Page({ params }: { params: { courseId: string } }) : Rea quests && quests.length > 0 ? ( ) : ( - No quests available for this group + No quests available for this group ) ) : ( Select a group to view the quests diff --git a/src/app/dashboard/quest/[questId]/page.tsx b/src/app/dashboard/quest/[questId]/page.tsx index 0b53136..9529ddf 100644 --- a/src/app/dashboard/quest/[questId]/page.tsx +++ b/src/app/dashboard/quest/[questId]/page.tsx @@ -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 { @@ -232,7 +233,7 @@ export default function Page({ params }: { params: { questId: string } }) : Reac {showAnswerAttemptsMode ? ( loadingUserAnswerAttempts ? ( - + ) : ( userAnswerAttempts && userAnswerAttemptIdAndStatus ? ( - {/* Pagination Controls - only show if pageCount > 1 */} - {pageCount > 1 && ( - - - - )} + {/* Grid Container */} @@ -170,6 +158,21 @@ export function CourseGroupCard({ rows = [], userCourseGroupEnrollments, handleC ))} + + {/* Pagination Controls - only show if pageCount > 1 */} + {pageCount > 1 && ( + + + + )} + ); } diff --git a/src/components/dashboard/quest/quest-card.tsx b/src/components/dashboard/quest/quest-card.tsx index 9b31d4b..262749c 100644 --- a/src/components/dashboard/quest/quest-card.tsx +++ b/src/components/dashboard/quest/quest-card.tsx @@ -45,9 +45,7 @@ export function QuestCard({ rows = [], onQuestDeleteSuccess }: QuestCardProps): return ( - - - + {currentQuests.map((quest) => ( @@ -105,8 +103,10 @@ export function QuestCard({ rows = [], onQuestDeleteSuccess }: QuestCardProps): ))} - + + + ); diff --git a/src/components/dashboard/quest/question/attempt/answer-attempt-card.tsx b/src/components/dashboard/quest/question/attempt/answer-attempt-card.tsx index 215e4a8..34e5b42 100644 --- a/src/components/dashboard/quest/question/attempt/answer-attempt-card.tsx +++ b/src/components/dashboard/quest/question/attempt/answer-attempt-card.tsx @@ -238,7 +238,7 @@ export function AnswerAttemptCard({ data, userQuestAttemptId, onAnswerChange, su - {question.text} + {parseKaTeX(question.text)} {answers.map((attempt) => { @@ -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 ? {parseKaTeX(attempt.answer.reason)} diff --git a/src/components/dashboard/skeleton/skeleton-answer-attempt-card.tsx b/src/components/dashboard/skeleton/skeleton-answer-attempt-card.tsx new file mode 100644 index 0000000..944f339 --- /dev/null +++ b/src/components/dashboard/skeleton/skeleton-answer-attempt-card.tsx @@ -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 ( +
+ + + } + subheader={ + + + + + } + /> + + + + + + + + + + + + {Array.from({ length: 4 }).map((_, index) => ( + + + } + label={} + /> + + ))} + + + + + + + + + + + + + +
+ ); +}