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

Segregated quiz into component.

Browse Source
This commit is contained in:
wildscotsmen 2018-10-18 13:30:08 -04:00
parent eecae7bb29
commit deb5cc8a01
4 changed files with 91 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Main.js
View File

@ -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>

73
src/components/QuizGame.js Normal file
View File

@ -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;

77
src/pages/QuizGame.js
View File

@ -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;

16
src/pages/QuizPage.js Normal file
View File

@ -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;