{"id":3784,"date":"2023-07-18T01:28:59","date_gmt":"2023-07-18T01:28:59","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3784"},"modified":"2026-03-16T19:41:53","modified_gmt":"2026-03-16T19:41:53","slug":"exercise-trivia","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-two-javascript\/week-seven\/exercise-trivia\/","title":{"rendered":"Exercise: Trivia!"},"content":{"rendered":"\n

The Trivia API<\/a>, the api that forms the basis for this lesson offers access to lots of Trivia Questions! Not surprisingly, these questions cover a broad range of topics and can be accessed randomly or by categories. <\/p>\n\n\n\n

Check out the questions along with parameters like category, id, correct answer, incorrect answers, difficulty, etc. at https:\/\/the-trivia-api.com\/v2\/questions\/<\/a>. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  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.\"\"<\/li>\n\n\n\n
  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. 
    let question = document.querySelector(\"#question\");\nlet answer = document.querySelector(\"#answer\");\nlet category = document.querySelector(\"#category\");\nlet theAnswer = \"\";\n\nfunction qa() {\n     \n\n}\n\nfunction showAnswer() {\n\n\n}<\/code><\/pre><\/li>\n\n\n\n
  3. We will be using Jquery’s $.getJSON function, so visit Googles’ hosted libraries<\/a> and paste in the code that they supply to load the latest version (3.7.1) of jquery. (within your head tags) <\/li>\n\n\n\n
  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:\/\/the-trivia-api.com\/v2\/questions\/', function(data) { });<\/code><\/pre><\/li>\n\n\n\n
  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. The 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. 
    function qa() {\n     $.getJSON('https:\/\/the-trivia-api.com\/v2\/questions\/', function(data) { \n\n        question.innerHTML = data[0].question.text;\n\n     });\n\n}<\/code><\/pre><\/li>\n\n\n\n
  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. (Follow the same strategy that you used to get the value of the question into the #question div<\/em>) \"\"<\/li>\n\n\n\n
  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<\/strong> (don’t take the etc literally :).<\/li>\n\n\n\n
  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 . <\/strong>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].correctAnswer;<\/strong><\/li>\n\n\n\n
  9. Now create another function named showAnswer<\/strong> that sets the innerHTML<\/strong> of the #answer div<\/strong> to the value of the theAnswer<\/strong> variable that you created in the previous step.<\/li>\n<\/ol>\n\n\n\n
    Hint<\/summary>\n
    function showAnswer() {\n\n    answer.innerHTML = \"Answer: \"+ theAnswer;\n\n}<\/code><\/pre>\n<\/details>\n\n\n\n
    How do I get the “_” underscores to disappear from my categories?<\/p>\n\n\n\n
    category.innerHTML = \"Category: \" + data[0].category.replaceAll(\"_\", \" \");<\/code><\/pre>\n\n\n\n
    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.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The Trivia API, the api that forms the basis for this lesson offers access to lots of Trivia Questions! Not surprisingly, these questions cover a broad range of topics and can be accessed randomly or by categories. Check out the questions along with parameters like category, id, correct answer, incorrect answers, difficulty, etc. at https:\/\/the-trivia-api.com\/v2\/questions\/. … Continue reading Exercise: Trivia!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3696,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3784","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3784"}],"version-history":[{"count":26,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3784\/revisions"}],"predecessor-version":[{"id":4804,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3784\/revisions\/4804"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3696"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}