Add interface for quiz

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "react-spinners": "^0.13.8",
+    "react-toastify": "^9.1.2",
     "styled-components": "^5.3.10",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/App.js

@@ -9,6 +9,8 @@ import UserContext from "./context/UserContext";
 import QuizProvider from "./context/QuizContext";
 import NavBar from "./components/NavBar";
 import QuizWrapper from "./pages/QuizWrapper";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   const d = JSON.parse(localStorage.getItem("user-data"));
@@ -22,15 +24,28 @@ function App() {
   return (
     <BrowserRouter>
       <UserContext.Provider value={{ userData, setUserData }}>
-        <NavBar />
         <QuizProvider>
+          {" "}
+          <NavBar />
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/signup" element={<Signup />} />
             <Route path="/login" element={<Login />} />
             <Route path="/reset" element={<Reset />} />
             <Route path="/quiz" element={<QuizWrapper />} />
           </Routes>
+          <ToastContainer
+            position="top-right"
+            autoClose={4000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+          />
         </QuizProvider>
       </UserContext.Provider>
     </BrowserRouter>

src/components/NavBar.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { Redirect } from "react-router";
 import { useNavigate, Link } from "react-router-dom";
+import { QuizContext } from "../context/QuizContext";
 
 import {
   NavbarWrapper,
@@ -11,6 +12,7 @@ import {
 } from "../styles/NavBar";
 
 function NavBar() {
+  const {score} = useContext(QuizContext);
   const token = localStorage.getItem("auth-token");
   const navigate = useNavigate();
 
@@ -56,6 +58,16 @@ function NavBar() {
           <Logo>QuizApp</Logo>
           <Navbar>
             <NavbarLinkWrapper>
+              <NavbarLink
+                style={{
+                  textDecoration: "none",
+                  opacity: 0.9,
+                  color: "#fff",
+                  marginRight: "2em",
+                }}
+              >
+                Attempted Questions: {score}
+              </NavbarLink>
               <NavbarLink>
                 <Link
                   to="/"

src/components/quizPageComponents/Quiz.js

@@ -0,0 +1,131 @@
+import React, { useContext, useState } from "react";
+import { QuizContext } from "../../context/QuizContext";
+import styled from "styled-components";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+const Box = ({ current, next }) => {
+  const { score, quizzes, correct, setCorrect, setExit, setScore } =
+    useContext(QuizContext);
+  console.log("quizzes available", quizzes);
+  const [ans, setAns] = useState("");
+  const Save = styled.div`
+    height: 40px;
+    border-radius: 5px;
+    background: #ebb02d;
+    font-weight: bold;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1em;
+    cursor: pointer;
+  `;
+
+  const Exit = styled.div`
+    height: 40px;
+    border-radius: 5px;
+    background: #ff5d5d;
+    font-weight: bold;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1em;
+    cursor: pointer;
+    opacity: 0.7;
+  `;
+
+  const Wrapper = styled.div`
+    width: 100%;
+    height: auto;
+    padding: 1em;
+  `;
+
+  const Buttons = styled.div`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  `;
+
+  const Answers = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    margin: 2em 0;
+  `;
+
+  const Ans = styled.div`
+    cursor: pointer;
+    font-weight: bold;
+  `;
+
+  const saveHandler = async () => {
+    quizzes[current].answers.filter((a) => {
+      if (a.isCorrect === ans) {
+        setScore(score + 1);
+        console.log("correct");
+      } else {
+        console.log("wrong");
+      }
+    });
+    // if (quizzes[current].answers === ans) {
+    //   setCorrect(correct + 1);
+    // }
+    setAns(false);
+    if (current + 1 === quizzes.length) {
+      setExit(true);
+    } else {
+      next(current + 1);
+    }
+  };
+  return (
+    <Wrapper>
+      <div>
+        {current + 1}. {quizzes[current].questionText}
+      </div>
+      <Answers
+        onClick={() => {
+          quizzes[current].answers.forEach((a) => {
+            if (a.isCorrect) {
+              toast.info("Correct answer is " + a.answerText, {
+                position: "top-right",
+                autoClose: 4000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              });
+            }
+          });
+        }}
+      >
+        <Ans onClick={() => setAns(quizzes[current].answers[0].isCorrect)}>
+          {quizzes[current].answers[0].answerText}
+        </Ans>
+        <Ans onClick={() => setAns(quizzes[current].answers[1].isCorrect)}>
+          {quizzes[current].answers[1].answerText}
+        </Ans>
+        <Ans onClick={() => setAns(quizzes[current].answers[2].isCorrect)}>
+          {quizzes[current].answers[2].answerText}
+        </Ans>
+        <Ans onClick={() => setAns(quizzes[current].answers[3].isCorrect)}>
+          {quizzes[current].answers[3].answerText}
+        </Ans>
+      </Answers>
+      <Buttons>
+        <Save onClick={saveHandler}>Save & Next</Save>
+        <Exit onClick={() => setExit(true)}>Close</Exit>
+      </Buttons>
+    </Wrapper>
+  );
+};
+
+export default function Quiz() {
+  const [current, setCurrent] = useState(0);
+  return <Box current={current} next={setCurrent} />;
+}