diff --git a/frontend/src/components/VerbalPronunciationExercise.tsx b/frontend/src/components/VerbalPronunciationExercise.tsx index ec591a9..2214e7d 100644 --- a/frontend/src/components/VerbalPronunciationExercise.tsx +++ b/frontend/src/components/VerbalPronunciationExercise.tsx @@ -17,6 +17,7 @@ export default function VerbalPronunciationExercise({q, chapter, onSubmit}: Verb const [loading, setLoading] = useState(false); const [correct, setCorrect] = useState(""); const [reason, setReason] = useState(""); + const [userAnswer, setUserAnswer] = useState(""); const handleSubmit = () => { if (answered) { @@ -46,7 +47,8 @@ export default function VerbalPronunciationExercise({q, chapter, onSubmit}: Verb const audioFile = new File([blob], "audio.wav", { type: 'audio/wav' }); const text = await speechToText(audioFile); - const aiMark = await getAIMarking(q.question, text.toLowerCase(), "", chapter, language); + setUserAnswer(text); + const aiMark = await getAIMarking(`Please pronounce the following: ${q.question}`, text.toLowerCase(), "", chapter, language); setAnswered(true); setCorrect(aiMark.correct); setReason(aiMark.reason); @@ -73,14 +75,14 @@ export default function VerbalPronunciationExercise({q, chapter, onSubmit}: Verb
@@ -88,24 +90,25 @@ export default function VerbalPronunciationExercise({q, chapter, onSubmit}: Verb ) } else { return ( -
-

{correct}

-

{reason}

- -
+
+
{correct ? "Correct!" : "Incorrect"}
+
{reason}
+ + {answered && !correct && } +
) } } - return ( -
-
-

Say the following

-
- {q.question} -
- {ResponseSection(correct, reason)} -
+ return
+
Say the following
+
+ {q.question}
- ) + {userAnswer &&
+ {userAnswer} +
} +
+ {ResponseSection(correct, reason)} +
} diff --git a/frontend/src/components/VerbalQuestionsExercise.tsx b/frontend/src/components/VerbalQuestionsExercise.tsx index 872edce..9b4149a 100644 --- a/frontend/src/components/VerbalQuestionsExercise.tsx +++ b/frontend/src/components/VerbalQuestionsExercise.tsx @@ -52,41 +52,40 @@ export default function VerbalQuestionsExercise({q, chapter, onSubmit}: VerbalQu } - const ResponseSection = (correct: string | null, reason: string | null) => { - if (!answered) { - return ( -
-
- {remainingWords.map((word, index) => ( - handleWordBankClick(word)}> + const ResponseSection = (correct: string | null, reason: string | null) => { + if (!answered) { + return ( +
+
+ {remainingWords.map((word, index) => ( + handleWordBankClick(word)}> {word} - ))} -
- -
+ ))} +
+ +
- ) - } else { - return ( -
-

{correct}

-

{reason}

- -
- ) - } + ) + } else { + return
+
{correct ? "Correct!" : "Incorrect"}
+
{reason}
+ + {answered && !correct && } +
} + } return (
diff --git a/frontend/src/components/VideoExercise.tsx b/frontend/src/components/VideoExercise.tsx index e8fcaee..179235e 100644 --- a/frontend/src/components/VideoExercise.tsx +++ b/frontend/src/components/VideoExercise.tsx @@ -43,11 +43,12 @@ export default function VideoExercise({q, chapter, onSubmit}: VideoQuestionProps } return ( -
+
{q.question}
+
{!answered ?
@@ -57,10 +58,11 @@ export default function VideoExercise({q, chapter, onSubmit}: VideoQuestionProps {loading ? : "Submit"}
: -
-

{correct}

-

{reason}

- +
+
{correct ? "Correct!" : "Incorrect"}
+
{reason}
+ + {answered && !correct && }
}
diff --git a/frontend/src/components/WrittenQuestionExercise.tsx b/frontend/src/components/WrittenQuestionExercise.tsx index b8f05a3..31dba9a 100644 --- a/frontend/src/components/WrittenQuestionExercise.tsx +++ b/frontend/src/components/WrittenQuestionExercise.tsx @@ -80,13 +80,12 @@ export default function WrittenQuestionExercise({q, chapter, onSubmit}: WrittenQ ) } else { - return ( -
-

{correct}

-

{reason}

- -
- ) + return
+
{correct ? "Correct!" : "Incorrect"}
+
{reason}
+ + {answered && !correct && } +
} } diff --git a/frontend/src/components/WrittenVocabularyExercise.tsx b/frontend/src/components/WrittenVocabularyExercise.tsx index c9f5515..d69bf3b 100644 --- a/frontend/src/components/WrittenVocabularyExercise.tsx +++ b/frontend/src/components/WrittenVocabularyExercise.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; import {VocabularyQuestion} from "../logic/CourseData"; +import {Icon} from "@iconify/react"; interface WrittenVocabularyProps { q: VocabularyQuestion @@ -19,23 +20,30 @@ export default function WrittenQuestionExercise({q, onSubmit}: WrittenVocabulary } return ( -
-
+
+
Recall the following word
+
{q.question}
-
- {answered ? -
-

{q.pronunciation}

-

{q.description}

-

{q.example}

-
- - -
-
- : - +
+ {answered && +
+
{q.pronunciation}
+
{q.description}
+
{q.example}
+
+ } +
+
+ {answered ? + <> + + + : + <> +
Please click "show meaning" after you have tried to recall the meaning of the word
+ + }
diff --git a/frontend/src/logic/CourseData.ts b/frontend/src/logic/CourseData.ts index d0015e9..69e3aca 100644 --- a/frontend/src/logic/CourseData.ts +++ b/frontend/src/logic/CourseData.ts @@ -59,14 +59,6 @@ export const chapters_jp: Chapter[] = [ name: 'Order food', steps: [{ questions: [ - - { - question: 'What did Yui come to the club meeting for?', - clipUrl: window.location.origin + "/video/cake.mp4", - description: "This is a clip from the anime 'K-On'. Yui is a member of the light music club. She came to the club meeting to eat cake.", - expected: 'ケーキ or cake', - type: 'video', - }, { question: 'Translate this sentence: すしをください', wordBank: ['I', 'sushi', 'cookies', 'want', 'please', 'give', 'rice', 'some', 'yesterday'], @@ -89,10 +81,17 @@ export const chapters_jp: Chapter[] = [ type: 'verbal-question', }, { - question: 'Please say: すしをたくさんあります', + question: 'すしをたくさんあります', translation: 'There is a lot of sushi', type: 'verbal-pronunciation', }, + { + question: 'What is the following song about?', + clipUrl: window.location.origin + "/video/dango.mp4", + description: "This is the song 'Dango Daikazoku' from the anime 'Clannad'. It is about a family of dango.", + expected: '団子 or dango', + type: 'video', + } ] }, { @@ -122,17 +121,17 @@ export const chapters_jp: Chapter[] = [ type: 'verbal-question', }, { - question: 'Please say: 刺身おください', + question: '刺身おください', translation: 'Please give me sashimi', type: 'verbal-pronunciation', }, { - question: 'What is the following song about?', - clipUrl: window.location.origin + "/video/dango.mp4", - description: "This is the song 'Dango Daikazoku' from the anime 'Clannad'. It is about a family of dango.", - expected: '団子 or dango', + question: 'What did Yui come to the club meeting for?', + clipUrl: window.location.origin + "/video/cake.mp4", + description: "This is a clip from the anime 'K-On'. Yui is a member of the light music club. She came to the club meeting to eat cake.", + expected: 'ケーキ or cake', type: 'video', - } + }, ] }] } diff --git a/frontend/src/pages/CollabLearning.tsx b/frontend/src/pages/CollabLearning.tsx index f366296..29f145e 100644 --- a/frontend/src/pages/CollabLearning.tsx +++ b/frontend/src/pages/CollabLearning.tsx @@ -2,6 +2,7 @@ import NavBar from "../components/NavBar" import React, { useState } from 'react'; import { generateFakeUsers } from '../logic/fakeUsers'; import { useNavigate } from 'react-router-dom'; +import {getLanguage} from "../logic/sdk"; export default function CollabLearning() { @@ -45,7 +46,7 @@ export default function CollabLearning() {

Chat

-

Find people fluent in your taget language to Chat!

+

Find people fluent in {getLanguage().name} to Chat!

Help them learn a language you know!

Interests

diff --git a/frontend/src/pages/Lesson.tsx b/frontend/src/pages/Lesson.tsx index 78fe5f3..3c4d39c 100644 --- a/frontend/src/pages/Lesson.tsx +++ b/frontend/src/pages/Lesson.tsx @@ -53,10 +53,8 @@ export default function Lesson() return (
-
-
- {renderQuestion(currQuestion)} -
+
+ {renderQuestion(currQuestion)}
) diff --git a/frontend/src/pages/Review.tsx b/frontend/src/pages/Review.tsx index 962f35a..5cfb4af 100644 --- a/frontend/src/pages/Review.tsx +++ b/frontend/src/pages/Review.tsx @@ -17,7 +17,7 @@ export default function Review() { return (
-

Review Page

+

Daily Review

Written

{writtenReview.map(lesson => (