devops/encoach_frontend
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

5
src/components/Exercises/FillBlanks/index.tsx
View File

@@ -7,6 +7,7 @@ import { CommonProps } from "..";
import Button from "../../Low/Button";
import { v4 } from "uuid";
import MCDropdown from "./MCDropdown";
import PracticeBadge from "@/components/Low/PracticeBadge";
const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
id,
@@ -196,7 +197,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
<div className="flex flex-col gap-4">
{!disableProgressButtons && progressButtons()}
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full relative", !disableProgressButtons && "mb-20")}>
{variant !== "mc" && (
<span className="text-sm w-full leading-6">
{prompt.split("\\n").map((line, index) => (
@@ -207,6 +208,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
))}
</span>
)}
{isPractice && <PracticeBadge className="w-fit self-end" />}
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span>
{variant !== "mc" && (
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
@@ -234,6 +236,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
</div>
</div>
)}
</div>
{!disableProgressButtons && progressButtons()}

3
src/components/Exercises/MatchSentences.tsx
View File

@@ -10,6 +10,7 @@ import Button from "../Low/Button";
import Xarrow from "react-xarrows";
import useExamStore from "@/stores/examStore";
import { DndContext, DragEndEvent, useDraggable, useDroppable } from "@dnd-kit/core";
import PracticeBadge from "../Low/PracticeBadge";
function DroppableQuestionArea({ question, answer }: { question: MatchSentenceExerciseSentence; answer?: string }) {
const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` });
@@ -148,6 +149,8 @@ export default function MatchSentences({
))}
</span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<DndContext onDragEnd={handleDragEnd}>
<div className="flex flex-col gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
<div className="flex flex-col gap-4">

9
src/components/Exercises/MultipleChoice.tsx
View File

@@ -7,6 +7,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,
@@ -15,10 +16,12 @@ function Question({
options,
userSolution,
onSelectOption,
isPractice = false
}: MultipleChoiceQuestion & {
userSolution: string | undefined;
onSelectOption?: (option: string) => void;
showSolution?: boolean;
isPractice?: boolean
}) {
const renderPrompt = (prompt: string) => {
return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
@@ -28,7 +31,8 @@ function Question({
};
return (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-8 relative">
{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
{isNaN(Number(id)) ? (
<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
) : (
@@ -194,6 +198,7 @@ export default function MultipleChoice({
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={answers.find((x) => question.id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, question)}
/>
@@ -206,6 +211,7 @@ export default function MultipleChoice({
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}
isPractice={isPractice}
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
/>
@@ -216,6 +222,7 @@ export default function MultipleChoice({
<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={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
/>

3
src/components/Exercises/Speaking.tsx
View File

@@ -8,6 +8,7 @@ import useExamStore from "@/stores/examStore";
import { downloadBlob } from "@/utils/evaluation";
import axios from "axios";
import Modal from "../Modal";
import PracticeBadge from "../Low/PracticeBadge";
const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
@@ -172,6 +173,8 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
</div>
</div>
{isPractice && <PracticeBadge className="w-fit self-end" />}
{prompts && prompts.length > 0 && (
<div className="w-full h-full flex flex-col gap-4">
<textarea

2
src/components/Exercises/TrueFalse.tsx
View File

@@ -4,6 +4,7 @@ import clsx from "clsx";
import { Fragment, useEffect, useState } from "react";
import { CommonProps } from ".";
import Button from "../Low/Button";
import PracticeBadge from "../Low/PracticeBadge";
export default function TrueFalse({
id,
@@ -108,6 +109,7 @@ export default function TrueFalse({
</div>
</div>
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
{questions.map((question, index) => {
const id = question.id.toString();

4
src/components/Exercises/WriteBlanks.tsx
View File

@@ -9,6 +9,7 @@ import { CommonProps } from ".";
import { toast } from "react-toastify";
import Button from "../Low/Button";
import useExamStore from "@/stores/examStore";
import PracticeBadge from "../Low/PracticeBadge";
function Blank({
id,
@@ -128,7 +129,7 @@ export default function WriteBlanks({
)
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 relative">
{!disableProgressButtons && progressButtons()}
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
@@ -140,6 +141,7 @@ export default function WriteBlanks({
</span>
))}
</span>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
{text.split("\\n").map((line, index) => (
<p key={index}>

3
src/components/Exercises/Writing.tsx
View File

@@ -6,6 +6,7 @@ import { toast } from "react-toastify";
import Button from "../Low/Button";
import { Dialog, Transition } from "@headlessui/react";
import useExamStore from "@/stores/examStore";
import PracticeBadge from "../Low/PracticeBadge";
export default function Writing({
id,
@@ -159,6 +160,8 @@ export default function Writing({
)}
</div>
{isPractice && <PracticeBadge className="w-fit self-end" />}
<div className="w-full h-full flex flex-col gap-4">
<span className="whitespace-pre-wrap">{suffix}</span>
<textarea

11
src/components/Low/PracticeBadge.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { clsx } from "clsx"
interface Props {
className?: string
}
export default function PracticeBadge({ className }: Props) {
return (
<div className={clsx("bg-mti-purple/20 px-2 py-1 rounded-full text-sm ring-1 ring-mti-purple", className)}>Practice Exercise</div>
)
}

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>