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
Download Patch File Download Diff File Expand all files Collapse all files

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;