devops/encoach_ui_odoo19
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a simple Practice Badge to showcase when an exercise is a practice exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-11-16 12:03:08 +00:00
parent d564d86feb
commit 501606233f
9 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Solutions/MultipleChoice.tsx
View File

@@ -6,6 +6,7 @@ import reactStringReplace from "react-string-replace";
import { CommonProps } from ".";
import Button from "../Low/Button";
import { v4 } from "uuid";
import PracticeBadge from "../Low/PracticeBadge";
function Question({
id,
@@ -14,7 +15,8 @@ function Question({
solution,
options,
userSolution,
}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) {
isPractice = false
}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean, isPractice?: boolean }) {
const { userSolutions } = useExamStore((state) => state);
const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
@@ -44,7 +46,8 @@ function Question({
};
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 relative">
{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
{isNaN(Number(id)) ? (
<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
) : (
@@ -89,7 +92,7 @@ function Question({
);
}
export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack, disableProgressButtons = false }: MultipleChoiceExercise & CommonProps) {
export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack, isPractice = false, disableProgressButtons = false }: MultipleChoiceExercise & CommonProps) {
const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
const stats = useExamStore((state) => state.userSolutions);
@@ -149,6 +152,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question
{...question}
isPractice={isPractice}
userSolution={userSolutions.find((x) => question.id === x.question)?.option}
/>
</div>
@@ -160,6 +164,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}
isPractice={isPractice}
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
/>
)}
@@ -169,6 +174,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<Question
{...questions[questionIndex + 1]}
isPractice={isPractice}
userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
/>
</div>