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

- Adapted more of the design to be more responsive;

Browse Source 
- Revamped some of the UserSolutions;
- Transformed the homepage chart to use actual dynamic values;
- Created an endpoint for the stats;
This commit is contained in:
Tiago Ribeiro
2023-04-20 00:20:20 +01:00
parent d61592b73e
commit 87f7b717fc
22 changed files with 5468 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/exams/Finish.tsx
View File

@@ -54,11 +54,11 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
<div className="w-full h-full relative">
<section className="h-full w-full flex flex-col items-center justify-center gap-4">
<ProfileLevel user={user} className="h-1/2" />
<div className="h-2/3 w-1/2 flex flex-col items-center gap-4">
<div className="rounded-xl p-4 items-center flex justify-center gap-4">
<div className="h-2/3 w-2/3 flex flex-col items-center gap-4">
<div className="rounded-xl p-2 md:p-4 items-center flex lg:justify-center gap-2 md:gap-4 max-w-[100%] overflow-auto">
{modules.map((module) => (
<div
className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent p-4 rounded-xl text-white font-semibold`}
className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent py-4 px-2 rounded-xl text-white font-semibold`}
key={module}>
<div className="flex flex-col items-center">
<Icon path={ICONS[module]} color="white" size={2} />

18
src/exams/Listening.tsx
View File

@@ -20,7 +20,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening", exam: exam.id})));
onFinish(
[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "listening", exam: exam.id})),
);
} else {
onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
}
@@ -53,14 +55,16 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
)}
</div>
)}
<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
<div className="rounded-xl flex flex-col gap-4 items-center w-full overflow-auto">
{exam.audio.repeatableTimes > 0 && (
<>{exam.audio.repeatableTimes <= timesListened && <span>You are no longer allowed to listen to the audio again.</span>}</>
)}
<audio preload="auto" controls autoPlay onPlay={() => setTimesListened((prev) => prev + 1)}>
<source src={exam.audio.source} type="audio/mpeg" />
Your browser does not support the audio element
</audio>
{exam.audio.repeatableTimes > 0 && timesListened < exam.audio.repeatableTimes && (
<audio preload="auto" controls autoPlay onPlay={() => setTimesListened((prev) => prev + 1)}>
<source src={exam.audio.source} type="audio/mpeg" />
Your browser does not support the audio element
</audio>
)}
</div>
</>
);

6
src/exams/Reading.tsx
View File

@@ -80,7 +80,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -89,7 +89,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading", exam: exam.id})));
onFinish(
[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "reading", exam: exam.id})),
);
} else {
onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
}

6
src/exams/Speaking.tsx
View File

@@ -20,7 +20,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "speaking", exam: exam.id})));
onFinish(
[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "speaking", exam: exam.id})),
);
} else {
onFinish(userSolutions.map((x) => ({...x, module: "speaking", exam: exam.id})));
}

6
src/exams/Writing.tsx
View File

@@ -20,7 +20,7 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "writing", exam: exam.id})));
onFinish(
[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "writing", exam: exam.id})),
);
} else {
onFinish(userSolutions.map((x) => ({...x, module: "writing", exam: exam.id})));
}