diff --git a/public/quizimages/question1.jpg b/public/quizimages/question1.jpg
index 4075061..8ce9a50 100644
Binary files a/public/quizimages/question1.jpg and b/public/quizimages/question1.jpg differ
diff --git a/public/quizimages/question2.jpg b/public/quizimages/question2.jpg
index 3872d84..8f6d931 100644
Binary files a/public/quizimages/question2.jpg and b/public/quizimages/question2.jpg differ
diff --git a/public/quizimages/question3.jpg b/public/quizimages/question3.jpg
index 44c3552..c518c5e 100644
Binary files a/public/quizimages/question3.jpg and b/public/quizimages/question3.jpg differ
diff --git a/public/quizimages/question4.jpg b/public/quizimages/question4.jpg
index f7d900d..0e52c59 100644
Binary files a/public/quizimages/question4.jpg and b/public/quizimages/question4.jpg differ
diff --git a/public/quizimages/question5.jpg b/public/quizimages/question5.jpg
index 11f4301..c49d92f 100644
Binary files a/public/quizimages/question5.jpg and b/public/quizimages/question5.jpg differ
diff --git a/src/components/QuizGame.js b/src/components/QuizGame.js
index e0aae96..a8a1fa2 100644
--- a/src/components/QuizGame.js
+++ b/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 (
+
+ {props.children}
+
+ );
+}
+
+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 = {
- "quizTitle": "Trail Cam Quiz",
+ // 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 = {
+ "quizTitle": "Trail Cam Quiz: Easy",
"questions": shuffleArray([
{
- "question": What animal is this?
,
+ "question": What animal is this?
,
"questionType": "text",
"answers": [
- "American marten",
- "American mink",
- "Black-footed ferret"
+ "Black bear",
+ "Common wombat",
+ "Raccoon",
+ "White-tailed deer"
],
"correctAnswer": "1"
},
{
- "question": What animal do these tracks belong to?
,
+ "question": What animal is this?
,
"questionType": "text",
"answers": [
- "American mink",
- "North American raccoon",
- "American marten"
+ "American beaver",
+ "Muskrat",
+ "Porcupine",
+ "Woodchuck"
],
"correctAnswer": "3"
},
{
- "question": What animal is this?
,
+ "question": What animal is this?
,
"questionType": "text",
"answers": [
- "American marten",
- "American mink",
- "Black-footed ferret"
+ "American badger",
+ "Raccoon",
+ "Striped skunk",
+ "Virginia opossum"
],
"correctAnswer": "2"
},
{
- "question": What animal is this?
,
+ "question": What animal is this?
,
"questionType": "text",
"answers": [
- "American marten",
- "American mink",
- "Black-footed ferret"
+ "Eastern fox squirrel",
+ "Eastern gray squirrel",
+ "Red squirrel",
+ "Southern flying squirrel"
],
- "correctAnswer": "2"
+ "correctAnswer": "3"
},
{
- "question": What animal do these tracks belong to?
,
+ "question": What animal is this?
,
"questionType": "text",
"answers": [
- "American marten",
- "American mink",
- "Black-footed ferret"
+ "American Crow",
+ "Black Vulture",
+ "Turkey Vulture",
+ "Northern Raven"
],
- "correctAnswer": "2"
+ "correctAnswer": "3"
},
])
};
+ // Renders the quiz component.
render() {
+ const { classes } = this.props;
+ const { value } = this.state;
+
return (
-
-
-
-
-
- )
+ // Tabs
+
+
+
+
+
+
+
+
+ {value === 0 &&
+
+
+
+
+
+ }
+ {value === 1 &&
Medium Quiz}
+ {value === 2 &&
Hard Quiz}
+
+ );
}
}
-export default QuizGame;
\ No newline at end of file
+QuizGame.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(QuizGame);
\ No newline at end of file
diff --git a/src/pages/QuizPage.js b/src/pages/QuizPage.js
index 97f7904..4c36a98 100644
--- a/src/pages/QuizPage.js
+++ b/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 (
-
-
-
+
);
}
}