GVSU/marten-application
GVSU/marten-application
1
0
Fork 0
Code Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
wildscotsmen 2018-10-25 20:32:55 -04:00
parent 16f6dde825
commit 19e24a2747
1 changed files with 70 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/QuizGame.js
View File

@ -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.
@ -243,12 +272,24 @@ class QuizGame extends React.Component {
const { classes } = this.props;
return (
<Fragment>
{
// 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>
</div>
}
<Typography align="center">
<Button variant="contained" color="default" className={classes.button} onClick={this.reset}>
Reset
<RefreshIcon className={classes.rightIcon} />
</Button>
</Typography>
</Fragment>
);
}
}