feat: quiz-new version updated (#495)

th3cyb3rhub · Oct 11, 2023 · 532e777 · 532e777
1 parent ac14381
commit 532e777
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 47 deletions.
diff --git a/src/components/Resources/Quiz/Categories/Categories.jsx b/src/components/Resources/Quiz/Categories/Categories.jsx
@@ -22,9 +22,11 @@ import {
 } from "../CategoriesData";
 import CategoriesButtons from "./CategoriesButtons";
 import RenderProgressIndicator from "../../../../utils/components/RenderProgressIndicator";
+import QuizStartSection from "../QuizStartSection";
 
 export default function Categories() {
     const [currentQuestion, setCurrentQuestion] = useState(0);
+    const [quizStart, setQuizStart] = useState(false);
     const [showScore, setShowScore] = useState(false);
     const [score, setScore] = useState(0);
     const [scoreList, setScoreList] = useState(0);
@@ -96,33 +98,44 @@ export default function Categories() {
                 showDropdown={showDropdown}
             />
             <QuizSection>
-                {showScore ? (
-                    <ScoreSection>
-                        <ScoreInfo>
-                            You scored {score} out of {questions.length}
-                        </ScoreInfo>
-                        <ResetButton onClick={() => handleResetButton(score)}>Start again</ResetButton>
-                    </ScoreSection>
+                {quizStart ? (
+                    <>
+                        {showScore ? (
+                            <ScoreSection>
+                                <ScoreInfo>
+                                    You scored {score} out of {questions.length}
+                                </ScoreInfo>
+                                <ResetButton onClick={() => handleResetButton(score)}>Start again</ResetButton>
+                            </ScoreSection>
+                        ) : (
+                            <QuizBody>
+                                <QuestionSection>
+                                    <QuestionCount>
+                                        <RenderProgressIndicator
+                                            length={questions.length}
+                                            currentQuestion={currentQuestion}
+                                        />
+                                        <span>Question {currentQuestion + 1}</span>
+                                    </QuestionCount>
+                                    <QuestionText>{questions[currentQuestion].questionText}</QuestionText>
+                                </QuestionSection>
+                                <AnswerSection>
+                                    {questions[currentQuestion].answerOptions.map((answerOption, i) => (
+                                        <QuestionButton
+                                            key={i}
+                                            onClick={() =>
+                                                handleAnswerButtonClick(answerOption.isCorrect, questions.length)
+                                            }
+                                        >
+                                            {answerOption.answerText}
+                                        </QuestionButton>
+                                    ))}
+                                </AnswerSection>
+                            </QuizBody>
+                        )}
+                    </>
                 ) : (
-                    <QuizBody>
-                        <QuestionSection>
-                            <QuestionCount>
-                                <RenderProgressIndicator questionsArray={questions} currentQuestion={currentQuestion} />
-                                <span>Question {currentQuestion + 1}</span>
-                            </QuestionCount>
-                            <QuestionText>{questions[currentQuestion].questionText}</QuestionText>
-                        </QuestionSection>
-                        <AnswerSection>
-                            {questions[currentQuestion].answerOptions.map((answerOption, i) => (
-                                <QuestionButton
-                                    key={i}
-                                    onClick={() => handleAnswerButtonClick(answerOption.isCorrect, questions.length)}
-                                >
-                                    {answerOption.answerText}
-                                </QuestionButton>
-                            ))}
-                        </AnswerSection>
-                    </QuizBody>
+                    <QuizStartSection setQuizStart={setQuizStart} />
                 )}
             </QuizSection>
         </section>

diff --git a/src/components/Resources/Quiz/Categories/CategoriesButtons.jsx b/src/components/Resources/Quiz/Categories/CategoriesButtons.jsx
@@ -16,7 +16,7 @@ export default function CategoriesButtons({
         const styles = {
             background: data.type === categoryToShow ? "white" : "",
             color: data.type === categoryToShow ? "black" : "",
-            borderBottom: data.type === categoryToShow ? "3px solid #ff6b08" : "",
+            borderBottom: data.type === categoryToShow ? "3px solid  #ff6b08" : "",
         };
 
         return (

diff --git a/src/components/Resources/Quiz/Categories/CategoriesElements.jsx b/src/components/Resources/Quiz/Categories/CategoriesElements.jsx
@@ -75,12 +75,20 @@ export const QuizProgressIndicator = styled.div`
     gap: 4rem;
 `;
 
-export const IndicatorDot = styled.div`
-    border-radius: 50%;
-    height: 7px;
-    width: 7px;
-    background-color: ${(props) => (props.questionCompleted ? "white" : "rgba(62, 62, 62, 0.76)")};
-    transition: 0.5s ease;
+export const ProgressBar = styled.progress`
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    grid-column: 1 / -1;
+
+    ::-webkit-progress-bar {
+        background-color: #fff;
+        border-radius: 100px;
+    }
+    ::-webkit-progress-value {
+        background-color: #ff6b07;
+        border-radius: 100px;
+    }
 `;
 
 export const QuestionCount = styled.div`
@@ -118,7 +126,9 @@ export const QuestionButton = styled.button`
     transition: 0.1s ease;
 
     &:hover {
-        background-color: #ff6b08;
+
+        background-color: #ff6b07;
+
         color: #000000;
     }
 
@@ -151,7 +161,9 @@ export const CategoriesSection = styled.section`
 export const MobileCategories = styled(CategoriesSection)`
     background-color: #1a1c1d;
     border-radius: 1rem;
-    box-shadow: 0 0 3px 1px rgb(222, 97, 14);
+
+    box-shadow: 0 0 3px 1px #ff6b07;
+
     flex-direction: column;
     justify-content: start;
     max-width: fit-content;
@@ -181,7 +193,9 @@ export const CategoriesButton = styled.button`
     transition: 0.3s ease;
 
     &:hover {
-        background-color: #ff6b08;
+ 
+        background-color: #ff6b07;
+
         color: #000000;
     }
 

diff --git a/src/components/Resources/Quiz/QuizStartSection.jsx b/src/components/Resources/Quiz/QuizStartSection.jsx
@@ -0,0 +1,57 @@
+import Logo from "../../../assets/images/Thecyberworld_logo_outlined.png";
+import { ResetButton } from "./Categories/CategoriesElements";
+import React from "react";
+import styled from "styled-components";
+
+const StartSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    img {
+        width: 70%;
+    }
+
+    button {
+        margin-top: 2rem;
+        padding: 1rem 7rem;
+        font-family: "Poppins", sans-serif;
+        border-radius: 10px;
+    }
+
+    button:hover {
+        background-color: #ff6b07;
+        color: #000000;
+    }
+    @media screen and (max-width: 768px) {
+        h1 {
+            font-size: 1.5rem;
+        }
+
+        img {
+            width: 100%;
+        }
+
+        button {
+            padding: 1rem 3rem;
+        }
+    }
+`;
+
+const QuizStartSection = ({ setQuizStart }) => {
+    return (
+        <StartSection>
+            <h1>Quiz Section</h1>
+            <img src={Logo} alt="" />
+            <ResetButton onClick={() => setQuizStart(true)}>Start now</ResetButton>
+        </StartSection>
+    );
+};
+export default QuizStartSection;
diff --git a/src/utils/components/RenderProgressIndicator.jsx b/src/utils/components/RenderProgressIndicator.jsx
@@ -1,18 +1,10 @@
 import React from "react";
-import { QuizProgressIndicator, IndicatorDot } from "../../components/Resources/Quiz/Categories/CategoriesElements";
+import { QuizProgressIndicator, ProgressBar } from "../../components/Resources/Quiz/Categories/CategoriesElements";
 
-export default function RenderProgressIndicator({ questionsArray, currentQuestion }) {
+export default function RenderProgressIndicator({ currentQuestion, length }) {
     return (
         <QuizProgressIndicator>
-            {questionsArray.map((e, i) => {
-                return (
-                    <IndicatorDot
-                        key={i + "key"}
-                        id={i}
-                        questionCompleted={currentQuestion === i || currentQuestion > i}
-                    />
-                );
-            })}
+            <ProgressBar max={length} value={currentQuestion} />
         </QuizProgressIndicator>
     );
 }