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';
@@ -44,26 +44,26 @@ class SimpleTabs extends React.Component {
         const { classes } = this.props;
         const { value } = this.state;
 
-    return (
+        return (
-    <div className={classes.root}>
+            <div className={classes.root}>
-        <AppBar position="static">
+                <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
+                    <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
+                        <Tab label="Home" />
-                <Tab label="Report a Sighting"/>
+                        <Tab label="Report a Sighting" />
-                <Tab label="Sightings" />
+                        <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
+                        <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
+                        <Tab label="View Map" />
-                <Tab label="Marten Info" />
+                        <Tab label="Marten Info" />
-            </Tabs>
+                    </Tabs>
-        </AppBar>
+                </AppBar>
-        {value === 0 && <Home/>}
+                {value === 0 && <Home />}
-        {value === 1 && <Report/>}
+                {value === 1 && <Report />}
-        {value === 2 && <SightingList/>}
+                {value === 2 && <SightingList />}
-        {value === 3 && <Quiz/>}
+                {value === 3 && <QuizGame />}
-        {value === 4 && <ViewMap/>}
+                {value === 4 && <ViewMap />}
-        {value === 5 && <Info/>}
+                {value === 5 && <Info />}
-    </div>
+            </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;