Quiz Maker Application
Budget: $30 – $250 USD
Build a small quiz maker application that creates a 5-question quiz based on a trivia API
STEP #1 - Implement the ability to select a trivia category and difficulty level
• The API used to get the list of categories can be found at: https://opentdb.com/api_category.php
• The 3 difficulty levels are: Easy, medium, hard.
• Note that styling is not that important for this project, and the layout of your application can be different as long as the application works properly. This is an Angular certification, not a CSS or HTML certification.
•The category dropdown should have an HTML attribute ID equal to categorySelect, the difficulty dropdown should have an ID equal to difficultySelect, and the button should have an ID equal to createBtn
STEP #2 - Display a 5-question quiz based on the selected category/difficulty
•Use the Open Trivia Database API to get the data. For instance, this request will give you 5 questions for easy film trivia:
https://opentdb.com/api.php?amount=5&category=11&difficulty=easy&type=multiple
•Answers should be displayed in a random order. Each possible answer should be a clickable button that gets highlighted and remains as such when clicked. When all questions are answered, a submit button should become visible.
STEP #3 - Display the results of the quiz with the right/wrong answers
•Once the user submits their quiz, navigate to a different component (using the Angular router) that highlights the user’s answers in green color when it is a correct answer, or red color when it is the wrong answer. The correct answer is always displayed in green.
•Display the final score at the bottom with the following color scale:
•Red color if 0 or 1 correct answer, Yellow color if 2 or 3 correct answers, Green color if 4 or 5 correct answers
• Add a button at the bottom of the page that redirects to the new quiz creation screen.
STEP #1 - Implement the ability to select a trivia category and difficulty level
• The API used to get the list of categories can be found at: https://opentdb.com/api_category.php
• The 3 difficulty levels are: Easy, medium, hard.
• Note that styling is not that important for this project, and the layout of your application can be different as long as the application works properly. This is an Angular certification, not a CSS or HTML certification.
•The category dropdown should have an HTML attribute ID equal to categorySelect, the difficulty dropdown should have an ID equal to difficultySelect, and the button should have an ID equal to createBtn
STEP #2 - Display a 5-question quiz based on the selected category/difficulty
•Use the Open Trivia Database API to get the data. For instance, this request will give you 5 questions for easy film trivia:
https://opentdb.com/api.php?amount=5&category=11&difficulty=easy&type=multiple
•Answers should be displayed in a random order. Each possible answer should be a clickable button that gets highlighted and remains as such when clicked. When all questions are answered, a submit button should become visible.
STEP #3 - Display the results of the quiz with the right/wrong answers
•Once the user submits their quiz, navigate to a different component (using the Angular router) that highlights the user’s answers in green color when it is a correct answer, or red color when it is the wrong answer. The correct answer is always displayed in green.
•Display the final score at the bottom with the following color scale:
•Red color if 0 or 1 correct answer, Yellow color if 2 or 3 correct answers, Green color if 4 or 5 correct answers
• Add a button at the bottom of the page that redirects to the new quiz creation screen.