Description

Create a Trivia Game using Vue.js
The Trivia Game
Build an online trivia game as a Single Page Application using the Vue.js framework (version 3.x).
You have freedom to be as creative as you wish, as long as it meets the minimum requirements described in Appendix
A.
1) Set up the development environment
Make sure you have the following tools available:
• Figma
• NPM/Node.js (LTS – Long Term Support version)
• Vite CLI or Vue CLI
• Visual Studio Code Text Editor / IntelliJ
• Browser Developer Tools for testing and debugging o Vue Dev Tools
• Git
• Rest API: https://github.com/dewald-els/noroff-assignment-api
• Heroku
2) Recommended: Design a component tree
Use Figma to create a component tree of the application. The component tree should show the pages and feature components you plan to create in your application. This will count towards the overall grade for the application. It should be done BEFORE a single line of code is written.

Example component tree.
(Source: https://blog.logrocket.com/modern-guide-react-state-patterns/)

3) Write HTML & CSS as needed
a) Colours: If you have trouble choosing colours, use a free resource like https://coolors.co to browse and experiment with colour combinations.
b) Animations: If you want to use animations to bring your design to life, use https://animate.style/.
c) Free graphics for your web applications: https://www.justinmind.com/blog/35-places-to-get-free-vectorimages-for-your-designs/

4) Use the Vue.js framework to build the following screens into your trivia game (See Appendix A for detailed specs):
a) The start screen
b) The question screen
c) The result screen
5) Submit
a) Export the component tree to PDF, upload the file to your Git repository and submit a link to your file.
b) Publish your Single Page Application on Heroku and submit a link to your game and the source code on your Git repository. Use https://gitlab.com/javascript-project-examples/heroku-deployment-guides to learn how to deploy Vue apps to Heroku.

Appendix A: Requirements for the Trivia Game

1) API Configuration (OpenDB and Trivia API)
a) Use the website https://opentdb.com/api_config.php to generate an API link for your questions.
b) Use the documentation to figure out how to set the difficulty, number of questions and category.
c) Setup and deploy the “Trivia API” provided in setup environment to store the username and high score for that user
2) Start Screen
a) Your app should start on a “Start Screen.”
b) Capture a username using an input
c) The user must be able to select the difficulty, number of questions and category.
d) The user must click a button or anywhere on the screen to start playing.
e) The user should be saved to the Trivia API database
User Constraint:
1. Remember to check if the username already exists in the API’s database 2. Consult the provided docs for guidance (Section 1 of the document)

3) Question Screen
a) Once the game starts, the app must fetch the questions from the API setup in the previous step. The app must ONLY display ONE question at a time.
b) If it is multiple choice, have 4 buttons with each answer as the text. If it is a True/False question, only display 2 buttons, one for True and one for False.
c) Once a question is answered the app must move on to the next question.
d) When all the questions have been answered the user must be presented with the result screen.
4) Result Screen
a) The result screen must show all the questions along with the correct and user’s answers. b) Display the total score.
c) Display a button to take the user back to the start screen or replay with different questions, but at the current difficulty level and category.
d) Save the score to the API, if it is higher than the existing score for the current user
Scoring Constraint:
3. Each correctly answered question should count 10 points.
4. Only update the score on the API if it is higher than the previous score