From dc107384812f46d6d6a0129e7a27eaef9e9de436 Mon Sep 17 00:00:00 2001
From: faradawn <faradawny@gmail.com>
Date: Tue, 13 Jul 2021 21:14:00 +0800
Subject: [PATCH] FITB redesigned UI

---
 frontend/interfaces/ReviewQuestion.ts         |  4 +-
 .../ReviewQuestion/AnswerResponse.tsx         |  2 +-
 .../ReviewQuestion/FITBQuestion.tsx           | 78 ++++++++++---------
 frontend/learning/styles/ReviewQuestion.css   | 22 +++---
 4 files changed, 59 insertions(+), 47 deletions(-)

diff --git a/frontend/interfaces/ReviewQuestion.ts b/frontend/interfaces/ReviewQuestion.ts
index 938e98b1..fcd43263 100644
--- a/frontend/interfaces/ReviewQuestion.ts
+++ b/frontend/interfaces/ReviewQuestion.ts
@@ -27,7 +27,9 @@ export interface CNDQuestionContent {
 
 export interface FITBQuestionContent {
     question: string,
-    title: string
+    description1: string,
+    description2: string,
+    exampleAnswer: string
 }
 
 export type MCAnswer = string
diff --git a/frontend/learning/components/ReviewQuestion/AnswerResponse.tsx b/frontend/learning/components/ReviewQuestion/AnswerResponse.tsx
index 7ab6114d..2e5034a3 100644
--- a/frontend/learning/components/ReviewQuestion/AnswerResponse.tsx
+++ b/frontend/learning/components/ReviewQuestion/AnswerResponse.tsx
@@ -19,7 +19,7 @@ const incorrectResponse = [
 ];
 
 const ResponseContainer = styled.div`
-    text-align: center;
+    text-align: left;
 `;
 
 const AnswerIncorrect = styled.span`
diff --git a/frontend/learning/components/ReviewQuestion/FITBQuestion.tsx b/frontend/learning/components/ReviewQuestion/FITBQuestion.tsx
index 16292bb2..3bff0ce1 100644
--- a/frontend/learning/components/ReviewQuestion/FITBQuestion.tsx
+++ b/frontend/learning/components/ReviewQuestion/FITBQuestion.tsx
@@ -11,31 +11,38 @@ import '@learning.styles/ReviewQuestion.css';
 import AnswerResponse from './AnswerResponse';
 
 const Question = styled.h1`
-    font-size: 1.5em;
-    margin-bottom: 30px;
-    text-align: center;
+    font-size: 1.2em;
+    margin-bottom: 50px;
     font-weight: 600;
 `;
 
-const Title = styled.h2`
-    font-size: 1.6em;
-    text-align: center;
-    font-weight: 700;
+const Description1 = styled.h2`
+    font-size: 2.2em;
+    font-weight: 300;
+    margin-bottom: 5px;
+    letter-spacing: 4px;
+`;
+
+const Description2 = styled.h2`
+    font-size: 1.2em;
+    font-weight: 300;
     margin-bottom: 70px;
 `;
 
-const SubmitContainer = styled.div`
+const ExampleAnswer = styled.p`
+    font-size: 0.7em;
+    font-weight: 300;
+`
+
+const InputRow = styled.div`
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    font-size: 14px;
+    justify-content: left;
+    height: 3.2em;
+`
 
-    width: 100%;
-`;
 
 const ResponseContainer = styled.div`
-    text-align: center;
+    text-align: left;
 `;
 
 type NextActionCallback = () => void;
@@ -114,39 +121,40 @@ const FITBQuestion = (props: Props): JSX.Element => {
         responseClassName += isAnswerCorrect ? ' correct' : ' incorrect';
         answerResponse = isAnswerCorrect ? '\u{2713}' : '\u{2717}';
     }
-
+    // changed container 'question-content' to left align
     return (
         <div className='question-content'>
-            <div style={{width: '100%'}}>
+            <div style={{width: '100%', alignItems: 'left'}}>
                 <Question>{props.content.question}</Question>
-                <div className={ inputClassName }>
-                    <input
-                        autoFocus
-                        value={answer}
-                        disabled={submitted}
-                        className={ 'question-text-field-input use-chinese' }
-                        onChange={ e => setAnswer(e.target.value) }
-                    />
-                    <p className={ responseClassName }>{answerResponse}</p>
-                </div>
-                <Title 
-                    className='use-serifs'
-                >
-                    {props.content.title}
-                </Title>
-                <SubmitContainer>
+                <Description1>{props.content.description1}</Description1>
+                <Description2>{props.content.description2} </Description2>
+                <InputRow>
+                    <div className={ inputClassName }>
+                        <input
+                            autoFocus
+                            value={answer}
+                            disabled={submitted}
+                            className={ 'question-text-field-input use-chinese' }
+                            onChange={ e => setAnswer(e.target.value) }
+                        />
+                        <p className={ responseClassName } style={{paddingTop: '10px'}}>{answerResponse}</p>
+                    </div>
                     <button
                         className={`choice-button${
                             answer != '' ? ' active' : ''
                         }`}
+                        style={{marginLeft: '20px'}}
                         hidden={submitted && isAnswerCorrect}
                         disabled={!answer || answer.length === 0}
                         onClick={onSubmit}
                     >
                         {submitted? 'Next' : 'Submit'}
                     </button>
-                </SubmitContainer>
-                <ResponseContainer>
+                </InputRow>
+             
+                <ExampleAnswer> Example Answer: {props.content.exampleAnswer}</ExampleAnswer>
+
+                <ResponseContainer style={{textAlign: 'left'}}>
                     {submitted && <AnswerResponse
                         isCorrect={isAnswerCorrect!}
                         correctAnswer={correctAnswer!}/>}
diff --git a/frontend/learning/styles/ReviewQuestion.css b/frontend/learning/styles/ReviewQuestion.css
index 130bbf63..1d87299d 100644
--- a/frontend/learning/styles/ReviewQuestion.css
+++ b/frontend/learning/styles/ReviewQuestion.css
@@ -6,20 +6,21 @@
 /* change */
 .question-content {
     display: flex;
-    /* align-items: center; */
+    align-items: flex-start;
     justify-content: center;
+    padding: 10% 10%;
     width: 100%;
     max-width: 900px;
     height: 65vh;
+    margin: auto;
     overflow: hidden;
     margin: auto;
     padding-top: 20px;
 }
 
 .question-text-field {
-    width: 200px;
+    width: 80%;
     height: 2em;
-    margin: auto;
     display: block;
     margin-bottom: 30px;
     border: none;
@@ -54,11 +55,11 @@
 .question-text-field-input {
     width: 80%;
     height: 100%;
-    margin: auto;
     border: none;
     float: left;
-    text-align: center;
-    font-size: 1.5em;
+    text-align: left;
+    padding: 5px 10px;
+    font-size: 1.2em;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     background-color: #ebebeb;
@@ -68,8 +69,9 @@
 .answer-response {
     width:20%;
     height:80%;
-    font-size: 1.5em;
-    text-align: center;
+    font-size: 0.8em;
+    text-align: right;
+    padding-right: 10px;
     vertical-align: bottom;
     float: right;
     border-top-right-radius: 5px;
@@ -176,10 +178,10 @@ p.cndIncorrect {
 
 p.answerCorrect {
     color:rgb(103,158,59);
-    text-align: center;
+
 }
 
 p.answerIncorrect {
     color:rgb(238,109,0);
-    text-align: center;
+
 }