completed the quiz func

SwarnenduDasKW · Aug 28, 2020 · 1705f30 · 1705f30
1 parent e4a1e65
commit 1705f30
Show file tree

Hide file tree

Showing 12 changed files with 24,818 additions and 236 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,20 +1,20 @@
-asset-manifest.json,1598217017526,b7f10c3bab66605e141d0a26b8c778bec31f27c6e649625f6e5b5e2acded90da
-index.html,1598217017526,f021df1871f1f3baf6e9a912306e0633f06576f66203a6b32e729b9821ff1c67
-favicon.ico,1596838110534,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
-manifest.json,1596838110538,5c997de1364b8be939319fa9209abd77f2caf7f8844999a9e2e9173f844e7840
-logo192.png,1596838110536,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
-precache-manifest.e2b6f0be1f08ccc2f882b4f7208c2060.js,1598217017526,4a48fad67183490f01f0204d6bb0a43e83fbcf687c251b56b2a4c840f360a18f
-robots.txt,1596838110538,b2090cf9761ef60aa06e4fab97679bd43dfa5e5df073701ead5879d7c68f1ec5
-service-worker.js,1598217017526,1c3eb8d9c15a829d8291e9ebea73c20531467507ce29bd5d0c85926475a620e0
-static/css/main.9fbd55b8.chunk.css,1598217017531,c6d26903e36af56535ddeb743a245ac25b833ff5a0e1571817e0b7d1e64aca7a
-logo512.png,1596838110537,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
-static/css/main.9fbd55b8.chunk.css.map,1598217017539,bd28bc90a7ccdcb5a393a22609aebb4550418946fac87cef0aca6c83e63015c0
-static/js/2.54de2d10.chunk.js.LICENSE.txt,1598217017539,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
-static/js/main.d56ae62f.chunk.js,1598217017532,9134e3f98960e44bc5bb6f96f753cac84c4f5ae9004708a8a511d5b394206857
-static/js/main.d56ae62f.chunk.js.map,1598217017539,85827499261b896e1c55907b55d60122d4a770d357148441973d1d05dbfeb7ec
-static/js/runtime-main.d4304d1c.js,1598217017539,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
-static/js/runtime-main.d4304d1c.js.map,1598217017539,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
-static/media/c3f2.13a6e59e.png,1598217017539,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
-static/media/quiz.e20965ee.png,1598217017530,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
-static/js/2.54de2d10.chunk.js,1598217017539,fe07414151322e2ed39e6bdb76e850c58726e4d6ad4ed677e2f8581a47753bed
-static/js/2.54de2d10.chunk.js.map,1598217017540,e815a9e54e0db262a48641e161b9ec1a73dcbad6ee7907ea7b90940e114f10eb
+asset-manifest.json,1598507924846,bde38ebc935123af61dd7f7b3f308a4ef710c3c788da1f99630c760e5bbde2f8
+index.html,1598507924846,32a152291115ee58cb3060c90e9143a64f99b896a3a08f9426c3906003eff5d6
+manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+precache-manifest.237fd19650d85f6b8ccb9716d4801aed.js,1598507924846,8fd766b44d1094ce6e7746b8cd7d08f6eadb39638e6a7652edd9cd354de53918
+robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+favicon.ico,499162500000,d96ddbc4933b04e12c738ab39f469573143949ca2c39eda0a49d16f83d40c319
+logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+service-worker.js,1598507924846,49746a744dcae61bfb476a718472a9cde063346850d926b88e73b1963c5985a0
+static/js/2.67157743.chunk.js.LICENSE.txt,1598507924854,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
+static/css/main.03adb421.chunk.css,1598507924853,f397b3f94aa0085fe8cea0c8ecf3d68f530b6acc25164213e667319a461fe2c0
+static/css/main.03adb421.chunk.css.map,1598507924853,56365ac328df34f6c87a93f8997fa783f70cf8737d64d96238ba235f775a0365
+logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+static/js/main.e1144e45.chunk.js,1598507924853,763e673729a393e8d15d6304d1754ad92eb81dee024774b7d59be9d7ec65153a
+static/js/runtime-main.d4304d1c.js,1598507924853,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
+static/js/runtime-main.d4304d1c.js.map,1598507924854,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
+static/js/main.e1144e45.chunk.js.map,1598507924853,b6afd9505f06540a33d9597e3f9fea170d308871e1390af32b62682d9c6b19ab
+static/media/c3f2.13a6e59e.png,1598507924853,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
+static/media/quiz.e20965ee.png,1598507924850,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
+static/js/2.67157743.chunk.js,1598507924854,779d2ce139f8316441fe4ed2ead737b4bfdd05b0c58bc2cd46e485adb89e5c58
+static/js/2.67157743.chunk.js.map,1598507924854,fe361338ad7ec0ce60ae2f31d527df7eae54cd10111d1435e2bdd2ce83dbc3cd
diff --git a/README.md b/README.md
@@ -54,8 +54,8 @@ The url will be created.
 
 ## To do items
 
-1. The quiz has hardcoded countries. Need to work with random data
-2. Show the flag of the country in the quiz page
+1. The quiz has hardcoded countries. Need to work with random data - Done
+2. Show the flag of the country in the quiz page - Done
 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.
@@ -65,3 +65,4 @@ The url will be created.
 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. Code cleanup and organize the components properly
+11. When the countries are loading show "Loading..." in the page not "No data found"
diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,12 @@
 import React, { useState, useMemo } from "react";
-import "./App.css";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { CountryContext } from "./CountryContext";
+import { AnswerContext } from "./answer-context";
 import Countries from "./Countries";
 import Navbar from "./Navbar";
 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";
+import "./App.css";
 
 function App() {
   const [countrydata, setCountrydata] = useState([]);
@@ -32,8 +31,6 @@ function App() {
             <AnswerContext.Provider value={answerProvider}>
               <Route path="/quiz" exact component={QuizMaster} />
             </AnswerContext.Provider>
-            {/* <QuizCountryCurrency /> */}
-            {/* <Countries /> */}
           </Switch>
         </CountryContext.Provider>
         <Footer />

diff --git a/src/CountryCapitalQuiz.css b/src/CountryCapitalQuiz.css
@@ -6,16 +6,32 @@
 }
 
 .countrycapitalquiz__question {
-  /* border: 2px solid blue; */
+  display: flex;
+  color: rgba(233, 233, 233, 0.801);
+}
+
+.countrycapitalquiz__avatar {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+  display: block;
+}
+
+.countrycapitalquiz__flag {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
 }
 
 .countrycapitalquiz__answers {
   /* border: 2px solid green; */
   margin-top: 20px;
+  color: white;
 }
 
 .countrycapitalquiz_checkanswer {
   margin-top: 20px !important;
+  width: 170px !important;
 }
 
 .countrycapitalquiz__score {

diff --git a/src/CountryCapitalQuiz.js b/src/CountryCapitalQuiz.js
@@ -3,37 +3,53 @@ 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 Avatar from "@material-ui/core/Avatar";
+import { makeStyles } from "@material-ui/core/styles";
 import "./CountryCapitalQuiz.css";
 
-function CountryCapitalQuiz(props) {
-  //console.log("I am in CountryCapitalQuiz");
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    "& > *": {
+      margin: theme.spacing(1),
+    },
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+  large: {
+    width: 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);
     //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));
@@ -43,8 +59,8 @@ function CountryCapitalQuiz(props) {
   };
 
   const handleSubmit = (event) => {
-    console.log("Prop Question Country Name: ", props.question.name);
-    console.log("Selected Capital: ", value);
+    // console.log("Prop Question Country Name: ", props.question.name);
+    // console.log("Selected Capital: ", value);
 
     event.preventDefault();
 
@@ -66,12 +82,21 @@ function CountryCapitalQuiz(props) {
       <div className="countrycapitalquiz__question">
         <h1>What is the capital of {props.question.name}?</h1>
       </div>
+      <div className="countrycapitalquiz__avatar">
+        <Avatar
+          className={classes.large}
+          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}>
-            {/* <FormLabel component="legend">
-              What is the capital of {props.question.name}
-            </FormLabel> */}
             <RadioGroup
               aria-label={`Option${props.question.name}`}
               name={`Option1${props.question.name}`}
@@ -100,8 +125,6 @@ function CountryCapitalQuiz(props) {
         </form>
         <Chip
           label={`Score: ${score}/10`}
-          color="primary"
-          variant="outlined"
           className="countrycapitalquiz__score"
         />
       </div>