In this project, you'll create the front-end of a full-stack trivia application. The back-end will shared across DevMountain so don't put anything inappropriate or offensive on there.
Live example: Click Me!
You can find the API documentation for all the endpoints here : https://practiceapi.devmountain.com/
Trivia questions should be pulled from the API and then shown on the screen.
Data will be sent in pages from the API. Remember: a page of data is a small slice of all the questions on the server. IE - you will only get 10 at a time.
A user should be able to click next page to get the next 10 questions, and previous page to get to the previous 10 questions.
Questions should be marked for correct and incorrect answers.
When the user selects an answer highlight the question card:
- Red for incorrect
- Green for correct
Users should be able to filter questions.
- A user should be able to filter by:
- all questions
- easy, medium, and hard diffuculty questions
- Questions about a specific animal
Make the Search by Animal
button trigger whether the animal name input box is visible or not.
Make the input box filter all questions on the screen, and only the questions on the screen.
Functionality for editing/deleting questions.
- Add a gear to every question. The icon is found in the
styes/assets
folder.- When the gear is clicked for a question, it needs to open the edit modal, and populate the modal with that questions data.
- The modal will allow users to edit and delete questions.
- in main.css search for
ALERTDELETEME
and remove the line it is on. This will make the modal appear.- The edit modal is already in the index.html file. You will need to use ng-show or ng-hide to make it appear when the user clicks the gear icon.
- The edit modal should only show the
edit & delete question buttons
at the bottom, and should hide theadd question buttons
. These two button groups are labeled in the index.html file.
- Editing a question will PUT that question to the server.
- Deleting a question will DELETE that question from the server.
Adding new questions to the application.
- Add question will use the same modal as the edit.
- The
add question buttons
need to be visible, and theedit & delete question buttons
need to be hidden. - Add a question will post it to the server.
Application styles.
- We have put styles for everything in the styles folder, but you can choose make your own or use those. Just make it look the same.
- There some effects when hovering over a question, and over the gear. Try to get those as well.
Remember the user's answers on local storage.
The data structure of a trivia question looks like:
{
_id: {type: String}, (The API will add this for you, do not send it to the server)
question: {type: String},
animal: {type: String},
difficulty: {type: Number},
options: {
1: {type: String},
2: {type: String},
3: {type: String},
4: {type: String}
},
correct_answer: {type: Number},
date_entered: {type: Date, default:new Date()}
}