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

Added a draft of the quiz game.

Browse Source
This commit is contained in:
wildscotsmen
2018-10-18 12:48:01 -04:00
parent 60e8ff2e2e
commit 3b91b09e09
9 changed files with 99 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Quiz.js
View File

@@ -1,14 +0,0 @@
import React, { Component } from 'react';
import Typography from '@material-ui/core/Typography';
class Quiz extends Component {
render() {
return (
<Typography variant='display1' align='center' gutterBottom>
Quiz
</Typography>
);
}
}
export default Quiz;

77
src/pages/QuizGame.js Normal file
View File

@@ -0,0 +1,77 @@
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": "React Quiz Component Demo",
"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;