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

Updated the design of the feedback

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-07-27 00:04:52 +01:00
parent a6160c3cf0
commit 9ef04b822a
3 changed files with 89 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Solutions/InteractiveSpeaking.tsx
View File

@@ -137,13 +137,7 @@ export default function InteractiveSpeaking({
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div
className={clsx(
"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2",
typeof taskResponse !== "number" && "tooltip",
)}
data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
key={key}>
<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
{key}: Level {grade}
</div>
);
@@ -197,6 +191,17 @@ export default function InteractiveSpeaking({
}>
Recommended Answer (Prompt 3)
</Tab>
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
)
}>
Global Overview
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
@@ -217,6 +222,23 @@ export default function InteractiveSpeaking({
{userSolutions[0].evaluation!.perfect_answer_3!.answer.replaceAll(/\s{2,}/g, "\n\n")}
</span>
</Tab.Panel>
<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-4">
{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
const taskResponse = userSolutions[0].evaluation!.task_response[key];
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div key={key} className="flex flex-col gap-2">
<span className={"font-semibold"}>
{key}: Level {grade}
</span>
{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
</div>
);
})}
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
) : (

36
src/components/Solutions/Speaking.tsx
View File

@@ -131,13 +131,7 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div
className={clsx(
"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2",
typeof taskResponse !== "number" && "tooltip",
)}
data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
key={key}>
<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2")} key={key}>
{key}: Level {grade}
</div>
);
@@ -169,6 +163,17 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
}>
Recommended Answer
</Tab>
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
)
}>
Global Overview
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
@@ -182,6 +187,23 @@ export default function Speaking({id, type, title, video_url, text, prompts, use
userSolutions[0].evaluation!.perfect_answer_1.replaceAll(/\s{2,}/g, "\n\n")}
</span>
</Tab.Panel>
<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-4">
{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
const taskResponse = userSolutions[0].evaluation!.task_response[key];
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div key={key} className="flex flex-col gap-2">
<span className={"font-semibold"}>
{key}: Level {grade}
</span>
{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
</div>
);
})}
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
) : (

40
src/components/Solutions/Writing.tsx
View File

@@ -14,7 +14,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
const [isModalOpen, setIsModalOpen] = useState(false);
const [showDiff, setShowDiff] = useState(false);
const { user } = useUser();
const {user} = useUser();
const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
@@ -128,13 +128,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div
className={clsx(
"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2",
typeof taskResponse !== "number" && "tooltip",
)}
data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}
key={key}>
<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2")} key={key}>
{key}: Level {grade}
</div>
);
@@ -165,9 +159,20 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
}>
Recommended Answer
</Tab>
<Tab
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
)
}>
Global Overview
</Tab>
{aiEval && user?.type !== "student" && (
<Tab
className={({ selected }) =>
className={({selected}) =>
clsx(
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -188,6 +193,23 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n").replaceAll("\\n", "\n")}
</span>
</Tab.Panel>
<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-4">
{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => {
const taskResponse = userSolutions[0].evaluation!.task_response[key];
const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
return (
<div key={key} className="flex flex-col gap-2">
<span className={"font-semibold"}>
{key}: Level {grade}
</span>
{typeof taskResponse !== "number" && <span>{taskResponse.comment}</span>}
</div>
);
})}
</div>
</Tab.Panel>
{aiEval && user?.type !== "student" && (
<Tab.Panel className="w-full bg-ielts-writing/10 h-fit rounded-xl p-6 flex flex-col gap-4">
<AIDetection {...aiEval} />