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 (
{answerResponse}
-{answerResponse}
+