jservice.io, the api that forms the basis for this lesson offers access to 156,800 Trivia Questions! Not surprisingly, these questions cover a broad range of topics and can be accessed randomly or by categories. If, for example, you visit https://jservice.io/api/random , any one of those 156,800 questions may appear in the form of a json object. When you refresh your browser, yet another one appears. For our first task, we are going to do something useful with those random objects of trivia.
The first step, as always is to examine the api. As the screenshot below shows, this api and url yields an array with just one object. You can tell that it starts with an array because the object is encases with array brackets: [ and ]. The object has a lot of information but most importantly for the trivia Q and A we are about to construct, are the question, answer, and category title properties.
- 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.
- 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.
- 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)
- 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) { });
- 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.
- 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.
- 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.
- 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.
- 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 :).
- 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;
- 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.
- 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.