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 ( - - - + ); } }