Technigo · Yu-Miao222 · Apr 11, 2023 · Apr 11, 2023 · Apr 12, 2023 · Apr 12, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -42,6 +42,10 @@
         "allowSingleLine": true
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "comma-dangle": [
       "error",
       "never"

diff --git a/README.md b/README.md
@@ -11,3 +11,9 @@ Describe how you approached to problem, and what tools and techniques you used t
 ## View it live
 
 Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+
+## Image credits
+German Flag - Photo by <a href="https://unsplash.com/@enginakyurt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">engin akyurt</a> on <a href="https://unsplash.com/photos/qQomkOCpkes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
+
+Paella - Photo by <a href="https://unsplash.com/ko/@dougglaslopez?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Douglas Lopez</a> on <a href="https://unsplash.com/photos/4B0cLMtJxWw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,17 +4,22 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
-    "@reduxjs/toolkit": "^1.8.3",
+    "@reduxjs/toolkit": "^1.9.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "rc-progress": "^3.4.1",
     "react": "^18.2.0",
+    "react-accessible-accordion": "^5.0.0",
+    "react-countdown": "^2.3.5",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-moving-text": "^0.0.7",
     "react-redux": "^8.0.2",
-    "react-scripts": "^5.0.1"
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,6 +41,6 @@
     ]
   },
   "devDependencies": {
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   }
 }
diff --git a/public/images/logo.jpg b/public/images/logo.jpg
diff --git a/public/images/option1.png b/public/images/option1.png
diff --git a/public/images/option2.png b/public/images/option2.png
diff --git a/public/images/option3.png b/public/images/option3.png
diff --git a/public/images/option4.png b/public/images/option4.png
diff --git a/public/images/questionImg1.jpg b/public/images/questionImg1.jpg
diff --git a/public/images/questionImg2.jpg b/public/images/questionImg2.jpg
diff --git a/public/images/questionImg3.jpg b/public/images/questionImg3.jpg
diff --git a/public/images/questionImg4.jpg b/public/images/questionImg4.jpg
diff --git a/public/images/questionImg5.jpg b/public/images/questionImg5.jpg
diff --git a/public/images/questionImg6.jpg b/public/images/questionImg6.jpg
diff --git a/public/images/questionImg7.jpg b/public/images/questionImg7.jpg
diff --git a/public/images/questionImg8.jpg b/public/images/questionImg8.jpg
diff --git a/public/images/questionImg9.jpg b/public/images/questionImg9.jpg
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -13,13 +13,19 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
-  </head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+    rel="stylesheet">
+    <link rel="icon" href="./images/logo.jpg">
+  <title>Quiz!</title>
+</head>
 
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -29,6 +35,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
 
-</html>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,8 @@ import { Provider } from 'react-redux';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { quiz } from 'reducers/quiz';
 
-import { CurrentQuestion } from 'components/CurrentQuestion';
+import { Main } from 'components/Main';
+import { GlobalStyle } from 'components/GlobalStyle';
 
 const reducer = combineReducers({
   quiz: quiz.reducer
@@ -14,7 +15,8 @@ const store = configureStore({ reducer });
 export const App = () => {
   return (
     <Provider store={store}>
-      <CurrentQuestion />
+      <GlobalStyle />
+      <Main />
     </Provider>
   );
-}
+}
diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js
diff --git a/src/components/CurrentQuestion/CurrentQuestion.js b/src/components/CurrentQuestion/CurrentQuestion.js
@@ -0,0 +1,74 @@
+
+/* eslint-disable max-len */
+import React, { useState, useRef } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { quiz } from 'reducers/quiz'
+// import { Timer } from 'components/Timer';
+import { Title } from 'reusable-components/Title'
+import { Button, ButtonContainer } from 'reusable-components/Button'
+import { Image } from 'reusable-components/Image'
+import { CurrentQuestionContainer, ImgBox, OptionsImage } from './CurrentQuestionStyling'
+import { ProgressBar } from '../ProgressBar';
+
+export const CurrentQuestion = (props) => {
+  const question = useSelector((store) => store.quiz.questions[store.quiz.currentQuestionIndex])
+  const btnColor = useSelector((store) => store.quiz.btnColor)
+  const correctAnswerIndex = useSelector((store) => store.quiz.questions[store.quiz.currentQuestionIndex].correctAnswerIndex)
+  const { setScore, score } = props
+  const [selectedAnswerIndex, setSelectedAnswerIndex] = useState('')
+  const dispatch = useDispatch()
+  const countdownRef = useRef(null)
+
+  const onAnswerSubmit = (questionId, answerIndex) => {
+    if (correctAnswerIndex === answerIndex) {
+      setScore(score + 3)
+    } else {
+      setScore(score - 2)
+    }
+    setSelectedAnswerIndex(answerIndex)
+    setTimeout(() => dispatch(quiz.actions.submitAnswer({ questionId, answerIndex })), 1000)
+    setTimeout(() => dispatch(quiz.actions.goToNextQuestion()), 1500)
+    countdownRef.current.stop();
+    setTimeout(() => countdownRef.current.start(), 1500)
+    console.log(questionId)
+  }
+
+  console.log('score:', score)
+
+  const buttonStyle = (answerIndex) => {
+    if (selectedAnswerIndex === answerIndex) {
+      return { backgroundColor: btnColor }
+    }
+  };
+
+  if (!question) {
+    return <h1>Oh no! I could not find the current question!</h1>
+  }
+
+  return (
+    <CurrentQuestionContainer>
+      {/* <Timer countdownRef={countdownRef} setScore={setScore} score={score} /> */}
+      <ImgBox>
+        <Image src={question.img} alt="img" />
+        <ProgressBar />
+      </ImgBox>
+      <Title>Question: {question.questionText}</Title>
+      <ButtonContainer>
+        {question.options.map((answer, index) => {
+          return (
+            <Button
+              answerBtn
+              style={buttonStyle(index)}
+              type="button"
+              id={index}
+              onClick={() => onAnswerSubmit(question.id, index)}
+              key={answer}>
+              {answer.includes('.png') ? <OptionsImage src={answer} alt="option" /> : <p> {answer} </p>}
+            </Button>
+          )
+        })}
+      </ButtonContainer>
+    </CurrentQuestionContainer>
+
+  )
+}
diff --git a/src/components/CurrentQuestion/CurrentQuestionStyling.js b/src/components/CurrentQuestion/CurrentQuestionStyling.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const CurrentQuestionContainer = styled.div`
+background: linear-gradient(to right, #6E48AA, #9D50BB); 
+min-height: 100vh;
+width: 100vw;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+gap:2rem;
+
+@media (min-width: 1024px) {
+display: flex;
+width: 100vw;
+height: auto;
+
+}
+`
+export const ImgBox = styled.div`
+max-width: 90vw;
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 0 5%;
+gap:1rem;
+`
+export const ProgressBarContainer = styled.div`
+width: 100%;
+display:flex;
+align-items:center;
+justify-content:center;
+`
+export const CountdownBox = styled.div`
+border: 7px solid rgba(181, 118, 221, 0.65);
+border-radius:50%;
+padding:10px;
+margin:10px;
+
+@media (min-width: 1024px) {
+display: flex;
+border: 7px so1id rgba(181, 118, 221, 0.65);
+border-radius: 50%;
+width: 80px;
+height: 80px;
+}
+`
+export const OptionsImage = styled.img`
+width:90%;
+`
diff --git a/src/components/GlobalStyle.js b/src/components/GlobalStyle.js
@@ -0,0 +1,8 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px;
+  }
+`;
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { CurrentQuestion } from './CurrentQuestion/CurrentQuestion'
+import { SummaryPage } from './SummaryPage/SummaryPage'
+import { StartPage } from './StartPage/StartPage'
+// import { Timer } from './Timer'
+
+export const Main = () => {
+  const [score, setScore] = useState(0)
+  const showResults = useSelector((ReduxStore) => ReduxStore.quiz.quizOver)
+  return (
+    <div>
+      {showResults === null && (<StartPage />)}
+      {showResults !== null && !showResults && (
+        // <><Timer /><CurrentQuestion score={score} setScore={setScore} /></>
+        <CurrentQuestion score={score} setScore={setScore} />
+      )}
+      {showResults !== null && showResults && (<SummaryPage score={score} />)}
+    </div>
+  )
+}
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Line } from 'rc-progress';
+
+import { useSelector } from 'react-redux'
+
+export const ProgressBar = () => {
+  // eslint-disable-next-line max-len
+  const currentQuestionId = useSelector((store) => store.quiz.questions[store.quiz.currentQuestionIndex].id)
+  const totalQuestions = useSelector((store) => store.quiz.questions.length)
+
+  return (
+    <Line
+      percent={(currentQuestionId / totalQuestions) * 100}
+      width="80%"
+      trailWidth={4}
+      strokeWidth={4}
+      strokeColor="#FFBF00"
+      trailColor="#dfe3f5" />
+  )
+}
diff --git a/src/components/StartPage/StartPage.js b/src/components/StartPage/StartPage.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { quiz } from 'reducers/quiz';
+import { ButtonContainer, Button } from 'reusable-components/Button';
+import { Title } from 'reusable-components/Title';
+import { StartContainer, Logo } from './StartPageStyling';
+
+export const StartPage = () => {
+  const dispatch = useDispatch()
+  const startOnClick = () => {
+    dispatch(quiz.actions.startQuiz())
+  }
+  return (
+    <StartContainer>
+      <Logo src="/images/logo.jpg" alt="quiz logo" />
+      <Title fontSize="4rem"> Quiz! </Title>
+      <ButtonContainer>
+        <Button type="button" onClick={startOnClick}>Start</Button>
+      </ButtonContainer>
+    </StartContainer>
+  )
+}
diff --git a/src/components/StartPage/StartPageStyling.js b/src/components/StartPage/StartPageStyling.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const StartContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    max-width: 100vw;
+    height:100vh;
+    color: #dfe3f5;
+    background: #9D50BB;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #6E48AA, #9D50BB);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #6E48AA, #9D50BB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+`
+
+export const Logo = styled.img`
+    display:flex;
+    width:40%;
+    border-radius: 50%;
+
+@media (min-width: 1024px) {
+    width: 18%;
+
+}
+`