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>
+  );
+};