Let's make a trivia game that uses questions from an online resource. We'll be using the Open Trivia Database to generate questions, and use them in our project.
Play this demo in full screen.
Play this demo in full screen.
1) As a first step, have the API website generate an API URL, and save the URL as a variable in your project. You can change the settings on the website so the URL asks for different kinds of data. For now, have the settings ask for a single multiple choice question.
2) We're going to use
Play this demo in full screen.
getData to get information from this URL. Once Woof has received the data, print it out in the console.
Play this demo in full screen.
3) Explore the data in your console, which requires Inspecting the page. You'll probably need to expand out the data to see how it is organized. It will likely look something like:
4) Make a text sprite that displays the question's text. You'll need to follow the data's organization from the console to properly display the question. You could also use this JSON Path Finder to help refer to the data properly.
Play this demo in full screen.
Play this demo in full screen.
5) Display the choices for the multiple choice question. (Hint: The correct answer is stored in a separate field from the incorrect answers)
Play this demo in full screen.
Play this demo in full screen.
6) If the right answer is clicked, celebrate the correct choice!
Play this demo in full screen.
Play this demo in full screen.
7) If a wrong answer is clicked, indicate that it is wrong.
Play this demo in full screen.
Play this demo in full screen.
8) (Challenge) Include more than one question. You should modify the API URL to retrieve multiple questions at once, and may want to write a function that sets up the sprites for a question.
Play this demo in full screen.
Play this demo in full screen.