Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
MichaelOppong authored Jan 2, 2020
1 parent e8ca75e commit d9f215b
Showing 1 changed file with 20 additions and 206 deletions.
226 changes: 20 additions & 206 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Trivia App!
# Trivia App Starter Code!

## Project Description

For this project, we will be building a trivia app. This project will use firebase to fetch questions and react to diplay questions and answers.
In this unit, coders will work in groups to build a project using HTML, CSS, REACT, and Firebase. Their task is to build out the front-end for a Kahoot style question game that displays a question and the possible answers, allows a user to choose answer and determine whether they are right or wrong. This project is intended to highlight some important aspects of goal setting and project management. The project will culminate in a final presentation.

====
### Day 1: Setup and Intro to React
### Day 1: Project Setup and Introduction to Visual Studio Ocde
Goal: Set up your project, view the live running app, and build a simple component.

- [ ] Use your [Outline and Planning Doc](https://docs.google.com/document/d/1oiyYdTcO2RxbE-2yq5KmeZpthExzHCNrgrVGtT47yOg/edit) to plan your project.
Expand All @@ -17,216 +17,29 @@ Goal: Set up your project, view the live running app, and build a simple compon
- [ ] Use any remaining time to begin working on your project.

====
### Day 2: Creating an Object using ES6 Syntax
### Day 2: Use classes to represent data models
Goal: Set up your your components
- [ ] Create the question class to store the data from the sample objects
- [ ] Style components in any way you choose.

- [ ] In your App.jsx file import the Question Component
- [ ] Inside the render function call your Question component
- [ ] Using the Question.jsx as a template create three more components called AnswerButton.jsx, QuestionText.jsx and NextButton.jsx
- [ ] In your Question.jsx file import your QuestionText, AnswerButton and NextButton. Call each of the components in the render function. (You should have 4 AnswerButtons)
- [ ] The QuestionText should render a div with the text of any question of your choosing
- [ ] The AnswerButton should should render a div with the text of any question of your choosing
- [ ] The NextButton should should render a div with the text "Next"
- [ ] Style these in any way you choose.

### Day 3: Use Multiple Components to Create Complex Layout
- [ ] Now that we have this, we can pass down the questions to other components using props. In your App.jsx let add a prop to the Question component and pass it the currentQuestion from state.
```
< Question
questionText={"What is the answer to the Ultimate Question of Life"}
/>
```

- [ ] Now we can access this information in the Question component using props. Then we can pass down currentQuestion's question to the QuestionText component. Open Question.jsx and add the following.
```
< QuestionText
questionText={this.props.questionText}
/>
```
- [ ] Finally in the QuestionText component lets display that question.

```
<div className="questionText">
{this.props.questionText}
</div>
```
- [ ] Now lets do the same process to pass down your choices to each AnswerButton and diplay the answer choices.

### Day 3: Use multiple components to create a complex layout
- [ ] Use the sample data to display a question and its answer options by creating components and using props
- [ ] Make the answers clickable
- [ ] Use your remaining time to style your project

### Day 4: Persist and Read Complex Data from Firebase
Now that we have props that we can pass down we need a way to store/ keep track of props if we change them. Thats where we can use state.

- [ ] In your App.jsx file lets add a constructor method directly inside your App component

```
class App extends Component {
constructor(props){
super(props);
this.state= {
}
}
```

- [ ] Since we want to keep track of the question each time the page loads lets add a property to the state to keep track of the state. We want to keep track of all the questions and the current displayed function. Complete the rest of the state to match the structure of the question.

```
this.state= {
questions: {},
currentQuestion: {
question_text: "Question",
choices: [],
correct_choice_index: null,
}
}
```

- [ ] Now we can access the question_text from state and pass it down to each subsequent component. Notice your question text change.

```
<Question
questionText={this.state.currentQuestion.question_text}
/>
```

- [ ] Follow the same pattern to pass down state to each of your answer choices.

- [ ] Last we want to grab a new question when the page loads we need to write a firebase function in the the constuctor.

```
constructor(props) {
super(props);
firebaseDatabase.ref('/questions').on('value', (snapshot)=> {
console.log(snapshot.val())
});
```
- [ ] use this.setState to change the state.

```
firebaseDatabase.ref('/questions').on('value', (snapshot)=> {
let questions = snapshot.val();
let randomQuestion = getRandomQuestion(questions)
this.setState({
questions: questions,
currentQuestion: randomQuestion,
})
});
```
- [ ] Reload the page to see your content change.


### Day 5: Pass Down Properties Through Components
- [ ] Create a new function that when you click on an AnswerButton component changes the questionText to display the correct answer.
```
_onAnswerButtonClicked(){
this.setState({
shouldDisplayAnswer: true,
})
}
```

- [ ] Now we need to pass this function down through props to the button component. We do this using and arrow function displayed below.
```
<Question
...
answerButtonClicked={()=>this._onAnswerButtonClicked()}
/>
```

- [ ] In Question.jsx keep passing it down through props
```
<AnswerButton
answerButtonClicked={this.props.answerButtonClicked}
/>
```
- [ ] In AnswerButton.jsx we can add it to the onClick function
```
return (
<div className="answer-button"
onClick={this.props.onAnswerButtonClicked()}
>
{answerText}
</div>
);
```
- [ ] Lastly we can use the property shouldShowCorrectAnswer to tell our QuestionText what to display.
```
<Question
...
shouldShowCorrectAnswer={shouldShowCorrectAnswer}
correctAnswer={question.choices[question.correct_choice_index]}
/>
```

- [ ] Lastly we can use the property shouldDisplayAnswer to tell our QuestionText what to display.
```
let display;
if(shouldShowCorrectAnswer){
display = "The correct answer is " + correctAnswer;
} else {
display = questionText;
}
return (
<div className="questionStem">
{display}
</div>
);
```
### Day 4: Read complex data from firebase
- [ ] Replace sample data with firebase data to display the questions in your components

### Day 6: Create Components to React to a User's Input and Update Application State
### Day 5: Use unidirectional data flow to pass down state
- [ ] Set the initial state of your app component
- [ ] Use props to pass state to your child components
- [ ] Update App state from your child components to show which answer is correct

- [ ] In your App.jsx create a method function call _onNextButtonClicked(). When this function is called it will set the current question to a new question.
```
_onNextButtonClicked(){
let randomQuestion = getRandomQuestion(this.state.questions)
this.setState({
currentQuestion: randomQuestion,
shouldShowCorrectAnswer: false,
})
}
```
- [ ] Now we need to pass this function down through props to the button component. We do this using and arrow function displayed below.
```
<Question
...
nextButtonClicked={()=>this.onNextButtonClicked()}
/>
```
- [ ] In Question.jsx keep passing it down through props
```
<NextButton
nextButtonClicked={this.props.nextButtonClicked}
/>
```
- [ ] In AnswerButton.jsx we can add it to the onClick function
```
return (
<div className="next-button"
onClick={this.props.nextButtonClicked}
>
Next
</div>
);
```
### Day 6: Project work day
- [ ] Finish your project

### Day 7: Work day and making your site live
- [ ] Make your site live on gh-pages
- [ ] npm install gh-pages --save-dev
- [ ] open your package.json file and add both of these
```
"homepage": "http://gitname.github.io/react-gh-pages"
```
```
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
```
- [ ] npm run deploy
### Day 7: Project work day
- [ ] Finish your project

### Day 8: Presentation Preperation Day
- [ ] Using the [Presentaion Guidelines](https://docs.google.com/document/d/1ot54zTTJo7m7dMaN-yTZH6Y-kymEyNSJ4jLzNwLuskg/edit) and [Pitch Rubric](https://docs.google.com/document/d/1an_aanEdOoYftxjqcGB-0IxkW2BVGY5sH5SlJv9weBU/edit)
Expand All @@ -235,4 +48,5 @@ class App extends Component {
- [ ] Make a timer that resets the game when the timer runs out
- [ ] Make a counter that keeps track of how many times you've guessed the correct answer
- [ ] Change the color of the answer buttons when the user guesses. For example turn the button with the correct answer to green.
- [ ] Make it a two player game
- [ ] Anything else you want!

0 comments on commit d9f215b

Please sign in to comment.