{"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-10-08T16:34:27","modified_gmt":"2026-10-08T16:34:27","slug":"random-trivia-api","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/random-trivia-api\/","title":{"rendered":"Project 2: Random Trivia API"},"content":{"rendered":"\n

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

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>\n\n\n\n

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

Your Goal<\/h2>\n\n\n\n

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

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

    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>\n\n\n\n

    To begin, <\/h2>\n\n\n\n

    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>\n\n\n\n

    \/\/ 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>\n\n\n\n
    You could also put these at the top as in Working with APIs<\/a>, the location doesn’t matter \ud83d\ude42<\/p>\n\n\n\n
    Hints\/Tips<\/h2>\n\n\n\n
      \n
    1. Duplicate the Working With APIs<\/strong> project folder and use the copied project for this assignment.<\/li>\n\n\n\n
    2. Especially if you’re using Xcode 16 or newer, add import Combine<\/code> to the top of your file.<\/li>\n\n\n\n
    3. Replace the url that leads to the Pokemon data with <\/strong>https:\/\/the-trivia-api.com\/v2\/questions\/<\/strong><\/a><\/li>\n\n\n\n
    4. Replace the Pokemon and PokemonRequest struct with the two shown above, named QuizItem and Question. You are welcome to copy and paste them. \n
        \n
      1. Then, replace @Published var<\/strong> pokemonList: [Pokemon] = [] with <\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n
        @Published var quizList: [QuizItem] = []<\/code><\/pre>\n\n\n\n
          \n
        1. Next, update the do statement by replacing it with <\/li>\n<\/ol>\n\n\n\n
          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>\n\n\n\n
            \n
          1. In ContentView, you’ll need to update the List so instead of being List(viewModel.pokemonList) { pokemon in<\/strong>, it reads<\/li>\n<\/ol>\n\n\n\n
            List(viewModel.quizList) { QuizItem in<\/code><\/pre>\n\n\n\n
              \n
            1. Finally, replace the Text with <\/li>\n<\/ol>\n\n\n\n
              Text(QuizItem.question.text.isEmpty ? \"No Question Available\" : QuizItem.question.text)<\/code><\/pre>\n\n\n\n
              We’ve added a catch statement to make sure the row is filled even if data is missing<\/p>\n\n\n\n
                \n
              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>\n<\/ol>\n\n\n\n
                Add Navigation to the Correct Answer<\/h2>\n\n\n\n
                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>\n\n\n\n
                What else can I do?<\/h2>\n\n\n\n
                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>\n\n\n\n
                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>\n\n\n\n
                Don’t forget to make this app your own!<\/h2>\n\n\n\n
                Did you…<\/p>\n\n\n\n