Segregated quiz into component.
This commit is contained in:
wildscotsmen
parent
eecae7bb29
commit
deb5cc8a01
|
|
@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
|
||||||
import Typography from '@material-ui/core/Typography';
|
import Typography from '@material-ui/core/Typography';
|
||||||
import Home from '../pages/Home';
|
import Home from '../pages/Home';
|
||||||
import ViewMap from '../pages/ViewMap';
|
import ViewMap from '../pages/ViewMap';
|
||||||
import QuizGame from '../pages/QuizGame';
|
import QuizPage from '../pages/QuizPage';
|
||||||
import SightingList from '../pages/SightingList';
|
import SightingList from '../pages/SightingList';
|
||||||
import Report from '../pages/Report';
|
import Report from '../pages/Report';
|
||||||
import Info from '../pages/Info';
|
import Info from '../pages/Info';
|
||||||
|
|
@ -59,7 +59,7 @@ class SimpleTabs extends React.Component {
|
||||||
{value === 0 && <Home />}
|
{value === 0 && <Home />}
|
||||||
{value === 1 && <Report />}
|
{value === 1 && <Report />}
|
||||||
{value === 2 && <SightingList />}
|
{value === 2 && <SightingList />}
|
||||||
{value === 3 && <QuizGame />}
|
{value === 3 && <QuizPage />}
|
||||||
{value === 4 && <ViewMap />}
|
{value === 4 && <ViewMap />}
|
||||||
{value === 5 && <Info />}
|
{value === 5 && <Info />}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
||||||
Loading…
Reference in New Issue