Run the following Docker image:
docker run -p 8080:8080 arcuri82/tk2100-quiz
This will run a REST API. Connect to localhost:8080 to see the
Swagger documentation for this API. See how to call it to get
a random quiz out of it.
Try to get a random quiz, by typing the resource path directly in the
URL bar of the browser.
For example, if the resource is /foo/bar, then the URL would be
localhost:8080/foo/bar.
Verify that you get on the browser the JSON (and not HTML) of a random
quiz from the API.
Now, once the JSON has been displayed, look at the URL address bar in the browser. It should had been changed, pointing to a different resource. Why? Retry to get a random quiz, but, this time, have the Chrome Developer Tools open on the Network tab, and see how many HTTP calls are actually done. Look at the status code of the first request, and verify that it is a 307. What would happen if the developers of the REST API would had wrongly returned a 301 instead?
Using the index.html file in this folder as a staring point,
write a page in which you can
play a quiz game. Such page should use AJAX to retrieve and display one
random quiz from the REST API.
When the user clicks on one of the answers, s/he should get a pop-up message (e.g.,
using the JavaScript function alert()) stating whether the answer was
correct or not, and then display a new random quiz.
Note: do not worry by the fact that a user could cheat by checking the Chrome Developer Tools to read the source code, and get the right answer marked there.
When you open the index.html file to display it on a browser, do not do it by
directly opening it from the file system (e.g., resulting in the file:// protocol),
as CORS might block the AJAX requests. Open it via a web server.
For example, by using IntelliJ, you can right click on file and choose
Open in Browser.
Other editors can have options to open HTML pages via a web server as well.
Solutions to this exercise can be found under the
solutions/08 folder.