Trivia!

This exercise is in the process of being updated because the trivia api that it used to draw from is extinct. The new api is https://the-trivia-api.com/v2/questions/ but it works a bit differently from the previous one. I am in the process of providing a bread crumb trail for how to tackle this API but you are welcome to take it on yourself if you dare! If you are daring, take a look at the API, partially shown in the screen capture below. As you can see it contains a series of questions with one correct answer and three incorrect answers as well as the category of the question. Your job is to figure out how to create a multiple choice question and answer game from this information. If you get stuck, here is a fairly complex version of the exercise that I put together that you are welcome to use as a guide if you get sufficiently frustrated. This link takes you to less sophisticated versiosn.

If you inspect the feed itself you should also see that it consists of one big array with a series of objects. Each object contains one question and answer segment.

Everything below this point is out of date. But hey, I'm working on it!

1. Let's start by constructing our basic html document. Name your document randomTrivia.html.  We want a document that will display the category title and the question, and afterward, supply the correct answer. The screenshot below shows the path that I took and you are welcome to copy it verbatim. As you can see, I will be referring to a function named qa that will load a new question, followed by another function name showAnswer.
2. Next step is to create two empty functions, qa and showAnswer, as well as variables that connect to the question, category, and answer div tags as shown below. You will note as well that we create on additional empty string variable named theAnswer. We will talk about that one later. For now, just add it.
3. We will be using Jquery's $.getJSON function, so visit Googles's hosted libraries and paste in the code that they supply to load the latest version (3.3.1) of jquery. (within your head tags)
4. The next step is the use the $.getJSON to load our data. Copy and paste the code below within your qa function.

    $.getJSON('https://jservice.io/api/random', function(data) {
   
   });

5. Now modify your qa function as shown below, to add the value of the data object's question to your #question div tag. Please take note that we first have to reference the one item array with data[0] which leads us to the object that is encased in {} brackets. question is only one level deep within the object so all we have to do to get its value is to link it to data[0] with dot syntax. Try it! Every time your click the New Question button, a new question should indeed appear in the #question div tag.

   

6. Now let's add the category title to our #category div tag. Each randomly generated object (so far) comes with a category title which may serve as a useful hint to your users when they are trying to figure out the answer.
   1. Follow the same strategy that you used to get the value of the question into the #question div, with one caveat: category is just one level deep but, as you can see, category is actually an object that contains title along with other properties. Looks like a double dot situation to me. So give it a shot and add those dots.

      

7. If you were able to follow my bread crumb trail, you should be seeing text in the category field as well as in the question field. But how does your user know that it's a category? Maybe you should add some explanatory text of your own. Hint: innerHTML = "Category: "+ data[0].etc (don't take the etc literally :).
8. Now that our categories and questions appear, we need answers. Running the $.getJSON function again in yet another function would be a terrible idea because it would provide a random answer to a random question!  What we need to do is capture the value of answer and then use it later in another function to provide feedback to our user. For that job we will use the variable that we created earlier named theAnswer . We created that variable outside of our qa function so that it would be what is referred to as a global variable. Variables that are created within a function are referred to as local variables, and have meaning only within the function. Global variables are always available. So do it by adding this line to your qa function:  theAnswer = data[0].answer;
9. Now create another function named showAnswer that sets the innerHTML of the #answer div to the value of the theAnswer variable that you created in the previous step.
10. Does everything work? If so, good, but I bet it looks awful. Your final task is to use  a bit of CSS to tidy everything up and make it look better.