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

Merge, do not push to develop yet, Listening.tsx is not updated

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-11-26 10:33:02 +00:00
parent 2ed4e6509e 39ff336af5
commit de08164dd8
44 changed files with 1989 additions and 1452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Exercises/MultipleChoice/Question.tsx
View File

@@ -1,4 +1,5 @@
/* eslint-disable @next/next/no-img-element */
import PracticeBadge from "@/components/Low/PracticeBadge";
import { MultipleChoiceQuestion } from "@/interfaces/exam";
import clsx from "clsx";
import reactStringReplace from "react-string-replace";
@@ -8,6 +9,7 @@ interface Props {
userSolution: string | undefined;
onSelectOption?: (option: string) => void;
showSolution?: boolean;
isPractice?: boolean
}
const Question: React.FC<MultipleChoiceQuestion & Props> = ({
@@ -17,6 +19,7 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
options,
userSolution,
onSelectOption,
isPractice,
}) => {
const renderPrompt = (prompt: string) => {
return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
@@ -26,11 +29,12 @@ const Question: React.FC<MultipleChoiceQuestion & Props> = ({
};
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>
<span className={clsx("text-lg", isPractice && "text-mti-red")}>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
) : (
<span className="text-lg">
<span className={clsx("text-lg", isPractice && "text-mti-red")}>
<>
{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
</>

4
src/components/Exercises/MultipleChoice/index.tsx
View File

@@ -4,6 +4,7 @@ import clsx from "clsx";
import { useCallback, useEffect, useState } from "react";
import { CommonProps } from "../types";
import Question from "./Question";
import PracticeBadge from "../../Low/PracticeBadge";
const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
@@ -81,6 +82,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
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)}
/>
@@ -93,6 +95,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}
isPractice={isPractice}
userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
/>
@@ -103,6 +106,7 @@ const MultipleChoice: React.FC<MultipleChoiceExercise & CommonProps> = ({
<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])}
/>