first commit

src/assets/icons/VicLogo90.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="90.000000pt" height="90.000000pt" viewBox="0 0 90.000000 90.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,90.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M50 754 c0 -88 3 -104 41 -202 22 -59 49 -129 59 -157 l19 -50 11 30
+c40 102 170 460 170 467 0 4 -67 8 -150 8 l-150 0 0 -96z"/>
+<path d="M412 713 c-51 -137 -134 -367 -187 -515 l-27 -78 -37 0 -36 0 -37
+113 -36 112 -1 -147 -1 -148 400 0 400 0 0 400 0 400 -194 0 -193 0 -51 -137z
+m418 72 c0 -25 -4 -45 -10 -45 -5 0 -10 7 -10 15 0 11 -12 15 -45 15 -25 0
+-45 5 -45 10 0 6 20 10 44 10 35 0 45 4 49 20 9 34 17 22 17 -25z m-22 -71
+c31 -21 26 -63 -9 -83 -24 -13 -29 -13 -53 2 -33 22 -34 60 -4 81 28 20 38 20
+66 0z m20 -138 c5 -38 -9 -49 -63 -52 -46 -3 -62 9 -25 19 11 3 20 12 20 21 0
+9 -8 16 -20 16 -20 0 -26 11 -13 24 4 4 28 6 53 4 41 -3 45 -5 48 -32z m-10
+-89 c17 -13 15 -52 -4 -71 -21 -22 -57 -20 -78 3 -47 52 25 112 82 68z m-362
+-53 c-3 -9 -6 -22 -6 -30 0 -10 -12 -14 -40 -14 -45 0 -44 -1 -30 34 8 21 16
+26 46 26 29 0 35 -3 30 -16z m372 -62 c2 -6 -12 -19 -30 -29 l-33 -18 33 -3
+c53 -5 36 -22 -23 -22 -63 0 -70 12 -22 37 l32 18 -32 3 c-30 3 -40 11 -29 23
+9 9 100 1 104 -9z m-433 -124 l-43 -123 -41 -3 -41 -3 24 63 c12 35 33 91 46
+126 22 61 23 62 60 62 l38 0 -43 -122z m238 63 c23 -22 17 -51 -10 -51 -10 0
+-24 9 -31 20 -24 39 -73 16 -87 -42 -15 -61 21 -92 67 -58 27 20 68 27 68 12
+0 -14 -41 -53 -67 -63 -41 -15 -63 -10 -94 20 -33 34 -38 74 -13 126 29 62
+121 82 167 36z m197 -76 c0 -25 -4 -45 -10 -45 -5 0 -10 6 -10 14 0 10 -13 16
+-42 18 -59 4 -63 28 -4 28 34 0 46 4 46 15 0 8 5 15 10 15 6 0 10 -20 10 -45z
+m-19 -65 c22 -12 26 -59 7 -78 -16 -16 -70 -16 -86 0 -7 7 -12 24 -12 40 0 41
+47 61 91 38z m-725 -97 c-4 -4 -11 -1 -16 7 -16 25 -11 35 7 17 9 -9 13 -20 9
+-24z m54 26 c-13 -8 -13 -10 0 -19 12 -9 10 -10 -10 -8 -23 3 -39 15 -40 29 0
+3 14 6 32 7 24 1 28 -2 18 -9z m40 -9 c0 -11 -2 -20 -4 -20 -2 0 -6 9 -9 20
+-3 11 -1 20 4 20 5 0 9 -9 9 -20z m96 11 c7 -1 15 -8 18 -17 5 -13 0 -15 -28
+-11 -19 3 -39 0 -44 -5 -11 -11 -37 17 -28 30 5 8 22 9 82 3z m47 -12 c3 -13
+1 -19 -6 -16 -15 5 -22 37 -9 37 5 0 12 -9 15 -21z m44 1 c-2 -26 -17 -26 -17
+0 0 11 4 20 9 20 6 0 9 -9 8 -20z m57 5 c18 -18 26 -19 26 -2 0 7 12 13 28 14
+15 1 21 -1 15 -4 -17 -6 -16 -23 1 -23 8 0 17 8 20 17 6 15 8 15 16 3 11 -17
+13 -37 4 -27 -3 3 -17 2 -30 -3 -13 -5 -25 -6 -28 -1 -3 4 -25 6 -50 5 -32 -2
+-46 1 -46 10 0 28 21 33 44 11z m236 1 c0 -6 5 -4 10 4 8 12 10 11 10 -5 0
+-18 -7 -21 -50 -22 -41 -2 -50 1 -51 15 0 14 -2 14 -8 -2 -7 -20 -8 -20 -13 0
+-5 19 0 20 48 20 31 0 54 -4 54 -10z"/>
+<path d="M747 694 c-13 -14 -7 -43 11 -46 32 -7 53 4 50 26 -3 21 -46 35 -61
+20z"/>
+<path d="M782 564 c4 -21 22 -23 26 -1 2 10 -3 17 -13 17 -10 0 -15 -6 -13
+-16z"/>
+<path d="M747 474 c-14 -15 -6 -42 14 -47 31 -8 50 3 47 27 -3 21 -46 35 -61
+20z"/>
+<path d="M752 151 c-25 -16 -10 -46 23 -46 25 0 30 4 30 25 0 27 -28 38 -53
+21z"/>
+<path d="M205 90 c-3 -5 -1 -10 4 -10 6 0 11 5 11 10 0 6 -2 10 -4 10 -3 0 -8
+-4 -11 -10z"/>
+<path d="M395 90 c-3 -5 -1 -10 4 -10 6 0 11 5 11 10 0 6 -2 10 -4 10 -3 0 -8
+-4 -11 -10z"/>
+<path d="M610 90 c0 -5 5 -10 10 -10 6 0 10 5 10 10 0 6 -4 10 -10 10 -5 0
+-10 -4 -10 -10z"/>
+</g>
+</svg>

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<HTMLInputElement>, index: number) => void
+  question: string;
+  code?: string;
+  image?: string;
+  type: string;
+  choices: string[];
+  selectedAnswer: string[];
+  handleAnswerSelection: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+  progress: number;
+  timeLeft?: string;
 }
 
 const Question: FC<QuestionTypes> = ({
@@ -49,14 +115,23 @@ const Question: FC<QuestionTypes> = ({
   choices,
   selectedAnswer,
   handleAnswerSelection,
+  progress,
+  timeLeft,
 }) => {
   return (
+    <Container>
+      <ProgressBarContainer>
+        <ProgressBar>
+          <Progress progress={progress} />
+        </ProgressBar>
+        {timeLeft && <Timer>{timeLeft}</Timer>}
+      </ProgressBarContainer>
+      <MainContent>
         <QuestionContainer>
           <QuestionStyle>{question}</QuestionStyle>
-      {/* if question contains code snippet then show code */}
           {code && <CodeSnippet code={code} language="javascript" />}
-      {/* if question contains an image */}
           {image && <QuizImage image={image} />}
+        </QuestionContainer>
         <AnswersContainer>
           {choices.map((choice, index) => (
             <Answer
@@ -69,8 +144,9 @@ const Question: FC<QuestionTypes> = ({
             />
           ))}
         </AnswersContainer>
-    </QuestionContainer>
-  )
-}
+      </MainContent>
+    </Container>
+  );
+};
 
-export default Question
+export default Question;

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<HTMLInputElement>, index: number) => void
+}
+
+const Question: FC<QuestionTypes> = ({
+  question,
+  code,
+  image,
+  type,
+  choices,
+  selectedAnswer,
+  handleAnswerSelection,
+}) => {
+  return (
+    <QuestionContainer>
+      <QuestionStyle>!!!{question}</QuestionStyle>
+      {/* if question contains code snippet then show code */}
+      {code && <CodeSnippet code={code} language="javascript" />}
+      {/* if question contains an image */}
+      {image && <QuizImage image={image} />}
+      <AnswersContainer>
+        {choices.map((choice, index) => (
+          <Answer
+            choice={choice}
+            index={index}
+            key={index}
+            onChange={(e) => handleAnswerSelection(e, index)}
+            type={type}
+            selectedAnswer={selectedAnswer}
+          />
+        ))}
+      </AnswersContainer>
+    </QuestionContainer>
+  )
+}
+
+export default Question

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 (
     <PageCenter>
-      <LogoContainer>
-        <AppLogo />
-      </LogoContainer>
       <QuizContainer selectedAnswer={selectedAnswer.length > 0}>
         <QuizHeader
           activeQuestion={activeQuestion}
@@ -157,6 +155,7 @@ const QuestionScreen: FC = () => {
           type={type}
           handleAnswerSelection={handleAnswerSelection}
           selectedAnswer={selectedAnswer}
+          progress={progress}
         />
         <ButtonWrapper>
           <Button

src/components/QuizDetailsScreen/index.tsx

@@ -38,7 +38,7 @@ const DetailText = styled.p`
 const QuizDetailsScreen = () => {
   const { setCurrentScreen, quizDetails } = useQuiz()
 
-  const { selectedQuizTopic, totalQuestions, totalScore, totalTime } = quizDetails
+  const { selectedQuizTopic, totalQuestions, totalScore, totalTime, detail} = quizDetails
 
   const goToQuestionScreen = () => {
     setCurrentScreen(ScreenTypes.QuestionScreen)
@@ -50,10 +50,10 @@ const QuizDetailsScreen = () => {
         <LogoContainer>
           <AppLogo />
         </LogoContainer>
-        <AppTitle>XEVEN QUIZ</AppTitle>
         <DetailTextContainer>
           <DetailText>
-            Selected Quiz Topic: <HighlightedText>{selectedQuizTopic}</HighlightedText>
+            <h1><HighlightedText>{selectedQuizTopic}</HighlightedText></h1><br/>
+            {detail}
           </DetailText>
           <DetailText>
             Total questions to attempt:{' '}

src/components/QuizTopicsScreen/index.tsx

@@ -88,22 +88,19 @@ const QuizTopicsScreen: React.FC = () => {
   return (
     <PageCenter light justifyCenter>
       <CenterCardContainer>
-        <LogoContainer>
-          <AppLogo />
-        </LogoContainer>
+
         <Heading>
-          WELCOME TO <HighlightedText> XEVEN QUIZ</HighlightedText>
+          WELCOME TO Online Assessment
         </Heading>
-        <DetailText>Select topic below to start your Quiz.</DetailText>
+        <DetailText>Select topic below to start your Test.</DetailText>
         <SelectButtonContainer>
-          {quizTopics.map(({ title, icon, disabled }) => (
+          {quizTopics.map(({ title}) => (
             <SelectButton
               key={title}
               active={quizTopic === title}
-              onClick={() => !disabled && selectQuizTopic(title)}
-              disabled={disabled}
+              onClick={() => selectQuizTopic(title)}
             >
-              {icon}
+        
               <SelectButtonText>{title}</SelectButtonText>
             </SelectButton>
           ))}

src/config/icons.ts

@@ -1,4 +1,4 @@
-import { ReactComponent as AppLogo } from '../assets/icons/app-logo.svg'
+import { ReactComponent as AppLogo } from '../assets/icons/VicLogo90.svg'
 import { ReactComponent as CheckIcon } from '../assets/icons/check.svg'
 import { ReactComponent as Next } from '../assets/icons/next.svg'
 import { ReactComponent as Refresh } from '../assets/icons/refresh.svg'

src/context/QuizContext.ts

@@ -18,6 +18,7 @@ export const initialState: QuizContextTypes = {
     totalQuestions: 0,
     totalScore: 0,
     totalTime: 0,
+    detail:"aaaa",
     selectedQuizTopic: 'React',
   },
 }

src/context/QuizProvider.tsx

@@ -23,6 +23,7 @@ const QuizProvider = ({ children }: QuizProviderProps) => {
     totalQuestions,
     totalTime,
     totalScore,
+    detail,
   } = quiz[quizTopic]
 
   const selectQuizTopic = (topic: string) => {
@@ -38,6 +39,7 @@ const QuizProvider = ({ children }: QuizProviderProps) => {
     totalQuestions,
     totalScore,
     totalTime,
+    detail,
     selectedQuizTopic: quizTopic,
   }
 

src/data/QuizQuestions/generalKnowledge.ts

@@ -17,6 +17,7 @@ export const generalKnowledge: Topic = {
   totalQuestions: 6,
   totalScore: 60,
   totalTime: 60,
+  detail:"",
   questions: [
     {
       question: 'What is the name of this reptile?',

src/data/QuizQuestions/index.ts

@@ -2,6 +2,7 @@ import { generalKnowledge } from './generalKnowledge'
 import { javascript } from './javascript'
 import { python } from './python'
 import { react } from './react'
+import { java8 } from './java8'
 
 // Question Types
 // 1. MCQs | Multiple Choice | single
@@ -27,10 +28,12 @@ export type Topic = {
   totalQuestions: number
   totalScore: number
   totalTime: number
+  detail:string
   questions: Question[]
 }
 
 export const quiz: Record<string, Topic> = {
+  'Java 8 programing':java8,
   JavaScript: javascript,
   React: react,
   Python: python,

src/data/QuizQuestions/java8.ts

@@ -0,0 +1,272 @@
+// Question Types
+// 1. MCQs | Multiple Choice | single
+// 2. boolean | true/false | single
+// 3. MAQs | Multiple Answers | multiple
+
+import { Topic } from '.'
+import CodeSnippet1 from '../../assets/images/code-snippet-1.png'
+
+export const java8: Topic = {
+    topic: 'Java 8',
+    level: 'Intermediate',
+    totalQuestions: 20,
+    totalScore: 100,
+    totalTime: 600,
+    detail:"This test is designed for software developers to assess their understanding of the Java Platform, Standard Edition language through Java SE 8.",
+    questions: [
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<String> list = Arrays.asList("a", "b", "c");\nlist.stream().forEach(System.out::println);',
+        choices: [
+          '"a", "b", "c" printed on separate lines',
+          'A compilation error',
+          'A runtime exception',
+          '"a b c" printed on the same line',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a", "b", "c" printed on separate lines'],
+        score: 5,
+      },
+      {
+        question: 'Which method in the java.util.Optional class is used to retrieve the value if present?',
+        choices: [
+          'get()',
+          'value()',
+          'retrieve()',
+          'fetch()',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['get()'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'Stream.of("a", "b", "c").map(String::toUpperCase).collect(Collectors.toList());',
+        choices: [
+          'Converts all strings in the stream to uppercase and collects them into a list',
+          'Throws a compilation error',
+          'Converts all strings in the stream to lowercase and collects them into a set',
+          'Prints the uppercase strings to the console',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Converts all strings in the stream to uppercase and collects them into a list'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the java.util.function package?',
+        choices: [
+          'To provide functional interfaces for lambda expressions and method references',
+          'To handle input and output operations',
+          'To manage database connections',
+          'To provide utility methods for collections',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To provide functional interfaces for lambda expressions and method references'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);\nOptional<Integer> result = numbers.stream().reduce(Integer::sum);\nSystem.out.println(result.get());',
+        choices: [
+          '15',
+          '10',
+          '0',
+          'A compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['15'],
+        score: 5,
+      },
+      {
+        question: 'Which new date and time API was introduced in Java 8?',
+        choices: [
+          'java.time',
+          'java.util.date',
+          'java.sql.time',
+          'java.time.calendar',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['java.time'],
+        score: 5,
+      },
+      {
+        question: 'What is a lambda expression in Java?',
+        choices: [
+          'A way to create anonymous methods',
+          'A method reference',
+          'A type of loop',
+          'A way to create arrays',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['A way to create anonymous methods'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'IntStream.range(1, 5).forEach(System.out::print);',
+        choices: [
+          '1234',
+          '12345',
+          '1 2 3 4',
+          '1 2 3 4 5',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['1234'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the Streams API in Java 8?',
+        choices: [
+          'To process sequences of elements in a functional style',
+          'To manage database connections',
+          'To perform input and output operations',
+          'To handle concurrency',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To process sequences of elements in a functional style'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<String> list = Arrays.asList("a", "b", "c");\nString result = list.stream().collect(Collectors.joining(", "));\nSystem.out.println(result);',
+        choices: [
+          '"a, b, c"',
+          '"abc"',
+          '"a b c"',
+          '"a-b-c"',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a, b, c"'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'List<String> list = Arrays.asList("one", "two", "three");\nlist.stream().filter(s -> s.length() > 3).collect(Collectors.toList());',
+        choices: [
+          'Filters the strings with length greater than 3 and collects them into a list',
+          'Throws a compilation error',
+          'Filters the strings with length less than 3 and collects them into a list',
+          'Prints the strings with length greater than 3 to the console',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Filters the strings with length greater than 3 and collects them into a list'],
+        score: 5,
+      },
+      {
+        question: 'What is the default method in an interface?',
+        choices: [
+          'A method with a body that can be overridden in the implementing class',
+          'A method without a body that must be implemented by the class',
+          'A method that can be called without creating an instance',
+          'A method that is private and only accessible within the interface',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['A method with a body that can be overridden in the implementing class'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'Stream<String> stream = Stream.of("a", "b", "c");\nlong count = stream.count();\nSystem.out.println(count);',
+        choices: [
+          '3',
+          '2',
+          '1',
+          'A compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['3'],
+        score: 5,
+      },
+      {
+        question: 'What does the method map() do in a stream?',
+        choices: [
+          'Transforms each element in the stream by applying a function',
+          'Filters elements based on a condition',
+          'Collects elements into a collection',
+          'Terminates the stream',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Transforms each element in the stream by applying a function'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'IntStream.rangeClosed(1, 3).forEach(System.out::print);',
+        choices: [
+          '123',
+          '12',
+          '1 2 3',
+          '1234',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['123'],
+        score: 5,
+      },
+      {
+        question: 'What is a functional interface in Java?',
+        choices: [
+          'An interface with a single abstract method',
+          'An interface with multiple abstract methods',
+          'An interface with only static methods',
+          'An interface with only default methods',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['An interface with a single abstract method'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<Integer> list = Arrays.asList(1, 2, 3, 4, 5);\nlist.stream().filter(i -> i % 2 == 0).forEach(System.out::print);',
+        choices: [
+          '24',
+          '135',
+          '12345',
+          '5',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['24'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the Collectors.toList() method?',
+        choices: [
+          'To collect the elements of a stream into a list',
+          'To filter elements based on a condition',
+          'To sort elements in a stream',
+          'To convert a stream to an array',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To collect the elements of a stream into a list'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'List<Integer> list = Arrays.asList(1, 2, 3, 4, 5);\nOptional<Integer> result = list.stream().max(Integer::compare);\nSystem.out.println(result.get());',
+        choices: [
+          'Finds the maximum element in the list and prints it',
+          'Finds the minimum element in the list and prints it',
+          'Calculates the sum of all elements in the list and prints it',
+          'Throws a compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Finds the maximum element in the list and prints it'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'Stream<String> stream = Stream.of("a", "b", "c");\nString result = stream.collect(Collectors.joining("-"));\nSystem.out.println(result);',
+        choices: [
+          '"a-b-c"',
+          '"abc"',
+          '"a, b, c"',
+          '"a b c"',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a-b-c"'],
+        score: 5,
+      },
+    ],
+  };
+  
+  
+

src/data/QuizQuestions/javascript.ts

@@ -11,6 +11,7 @@ export const javascript: Topic = {
   totalQuestions: 14,
   totalScore: 125,
   totalTime: 240,
+  detail:"",
   questions: [
     {
       question:

src/data/QuizQuestions/python.ts

@@ -11,6 +11,7 @@ export const python: Topic = {
   totalQuestions: 14,
   totalScore: 125,
   totalTime: 360,
+  detail:"",
   questions: [
     {
       question:

src/data/QuizQuestions/react.ts

@@ -12,6 +12,7 @@ export const react: Topic = {
   totalQuestions: 11,
   totalScore: 95,
   totalTime: 600,
+  detail:"",
   questions: [
     {
       question: 'What is JSX in React?',

src/data/QuizQuestions/sql.ts

@@ -0,0 +1,272 @@
+// Question Types
+// 1. MCQs | Multiple Choice | single
+// 2. boolean | true/false | single
+// 3. MAQs | Multiple Answers | multiple
+
+import { Topic } from '.'
+import CodeSnippet1 from '../../assets/images/code-snippet-1.png'
+
+export const sql: Topic = {
+    topic: 'ANSI SQL:2011 PROGRAMMING',
+    level: 'Intermediate',
+    totalQuestions: 20,
+    totalScore: 100,
+    totalTime: 600,
+    detail:"This test is designed for application and database developers working with any ANSI SQL compliant database. It measures knowledge of the SQL:2011 standard.",
+    questions: [
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<String> list = Arrays.asList("a", "b", "c");\nlist.stream().forEach(System.out::println);',
+        choices: [
+          '"a", "b", "c" printed on separate lines',
+          'A compilation error',
+          'A runtime exception',
+          '"a b c" printed on the same line',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a", "b", "c" printed on separate lines'],
+        score: 5,
+      },
+      {
+        question: 'Which method in the java.util.Optional class is used to retrieve the value if present?',
+        choices: [
+          'get()',
+          'value()',
+          'retrieve()',
+          'fetch()',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['get()'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'Stream.of("a", "b", "c").map(String::toUpperCase).collect(Collectors.toList());',
+        choices: [
+          'Converts all strings in the stream to uppercase and collects them into a list',
+          'Throws a compilation error',
+          'Converts all strings in the stream to lowercase and collects them into a set',
+          'Prints the uppercase strings to the console',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Converts all strings in the stream to uppercase and collects them into a list'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the java.util.function package?',
+        choices: [
+          'To provide functional interfaces for lambda expressions and method references',
+          'To handle input and output operations',
+          'To manage database connections',
+          'To provide utility methods for collections',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To provide functional interfaces for lambda expressions and method references'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);\nOptional<Integer> result = numbers.stream().reduce(Integer::sum);\nSystem.out.println(result.get());',
+        choices: [
+          '15',
+          '10',
+          '0',
+          'A compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['15'],
+        score: 5,
+      },
+      {
+        question: 'Which new date and time API was introduced in Java 8?',
+        choices: [
+          'java.time',
+          'java.util.date',
+          'java.sql.time',
+          'java.time.calendar',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['java.time'],
+        score: 5,
+      },
+      {
+        question: 'What is a lambda expression in Java?',
+        choices: [
+          'A way to create anonymous methods',
+          'A method reference',
+          'A type of loop',
+          'A way to create arrays',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['A way to create anonymous methods'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'IntStream.range(1, 5).forEach(System.out::print);',
+        choices: [
+          '1234',
+          '12345',
+          '1 2 3 4',
+          '1 2 3 4 5',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['1234'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the Streams API in Java 8?',
+        choices: [
+          'To process sequences of elements in a functional style',
+          'To manage database connections',
+          'To perform input and output operations',
+          'To handle concurrency',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To process sequences of elements in a functional style'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<String> list = Arrays.asList("a", "b", "c");\nString result = list.stream().collect(Collectors.joining(", "));\nSystem.out.println(result);',
+        choices: [
+          '"a, b, c"',
+          '"abc"',
+          '"a b c"',
+          '"a-b-c"',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a, b, c"'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'List<String> list = Arrays.asList("one", "two", "three");\nlist.stream().filter(s -> s.length() > 3).collect(Collectors.toList());',
+        choices: [
+          'Filters the strings with length greater than 3 and collects them into a list',
+          'Throws a compilation error',
+          'Filters the strings with length less than 3 and collects them into a list',
+          'Prints the strings with length greater than 3 to the console',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Filters the strings with length greater than 3 and collects them into a list'],
+        score: 5,
+      },
+      {
+        question: 'What is the default method in an interface?',
+        choices: [
+          'A method with a body that can be overridden in the implementing class',
+          'A method without a body that must be implemented by the class',
+          'A method that can be called without creating an instance',
+          'A method that is private and only accessible within the interface',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['A method with a body that can be overridden in the implementing class'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'Stream<String> stream = Stream.of("a", "b", "c");\nlong count = stream.count();\nSystem.out.println(count);',
+        choices: [
+          '3',
+          '2',
+          '1',
+          'A compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['3'],
+        score: 5,
+      },
+      {
+        question: 'What does the method map() do in a stream?',
+        choices: [
+          'Transforms each element in the stream by applying a function',
+          'Filters elements based on a condition',
+          'Collects elements into a collection',
+          'Terminates the stream',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Transforms each element in the stream by applying a function'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'IntStream.rangeClosed(1, 3).forEach(System.out::print);',
+        choices: [
+          '123',
+          '12',
+          '1 2 3',
+          '1234',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['123'],
+        score: 5,
+      },
+      {
+        question: 'What is a functional interface in Java?',
+        choices: [
+          'An interface with a single abstract method',
+          'An interface with multiple abstract methods',
+          'An interface with only static methods',
+          'An interface with only default methods',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['An interface with a single abstract method'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'List<Integer> list = Arrays.asList(1, 2, 3, 4, 5);\nlist.stream().filter(i -> i % 2 == 0).forEach(System.out::print);',
+        choices: [
+          '24',
+          '135',
+          '12345',
+          '5',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['24'],
+        score: 5,
+      },
+      {
+        question: 'What is the purpose of the Collectors.toList() method?',
+        choices: [
+          'To collect the elements of a stream into a list',
+          'To filter elements based on a condition',
+          'To sort elements in a stream',
+          'To convert a stream to an array',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['To collect the elements of a stream into a list'],
+        score: 5,
+      },
+      {
+        question: 'What does the following code snippet do?',
+        code: 'List<Integer> list = Arrays.asList(1, 2, 3, 4, 5);\nOptional<Integer> result = list.stream().max(Integer::compare);\nSystem.out.println(result.get());',
+        choices: [
+          'Finds the maximum element in the list and prints it',
+          'Finds the minimum element in the list and prints it',
+          'Calculates the sum of all elements in the list and prints it',
+          'Throws a compilation error',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['Finds the maximum element in the list and prints it'],
+        score: 5,
+      },
+      {
+        question: 'What is the result of the following code?',
+        code: 'Stream<String> stream = Stream.of("a", "b", "c");\nString result = stream.collect(Collectors.joining("-"));\nSystem.out.println(result);',
+        choices: [
+          '"a-b-c"',
+          '"abc"',
+          '"a, b, c"',
+          '"a b c"',
+        ],
+        type: 'MCQs',
+        correctAnswers: ['"a-b-c"'],
+        score: 5,
+      },
+    ],
+  };
+  
+  
+

src/data/quizTopics.tsx

@@ -1,66 +1,28 @@
 import { ReactNode } from 'react'
-import { ReactComponent as Angular } from '../assets/icons/angular.svg'
-import { ReactComponent as CSS } from '../assets/icons/css-3.svg'
-import { ReactComponent as Django } from '../assets/icons/dj.svg'
-import { ReactComponent as Gatsby } from '../assets/icons/gatsby.svg'
-import { ReactComponent as JavaScript } from '../assets/icons/javascript.svg'
-import { ReactComponent as Kotlin } from '../assets/icons/kotlin.svg'
-import { ReactComponent as Laravel } from '../assets/icons/laravel.svg'
-import { ReactComponent as Python } from '../assets/icons/python.svg'
-import { ReactComponent as ReactIcon } from '../assets/icons/react.svg'
-import { ReactComponent as BulbIcon } from '../assets/icons/bulb.svg'
+
 
 type QuizTopic = {
   title: string
-  icon: ReactNode
   disabled?: boolean
 }
 
 export const quizTopics: QuizTopic[] = [
   {
-    title: 'React',
-    icon: <ReactIcon />,
-  },
-  {
-    title: 'JavaScript',
-    icon: <JavaScript />,
-  },
-  {
-    title: 'Python',
-    icon: <Python />,
+    title: 'Java 8 programing'
   },
   {
-    title: 'General Knowledge',
-    icon: <BulbIcon />,
+    title: 'React'
   },
   {
-    title: 'Gatsby',
-    icon: <Gatsby />,
-    disabled: true,
+    title: 'JavaScript'
   },
   {
-    title: 'Angular',
-    icon: <Angular />,
-    disabled: true,
+    title: 'Python'
   },  
   {
-    title: 'Django',
-    icon: <Django />,
-    disabled: true,
+    title: 'General Knowledge'
   },
   {
-    title: 'CSS',
-    icon: <CSS />,
-    disabled: true,
-  },
-  {
-    title: 'Kotlin',
-    icon: <Kotlin />,
-    disabled: true,
-  },
-  {
-    title: 'Laravel',
-    icon: <Laravel />,
-    disabled: true,
-  },
+    title: 'CSS'
+  }
 ]

src/types/index.ts

@@ -32,5 +32,6 @@ export type QuizContextTypes = {
     totalScore: number
     totalTime: number
     selectedQuizTopic: string
+    detail:string
   }
 }