From 2da4bb213ee79dd5ffe16d8dfd0ea0af8c5497f3 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 6 Dec 2023 06:46:40 -0500
Subject: [PATCH] [+] Finalize

---
 .../VerbalPronunciationExercise.tsx           | 41 +++++++------
 .../components/VerbalQuestionsExercise.tsx    | 61 +++++++++----------
 frontend/src/components/VideoExercise.tsx     | 12 ++--
 .../components/WrittenQuestionExercise.tsx    | 13 ++--
 .../components/WrittenVocabularyExercise.tsx  | 38 +++++++-----
 frontend/src/logic/CourseData.ts              | 29 +++++----
 frontend/src/pages/CollabLearning.tsx         |  3 +-
 frontend/src/pages/Lesson.tsx                 |  6 +-
 frontend/src/pages/Review.tsx                 |  2 +-
 9 files changed, 107 insertions(+), 98 deletions(-)

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
                 <div className='flex backdrop:flex-row justify-center w-full'>
                     <Icon icon="mdi:microphone" className="microphone h-20 w-20 mx-auto"/>
                     <button className={`record-btn mx-auto ${isRecording ? 'red' : ''}`} onClick={handleRecord}>
-                        {isRecording ? 'Stop Recording' 
-                        : loading ?  
+                        {isRecording ? 'Stop Recording'
+                        : loading ?
                         <ClipLoader
                             color="white"
                             loading={loading}
                             aria-label="Loading Spinner"
                             data-testid="loader"
-                        /> : 
+                        /> :
                         'Record'}
                     </button>
                 </div>
@@ -88,24 +90,25 @@ export default function VerbalPronunciationExercise({q, chapter, onSubmit}: Verb
             )
         } else {
             return (
-                <div className=' flex-row flex-wrap w-full'>
-                    <h3>{correct}</h3>
-                    <p>{reason}</p>
-                    <button className='record-btn w-full bottom-0 relative' onClick={(e) => handleSubmit()}>Continue</button>
-                </div>
+              <div className='flex flex-wrap w-full gap-5'>
+                  <div className="font-bold">{correct ? "Correct!" : "Incorrect"}</div>
+                  <div>{reason}</div>
+                  <button className='green w-full' onClick={() => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
+                  {answered && !correct && <button className='red w-full' onClick={() => handleSubmit()}>I was right</button>}
+              </div>
             )
         }
     }
 
-    return (
-        <div>
-            <div className="v-layout page-pad flex justify-center">
-                <h1 className="text-center">Say the following</h1>
-                <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center'>
-                    {q.question}
-                </div>
-                {ResponseSection(correct, reason)}
-            </div>
+    return <div className="v-layout flex justify-center h-full">
+        <div className="font-bold">Say the following</div>
+        <div className='box'>
+            {q.question}
         </div>
-    )
+        {userAnswer && <div className='flex items-center gap-3'>
+            <Icon icon="mdi:microphone"/> {userAnswer}
+        </div>}
+        <div className="flex-1"></div>
+        {ResponseSection(correct, reason)}
+    </div>
 }
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 (
-                <div className='w-full h-32'>
-                    <div className=' flex-row flex-wrap w-full h-full'>
-                        {remainingWords.map((word, index) => (
-                            <span 
-                            key={index} 
-                            className="border-gray-300 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
-                            onClick={(event) => handleWordBankClick(word)}>
+  const ResponseSection = (correct: string | null, reason: string | null) => {
+    if (!answered) {
+      return (
+        <div className='w-full h-36'>
+          <div className=' flex-row flex-wrap w-full h-full'>
+            {remainingWords.map((word, index) => (
+              <span
+                key={index}
+                className="border-gray-300 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
+                onClick={() => handleWordBankClick(word)}>
                                 {word}
                             </span>
-                        ))}
-                    </div>
-                    <button className='green' onClick={(e) => handleSubmit()}>
-                        {loading ? <ClipLoader
-                            color="white"
-                            loading={loading}
-                            aria-label="Loading Spinner"
-                            data-testid="loader"
-                        /> : !answered ? "Submit" : "Continue"}
-                    </button>
-                </div>
+            ))}
+          </div>
+          <button className='green' onClick={() => handleSubmit()}>
+            {loading ? <ClipLoader
+              color="white"
+              loading={loading}
+              aria-label="Loading Spinner"
+              data-testid="loader"
+            /> : !answered ? "Submit" : "Continue"}
+          </button>
+        </div>
 
-            )
-        } else {
-            return (
-                <div className=' flex-row flex-wrap border-b-4 w-full h-36'>
-                    <h3>{correct}</h3>
-                    <p>{reason}</p>
-                    <button className='green w-full' onClick={(e) => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
-                </div>
-            )
-        }
+      )
+    } else {
+      return <div className='flex flex-wrap w-full gap-5'>
+        <div className="font-bold">{correct ? "Correct!" : "Incorrect"}</div>
+        <div>{reason}</div>
+        <button className='green w-full' onClick={() => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
+        {answered && !correct && <button className='red w-full' onClick={() => handleSubmit()}>I was right</button>}
+      </div>
     }
+  }
 
     return (
         <div className='v-layout space-y-8 items-center w-full'>
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 (
-    <div className='v-layout space-y-8 items-center w-full'>
+    <div className='v-layout w-full h-full non-center'>
       <div className="box">
         {q.question}
       </div>
       <video src={q.clipUrl} controls className='video-player'></video>
+      <div className="flex-1"></div>
       <div className='flex-col w-full'>
         {!answered ?
           <div className="v-layout">
@@ -57,10 +58,11 @@ export default function VideoExercise({q, chapter, onSubmit}: VideoQuestionProps
               {loading ? <ClipLoader color="white" loading={loading} /> : "Submit"}
             </button>
           </div> :
-          <div className='flex-col w-full'>
-            <h3>{correct}</h3>
-            <p>{reason}</p>
-            <button className='green w-full' onClick={() => handleSubmit()}>Continue</button>
+          <div className='flex flex-wrap w-full gap-5'>
+            <div className="font-bold">{correct ? "Correct!" : "Incorrect"}</div>
+            <div>{reason}</div>
+            <button className='green w-full' onClick={() => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
+            {answered && !correct && <button className='red w-full' onClick={() => handleSubmit()}>I was right</button>}
           </div>
         }
       </div>
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 (
-                <div className=' flex-row flex-wrap border-b-4 w-full h-36'>
-                    <h3>{correct}</h3>
-                    <p>{reason}</p>
-                    <button className='green w-full' onClick={() => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
-                </div>
-            )
+            return <div className='flex flex-wrap w-full gap-5'>
+              <div className="font-bold">{correct ? "Correct!" : "Incorrect"}</div>
+              <div>{reason}</div>
+              <button className='green w-full' onClick={() => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
+              {answered && !correct && <button className='red w-full' onClick={() => handleSubmit()}>I was right</button>}
+            </div>
         }
     }
 
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 (
-        <div className='v-layout space-y-8 items-center w-full'>
-            <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
+        <div className='v-layout gap-5 h-full'>
+            <div className="font-bold">Recall the following word</div>
+            <div className='box text-center'>
                 {q.question}
             </div>
-            <div className=' flex-col flex-wrap w-full'>
-                {answered ? 
-                    <div className='flex-col w-full'>
-                        <h3>{q.pronunciation}</h3>
-                        <p>{q.description}</p>
-                        <p>{q.example}</p>
-                        <div className='flex-row'>
-                            <button className='green my-4' onClick={(e) => handleSubmit()}>I got it!</button>
-                            <button className='red' onClick={(e) => handleSubmit()}>I forgot</button>
-                        </div>
-                    </div>
-                    : 
-                    <button className='white' onClick={(e) => handleSubmit()}>Show Meaning</button>
+            <div className="flex-1 flex justify-center items-center w-full">
+              {answered &&
+                  <div className='flex flex-col gap-3 w-full'>
+                      <div className="font-bold">{q.pronunciation}</div>
+                      <div>{q.description}</div>
+                      <div className="text-yellow-600 flex items-center gap-3"><Icon icon="fa:star"/>{q.example}</div>
+                  </div>
+              }
+            </div>
+            <div className="mb-5">
+                {answered ?
+                    <>
+                      <button className='green my-4' onClick={(e) => handleSubmit()}>I got it!</button>
+                      <button className='red' onClick={(e) => handleSubmit()}>I forgot</button>
+                    </> :
+                    <>
+                      <div className="text-gray-400 text-sm mb-5">Please click "show meaning" after you have tried to recall the meaning of the word</div>
+                      <button className='white' onClick={(e) => handleSubmit()}>Show Meaning</button>
+                    </>
                 }
             </div>
         </div>
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() {
         <div className="v-layout p-6">
             <div className="flex flex-col flex-1">
                 <h1>Chat</h1>
-                <p className="subtext">Find people fluent in your taget language to Chat!</p>
+                <p className="subtext">Find people fluent in {getLanguage().name} to Chat!</p>
                 <p className="subtext">Help them learn a language you know!</p>
                 <p className="font-bold pt-10">Interests</p>
                 <div className="tags">
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 (
     <div className="v-layout page-pad non-center">
       <Progress percent={currQuestion / questions.length * 100} back={handleNavigateBack}/>
-      <div className="p-5">
-        <div className="flex flex-col flex-1 mb-8 items-center">
-          {renderQuestion(currQuestion)}
-        </div>
+      <div className="p-5 h-full">
+        {renderQuestion(currQuestion)}
       </div>
     </div>
   )
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 (
         <div className="layout-v page-pad">
-            <h1>Review Page</h1>
+            <h1>Daily Review</h1>
             <h2>Written</h2>
             <div className="flex flex-col flex-1 mb-8 gap-3">
                 {writtenReview.map(lesson => (