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

Updated the Speaking exam to work with always having video

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-07 10:17:09 +01:00
parent 2d095316a7
commit 5e1b9ce2c7
3 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mo
ssr: false, ssr: false,
}); });
export default function Speaking({id, title, text, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) { export default function Speaking({id, title, text, video_url, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
const [recordingDuration, setRecordingDuration] = useState(0); const [recordingDuration, setRecordingDuration] = useState(0);
const [isRecording, setIsRecording] = useState(false); const [isRecording, setIsRecording] = useState(false);
const [mediaBlob, setMediaBlob] = useState<string>(); const [mediaBlob, setMediaBlob] = useState<string>();
@@ -45,30 +45,41 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
return ( return (
<div className="flex flex-col h-full w-full gap-9"> <div className="flex flex-col h-full w-full gap-9">
<div className="flex flex-col w-full gap-14 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16"> <div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<span className="font-semibold">{title}</span> <span className="font-semibold">{title}</span>
<span className="font-regular"> {!video_url && (
{text.split("\\n").map((line, index) => ( <span className="font-regular">
<Fragment key={index}> {text.split("\\n").map((line, index) => (
<span>{line}</span> <Fragment key={index}>
<br /> <span>{line}</span>
</Fragment> <br />
))} </Fragment>
</span>
</div>
{prompts && prompts.length > 0 && (
<div className="flex flex-col gap-4">
<span className="font-bold">You should talk about the following things:</span>
<div className="flex flex-col gap-1 ml-4">
{prompts.map((x, index) => (
<li className="italic" key={index}>
{x}
</li>
))} ))}
</span>
)}
</div>
<div className="flex gap-6">
{video_url && (
<div className="flex flex-col gap-4 w-full items-center">
<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
<source src={video_url} />
</video>
</div> </div>
</div> )}
)} {prompts && prompts.length > 0 && (
<div className="flex flex-col gap-4">
<span className="font-bold">You should talk about the following things:</span>
<div className="flex flex-col gap-1 ml-4">
{prompts.map((x, index) => (
<li className="italic" key={index}>
{x}
</li>
))}
</div>
</div>
)}
</div>
</div> </div>
<ReactMediaRecorder <ReactMediaRecorder

2
src/exams/Speaking.tsx
View File

@@ -5,6 +5,7 @@ import {infoButtonStyle} from "@/constants/buttonStyles";
import {UserSolution, SpeakingExam} from "@/interfaces/exam"; import {UserSolution, SpeakingExam} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import {defaultUserSolutions} from "@/utils/exams"; import {defaultUserSolutions} from "@/utils/exams";
import {convertCamelCaseToReadable} from "@/utils/string";
import {mdiArrowRight} from "@mdi/js"; import {mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react"; import Icon from "@mdi/react";
import clsx from "clsx"; import clsx from "clsx";
@@ -67,6 +68,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
<> <>
<div className="flex flex-col h-full w-full gap-8 items-center"> <div className="flex flex-col h-full w-full gap-8 items-center">
<ModuleTitle <ModuleTitle
label={convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
minTimer={exam.minTimer} minTimer={exam.minTimer}
exerciseIndex={exerciseIndex + 1} exerciseIndex={exerciseIndex + 1}
module="speaking" module="speaking"

1
src/interfaces/exam.ts
View File

@@ -104,6 +104,7 @@ export interface SpeakingExercise {
title: string; title: string;
text: string; text: string;
prompts: string[]; prompts: string[];
video_url: string;
userSolutions: { userSolutions: {
id: string; id: string;
solution: string; solution: string;