{"id":3071,"date":"2020-09-29T15:46:20","date_gmt":"2020-09-29T15:46:20","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=3071"},"modified":"2026-04-23T21:20:48","modified_gmt":"2026-04-23T21:20:48","slug":"random-trivia-api","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/random-trivia-api\/","title":{"rendered":"Random Trivia API"},"content":{"rendered":"

In this assignment, you’ll be working with a Random Trivia API: https:\/\/the-trivia-api.com\/v2\/questions\/<\/a><\/p>

Begin by pasting it into your browser and taking a look at the array of JSON objects that appear. Each object includes a question and a correct answer, along with additional information, including an array of incorrect answers.<\/p>

Refresh your browser and you should see a new set of ‘trivia’ objects.<\/p>

Your Goal<\/h2>

Draw upon everything you learned in the previous Lists with SwiftUI<\/a><\/strong> and Working With APIs<\/a><\/strong> exercises to create:<\/p>

  1. a List that displays the questions, that also includes<\/li>
  2. a NavigationView and NavigationLinks to the questions so that the correct answer appears in a new view when a question is clicked.<\/li><\/ol>

    Don’t panic!<\/strong> The previous two lessons contain everything that you need to accomplish this assignment, plus there is a helpful trail of breadcrumbs below to help you get through this.<\/p>

    To begin, <\/h2>

    copy the two structs shown below and paste them at the bottom of your contentView file. Make sure they are not inside of another struct! <\/p>

    \/\/ MARK: - QuizItem\nstruct QuizItem: Codable, Identifiable {\n    let category: String\n    let id: String\n    let correctAnswer: String\n    let incorrectAnswers: [String]\n    let question: Question\n    let tags: [String]\n    let type: String\n    let difficulty: String\n    let regions: [String]\n    let isNiche: Bool\n}\n\n\/\/ MARK: - Question\nstruct Question: Codable {\n    let text: String\n}<\/code><\/pre>
    You could also put these at the top as in Working with APIs<\/a>, the location doesn’t matter \ud83d\ude42<\/p>
    Hints\/Tips<\/h2>
    1. Duplicate the\u00a0Working With APIs<\/strong>\u00a0project folder and use the copied project for this assignment.<\/li>
    2. Especially if you’re using Xcode 16 or newer, add import Combine<\/code> to the top of your file.<\/li>
    3. Replace the url that leads to the Pokemon data with <\/strong>https:\/\/the-trivia-api.com\/v2\/questions\/<\/strong><\/a><\/li>
    4. Replace the Pokemon and PokemonRequest struct with the two shown above, named QuizItem and Question. You are welcome to copy and paste them. 
      1. Then, replace @Published var<\/strong> pokemonList: [Pokemon] = [] with <\/span><\/li><\/ol><\/li><\/ol>
        @Published var quizList: [QuizItem] = []<\/code><\/pre>
        1. Next, update the do statement by replacing it with\u00a0<\/li><\/ol>
          do {\n                \/\/ Decode the JSON into your model\n                let decodedResponse = try JSONDecoder().decode([QuizItem].self, from: data)\n                DispatchQueue.main.async {\n                    self.quizList = decodedResponse\n                }\n            }<\/code><\/pre>
          1. In ContentView, you’ll need to update the List so instead of being List(viewModel.pokemonList) { pokemon in<\/strong>, it reads<\/li><\/ol>
            List(viewModel.quizList) { QuizItem in<\/code><\/pre>
            1. Finally, replace the Text with <\/li><\/ol>
              Text(QuizItem.question.text.isEmpty ? \"No Question Available\" : QuizItem.question.text)<\/code><\/pre>
              We’ve added a catch statement to make sure the row is filled even if data is missing<\/p>
              1. You may need to change a few more variables, but take them one at a time and try to change all instances of pokemon with QuizItem, for example.<\/li><\/ol>
                Add Navigation to the Correct Answer<\/h2>
                Refer to the Lists with SwiftUI lesson to figure out how to create a NavigationLink<\/code> to the correct answer (correctAnswer<\/code>). You can do this!<\/p>
                What else can I do?<\/h2>
                Look at the feed that you are using. Each object contains, in addition to a question and a correct answer, 3 incorrect answers. Give some thought to how you could turn this whole thing into a multiple-choice exercise with scoring. <\/p>
                Also, note that each object comes with a category. You can easily generate a custom feed for a specific category by appending, for example,
                ?categories=film_and_tv<\/em> or ?categories=history<\/em> to your URL, like this:
                https:\/\/the-trivia-api.com\/v2\/questions\/?categories=history<\/a>. You can call more than one category by adding commas like this:
                https:\/\/the-trivia-api.com\/v2\/questions\/?categories=history,geography<\/a><\/p>
                Don’t forget to make this app your own!<\/h2>
                Did you…<\/p>