Added a draft of the quiz game.

src/components/Main.js

@@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
 import Typography from '@material-ui/core/Typography';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import Quiz from '../pages/Quiz';
+import QuizGame from '../pages/QuizGame';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
 import Info from '../pages/Info';
@@ -59,7 +59,7 @@ class SimpleTabs extends React.Component {
                 {value === 0 && <Home />}
                 {value === 1 && <Report />}
                 {value === 2 && <SightingList />}
-        {value === 3 && <Quiz/>}
+                {value === 3 && <QuizGame />}
                 {value === 4 && <ViewMap />}
                 {value === 5 && <Info />}
             </div>

src/firebase.js

@@ -1,5 +1,6 @@
 import firebase from 'firebase/app';
 import 'firebase/database';
+import 'firebase/storage';
 
 const config = {
     apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",

src/pages/Quiz.js

@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
-
-class Quiz extends Component {
-    render() {
-        return (
-            <Typography variant='display1' align='center' gutterBottom>
-                Quiz
-            </Typography>
-        );
-    }
-}
-
-export default Quiz;

src/pages/QuizGame.js

@@ -0,0 +1,77 @@
+import React, { Component, Fragment } from 'react';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Quiz from 'react-quiz-component';
+
+class QuizGame extends Component {
+
+  quiz = {
+    "quizTitle": "React Quiz Component Demo",
+    "questions": [
+      {
+        "question": <Fragment>What animal is this?<br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+        "questionType": "text",
+        "answers": [
+          "American marten",
+          "American mink",
+          "Black-footed ferret"
+        ],
+        "correctAnswer": "1"
+      },
+      {
+        "question": <Fragment>What animal do these tracks belong to?<br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+        "questionType": "text",
+        "answers": [
+          "American mink",
+          "North American raccoon",
+          "American marten"
+        ],
+        "correctAnswer": "3"
+      },
+      {
+        "question": <Fragment>What animal is this?<br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+        "questionType": "text",
+        "answers": [
+          "American marten",
+          "American mink",
+          "Black-footed ferret"
+        ],
+        "correctAnswer": "2"
+      },
+      {
+        "question": <Fragment>What animal is this?<br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+        "questionType": "text",
+        "answers": [
+          "American marten",
+          "American mink",
+          "Black-footed ferret"
+        ],
+        "correctAnswer": "2"
+      },
+      {
+        "question": <Fragment>What animal do these tracks belong to?<br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+        "questionType": "text",
+        "answers": [
+          "American marten",
+          "American mink",
+          "Black-footed ferret"
+        ],
+        "correctAnswer": "2"
+      },
+    ]
+  };
+
+  render() {
+    return (
+      <Typography variant='display1' align='center' gutterBottom>
+        <Fragment>
+          <Grid container justify="center">
+            <Quiz quiz={this.quiz} />
+          </Grid>
+        </Fragment>
+      </Typography>
+    );
+  }
+}
+
+export default QuizGame;