diff --git a/public/VicLogo90.png b/public/VicLogo90.png new file mode 100644 index 0000000..71fe88c Binary files /dev/null and b/public/VicLogo90.png differ diff --git a/src/assets/icons/VicLogo90.png b/src/assets/icons/VicLogo90.png new file mode 100644 index 0000000..71fe88c Binary files /dev/null and b/src/assets/icons/VicLogo90.png differ diff --git a/src/assets/icons/VicLogo90.svg b/src/assets/icons/VicLogo90.svg new file mode 100644 index 0000000..1d71bb6 --- /dev/null +++ b/src/assets/icons/VicLogo90.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/QuestionScreen/Question/index.tsx b/src/components/QuestionScreen/Question/index.tsx index 5c5acd1..1f4efbb 100644 --- a/src/components/QuestionScreen/Question/index.tsx +++ b/src/components/QuestionScreen/Question/index.tsx @@ -1,27 +1,71 @@ -import { FC } from 'react' -import styled from 'styled-components' +import { FC } from 'react'; +import styled from 'styled-components'; +import CodeSnippet from '../../ui/CodeSnippet'; +import Answer from '../Answer'; +import QuizImage from '../../ui/QuizImage'; +import { device } from '../../../styles/BreakPoints'; -import { device } from '../../../styles/BreakPoints' +const Container = styled.div` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +`; -import CodeSnippet from '../../ui/CodeSnippet' -import Answer from '../Answer' -import QuizImage from '../../ui/QuizImage' +const ProgressBarContainer = styled.div` + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 20px; +`; + +const ProgressBar = styled.div` + width: 80%; + height: 10px; + background-color: #e0e0e0; + border-radius: 5px; + overflow: hidden; +`; + +const Progress = styled.div<{ progress: number }>` + width: ${({ progress }) => progress}%; + height: 100%; + background-color: #76c7c0; +`; + +const Timer = styled.div` + font-size: 14px; + color: ${({ theme }) => theme.colors.primaryText}; +`; + +const MainContent = styled.div` + display: flex; + justify-content: space-between; + width: 100%; + max-width: 1200px; + margin-top: 20px; + @media ${device.sm} { + flex-direction: column; + } +`; const QuestionContainer = styled.div` - margin-top: 30px; - margin-bottom: 40px; - max-width: 88%; + width: 60%; + padding-right: 20px; @media ${device.sm} { - max-width: 100%; + width: 100%; + padding-right: 0; } -` +`; const AnswersContainer = styled.div` - max-width: 78%; + width: 40%; @media ${device.sm} { - max-width: 100%; + width: 100%; } -` +`; const QuestionStyle = styled.h2` font-size: clamp(18px, 4vw, 28px); @@ -29,16 +73,38 @@ const QuestionStyle = styled.h2` margin-bottom: 25px; color: ${({ theme }) => theme.colors.primaryText}; line-height: 1.3; -` +`; + +const NextButtonContainer = styled.div` + width: 100%; + display: flex; + justify-content: center; + margin-top: 20px; +`; + +const NextButton = styled.button` + padding: 10px 20px; + font-size: 16px; + background-color: #76c7c0; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + &:hover { + background-color: #5aa8a2; + } +`; interface QuestionTypes { - question: string - code?: string - image?: string - type: string - choices: string[] - selectedAnswer: string[] - handleAnswerSelection: (e: React.ChangeEvent, index: number) => void + question: string; + code?: string; + image?: string; + type: string; + choices: string[]; + selectedAnswer: string[]; + handleAnswerSelection: (e: React.ChangeEvent, index: number) => void; + progress: number; + timeLeft?: string; } const Question: FC = ({ @@ -49,28 +115,38 @@ const Question: FC = ({ choices, selectedAnswer, handleAnswerSelection, + progress, + timeLeft, }) => { return ( - - {question} - {/* if question contains code snippet then show code */} - {code && } - {/* if question contains an image */} - {image && } - - {choices.map((choice, index) => ( - handleAnswerSelection(e, index)} - type={type} - selectedAnswer={selectedAnswer} - /> - ))} - - - ) -} + + + + + + {timeLeft && {timeLeft}} + + + + {question} + {code && } + {image && } + + + {choices.map((choice, index) => ( + handleAnswerSelection(e, index)} + type={type} + selectedAnswer={selectedAnswer} + /> + ))} + + + + ); +}; -export default Question +export default Question; diff --git a/src/components/QuestionScreen/Question/indexCopy.txt b/src/components/QuestionScreen/Question/indexCopy.txt new file mode 100644 index 0000000..2270a09 --- /dev/null +++ b/src/components/QuestionScreen/Question/indexCopy.txt @@ -0,0 +1,76 @@ +import { FC } from 'react' +import styled from 'styled-components' + +import { device } from '../../../styles/BreakPoints' + +import CodeSnippet from '../../ui/CodeSnippet' +import Answer from '../Answer' +import QuizImage from '../../ui/QuizImage' + +const QuestionContainer = styled.div` + margin-top: 30px; + margin-bottom: 40px; + max-width: 88%; + @media ${device.sm} { + max-width: 100%; + } +` + +const AnswersContainer = styled.div` + max-width: 78%; + @media ${device.sm} { + max-width: 100%; + } +` + +const QuestionStyle = styled.h2` + font-size: clamp(18px, 4vw, 28px); + font-weight: 500; + margin-bottom: 25px; + color: ${({ theme }) => theme.colors.primaryText}; + line-height: 1.3; +` + +interface QuestionTypes { + question: string + code?: string + image?: string + type: string + choices: string[] + selectedAnswer: string[] + handleAnswerSelection: (e: React.ChangeEvent, index: number) => void +} + +const Question: FC = ({ + question, + code, + image, + type, + choices, + selectedAnswer, + handleAnswerSelection, +}) => { + return ( + + !!!{question} + {/* if question contains code snippet then show code */} + {code && } + {/* if question contains an image */} + {image && } + + {choices.map((choice, index) => ( + handleAnswerSelection(e, index)} + type={type} + selectedAnswer={selectedAnswer} + /> + ))} + + + ) +} + +export default Question diff --git a/src/components/QuestionScreen/index.tsx b/src/components/QuestionScreen/index.tsx index 5c4bb39..3354eea 100644 --- a/src/components/QuestionScreen/index.tsx +++ b/src/components/QuestionScreen/index.tsx @@ -14,8 +14,7 @@ import Question from './Question' import QuizHeader from './QuizHeader' const QuizContainer = styled.div<{ selectedAnswer: boolean }>` - width: 900px; - min-height: 500px; + width: 100%; background: ${({ theme }) => theme.colors.cardBackground}; border-radius: 4px; padding: 30px 60px 80px 60px; @@ -138,11 +137,10 @@ const QuestionScreen: FC = () => { // timer hooks, handle conditions related to time useTimer(timer, quizDetails, setEndTime, setTimer, setShowTimerModal, showResultModal) + const progress = 50; + return ( - - - 0}> { type={type} handleAnswerSelection={handleAnswerSelection} selectedAnswer={selectedAnswer} + progress={progress} />