Added a draft of the quiz game.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

View File

@ -7,7 +7,7 @@ import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Home from '../pages/Home';
import ViewMap from '../pages/ViewMap';
import Quiz from '../pages/Quiz';
import QuizGame from '../pages/QuizGame';
import SightingList from '../pages/SightingList';
import Report from '../pages/Report';
import Info from '../pages/Info';
@ -49,19 +49,19 @@ class SimpleTabs extends React.Component {
<AppBar position="static">
<Tabs value={value} onChange={this.handleChange} centered>
<Tab label="Home" />
<Tab label="Report a Sighting"/>
<Tab label="Report a Sighting" />
<Tab label="Sightings" />
<Tab label="Trail-Cam Quiz" />
<Tab label="View Map" />
<Tab label="Marten Info" />
</Tabs>
</AppBar>
{value === 0 && <Home/>}
{value === 1 && <Report/>}
{value === 2 && <SightingList/>}
{value === 3 && <Quiz/>}
{value === 4 && <ViewMap/>}
{value === 5 && <Info/>}
{value === 0 && <Home />}
{value === 1 && <Report />}
{value === 2 && <SightingList />}
{value === 3 && <QuizGame />}
{value === 4 && <ViewMap />}
{value === 5 && <Info />}
</div>
);
}

View File

@ -1,5 +1,6 @@
import firebase from 'firebase/app';
import 'firebase/database';
import 'firebase/storage';
const config = {
apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo",

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;