From 60e252cb72116203858d87749524fa70cebb7243 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Wed, 24 Oct 2018 13:09:53 -0400
Subject: [PATCH 1/5] updated navigation structure

---
 src/App.css                  |   7 +-
 src/components/Main.js       | 190 ++++++++++++++++++++++++++---------
 src/components/ReportForm.js |   1 +
 3 files changed, 149 insertions(+), 49 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9dd2624..145ee45 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,10 +3,11 @@ body {
 }
 
 .report-google-map-container > div {
-    height: 92% !important;
     width: 50% !important;
 }
 
-.sighting-google-map-container > div {
-    height: 92% !important;
+@media (min-width: 960px) {
+    .sighting-google-map-container > div {
+        width: calc(100% - 241px) !important;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Main.js b/src/components/Main.js
index 2259d17..815ea15 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,75 +1,173 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Toolbar from '@material-ui/core/Toolbar';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Hidden from '@material-ui/core/Hidden';
+import Divider from '@material-ui/core/Divider';
+import MenuIcon from '@material-ui/icons/Menu';
+import HomeIcon from '@material-ui/icons/Home';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import MapIcon from '@material-ui/icons/Map';
+import ListIcon from '@material-ui/icons/List';
+import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
 import Quiz from '../pages/Quiz';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
-import Info from '../pages/Info';
 
-function TabContainer(props) {
-    return (
-        <Typography component="div" style={{ padding: 8 * 3 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
+const drawerWidth = 240;
 
 const styles = theme => ({
     root: {
         flexGrow: 1,
-        backgroundColor: theme.palette.background.paper,
+        height: '100vh',
+        zIndex: 1,
+        overflow: 'hidden',
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+    },
+    appBar: {
+        position: 'absolute',
+        marginLeft: drawerWidth,
+        [theme.breakpoints.up('md')]: {
+            width: `calc(100% - ${drawerWidth}px)`,
+        },
+    },
+    navIconHide: {
+        [theme.breakpoints.up('md')]: {
+            display: 'none',
+        },
+    },
+    toolbar: theme.mixins.toolbar,
+    drawerPaper: {
+        width: drawerWidth,
+        [theme.breakpoints.up('md')]: {
+            position: 'relative',
+        },
+    },
+    content: {
+        flexGrow: 1,
+        backgroundColor: theme.palette.background.default,
+        padding: theme.spacing.unit * 3,
     },
 });
 
-class SimpleTabs extends React.Component {
+class ResponsiveDrawer extends React.Component {
     state = {
-        value: 0,
-    };
+        mobileOpen: false,
+        key: ''
+    }
 
-    handleChange = (event, value) => {
-        this.setState({ value });
-    };
+    handleDrawerToggle = () => {
+        this.setState(state => ({ mobileOpen: !state.mobileOpen }));
+    }
+
+    nav = (text) => {
+        this.setState({
+            key: text
+        })
+    }
 
     render() {
-        const { classes } = this.props;
-        const { value } = this.state;
+        const { classes, theme } = this.props;
 
-    return (
-    <div className={classes.root}>
-        <AppBar position="static">
-            <Tabs value={value} onChange={this.handleChange} centered>
-                <Tab label="Home" />
-                <Tab label="Report a Sighting"/>
-                <Tab label="Sightings" />
-                <Tab label="Trail-Cam Quiz" />
-                <Tab label="View Map" />
-                <Tab label="Marten Info" />
-            </Tabs>
-        </AppBar>
-        {value === 0 && <Home/>}
-        {value === 1 && <Report/>}
-        {value === 2 && <SightingList/>}
-        {value === 3 && <Quiz/>}
-        {value === 4 && <ViewMap/>}
-        {value === 5 && <Info/>}
-    </div>
-    );
+        const drawer = (
+            <div>
+                <div className={classes.toolbar} />
+                <Divider />
+                <List>
+                    <ListItem button key='Home' onClick={() => this.nav('Home')}>
+                        <ListItemIcon><HomeIcon/></ListItemIcon>
+                        <ListItemText primary='Home' />
+                    </ListItem>
+                    <ListItem button key='Report' onClick={() => this.nav('Report')}>
+                        <ListItemIcon><AssignmentIcon/></ListItemIcon>
+                        <ListItemText primary='Report' />
+                    </ListItem>
+                    <ListItem button key='Map' onClick={() => this.nav('Map')}>
+                        <ListItemIcon><MapIcon/></ListItemIcon>
+                        <ListItemText primary='Map' />
+                    </ListItem>
+                    <ListItem button key='List' onClick={() => this.nav('List')}>
+                        <ListItemIcon><ListIcon/></ListItemIcon>
+                        <ListItemText primary='List' />
+                    </ListItem>
+                    <ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
+                        <ListItemIcon><SlideshowIcon/></ListItemIcon>
+                        <ListItemText primary='Quiz' />
+                    </ListItem>
+                </List>
+            </div>
+        );
+
+        return (
+            <div className={classes.root}>
+                <AppBar className={classes.appBar}>
+                    <Toolbar>
+                        <IconButton
+                            color="inherit"
+                            aria-label="Open drawer"
+                            onClick={this.handleDrawerToggle}
+                            className={classes.navIconHide}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Typography variant='title' color="inherit" noWrap>
+                            The American Marten
+                        </Typography>
+                    </Toolbar>
+                </AppBar>
+                <Hidden mdUp>
+                    <Drawer
+                        variant="temporary"
+                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                        open={this.state.mobileOpen}
+                        onClose={this.handleDrawerToggle}
+                        classes={{
+                            paper: classes.drawerPaper,
+                        }}
+                        ModalProps={{
+                            keepMounted: true, // Better open performance on mobile.
+                        }}
+                    >
+                        {drawer}
+                    </Drawer>
+                </Hidden>
+                <Hidden smDown implementation="css">
+                    <Drawer
+                        variant="permanent"
+                        open
+                        classes={{
+                            paper: classes.drawerPaper,
+                        }}
+                    >
+                        {drawer}
+                    </Drawer>
+                </Hidden>
+                    <div className={classes.toolbar} />
+                    {this.state.key === 'Home' && <Home />}
+                    {this.state.key === 'Report' && <Report />}
+                    {this.state.key === 'Map' && <ViewMap />}
+                    {this.state.key === 'List' && <SightingList />}
+                    {this.state.key === 'Quiz' && <Quiz />}
+            </div>
+        );
     }
 }
 
-SimpleTabs.propTypes = {
+ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SimpleTabs);
-
+export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
\ No newline at end of file
diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index ac72000..f3a7d3b 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -17,6 +17,7 @@ const styles = theme => ({
   container: {
     display: 'flex',
     flexWrap: 'wrap',
+    marginTop: '64px'
   },
   textField: {
     marginLeft: theme.spacing.unit * 2,

From 582b3f4a6aa7be64e2ddc1f9dff5e4427d897fd2 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Wed, 24 Oct 2018 18:15:08 -0400
Subject: [PATCH 2/5] package updates

---
 package-lock.json | 24 ++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 25 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 7dd2e71..02471bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -392,6 +392,30 @@
         "warning": "^4.0.1"
       }
     },
+    "@material-ui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-1kNcxYiIT1x8iDPEAlgmKrfRTIV8UyK6fLVcZ9kMHIKGWft9I451V5mvSrbCjbf7MX1TbLWzZjph0aVCRf9MqQ==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "recompose": "^0.29.0"
+      },
+      "dependencies": {
+        "recompose": {
+          "version": "0.29.0",
+          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.29.0.tgz",
+          "integrity": "sha512-J/qLXNU4W+AeHCDR70ajW8eMd1uroqZaECTj6qqDLPMILz3y0EzpYlvrnxKB9DnqcngWrtGwjXY9JeXaW9kS1A==",
+          "requires": {
+            "@babel/runtime": "^7.0.0",
+            "change-emitter": "^0.1.2",
+            "fbjs": "^0.8.1",
+            "hoist-non-react-statics": "^2.3.1",
+            "react-lifecycles-compat": "^3.0.2",
+            "symbol-observable": "^1.0.4"
+          }
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
diff --git a/package.json b/package.json
index 6c5de72..a8ae1ad 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.1.0",
+    "@material-ui/icons": "^3.0.1",
     "firebase": "^5.5.2",
     "firebase-admin": "^6.0.0",
     "flamelink": "^0.19.2",

From 1c959b7a32647bb7d9ef466265cd198ab4981b7b Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Thu, 25 Oct 2018 01:09:49 -0400
Subject: [PATCH 3/5] rewrote structure for new nav

---
 src/App.css                  |   9 --
 src/components/Main.js       | 159 +++++++++++++++++----------
 src/components/QuizGame.js   | 206 ++++++++++++++++++++++++++---------
 src/components/ReportForm.js |   3 +-
 src/pages/QuizPage.js        |  10 +-
 5 files changed, 261 insertions(+), 126 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8c70ed8..00ab2de 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,15 +2,6 @@ body {
     margin: 0;
 }
 
-/* #root > div > div {
-    overflow: scroll !important;
-} */
-
-div[class="ResponsiveDrawer-root-1"] {
-    overflow: scroll !important;
-    overflow-x: hidden !important;
-}
-
 @media (min-width: 960px) {
     .sighting-google-map-container > div {
         width: calc(100% - 241px) !important;
diff --git a/src/components/Main.js b/src/components/Main.js
index baafcb8..6473b17 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -20,58 +20,65 @@ import ListIcon from '@material-ui/icons/List';
 import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
-import QuizPage from '../pages/QuizPage';
+import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Collapse from '@material-ui/core/Collapse';
 
 const drawerWidth = 240;
 
 const styles = theme => ({
     root: {
-        flexGrow: 1,
-        height: '100vh',
-        zIndex: 1,
-        overflow: 'hidden',
-        position: 'relative',
         display: 'flex',
-        width: '100%',
+    },
+    drawer: {
+        [theme.breakpoints.up('sm')]: {
+            width: drawerWidth,
+            flexShrink: 0,
+        },
+    },
+    nested: {
+        paddingLeft: theme.spacing.unit * 4,
     },
     appBar: {
-        position: 'absolute',
         marginLeft: drawerWidth,
-        [theme.breakpoints.up('md')]: {
+        [theme.breakpoints.up('sm')]: {
             width: `calc(100% - ${drawerWidth}px)`,
         },
     },
-    navIconHide: {
-        [theme.breakpoints.up('md')]: {
+    menuButton: {
+        marginRight: 20,
+        [theme.breakpoints.up('sm')]: {
             display: 'none',
         },
     },
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
         width: drawerWidth,
-        [theme.breakpoints.up('md')]: {
-            position: 'relative',
-        },
     },
     content: {
-        flexGrow: 1,
-        backgroundColor: theme.palette.background.default,
-        padding: theme.spacing.unit * 3,
+        flexGrow: 1
     },
 });
 
 class ResponsiveDrawer extends React.Component {
     state = {
         mobileOpen: false,
-        key: ''
-    }
+        key: '',
+        open: false
+    };
 
     handleDrawerToggle = () => {
         this.setState(state => ({ mobileOpen: !state.mobileOpen }));
     }
 
+    handleClick = () => {
+        this.setState(state => ({ open: !state.open }));
+    }
+
     nav = (text) => {
         this.setState({
             key: text
@@ -87,79 +94,114 @@ class ResponsiveDrawer extends React.Component {
                 <Divider />
                 <List>
                     <ListItem button key='Home' onClick={() => this.nav('Home')}>
-                        <ListItemIcon><HomeIcon/></ListItemIcon>
+                        <ListItemIcon><HomeIcon /></ListItemIcon>
                         <ListItemText primary='Home' />
                     </ListItem>
                     <ListItem button key='Report' onClick={() => this.nav('Report')}>
-                        <ListItemIcon><AssignmentIcon/></ListItemIcon>
+                        <ListItemIcon><AssignmentIcon /></ListItemIcon>
                         <ListItemText primary='Report' />
                     </ListItem>
                     <ListItem button key='Map' onClick={() => this.nav('Map')}>
-                        <ListItemIcon><MapIcon/></ListItemIcon>
+                        <ListItemIcon><MapIcon /></ListItemIcon>
                         <ListItemText primary='Map' />
                     </ListItem>
                     <ListItem button key='List' onClick={() => this.nav('List')}>
-                        <ListItemIcon><ListIcon/></ListItemIcon>
+                        <ListItemIcon><ListIcon /></ListItemIcon>
                         <ListItemText primary='List' />
                     </ListItem>
-                    <ListItem button key='Quiz' onClick={() => this.nav('Quiz')}>
-                        <ListItemIcon><SlideshowIcon/></ListItemIcon>
-                        <ListItemText primary='Quiz' />
+                    <ListItem button onClick={this.handleClick}>
+                        <ListItemIcon>
+                            <SlideshowIcon />
+                        </ListItemIcon>
+                        <ListItemText inset primary="Quiz" />
+                        {this.state.open ? <ExpandLess /> : <ExpandMore />}
                     </ListItem>
+                    <Collapse in={this.state.open} timeout="auto" unmountOnExit>
+                        <List component="div" disablePadding>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Easy" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Medium-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Medium" />
+                            </ListItem>
+                            <ListItem button className={classes.nested} onClick={() => this.nav('Hard-Quiz')}>
+                                <ListItemIcon>
+                                    <MapIcon />
+                                </ListItemIcon>
+                                <ListItemText inset primary="Hard" />
+                            </ListItem>
+                        </List>
+                    </Collapse>
                 </List>
+                <Divider />
             </div>
         );
 
         return (
             <div className={classes.root}>
-                <AppBar className={classes.appBar}>
+                <CssBaseline />
+                <AppBar position="fixed" className={classes.appBar}>
                     <Toolbar>
                         <IconButton
                             color="inherit"
                             aria-label="Open drawer"
                             onClick={this.handleDrawerToggle}
-                            className={classes.navIconHide}
+                            className={classes.menuButton}
                         >
                             <MenuIcon />
                         </IconButton>
-                        <Typography variant='title' color="inherit" noWrap>
+                        <Typography variant="title" color="inherit" noWrap>
                             The American Marten
                         </Typography>
                     </Toolbar>
                 </AppBar>
-                <Hidden mdUp>
-                    <Drawer
-                        variant="temporary"
-                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-                        open={this.state.mobileOpen}
-                        onClose={this.handleDrawerToggle}
-                        classes={{
-                            paper: classes.drawerPaper,
-                        }}
-                        ModalProps={{
-                            keepMounted: true, // Better open performance on mobile.
-                        }}
-                    >
-                        {drawer}
-                    </Drawer>
-                </Hidden>
-                <Hidden smDown implementation="css">
-                    <Drawer
-                        variant="permanent"
-                        open
-                        classes={{
-                            paper: classes.drawerPaper,
-                        }}
-                    >
-                        {drawer}
-                    </Drawer>
-                </Hidden>
+                <nav className={classes.drawer}>
+                    {/* The implementation can be swap with js to avoid SEO duplication of links. */}
+                    <Hidden smUp implementation="css">
+                        <Drawer
+                            container={this.props.container}
+                            variant="temporary"
+                            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+                            open={this.state.mobileOpen}
+                            onClose={this.handleDrawerToggle}
+                            classes={{
+                                paper: classes.drawerPaper,
+                            }}
+                            ModalProps={{
+                                keepMounted: true, // Better open performance on mobile.
+                            }}
+                        >
+                            {drawer}
+                        </Drawer>
+                    </Hidden>
+                    <Hidden xsDown implementation="css">
+                        <Drawer
+                            classes={{
+                                paper: classes.drawerPaper,
+                            }}
+                            variant="permanent"
+                            open
+                        >
+                            {drawer}
+                        </Drawer>
+                    </Hidden>
+                </nav>
+                <main className={classes.content}>
                     <div className={classes.toolbar} />
                     {this.state.key === 'Home' && <Home />}
                     {this.state.key === 'Report' && <Report />}
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
-                    {this.state.key === 'Quiz' && <QuizPage />}
+                    {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
+                    {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
+                    {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}
+                </main>
             </div>
         );
     }
@@ -167,6 +209,9 @@ class ResponsiveDrawer extends React.Component {
 
 ResponsiveDrawer.propTypes = {
     classes: PropTypes.object.isRequired,
+    // Injected by the documentation to work in an iframe.
+    // You won't need it on your project.
+    container: PropTypes.object,
     theme: PropTypes.object.isRequired,
 };
 
diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js
index b620991..bbfe640 100644
--- a/src/components/QuizGame.js
+++ b/src/components/QuizGame.js
@@ -2,10 +2,6 @@ import React, { Fragment } from 'react';
 import Grid from '@material-ui/core/Grid';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
 import Quiz from 'react-quiz-component';
 
 /**
@@ -23,42 +19,17 @@ function shuffleArray(array) {
     return array;
 }
 
-function TabContainer(props) {
-    return (
-        <Typography component="div" variant='headline' align='center' style={{ padding: 8 }}>
-            {props.children}
-        </Typography>
-    );
-}
-
-TabContainer.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
 // Style for the tabs.
 const styles = theme => ({
     root: {
         flexGrow: 1,
         backgroundColor: theme.palette.background.paper,
-        marginTop: '64px',
-        overflow: 'scroll',
-        height: '95%',
     },
 });
 
 class QuizGame extends React.Component {
-    // The state of the component.
-    state = {
-        value: 0,
-    };
 
-    // Handles tab changes.
-    handleChange = (event, value) => {
-        this.setState({ value });
-    };
-
-    // Object that contains the easy quiz material.
-    easyQuiz = {
+    easy = {
         "quizTitle": "Trail Cam Quiz: Easy",
         "questions": shuffleArray([
             {
@@ -117,37 +88,166 @@ class QuizGame extends React.Component {
                 "correctAnswer": "3"
             },
         ])
-    };
+    }
+
+    medium = {
+        "quizTitle": "Trail Cam Quiz: Medium",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    hard = {
+        "quizTitle": "Trail Cam Quiz: Hard",
+        "questions": shuffleArray([
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Black bear",
+                    "Common wombat",
+                    "Raccoon",
+                    "White-tailed deer"
+                ],
+                "correctAnswer": "1"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American beaver",
+                    "Muskrat",
+                    "Porcupine",
+                    "Woodchuck"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American badger",
+                    "Raccoon",
+                    "Striped skunk",
+                    "Virginia opossum"
+                ],
+                "correctAnswer": "2"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "Eastern fox squirrel",
+                    "Eastern gray squirrel",
+                    "Red squirrel",
+                    "Southern flying squirrel"
+                ],
+                "correctAnswer": "3"
+            },
+            {
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "questionType": "text",
+                "answers": [
+                    "American Crow",
+                    "Black Vulture",
+                    "Turkey Vulture",
+                    "Northern Raven"
+                ],
+                "correctAnswer": "3"
+            },
+        ])
+    }
+
+    pickDifficulty = difficulty => {
+        let level
+
+        switch (difficulty) {
+            case 'Easy':
+                level = this.easy
+                break
+            case 'Medium':
+                level = this.medium
+                break
+            case 'Hard':
+                level = this.hard
+                break
+            default:
+                break
+        }
+
+        return level
+    }
+
+    // The state of the component.
+    state = {
+        //difficulty: pickDifficulty(this.props.difficulty)
+        difficulty: this.pickDifficulty(this.props.difficulty)
+    }
 
     // Renders the quiz component.
     render() {
         const { classes } = this.props;
-        const { value } = this.state;
 
         return (
             // Tabs
             <div className={classes.root}>
-                <AppBar position="static">
-                    <Tabs
-                        value={value}
-                        centered
-                        fullWidth
-                        onChange={this.handleChange}
-                    >
-                        <Tab label="Easy" />
-                        <Tab label="Medium" />
-                        <Tab label="Hard" />
-                    </Tabs>
-                </AppBar>
-                {value === 0 && <TabContainer>
-                    <Fragment>
-                        <Grid container justify="center">
-                            <Quiz quiz={this.easyQuiz} />
-                        </Grid>
-                    </Fragment>
-                </TabContainer>}
-                {value === 1 && <TabContainer>Medium Quiz</TabContainer>}
-                {value === 2 && <TabContainer>Hard Quiz</TabContainer>}
+                <Grid container justify="center">
+                    <Quiz quiz={this.state.difficulty} />
+                </Grid>
             </div>
         );
     }
diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index 7e7d0c0..9815843 100644
--- a/src/components/ReportForm.js
+++ b/src/components/ReportForm.js
@@ -16,8 +16,7 @@ import GoogleMap from '../components/ReportMap';
 const styles = theme => ({
   container: {
     display: 'flex',
-    flexWrap: 'wrap',
-    marginTop: '64px'
+    flexWrap: 'wrap'
   },
   textField: {
     marginLeft: theme.spacing.unit * 2,
diff --git a/src/pages/QuizPage.js b/src/pages/QuizPage.js
index 4c36a98..9422b7b 100644
--- a/src/pages/QuizPage.js
+++ b/src/pages/QuizPage.js
@@ -3,11 +3,11 @@ import QuizGame from '../components/QuizGame';
 
 
 class QuizPage extends Component {
-  render() {
-    return (
-      <QuizGame />
-    );
-  }
+    render() {
+        return (
+            <QuizGame difficulty={this.props.difficulty}/>
+        );
+    }
 }
 
 export default QuizPage;

From fc452c5e35e5fe8368de56ac9a692aab58f724f5 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Thu, 25 Oct 2018 01:20:27 -0400
Subject: [PATCH 4/5] changed quiz icons

---
 src/components/Main.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Main.js b/src/components/Main.js
index 6473b17..6a5401f 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -119,21 +119,12 @@ class ResponsiveDrawer extends React.Component {
                     <Collapse in={this.state.open} timeout="auto" unmountOnExit>
                         <List component="div" disablePadding>
                             <ListItem button className={classes.nested} onClick={() => this.nav('Easy-Quiz')}>
-                                <ListItemIcon>
-                                    <MapIcon />
-                                </ListItemIcon>
                                 <ListItemText inset primary="Easy" />
                             </ListItem>
                             <ListItem button className={classes.nested} onClick={() => this.nav('Medium-Quiz')}>
-                                <ListItemIcon>
-                                    <MapIcon />
-                                </ListItemIcon>
                                 <ListItemText inset primary="Medium" />
                             </ListItem>
                             <ListItem button className={classes.nested} onClick={() => this.nav('Hard-Quiz')}>
-                                <ListItemIcon>
-                                    <MapIcon />
-                                </ListItemIcon>
                                 <ListItemText inset primary="Hard" />
                             </ListItem>
                         </List>

From 147513571f3a67ac13302ac727b77d1b0acc6ebe Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Thu, 25 Oct 2018 11:31:38 -0400
Subject: [PATCH 5/5] fixed mobile styles

---
 src/App.css            | 7 ++++---
 src/components/Main.js | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index 00ab2de..9494272 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,14 +2,15 @@ body {
     margin: 0;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 600px) {
     .sighting-google-map-container > div {
-        width: calc(100% - 241px) !important;
+        width: calc(100% - 240px) !important;
+        height: calc(100% - 64px) !important;
     }
 }
 
 @media (min-width: 960px) {
     .report-google-map-container > div {
-        width: 50% !important;
+        width: calc(100% - 50% - 120px) !important;
     }
 }
\ No newline at end of file
diff --git a/src/components/Main.js b/src/components/Main.js
index 6a5401f..62336af 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -60,7 +60,8 @@ const styles = theme => ({
         width: drawerWidth,
     },
     content: {
-        flexGrow: 1
+        flexGrow: 1,
+        width: '60%'
     },
 });
 
@@ -153,7 +154,6 @@ class ResponsiveDrawer extends React.Component {
                     </Toolbar>
                 </AppBar>
                 <nav className={classes.drawer}>
-                    {/* The implementation can be swap with js to avoid SEO duplication of links. */}
                     <Hidden smUp implementation="css">
                         <Drawer
                             container={this.props.container}