Updated the scoring system

SwarnenduDasKW · Sep 1, 2020 · 45587e6 · 45587e6
1 parent a9032d5
commit 45587e6
Show file tree

Hide file tree

Showing 17 changed files with 332 additions and 199 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,20 +1,21 @@
-favicon.ico,499162500000,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
 logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
 logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1598591684818,8ad9c690e8d1c266c012ea7dde0bff1511fb1db6eed11f81b22071950c1003b4
-index.html,1598591684818,b92c2c04cb5d424d8cb4354a8066650dbd8c67a015cd2cc0bce9706d97bb84a5
-precache-manifest.bae64b1f61909380a20bf04d9b29bded.js,1598591684818,b23559194f1a1eef3b5bc3136679e479808fa24e635e65ce10048070ad1ee61b
-service-worker.js,1598591684818,d63ef945dd0a8013a81b513418add096f63330e0065a3aeac9cc10cd09edb1b3
-static/css/main.369f1e0d.chunk.css,1598591684822,c831e160ee35b7d302739bfdc2cb036cf65e5ac4107f50adbc50099ca1cf0ae9
-static/js/2.aad2c480.chunk.js.LICENSE.txt,1598591684828,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
-static/css/main.369f1e0d.chunk.css.map,1598591684828,475f7bda4edd9995ec9c93a44e5781ba04a8c5a27170d998fa90ab0a5796e63f
-static/js/main.4fe92b7b.chunk.js.map,1598591684828,558d3e66236f4d1daa6e99297c35d4cc02c0e8d16463d9098f13bd8ae0c02f08
-static/js/runtime-main.d4304d1c.js,1598591684828,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
-static/js/runtime-main.d4304d1c.js.map,1598591684828,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
-static/media/c3f2.13a6e59e.png,1598591684828,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
-static/media/quiz.e20965ee.png,1598591684822,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
-static/js/2.aad2c480.chunk.js,1598591684828,d9b4499f2b71834e7f54179530e853822e8b94e61e2ad024d6ee4f346dbcce8f
-static/js/main.4fe92b7b.chunk.js,1598591684828,c91128466a811cc81bb622018c83ed1c52b0e061fd24b62670701ed26aff5c7d
-static/js/2.aad2c480.chunk.js.map,1598591684829,4b063ab335bb4807679e9cbbd25057574be840295435bf46b924c6203f0ff81b
+asset-manifest.json,1598729121879,7351ba82e80ce6b57b1e77bb2fcb9a0e515148bf4b984ec14e8e10f33616760a
+precache-manifest.3ddebc7288e7effdce5b09e2a00a2bfe.js,1598729121879,c18dfd5c05049cbc9df806869ca32f323c368e800242afb5e6b3bf6c0548799a
+index.html,1598729121879,137f28105553af4e763ed6b62f0edfa0e8100c9f4c5bb4b46dcaa029dd8bc2d1
+favicon1.ico,499162500000,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
+service-worker.js,1598729121879,557aa74e30d01404fb4bb93f787d23bb330b4c94f7e9725be44e8ba0e36bf638
+static/css/main.74fdcdf8.chunk.css,1598729121887,8a46d666c7a6d470eef9a0e247d35f7f0948e8c731910b43ba887dfe548268ed
+static/css/main.74fdcdf8.chunk.css.map,1598729121900,3e3790852b6f1e36e83f07427b75e17b4cb4085719dd558a11b048e7f296312f
+static/js/2.aad2c480.chunk.js.LICENSE.txt,1598729121900,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
+static/js/runtime-main.d4304d1c.js,1598729121900,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
+static/js/main.20e6efaf.chunk.js.map,1598729121901,1578879dc044c11a9d5eb73d8bb1acb8653902e621f905a0b701e0fbea40fe7a
+static/js/runtime-main.d4304d1c.js.map,1598729121901,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
+favicon.ico,1598645829506,c96863cbc6c2c2bad403976abcaadc94d9990c238cb831c7159c1ac83a40ea1a
+static/media/c3f2.13a6e59e.png,1598729121887,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
+static/media/quiz.e20965ee.png,1598729121900,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
+static/js/2.aad2c480.chunk.js,1598729121901,d9b4499f2b71834e7f54179530e853822e8b94e61e2ad024d6ee4f346dbcce8f
+static/js/main.20e6efaf.chunk.js,1598729121900,80e071f33217df57c5be0c86812ad2e41b13e6ec0252c0906132b448a3d1d54f
+static/js/2.aad2c480.chunk.js.map,1598729121902,4b063ab335bb4807679e9cbbd25057574be840295435bf46b924c6203f0ff81b
diff --git a/README.md b/README.md
@@ -54,22 +54,24 @@ The url will be created.
 
 ## Git commands
 
-git init
-git add .
-git commit -m "first commit"
-git remote add origin https://github.com/SwarnenduDasKW/Country-Capital-Flag.git
-git push -u origin master
+> git init
+> git add .
+> git commit -m "first commit"
+> git remote add origin https://github.com/SwarnenduDasKW/Country-Capital-Flag.git
+> git push -u origin master
 
 ## To do items
 
-The Navbar disappears on scrolling - It's not hapenning now.
-Remove the "Check Answer" and Score. Replace that by Submit button. A report will popup showing user's selection and correct answer and score.
-When the countries are loading show "Loading..." not "No data found"
+- [ ] The Navbar disappears on scrolling - It's not hapenning now. This happens when the application is left open on localhost for long hours. Maybe because of network connection drop.
+- [ ] When the countries are loading show "Loading..." not "No data found"
+- [ ] Set the timer when a user start the quiz
+- [ ] Change the opacity of the previous and next buttons when they reach beginning or end of the question set
+- [ ] Once the report is closed take the user back to the Quiz level page
 
 ## Defects
 
-1. Faulty scoring system.
-2. In the country capital quiz duplicate answer is shown. This is because Country Niue and Jamica have the same capital name Kingston.
+- [x] Faulty scoring system.
+- [x] In the country capital quiz duplicate answer is shown. This is because Country Niue and Jamica have the same capital name Kingston.
 
 ## Done
 
@@ -83,3 +85,4 @@ When the countries are loading show "Loading..." not "No data found"
 7. Done - Remember the previous choise so that user can see the chosen answers.
 8. Done - Code cleanup and organize the components properly.
 9. Done - Implement 3 difficulty levels for the quiz. Easy - Medium - Hard
+10. Done - Remove the "Check Answer" and Score. Replace that by Submit button. A report will popup showing user's selection and correct answer and score.
diff --git a/src/components/App.js b/src/components/App.js
@@ -5,21 +5,20 @@ import { AnswerContext } from "../contexts/answerContext";
 import Countries from "../components/Countries";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
-import QuizMaster from "../components/QuizMaster";
 import QuizLevel from "../components/QuizLevel";
 import "../stylesheets/App.css";
 
 function App() {
   const [countrydata, setCountrydata] = useState([]);
   const countrydataProvider = useMemo(() => ({ countrydata, setCountrydata }), [
     countrydata,
-    setCountrydata,
+    setCountrydata
   ]);
 
   const [answer, setAnswer] = useState(new Map());
   const answerProvider = useMemo(() => ({ answer, setAnswer }), [
     answer,
-    setAnswer,
+    setAnswer
   ]);
 
   return (

diff --git a/src/components/Countries.js b/src/components/Countries.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useContext } from "react";
 import "../stylesheets/Countries.css";
 import Country from "../components/Country";
 import { CountryContext } from "../contexts/CountryContext";
 
 function Countries() {
-  const { countrydata, setCountrydata } = useContext(CountryContext);
+  const { countrydata } = useContext(CountryContext);
 
   return (
     <div className="countries">
@@ -24,7 +24,7 @@ function Countries() {
         //   ))}
         // </ul>
         <div className="countries__list">
-          {countrydata.map((country) => (
+          {countrydata.map(country => (
             <Country
               key={country.alpha2Code}
               name={country.name}

diff --git a/src/components/CountryCapitalQuiz.js b/src/components/CountryCapitalQuiz.js
@@ -3,78 +3,45 @@ 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 FormHelperText from "@material-ui/core/FormHelperText";
-import Button from "@material-ui/core/Button";
-import Chip from "@material-ui/core/Chip";
 import { AnswerContext } from "../contexts/answerContext";
 import Avatar from "@material-ui/core/Avatar";
 import { makeStyles } from "@material-ui/core/styles";
 import "../stylesheets/CountryCapitalQuiz.css";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     display: "flex",
     "& > *": {
-      margin: theme.spacing(1),
-    },
+      margin: theme.spacing(1)
+    }
   },
   small: {
     width: theme.spacing(3),
-    height: theme.spacing(3),
+    height: theme.spacing(3)
   },
   large: {
     width: theme.spacing(10),
-    height: theme.spacing(10),
-  },
+    height: theme.spacing(10)
+  }
 }));
 
 function CountryCapitalQuiz(props) {
   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);
   const classes = useStyles();
-  //initilize the score to zero
-  useEffect(() => {
-    // console.log("CountryCapitalQuiz --> initial", props);
-    setScore(0);
-  }, []);
 
   // Check how you can call setHelperText from ParentComponent when Next or Previous button is clicked.
   useEffect(() => {
-    setHelperText(" ");
-    console.log("Answer Map Test --->>>", answer);
-    console.log("CountryCapitalQuiz --> props", props);
+    // console.log("Answer Map Test --->>>", answer);
+    // console.log("CountryCapitalQuiz --> props", props);
     //Remember the previous selection.
     setValue(answer.get(props.question.name));
   }, [props]);
 
-  const handleRadioChange = (event) => {
+  const handleRadioChange = event => {
     setValue(event.target.value);
-    setAnswer((x) => x.set(props.question.name, event.target.value));
+    setAnswer(x => x.set(props.question.name, event.target.value));
     //console.log(answer);
-    setHelperText(" ");
-    setError(false);
-  };
-
-  const handleSubmit = (event) => {
-    // 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 === "" || !value) {
-      setHelperText("Please select an option.");
-      setError(true);
-    } else {
-      setHelperText("Sorry, wrong answer!");
-      setError(true);
-    }
   };
 
   return (
@@ -88,45 +55,25 @@ function CountryCapitalQuiz(props) {
           alt="CountryName"
           src={props.question.flag}
         />
-        {/* <img
-          className="countrycapitalquiz__flag"
-          alt="CountryName"
-          src={props.question.flag}
-        /> */}
       </div>
       <div className="countrycapitalquiz__answers">
-        <form onSubmit={handleSubmit}>
-          <FormControl component="fieldset" error={error}>
-            <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`}
-          className="countrycapitalquiz__score"
-        />
+        <FormControl component="fieldset">
+          <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>
+        </FormControl>
       </div>
     </div>
   );

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -14,6 +14,7 @@ function Footer() {
         <a
           href={"https://www.linkedin.com/in/swarnendu-das-41479531/"}
           target="_blank"
+          rel="noopener noreferrer"
         >
           © Swarnendu Das ||
         </a>
@@ -25,11 +26,16 @@ function Footer() {
         <a
           href={"https://www.linkedin.com/in/swarnendu-das-41479531/"}
           target="_blank"
+          rel="noopener noreferrer"
         >
           <LinkedInIcon fontSize="small" />
         </a>
         <GitHubIcon fontSize="small" />
-        <a href={"https://twitter.com/SwarnenduDasgm1"} target="_blank">
+        <a
+          href={"https://twitter.com/SwarnenduDasgm1"}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <TwitterIcon fontSize="small" />
         </a>
       </div>