Merge pull request #35 from alDuncanson/feature/quiz-game-improvement

Added reset button to quiz and made text Material UI-esque.

src/components/QuizGame.js

@@ -3,21 +3,9 @@ import Grid from '@material-ui/core/Grid';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 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--) {
-        j = Math.floor(Math.random() * (i + 1));
-        x = array[i];
-        array[i] = array[j];
-        array[j] = x;
-    }
-    return array;
-}
+import { Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 // Style for the tabs.
 const styles = theme => ({
@@ -25,13 +13,45 @@ const styles = theme => ({
         flexGrow: 1,
         backgroundColor: theme.palette.background.paper,
     },
+    button: {
+        margin: theme.spacing.unit,
+    },
+    rightIcon: {
+        marginLeft: theme.spacing.unit,
+    },
 });
 
 class QuizGame extends React.Component {
 
+    /**
+     * Shuffles a given array.
+     * @param {*} array The array passed in.
+     */
+    shuffleArray = array => {
+        let shuffled = array;
+
+        var j, x, i;
+
+        for (i = shuffled.length - 1; i > 0; i--) {
+            j = Math.floor(Math.random() * (i + 1));
+            x = shuffled[i];
+            shuffled[i] = shuffled[j];
+            shuffled[j] = x;
+        }
+
+        return shuffled;
+    }
+
+    reset = () => {
+        this.setState({
+            difficulty: this.pickDifficulty(this.props.difficulty),
+            key: Math.random()
+        });
+    }
+
     easy = {
         "quizTitle": "Trail Cam Quiz: Easy",
-        "questions": shuffleArray([
+        "questions": [
             {
                 "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
@@ -87,12 +107,12 @@ class QuizGame extends React.Component {
                 ],
                 "correctAnswer": "3"
             },
-        ])
+        ]
     }
 
     medium = {
         "quizTitle": "Trail Cam Quiz: Medium",
-        "questions": shuffleArray([
+        "questions": [
             {
                 "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
@@ -148,12 +168,12 @@ class QuizGame extends React.Component {
                 ],
                 "correctAnswer": "3"
             },
-        ])
+        ]
     }
 
     hard = {
         "quizTitle": "Trail Cam Quiz: Hard",
-        "questions": shuffleArray([
+        "questions": [
             {
                 "question": <Fragment>What animal is this?<br /><br /><img src="/quizimages/question1.jpg" alt=""></img></Fragment>,
                 "questionType": "text",
@@ -209,20 +229,29 @@ class QuizGame extends React.Component {
                 ],
                 "correctAnswer": "3"
             },
-        ])
+        ]
     }
 
+    /**
+     * This function returns the
+     * quiz data based on the difficulty
+     * level passed into it.
+     * @param {*} difficulty The difficulty setting passed in.
+     */
     pickDifficulty = difficulty => {
         let level
 
         switch (difficulty) {
             case 'Easy':
+                this.easy.questions = this.shuffleArray(this.easy.questions)
                 level = this.easy
                 break
             case 'Medium':
+                this.medium.questions = this.shuffleArray(this.medium.questions)
                 level = this.medium
                 break
             case 'Hard':
+                this.hard.questions = this.shuffleArray(this.hard.questions)
                 level = this.hard
                 break
             default:
@@ -234,8 +263,8 @@ class QuizGame extends React.Component {
 
     // The state of the component.
     state = {
-        //difficulty: pickDifficulty(this.props.difficulty)
-        difficulty: this.pickDifficulty(this.props.difficulty)
+        difficulty: this.pickDifficulty(this.props.difficulty),
+        key: Math.random()
     }
 
     // Renders the quiz component.
@@ -245,9 +274,17 @@ class QuizGame extends React.Component {
         return (
             // Tabs
             <div className={classes.root}>
+                <Typography variant="headline" align="center">
                     <Grid container justify="center">
-                    <Quiz quiz={this.state.difficulty} />
+                        <Quiz quiz={this.state.difficulty} key={this.state.key} />
                     </Grid>
+                </Typography>
+                <Typography align="center">
+                    <Button variant="contained" color="default" className={classes.button} onClick={this.reset}>
+                        Reset
+                        <RefreshIcon className={classes.rightIcon} />
+                    </Button>
+                </Typography>
             </div>
         );
     }