Fixed the issues in quiz

README.md

@@ -56,8 +56,12 @@ The url will be created.
 
 1. The quiz has hardcoded countries. Need to work with random data
 2. Show the flag of the country in the quiz page
-3. Implement scoring system
-4. The footer doesn't stay at the bottom of the home page when list becomes smaller
-5. Don't like the white background
-6. The Navbar disappears on scrolling
-7. Upon loadin of the quiz page if user clicks of previous button the application crashes.
+3. Implement scoring system - Done
+4. The footer doesn't stay at the bottom when the country list becomes smaller (basically when you search for a country)
+   The code to keep footer at the bottom is done for the quiz page but need a generic solution.
+5. Don't like the white background - Done
+6. The Navbar disappears on scrolling - It's not hapenning now.
+7. Upon loading of the quiz page if user clicks of previous button the application crashes. - Disabled the previous button on the 1st question and the next button on the last question
+8. Remember the previous answers so that user can see the chosen answers. - Done
+9. Remove the "Check Answer" and Score. Replace that by Submit button. A report will popup showing user's selection and correct answer and score.
+10.

src/App.css

@@ -1,4 +1,3 @@
 * {
   margin: 0;
-  /* background-color: sandybrown; */
 }

src/App.js

@@ -6,6 +6,7 @@ import Footer from "./Footer";
 import QuizCountryCurrency from "./QuizCountryCurrency";
 import QuizMaster from "./QuizMaster";
 import { CountryContext } from "./CountryContext";
+import { AnswerContext } from "./answer-context";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 function App() {
@@ -15,14 +16,22 @@ function App() {
     setCountrydata,
   ]);
 
+  const [answer, setAnswer] = useState(new Map());
+  const answerProvider = useMemo(() => ({ answer, setAnswer }), [
+    answer,
+    setAnswer,
+  ]);
+
   return (
     <Router>
       <div className="App">
         <CountryContext.Provider value={countrydataProvider}>
           <Navbar />
           <Switch>
             <Route path="/" exact component={Countries} />
-            <Route path="/quiz" exact component={QuizMaster} />
+            <AnswerContext.Provider value={answerProvider}>
+              <Route path="/quiz" exact component={QuizMaster} />
+            </AnswerContext.Provider>
             {/* <QuizCountryCurrency /> */}
             {/* <Countries /> */}
           </Switch>

src/Countries.css

@@ -2,7 +2,9 @@
   display: flex;
   /* flex-wrap: wrap; */
   /* margin-top: 80px; */
-  margin-left: 10px;
+  /* margin-left: 10px; */
+  padding-left: 5px;
+  background-color: rgb(32, 30, 30);
   /* margin-bottom: 20px; */
 
   /* background-image: linear-gradient(
@@ -26,5 +28,5 @@
 }
 
 .countries__nomatchtext {
-  color: rgb(99, 14, 14);
+  color: rgb(212, 237, 241);
 }

src/CountryCapitalQuiz.css

@@ -17,3 +17,8 @@
 .countrycapitalquiz_checkanswer {
   margin-top: 20px !important;
 }
+
+.countrycapitalquiz__score {
+  width: 100px;
+  margin-top: 10px;
+}

src/CountryCapitalQuiz.js

@@ -1,40 +1,58 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormControl from "@material-ui/core/FormControl";
 import FormLabel from "@material-ui/core/FormLabel";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import Button from "@material-ui/core/Button";
+import Chip from "@material-ui/core/Chip";
+import { AnswerContext } from "./answer-context";
 
 import "./CountryCapitalQuiz.css";
 
 function CountryCapitalQuiz(props) {
   //console.log("I am in CountryCapitalQuiz");
+
   const [value, setValue] = useState("");
   const [error, setError] = useState(false);
   const [helperText, setHelperText] = useState("What do you think?");
+  const [score, setScore] = useState(0);
+  const { answer, setAnswer } = useContext(AnswerContext);
 
   // Check how you can call setHelperText from ParentComponent when Next or Previous button is clicked.
   useEffect(() => {
     setHelperText(" ");
-    return () => {};
+    console.log("Answer Map Test --->>>", answer);
+
+    //Remember the previous selection.
+    setValue(answer.get(props.question.name));
   }, [props]);
 
+  //initilize the score to zero
+  useEffect(() => {
+    setScore(0);
+  }, []);
+
   const handleRadioChange = (event) => {
     setValue(event.target.value);
+    setAnswer((x) => x.set(props.question.name, event.target.value));
+    //console.log(answer);
     setHelperText(" ");
     setError(false);
   };
 
   const handleSubmit = (event) => {
-    console.log("Initial value of radio", value);
+    console.log("Prop Question Country Name: ", props.question.name);
+    console.log("Selected Capital: ", value);
+
     event.preventDefault();
 
     if (value === props.question.capital) {
+      setScore(score + 1);
       setHelperText("You got it!");
       setError(false);
-    } else if (value === "") {
+    } else if (value === "" || !value) {
       setHelperText("Please select an option.");
       setError(true);
     } else {
@@ -44,39 +62,48 @@ function CountryCapitalQuiz(props) {
   };
 
   return (
-    <div>
-      <div className="countrycapitalquiz">
-        <div className="countrycapitalquiz__question">
-          <h1>What is the capital of {props.question.name}?</h1>
-        </div>
-        <div className="countrycapitalquiz__answers">
-          <form onSubmit={handleSubmit}>
-            <FormControl component="fieldset" error={error}>
-              {/* <FormLabel component="legend">
+    <div className="countrycapitalquiz">
+      <div className="countrycapitalquiz__question">
+        <h1>What is the capital of {props.question.name}?</h1>
+      </div>
+      <div className="countrycapitalquiz__answers">
+        <form onSubmit={handleSubmit}>
+          <FormControl component="fieldset" error={error}>
+            {/* <FormLabel component="legend">
               What is the capital of {props.question.name}
             </FormLabel> */}
-              <RadioGroup
-                aria-label={`Option${props.question.name}`}
-                name={`Option${props.question.name}`}
-                value={value}
-                onChange={handleRadioChange}
-              >
-                {props.question.options.map((o) => (
-                  <FormControlLabel value={o} control={<Radio />} label={o} />
-                ))}
-              </RadioGroup>
-              <FormHelperText>{helperText}</FormHelperText>
-              <Button
-                type="submit"
-                color="primary"
-                variant="contained"
-                className="countrycapitalquiz_checkanswer"
-              >
-                Check Answer
-              </Button>
-            </FormControl>
-          </form>
-        </div>
+            <RadioGroup
+              aria-label={`Option${props.question.name}`}
+              name={`Option1${props.question.name}`}
+              value={value}
+              onChange={handleRadioChange}
+            >
+              {props.question.options.map((o, index) => (
+                <FormControlLabel
+                  key={index}
+                  value={o}
+                  control={<Radio />}
+                  label={o}
+                />
+              ))}
+            </RadioGroup>
+            <FormHelperText>{helperText}</FormHelperText>
+            <Button
+              type="submit"
+              color="primary"
+              variant="contained"
+              className="countrycapitalquiz_checkanswer"
+            >
+              Check Answer
+            </Button>
+          </FormControl>
+        </form>
+        <Chip
+          label={`Score: ${score}/10`}
+          color="primary"
+          variant="outlined"
+          className="countrycapitalquiz__score"
+        />
       </div>
     </div>
   );

src/Navbar.css

@@ -25,7 +25,7 @@
   width: 260px;
   height: 40px;
   /* left: 10px; */
-  object-fit: contain;
+  /* object-fit: contain; */
 }
 
 .nav__quizlogo {

src/Navbar.js

@@ -59,7 +59,7 @@ function Navbar() {
       .then(
         (data) => {
           setIsLoaded(true);
-          console.log("Navbar --> data: ", data);
+          //console.log("Navbar --> data: ", data);
           if (!data.length) {
             console.log("Navbar --> fetch. No data found");
             setCountrydata([]);

src/QuizMaster.js

@@ -1,11 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import "./QuizMaster.css";
 import CountryCapitalQuiz from "./CountryCapitalQuiz";
 import Button from "@material-ui/core/Button";
 import FastRewindIcon from "@material-ui/icons/FastRewind";
 import FastForwardIcon from "@material-ui/icons/FastForward";
+import { AnswerContext } from "./answer-context";
 
 function QuizMaster() {
+  const { answer } = useContext(AnswerContext);
+
   const [countrylist] = useState([
     {
       id: 237,
@@ -71,17 +74,22 @@ function QuizMaster() {
 
   const [id, setId] = useState(0);
 
+  //Clear the previous answers when the quiz page is loaded
+  useEffect(() => {
+    answer.clear();
+  }, []);
+
   return (
     <div className="quizmaster">
       <div className="quizmaster__questions">
+        {/* <AnswerContext.Provider value={answerProvider}> */}
         <Button
           className="quizmaster__prev"
-          onClick={() =>
-            id === 1 ? setId(countrylist.length - 1) : setId(id - 1)
-          }
           variant="contained"
           color="secondary"
-          startIcon={<FastRewindIcon fontSizeLarge />}
+          startIcon={<FastRewindIcon />}
+          onClick={() => setId(id - 1)}
+          disabled={id === 0}
         >
           previous
         </Button>
@@ -91,12 +99,12 @@ function QuizMaster() {
           variant="contained"
           color="secondary"
           startIcon={<FastForwardIcon />}
-          onClick={() =>
-            id === countrylist.length - 1 ? setId(0) : setId(id + 1)
-          }
+          disabled={id === countrylist.length - 1}
+          onClick={() => setId(id + 1)}
         >
           next
         </Button>
+        {/* </AnswerContext.Provider> */}
       </div>
     </div>
   );

src/answer-context.js

@@ -0,0 +1,20 @@
+import React, { useContext, createContext, useState, useMemo } from "react";
+
+export const AnswerContext = createContext();
+
+// function useAnswer() {
+//   const context = useContext(AnswerContext);
+//   if (!context) {
+//     throw new Error("useAnswer must be used in a AnswerProvider");
+//   }
+//   return context;
+// }
+
+// function AnswerProvider(props) {
+//   const [answer, setAnswer] = useState([{ country: null, capital: null }]);
+//   const value = useMemo(() => ({ answer, setAnswer }), [answer]);
+
+//   return <AnswerContext.Provider value={value} {...props} />;
+// }
+
+// export { AnswerProvider, useAnswer };