[A] The Quiz

You are to implement a quiz game in the browser using JavaScript in the browser, utilizing modules and classes to structuring your code and using the asynchronous Fetch API to get and post information to an external quiz server.

The aim is to get acquainted how to organise your code and to learn the basics of coding an application with the browser as development environment.

Grading

This assignment is graded as Fail (U) or Pass (G) and it is worth 2.5 credit/hp.

Preconditions

You have access to the course environment on GitLab.

You have basic knowledge in HTML and CSS.

You have knowledge in JavaScript, DOM, Events and the browser environment with some Web APIs.

Prepare

There are no specific tasks to prepare yourself, besides working through all the course material that leads up to this assignment.

Get going

Get going with the assignment by cloning and preparing the assignment repo.

Clone the assignment repo

  1. You have a git repo on GitLab named "a2-quiz", available below your lnu student acronym in the course at GitLab. Start of by cloning the repo to your computer ("xxx" is your lnu-username):
‌‌‌‌‌

Requirements

These are the requirements to fullfill the assignment.

Introduction

In this assignment, you will use asynchronous communication to create a quiz application. All questions are served to your application using HTTP in a RESTful way, and your application should send the users answers back to the server for validation.

The backend (server-side code) of this assignment is given and already published online, and your assignment is to write the client-side code that communicates against that server.

Add the development tools

You need to add all the linters and development tools into the assignment repo.

Check the article "Development tools and linters" to see how you do that.

Use a JavaScript builder

You must work with a JavaScript builder tool to organise your code. The builder is installed as part of the development tools and linters.

You write all your code in the src/ directory and you can preview the application through npm run dev which starts up a development server with live reloading.

When you are done you can generate a distribution copy of your code through the command npm run build. The code is then saved into the dist/ directory.

Try so it works through starting a web server for it using npm run http-server dist. You can also try it out using the builder tool through npm run serve. Both ways should work.

Read more on the builder tool in "JavaScript builder".

The assignment

You should create a single page client application in which the user can answer, by the server given, quiz-questions. The user must do this within a specific time frame. If the user provides the correct answer, the application should present the next question to the user. If the user provides the wrong answer or do not answer in time, the quiz is over and a high score list is presented to the user.

You are responsible for the presentation of the questions (retrieved from the server), the handling of the client application logic and the user interface. The user shouldn't have any problem understanding the UI. Keep it simple; keep it beautiful.

At the start of the game, the user should be able to write a nickname she/he wants in the quiz game. The game must have a timer that gives the user a maximum of 10 seconds to answer each question. If the user doesn't answer during the time or the user gives a false answer the game is over and the user should be able to start over.

If the user answers all of the questions correctly, the game is over and the nickname is displayed with a proper "victory message" and showing the time it took to complete the game.

If the user answers all of the questions correctly, the game should save that user:s total time and present it in a high-score list showing the five quickest tries. The high-score will be saved in the browsers Web Storage.

The questions and answers

The questions will be public to the client application through a RESTful Web API. The first question (starting point of the application) is at the URL:

The response of the API will tell you what kind of question you should show to the user and where to send the answers. In other word, you have to analyze the response from the server to know how to display the questions and how to send new requests for answering the questions. Hyperlinks are provided by the server response in a RESTful way. The server responses will also give clues about what HTTP-methods to use and how to send the answers back.

The server will put out two different types of questions. Simple text questions and questions with alternatives where the user should answer with the right key "alt1", "alt2" etc. You can watch the server responses and decide what is what. Questions with alternatives should be presented with html radio buttons. The user should not need to write anything at these questions.

The last question answered will not return a new link to a new question and that means that the quiz is over.

Features

Here are some important features.

  1. When you answer wrong it should be clearly visible to the user that the answer was wrong. Supply a link to the user so the game can be restarted and a link to visit the highscore list.

  2. The timer must be visible all the time while playing.

  3. There should be a visible link that shows the highscore.

  4. A tip is to make the game playable by only using the keyboard, that is to be able to play tha game s quickly as possible,

Non functional requirements

These are non functional requirements to be fulfilled.

  1. You must use the JavaScript builder to organise your code.

  2. The client application must be written in vanilla javascript using ES modules and/or ES6 classes to create well structured and organised code.

  3. It is important to work with a code code structure.

  4. The application should be well documented with docblock comments.

  1. The application is comfortable for the end-user to understand and use.

Documentation

Use the README.md to provide some basic documentation of your application.

  1. Add a representative image for the assignment and start with a short description of your solution.

  2. Explain how a user can download and start your game.

  3. Shortly explain the rules of the game, so the user knows how to play it.

  4. Explain how to execute the linters that are part of the development environment and how to execute them.

Linters

  1. Run the linters npm run lint and verify that no errors exists.

Build dist/ code

  1. You should be able to run your application through npm run server which starts the builder to preview your application.

  2. Build the distribution code and verify that it works by using the builder tool by running the command npm run build.

  3. The distribution code should be saved in dist/. Verify that it works by pointing your web browser to it.

Hints

Before you start writing code think about:

  • How to present the question the user should answer?

  • How to get the answer from the user and how to send it back to the server? Postman or Advanced REST Client are great tools if you want to play around with HTTP-calls and do tests without writing code.

  • Be sure to tell the server that the POST-request is a "application/json"-request by setting the "Content-type" of the HTTP-header (check up fetch api).

  • The API (Server part) will make use of HTTP. Make sure to use the correct verb (POST or GET), headers and look at the status codes. (200, 400...)

Submission

This is how to submit this assignment.

  1. Add a tag v1.0.0 to your repo when you are done. If you make updates then add another tag like v1.0.1 or v1.1.0 and so on.

  2. Ensure you have committed and pushed all your changes, including the tags, to GitLab.

  3. Create an issue on the repo and answer the following questions in it. Write freely with 15 to 30 sentences of text.

    1. Describe how you opted to organise your JavaScript code in the assignment and your observations and learnings from creating your code structure.

    2. How do you feel about asynchronous programming in JavaScript, can you relate it to some other programming you done previously?

    3. Elaborate on the lint and build sequence of your code. Do you see pros and cons and can you relate it other development work you have done?

    4. What is your TIL for this course part?

  4. When you are done, assign the issue to the teacher, to show that you are ready for grading. The teacher will be notified by mail.