Quiz Maker

GOAL: 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 difficulty select, and the button should
have an ID equal to createBtn
Copyright 2023 Interstate 21, LLC - www.angulartraining.com 3
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.
Copyright 2023 Interstate 21, LLC - www.angulartraining.com 4
STEP #3 - Display the results of the quiz with the
right/wrong answers
RESULTS
- 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.