Updated quiz component to include questions by sponsor and also have tabs for different difficulty settings. Will implement the harder quizzes next sprint, likely.

src/components/QuizGame.js

@@ -1,7 +1,17 @@
 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';
 
+/**
+ * Shuffles a given array.
+ * @param {*} array The array passed in.
+ */
 function shuffleArray(array) {
     var j, x, i;
     for (i = array.length - 1; i > 0; i--) {
@@ -13,72 +23,135 @@ 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,
+    },
+});
+
 class QuizGame extends React.Component {
-    quiz = {
+    // The state of the component.
-        "quizTitle": "Trail Cam Quiz",
+    state = {
+        value: 0,
+    };
+
+    // Handles tab changes.
+    handleChange = (event, value) => {
+        this.setState({ value });
+    };
+
+    // Object that contains the easy quiz material.
+    easyQuiz = {
+        "quizTitle": "Trail Cam Quiz: Easy",
         "questions": shuffleArray([
             {
-                "question": <Fragment>What animal is this?<br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
                 "answers": [
-                    "American marten",
+                    "Black bear",
-                    "American mink",
+                    "Common wombat",
-                    "Black-footed ferret"
+                    "Raccoon",
+                    "White-tailed deer"
                 ],
                 "correctAnswer": "1"
             },
             {
-                "question": <Fragment>What animal do these tracks belong to?<br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question2.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
                 "answers": [
-                    "American mink",
+                    "American beaver",
-                    "North American raccoon",
+                    "Muskrat",
-                    "American marten"
+                    "Porcupine",
+                    "Woodchuck"
                 ],
                 "correctAnswer": "3"
             },
             {
-                "question": <Fragment>What animal is this?<br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question3.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
                 "answers": [
-                    "American marten",
+                    "American badger",
-                    "American mink",
+                    "Raccoon",
-                    "Black-footed ferret"
+                    "Striped skunk",
+                    "Virginia opossum"
                 ],
                 "correctAnswer": "2"
             },
             {
-                "question": <Fragment>What animal is this?<br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question4.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
                 "answers": [
-                    "American marten",
+                    "Eastern fox squirrel",
-                    "American mink",
+                    "Eastern gray squirrel",
-                    "Black-footed ferret"
+                    "Red squirrel",
+                    "Southern flying squirrel"
                 ],
-                "correctAnswer": "2"
+                "correctAnswer": "3"
             },
             {
-                "question": <Fragment>What animal do these tracks belong to?<br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
+                "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question5.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
                 "answers": [
-                    "American marten",
+                    "American Crow",
-                    "American mink",
+                    "Black Vulture",
-                    "Black-footed ferret"
+                    "Turkey Vulture",
+                    "Northern Raven"
                 ],
-                "correctAnswer": "2"
+                "correctAnswer": "3"
             },
         ])
     };
 
+    // Renders the quiz component.
     render() {
+        const { classes } = this.props;
+        const { value } = this.state;
+
         return (
-            <Fragment>
+            // Tabs
-                <Grid container justify="center">
+            <div className={classes.root}>
-                    <Quiz quiz={this.quiz} />
+                <AppBar position="static">
-                </Grid>
+                    <Tabs
-            </Fragment>
+                        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>}
+            </div>
+        );
     }
 }
 
-export default QuizGame;
+QuizGame.propTypes = {
+    classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(QuizGame);

src/pages/QuizPage.js

@@ -1,14 +1,11 @@
 import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
 import QuizGame from '../components/QuizGame';
 
 
 class QuizPage extends Component {
   render() {
     return (
-      <Typography variant='display1' align='center' gutterBottom>
+      <QuizGame />
-          <QuizGame />
-      </Typography>
     );
   }
 }