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/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>
) : (