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}
/>