diff --git a/public/quizimages/question1.jpg b/public/quizimages/question1.jpg new file mode 100644 index 0000000..4075061 Binary files /dev/null and b/public/quizimages/question1.jpg differ diff --git a/public/quizimages/question2.jpg b/public/quizimages/question2.jpg new file mode 100644 index 0000000..3872d84 Binary files /dev/null and b/public/quizimages/question2.jpg differ diff --git a/public/quizimages/question3.jpg b/public/quizimages/question3.jpg new file mode 100644 index 0000000..44c3552 Binary files /dev/null and b/public/quizimages/question3.jpg differ diff --git a/public/quizimages/question4.jpg b/public/quizimages/question4.jpg new file mode 100644 index 0000000..f7d900d Binary files /dev/null and b/public/quizimages/question4.jpg differ diff --git a/public/quizimages/question5.jpg b/public/quizimages/question5.jpg new file mode 100644 index 0000000..11f4301 Binary files /dev/null and b/public/quizimages/question5.jpg differ diff --git a/src/components/Main.js b/src/components/Main.js index 2259d17..f183ec8 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -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'; @@ -44,26 +44,26 @@ class SimpleTabs extends React.Component { const { classes } = this.props; const { value } = this.state; - return ( -
- - - - - - - - - - - {value === 0 && } - {value === 1 && } - {value === 2 && } - {value === 3 && } - {value === 4 && } - {value === 5 && } -
- ); + return ( +
+ + + + + + + + + + + {value === 0 && } + {value === 1 && } + {value === 2 && } + {value === 3 && } + {value === 4 && } + {value === 5 && } +
+ ); } } diff --git a/src/firebase.js b/src/firebase.js index 8d01e36..6e6b6b2 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -1,5 +1,6 @@ import firebase from 'firebase/app'; import 'firebase/database'; +import 'firebase/storage'; const config = { apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo", diff --git a/src/pages/Quiz.js b/src/pages/Quiz.js deleted file mode 100644 index 28b9f15..0000000 --- a/src/pages/Quiz.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Component } from 'react'; -import Typography from '@material-ui/core/Typography'; - -class Quiz extends Component { - render() { - return ( - - Quiz - - ); - } -} - -export default Quiz; diff --git a/src/pages/QuizGame.js b/src/pages/QuizGame.js new file mode 100644 index 0000000..5235c74 --- /dev/null +++ b/src/pages/QuizGame.js @@ -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": What animal is this?
, + "questionType": "text", + "answers": [ + "American marten", + "American mink", + "Black-footed ferret" + ], + "correctAnswer": "1" + }, + { + "question": What animal do these tracks belong to?
, + "questionType": "text", + "answers": [ + "American mink", + "North American raccoon", + "American marten" + ], + "correctAnswer": "3" + }, + { + "question": What animal is this?
, + "questionType": "text", + "answers": [ + "American marten", + "American mink", + "Black-footed ferret" + ], + "correctAnswer": "2" + }, + { + "question": What animal is this?
, + "questionType": "text", + "answers": [ + "American marten", + "American mink", + "Black-footed ferret" + ], + "correctAnswer": "2" + }, + { + "question": What animal do these tracks belong to?
, + "questionType": "text", + "answers": [ + "American marten", + "American mink", + "Black-footed ferret" + ], + "correctAnswer": "2" + }, + ] + }; + + render() { + return ( + + + + + + + + ); + } +} + +export default QuizGame;