React quiz by Sara, Malwina and Giorgio

.eslintrc.json

@@ -26,6 +26,7 @@
     "react-hooks"
   ],
   "rules": {
+    "linebreak-style": "off",
     "react/function-component-definition": [
       2,
       {

README.md

@@ -10,4 +10,26 @@ 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.
+https://rococo-pony-134b75.netlify.app/
+
+# Running Locally
+
+This is a short guide on how to run a Redux quiz project locally.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/) installed on your machine
+- A code editor like [VSCode](https://code.visualstudio.com/) or [Sublime Text](https://www.sublimetext.com/)
+
+## Installation
+
+1. Clone the repository or download the project files to your local machine.
+2. Open a terminal and navigate to the project directory.
+3. Run `npm install` to install all the project dependencies including `react-redux`, `@reduxjs/toolkit`, and `react-router-dom`.
+
+## Running the Project
+
+1. After the installation is complete, run `npm start` to start the development server.
+2. Once the server is started, you can view the project in your web browser by navigating to [http://localhost:3000](http://localhost:3000).
+
+That's it! You now have the Redux project up and running on your local machine with all the required dependencies installed. 

package.json

@@ -4,7 +4,7 @@
   "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",
@@ -13,7 +13,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.2",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "^5.0.1"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { quiz } from 'reducers/quiz';
+import { WelcomePage } from 'pages/WelcomePage';
 
-import { CurrentQuestion } from 'components/CurrentQuestion';
+import { Question } from 'pages/Question';
 
 const reducer = combineReducers({
   quiz: quiz.reducer
@@ -14,7 +16,12 @@ const store = configureStore({ reducer });
 export const App = () => {
   return (
     <Provider store={store}>
-      <CurrentQuestion />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<WelcomePage />} />
+          <Route path="/quiz" element={<Question />} />
+        </Routes>
+      </BrowserRouter>
     </Provider>
   );
 }

src/components/AnswerButton.js

@@ -0,0 +1,47 @@
+/* eslint-disable max-len */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-shadow */
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+
+export const AnswerButton = ({ index, option, setGoToNextButton }) => {
+  const dispatch = useDispatch();
+  const [activeBtn, setActiveBtn] = useState(false);
+
+  // Gets all question in the store
+  const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex]);
+
+  // Gets the answers the user has given
+  const usersAnswer = useSelector((state) => state.quiz.answers[state.quiz.currentQuestionIndex]);
+
+  const onAnswerSubmit = (questionId, answerIndex) => {
+    dispatch(quiz.actions.submitAnswer({
+      questionId, answerIndex
+    }));
+    if (question.correctAnswerIndex === answerIndex) {
+      window.alert('Yay YOU!')
+      dispatch(quiz.actions.goToNextQuestion())
+    } else {
+      window.alert('Wrong answer!')
+    }
+    setActiveBtn(true);
+    setGoToNextButton(true);
+  }
+
+  const correctAnswer = usersAnswer && index === question.correctAnswerIndex;
+
+  return (
+    /* If activeBtn is true, it checks whether the answer is correct or incorrect based on the correctAnswer variable.
+    If correctAnswer is true, it sets the class to 'correct', which applies the appropriate styles to indicate a correct answer.
+    If correctAnswer is false, it sets the class to 'wrong', which applies the appropriate styles to indicate an incorrect answer.
+    If activeBtn is false, it sets the class to 'default', which applies the default styles to the button.  */
+    <button
+      className={activeBtn ? (correctAnswer ? 'correct' : 'wrong') : 'default'}
+      onClick={() => onAnswerSubmit(question.id, index)}
+      disabled={usersAnswer}
+      type="button">
+      {option}
+    </button>
+  );
+};

src/components/CurrentQuestion.css

@@ -0,0 +1,32 @@
+.eslint-hater h1 {
+  font-family: futura-pt, 'sans-serif';
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  color: rgb(0, 24, 164);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.answerButton {
+  place-self: center;
+}
+
+.answer-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.eslint-hater-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+}
+
+.eslint-hater {
+  display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/components/CurrentQuestion.js

@@ -1,16 +1,51 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { NextButton } from './NextButton';
+import { ProgressBar } from './ProgressBar';
+import { AnswerButton } from './AnswerButton';
+import { SummaryPage } from '../pages/Summary';
+import { quiz } from '../reducers/quiz';
+import './CurrentQuestion.css';
 
 export const CurrentQuestion = () => {
-  const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex])
+  console.log(quiz);
+  const dispatch = useDispatch();
+  const [goToNextButton, setGoToNextButton] = useState(false);
+  const question = useSelector(
+    (state) => state.quiz.questions[state.quiz.currentQuestionIndex]
+  );
+  const quizOver = useSelector((state) => state.quiz.quizOver);
 
   if (!question) {
-    return <h1>Oh no! I could not find the current question!</h1>
+    return <h1>Oh no! I could not find the current question!</h1>;
   }
+  const moveToNext = () => {
+    dispatch(quiz.actions.goToNextQuestion());
+    setGoToNextButton(false);
+  };
 
   return (
-    <div>
-      <h1>Question: {question.questionText}</h1>
-    </div>
-  )
-}
+    <>
+      {quizOver && <SummaryPage />}
+      {!quizOver && (
+        <div className="eslint-hater">
+          <h1>Question: {question.questionText}</h1>
+          <div className="answer-buttons">
+            {question.options.map((option, index) => (
+              <AnswerButton
+                className="answerButton"
+                key={option}
+                index={index}
+                option={option}
+                setGoToNextButton={setGoToNextButton} />
+            ))}
+          </div>
+          <div className="eslint-hater-bottom">
+            {goToNextButton && <NextButton className="nextButton" clickAction={moveToNext} />}
+            <ProgressBar />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

src/components/Footer.css

@@ -0,0 +1,51 @@
+/* Footer */
+
+footer {
+    /* margin-top: 20px;
+    height: 120px; 
+    padding: 5px; */
+    display: flex;
+    flex-direction: column;
+    align-self: flex-end;
+    border-color: rgb(0, 37, 255);
+    border-width: 0px 16px 16px 16px;
+    border-style: solid;
+  }
+
+  footer p {
+    text-align: center;
+    color: black;
+    text-shadow: 1px 1px 2px white;
+  }
+
+  .contact-me {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    /*
+    margin-top: 10px; */
+  }
+
+  .contact-logo{
+    width: 20px;
+    height: 20px;
+    object-fit: cover;
+    opacity: .75;
+  }
+
+  .contact-logo:hover{
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  .about-me {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    color: rgb(0, 24, 164);
+    text-shadow: 1px 1px 2px white;
+    text-align: center;
+  }

src/components/NextButton.css

@@ -0,0 +1,27 @@
+.nextButton {
+  cursor: pointer;
+  text-underline-offset: 6px;
+  font-family: futura-pt, "sans-serif";
+  font-weight: 600;
+  transition: all 0.2s ease 0s;
+  /* display: inline-block; */
+  padding: 18px 30px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-size: 18px;
+  border: 2px solid rgb(10, 37, 255);
+  /* place-self: flex-start; */
+  color: rgb(10, 37, 255);
+  background: transparent;
+  align-self: center;
+  margin-top:40px;
+  margin-bottom:40px;
+  /* this is the important stuff 👇 */
+animation: bounce 1s infinite alternate;
+}
+
+@keyframes bounce {
+    0%   {transform: translateY(0);}
+    100% {transform: translateY(50px);}
+  }
+

src/components/NextButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+import './NextButton.css';
+
+export const NextButton = () => {
+  const dispatch = useDispatch();
+  const goToNextQuestion = () => {
+    dispatch(quiz.actions.goToNextQuestion());
+  };
+  return (
+    <button className="nextButton" onClick={goToNextQuestion} type="button">
+      Next
+    </button>
+  );
+};

src/components/ProgressBar.css

@@ -0,0 +1,25 @@
+.progress-bar {
+  font-family: futura-pt, 'sans-serif';
+  letter-spacing: -0.01em;
+  font-size: 32px;
+  line-height: min(max(50px, 6vw), 53px);
+  color: rgb(0, 24, 164);
+}
+.progress {
+  width: 100%;
+  height: 10px;
+  appearance: none;
+  background-color: #f4f4f4;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.progress::-webkit-progress-bar {
+  background-color: #f4f4f4;
+  border-radius: 20px;
+}
+
+.progress::-webkit-progress-value {
+  background-color: rgba(0, 37, 255, 1);
+  border-radius: 20px;
+}

src/components/ProgressBar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import './ProgressBar.css';
+
+export const ProgressBar = () => {
+  const questions = useSelector((state) => state.quiz.questions);
+  const currentQuestionIndex = useSelector((state) => {
+    return state.quiz.questions[state.quiz.currentQuestionIndex];
+  });
+
+  const progress = (currentQuestionIndex.id / questions.length) * 100;
+
+  return (
+    <div className="container">
+      <h3 className="progress-bar">
+        Question: {currentQuestionIndex.id} / {questions.length}
+      </h3>
+      <progress className="progress" value={progress} max="100">
+        {progress}%
+      </progress>
+    </div>
+  );
+};

src/components/ResetButton.css

@@ -0,0 +1,35 @@
+.resetButton {
+  cursor: pointer;
+  text-underline-offset: 6px;
+  /*font-family: futura-pt, 'sans-serif'; */
+  font-weight: 600;
+  transition: all 0.2s ease 0s;
+  display: inline-block;
+  padding: 18px 30px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-size: 18px;
+  border: 2px solid rgb(10, 37, 255);
+  place-self: flex-start;
+  color: rgb(255, 255, 255);
+  background: rgb(10, 37, 255);
+
+  /* this is the important stuff 👇 */
+  animation: bounce 1s infinite alternate;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(50px);
+  }
+}
+.resetButtonContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}

src/components/ResetButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { quiz } from '../reducers/quiz';
+import './ResetButton.css';
+
+export const ResetButton = () => {
+  const dispatch = useDispatch();
+  const restart = () => {
+    dispatch(quiz.actions.restart());
+  };
+  return (
+    <div className="resetButtonContainer">
+      <button className="resetButton" onClick={restart} type="button">
+        Play Again
+      </button>
+    </div>
+  );
+};

src/components/answerbutton.css

@@ -0,0 +1,30 @@
+/* button {
+  background-color: #3498db;
+  color: #fff;
+  font-size: 16px;
+  padding: 12px 24px;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+}
+
+button.default:hover {
+  background-color: #2980b9;
+}
+
+button.default:active {
+  background-color: #21618c;
+}
+
+button.correct {
+  background-color: #2ecc71;
+}
+
+button.wrong {
+  background-color: #e74c3c;
+}
+
+button.default {
+  background-color: #bdc3c7;
+}
+*/

src/components/footer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Footer.css';
+
+export const Footer = () => {
+  return (
+    <footer>
+      <div className="contact-me">
+        <a href="https://www.linkedin.com/in/sarabattilotti/"><img src="assets/linkedinlogo.png" className="contact-logo" alt="link to LinkedIn" /></a>
+        <a href="https://www.linkedin.com/in/giorgio-cugusi-45946817b/"><img src="assets/linkedinlogo.png" className="contact-logo" alt="link to LinkedIn" /></a>
+        <a href="https://www.linkedin.com/in/malwina-maria-polak-327b2093/"><img src="assets/linkedinlogo.png" className="contact-logo" alt="link to LinkedIn" /></a>
+      </div>
+      <div className="about-me">
+        <p>Designed by Sara, Giorgio & Malwina</p>
+      </div>
+    </footer>
+  )
+}

src/pages/Question.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CurrentQuestion } from 'components/CurrentQuestion';
+import './question.css';
+
+export const Question = () => {
+  return (
+    <div className="questions-background">
+      <CurrentQuestion />
+    </div>
+  );
+}

src/pages/Summary.js

@@ -0,0 +1,39 @@
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable react/jsx-no-useless-fragment */
+import React from 'react';
+import { ResetButton } from 'components/ResetButton';
+import { useSelector } from 'react-redux';
+import './summary.css';
+
+export const SummaryPage = () => {
+  // Variable to calculate how many correct answer the user has given
+  const correctAnswer = useSelector(
+    (state) =>
+      state.quiz.answers.filter((answer) => answer.isCorrect === true).length
+  );
+  const answers = useSelector((state) => state.quiz.answers);
+
+  const userSummary = () => {
+    if (correctAnswer === 5) {
+      return 'Youa are a genius 🧠';
+    } else if (correctAnswer === 4) {
+      return 'Well done 👌';
+    } else if (correctAnswer === 3) {
+      return 'Well done 👌';
+    } else {
+      return 'You need to study more 🤦';
+    }
+  };
+
+  // console.log(correctAnswer);
+  return (
+    <div className="summary">
+      <h1>Oh wow, what a ride!</h1>
+      <h3>
+        Your final score was: {correctAnswer} out of {answers.length}
+      </h3>
+      <ResetButton />
+      <p>{userSummary()}</p>
+    </div>
+  );
+};

src/pages/WelcomePage.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './welcomepage.css';
+import { useNavigate } from 'react-router-dom';
+import { Footer } from 'components/footer';
+
+export const WelcomePage = () => {
+  const navigate = useNavigate();
+  const goToQuiz = () => {
+    navigate('/quiz');
+  };
+  return (
+    <div className="welcomePage">
+      <div className="content">
+        <div className="welcome-text-container">
+          <h1>Hello there friend 👋 </h1>
+          <p>Ready to Rumble with React?</p>
+        </div>
+        <button className="welcomeButton" type="button" onClick={goToQuiz}>
+          Start the quiz
+        </button>
+      </div>
+      <div className="welcome-background" />
+      <Footer />
+    </div>
+  );
+};

src/pages/question.css

@@ -0,0 +1,6 @@
+.questions-background {
+    height: 100vh;
+    border-color: rgb(0, 37, 255);
+    border-width: 16px 16px 0px 16px;
+    border-style: solid;
+}

src/pages/summary.css

@@ -0,0 +1,22 @@
+.summary {
+    height: 100vh;
+    border-color: rgb(0, 37, 255);
+    border-width: 16px 16px 16px 16px;
+    border-style: solid;
+    display: flex;
+    flex-direction: column;
+}
+
+.summary h1, h3 {
+    font-family: futura-pt, "sans-serif";
+    font-weight: 900;
+    letter-spacing: -0.01em;
+    color: rgb(0, 24, 164);
+    text-align: center;
+    padding-top: 40px;
+}
+
+.summary p {
+    padding-top: 40px;
+    text-align: center;
+}

src/pages/welcomepage.css

@@ -0,0 +1,53 @@
+.welcome-background {
+  height: 400px;
+  background-image: url(../img/tech.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  /* background-position: center -550px; */
+}
+
+.content {
+  text-align: center;
+  padding-top: 16px;
+  border-color: rgb(0, 37, 255);
+  border-width: 16px 16px 0px 16px;
+  border-style: solid;
+}
+.welcome-text-container h1 {
+  font-family: futura-pt, 'sans-serif';
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  color: rgb(0, 24, 164);
+}
+
+button {
+  cursor: pointer;
+  text-underline-offset: 6px;
+  /*font-family: futura-pt, 'sans-serif'; */
+  font-weight: 600;
+  transition: all 0.2s ease 0s;
+  display: inline-block;
+  padding: 18px 30px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-size: 18px;
+  border: 2px solid rgb(10, 37, 255);
+  /* place-self: flex-start; */
+  color: rgb(255, 255, 255);
+  background: rgb(10, 37, 255);
+  align-self: center;
+}
+.welcomeButton {
+  /* this is the important stuff 👇 */
+  animation: bounce 1s infinite alternate;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(50px);
+  }
+}

src/reducers/quiz.js

@@ -1,23 +1,76 @@
-import { createSlice } from '@reduxjs/toolkit'
+/* eslint-disable comma-dangle */
+import { createSlice } from '@reduxjs/toolkit';
 
 // Change these to your own questions!
 const questions = [
-  { id: 1, questionText: 'Who set the Olympic record for the 100m dash in 2012?', options: ['Usain Bolt', 'Justin Gatlin', 'Tyson Gay', 'Asafa Powell'], correctAnswerIndex: 0 },
-  { id: 2, questionText: 'When was Michael Phelps last named male World Swimmer of the Year?', options: ['2012', '2014', '2016', '2018'], correctAnswerIndex: 2 }
-]
+  {
+    id: 1,
+    questionText: 'What is React?',
+    options: [
+      'A front-end JavaScript library',
+      'A back-end programming language',
+      'A mobile application development platform',
+      'A database management system',
+    ],
+    correctAnswerIndex: 0,
+  },
+  {
+    id: 2,
+    questionText: 'What is JSX?',
+    options: [
+      'A type of HTML used in React components',
+      'A JavaScript extension for writing React code',
+      'A CSS framework for styling React components',
+      'A backend server for React applications',
+    ],
+    correctAnswerIndex: 1,
+  },
+  {
+    id: 3,
+    questionText: 'What is the Virtual DOM?',
+    options: [
+      'A real-time representation of the HTML DOM used for performance optimization',
+      'A way to manage multiple React components on a page',
+      'A tool for debugging React applications',
+      'A database used to store React component data',
+    ],
+    correctAnswerIndex: 0,
+  },
+  {
+    id: 4,
+    questionText: 'What is a React component?',
+    options: [
+      'A small, reusable piece of code that can be rendered on a web page',
+      'A programming language used to create React applications',
+      'A database used to store React component data',
+      'A tool for debugging React applications',
+    ],
+    correctAnswerIndex: 0,
+  },
+  {
+    id: 5,
+    questionText: 'What is the purpose of state in React?',
+    options: [
+      'To store and manage data that can change over time',
+      'To render components on the page',
+      'To handle user events like clicks and keyboard inputs',
+      'To control the overall layout of the web page',
+    ],
+    correctAnswerIndex: 0,
+  },
+];
 
 const initialState = {
   questions,
   answers: [],
   currentQuestionIndex: 0,
-  quizOver: false
-}
+  quizOver: false,
+};
 
 export const quiz = createSlice({
   name: 'quiz',
   initialState,
   reducers: {
-
     /**
      * Use this action when a user selects an answer to the question.
      * The answer will be stored in the `quiz.answers` state with the
@@ -34,24 +87,28 @@ export const quiz = createSlice({
      * and `answerIndex` keys. See the readme for more details.
      */
     submitAnswer: (state, action) => {
-      const { questionId, answerIndex } = action.payload
-      const question = state.questions.find((q) => q.id === questionId)
+      const { questionId, answerIndex } = action.payload;
+      const question = state.questions.find((q) => q.id === questionId);
 
       if (!question) {
-        throw new Error('Could not find question! Check to make sure you are passing the question id correctly.')
+        throw new Error(
+          'Could not find question! Check to make sure you are passing the question id correctly.'
+        );
       }
 
       if (question.options[answerIndex] === undefined) {
-        throw new Error(`You passed answerIndex ${answerIndex}, but it is not in the possible answers array!`)
+        throw new Error(
+          `You passed answerIndex ${answerIndex}, but it is not in the possible answers array!`
+        );
       }
 
       state.answers.push({
         questionId,
         answerIndex,
         question,
         answer: question.options[answerIndex],
-        isCorrect: question.correctAnswerIndex === answerIndex
-      })
+        isCorrect: question.correctAnswerIndex === answerIndex,
+      });
     },
 
     /**
@@ -63,9 +120,9 @@ export const quiz = createSlice({
      */
     goToNextQuestion: (state) => {
       if (state.currentQuestionIndex + 1 === state.questions.length) {
-        state.quizOver = true
+        state.quizOver = true;
       } else {
-        state.currentQuestionIndex += 1
+        state.currentQuestionIndex += 1;
       }
     },
 
@@ -77,8 +134,7 @@ export const quiz = createSlice({
      * This action does not require a payload.
      */
     restart: () => {
-      return initialState
-    }
-
-  }
-})
+      return initialState;
+    },
+  },
+});