For the test we're going to ask you to implement a fun little app that gets data from a public API and does dom manipulation to add/update data onto the page. The basics of a single page application!

We are going to use an open API for random trivia questions to function as a backend that delivers data to you. The app will give you 3 random categories that the user can press. Once pressed the app will retrieve 10 questions in that category and show them. You can see a live demo version here:

You can read documentation of the API here: https://opentdb.com/, but we will provide the endpoints for you. The end points you will need are:

• To get the list of categories: https://opentdb.com/api_category.php. This will give you a JSON object with a list of the categories, you will need the id from this.
• For a category: https://opentdb.com/api.php?amount=10&category=<categoryId>. This will give you a JSON object with a list of questions (will need to do some data manipulations), you will need the questions property and in that array the question and correct_answer properties.

Read the instructions carefully and tackle them one by one, in the end you should have a project with that works as follows: https://robvk.github.io/js3-test-quiz/

After finishing the project, look at the ANSWERME.md file to answer some questions about the code you just wrote in the project.

You can adjust the project files to your wishes. BUT the index.html file should be left alone as much as possible. You are allowed (and encouraged) to add/edit script or css files if you want. Part of the project is to add html using javascript, so don't add any html tags other than importing other files.

Tips:

• You get points for certain functionality. For example: If you are having trouble with getting the categories, then hardcode some category id's initially and get back to that later.
• There are some helper functions in the initial script, but you do not need to use them to solve it.
• Do NOT forget to spend the last half an hour to clean up your code!
• Do NOT forget to answer the questions. Write down everything you are thinking for the questions as well.

What to do:

1. Thoroughly read through this file to understand whatand the ANSWERME.md file to get a feel of what needs to happen
2. Think of your solution, what is your approach going to be
3. Start programming (the fun part!)
4. Go over your code and ensure that it is clean (code clarity / modularisation). That means:

• No more console.log test lines
• No commented out code
• Comments for functions/lines of code that can be unclear for other programmers
• Are the variables/functions named nicely
• Check that the code is split logically (no repeated code in multiple functions, functions that are used for the same step close together in a file or in a separate file)

5. Answer the questions in the ANSWERME.md file
6. Create a zip file of your project and send it to @Rob van Kruijsdijk on slack

What you will be graded on:

• That the end project works as expected. Below is what we will be checking [up to 10 points]:
  • Category names show up in the buttons
  • The categories are grabbed from the API
  • The categories are randomly chosen
  • The categories are random, but it is impossible to get the same category twice
  • On clicking a button it generates the right url to get questions from the API
  • The questions show up on the page
  • The answers show up on the page
  • The classes are set correctly
  • The questions do not have weird tokens in them
  • If a button is pressed again, the previous question list is removed (you will notice this is not the case on the demo :))
• That the code is nicely organised and clean (step 5) [up to 4 points]
• The answers to the questions [up to 6 points]

The final grade will then be those points divided by 20 (to get a number between 1 and 10).

1. You are allowed to use Google
2. In case you copy (a line of) code from somewhere else, you must place a reference. Otherwise it is seen as plagiarism.
3. No contact with others during the test.
4. Do not share your test with anybody
5. Hand in your work on time. You have 5 hours in total.