From deb5cc8a01cb6183a110e654402862e2e4a74c07 Mon Sep 17 00:00:00 2001
From: wildscotsmen <thewildscotsmen@gmail.com>
Date: Thu, 18 Oct 2018 13:30:08 -0400
Subject: [PATCH] Segregated quiz into component.

---
 src/components/Main.js     |  4 +-
 src/components/QuizGame.js | 73 ++++++++++++++++++++++++++++++++++++
 src/pages/QuizGame.js      | 77 --------------------------------------
 src/pages/QuizPage.js      | 16 ++++++++
 4 files changed, 91 insertions(+), 79 deletions(-)
 create mode 100644 src/components/QuizGame.js
 delete mode 100644 src/pages/QuizGame.js
 create mode 100644 src/pages/QuizPage.js

diff --git a/src/components/Main.js b/src/components/Main.js
index f183ec8..5d7921c 100644
--- a/src/components/Main.js
+++ b/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 QuizGame from '../pages/QuizGame';
+import QuizPage from '../pages/QuizPage';
 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 && <QuizGame />}
+                {value === 3 && <QuizPage />}
                 {value === 4 && <ViewMap />}
                 {value === 5 && <Info />}
             </div>
diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js
new file mode 100644
index 0000000..1705708
--- /dev/null
+++ b/src/components/QuizGame.js
@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Quiz from 'react-quiz-component';
+
+class QuizGame extends React.Component {
+    quiz = {
+        "quizTitle": "Trail Cam Quiz",
+        "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 (
+            <Fragment>
+                <Grid container justify="center">
+                    <Quiz quiz={this.quiz} />
+                </Grid>
+            </Fragment>
+        )
+    }
+}
+
+export default QuizGame;
\ No newline at end of file
diff --git a/src/pages/QuizGame.js b/src/pages/QuizGame.js
deleted file mode 100644
index b0f53b0..0000000
--- a/src/pages/QuizGame.js
+++ /dev/null
@@ -1,77 +0,0 @@
-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": "Trail Cam Quiz",
-    "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;
diff --git a/src/pages/QuizPage.js b/src/pages/QuizPage.js
new file mode 100644
index 0000000..ef6cb3f
--- /dev/null
+++ b/src/pages/QuizPage.js
@@ -0,0 +1,16 @@
+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 />
+      </Typography>
+    );
+  }
+}
+
+export default QuizPage;