quizmasterz

Kravspec:

After performing this assignment the students will fulfill the three goals described in the course syllabus:

  • Describe a web browsers different internal components and their interactions including browser security mechanisms
  • Create web applications were JavaScript, HTML and CSS have clear roles and are clearly separated
  • Store and with asynchronous communication, transfer data with for the task appropriate data format

This examination is worth 3 credit (3hp).

The quiz application

This examination will focus on asynchronous communication agains an external RESTful web services through AJAX. The backend (server-side code) of this assignment will be given and your job is to write the client-side code.

About the assignment

The student should create an client application in which the user can answer, by the server given, quiz-questions. The user must do this in a certain time. Do the user give the correct answer will the application take the user to the next question. Does the user give the wrong answer or didn´t the user answer in time the quiz is over.

The student is responsible for the presentation of the questions, the handling of the client application logic and the user interface. The user shouldn’t have any problem to understand 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 20 seconds to answer each question. If the user doesn´t answer during the time or the user answer wrong its a game over and the user should be able to start over the game.

If the user answer all the questions with correct answers. The game should check the the total time the user took to be able to save this in a high-score list with the 5 fastest times. 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 (startpoint of the application) is at the URL:

deleted link

You can find the source code of the server at the GitHub repo:

https://github.com/thajo/AjaxAssignment

, that is if you are interested in running the server by you self [optional, but good training].

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. Hyperlink is 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” ect. You can watch the server responses and decide what is what.

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

Finishing up

Create a release tag at github to indicate that you are ready for examination. Book a time for oral exam.

Requirements

  • The client application must be written in vanilla javascript, no libraries like JQuery.
  • It should be easy for the user to understand the application and how to use it to take the quizes.
  • The application must be able to handle the different type of questions/answers that the server provide/handle
  • For ever question there should be a timer counting down from 20s to 0s
  • The client application should also keep track of the total time the user takes to answer all the questions.
  • The user should be able to choose a nickname at the start of the game that will be used in the high-score list.
  • Application should use Web Storage to store a high-score list which presents the 5 fastest total times at the end of the game. At least nickname and total time should be present.

Tips

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?
  • Be sure to tell the server that the POST-request is in “application/json” by setting the “Content-type” of the HTTP-header (check up the XMLHttpRequest object and setRequestHeader)

Good luck!


Additional Features by me

  • Global highscore
  • Server independent highscore
  • Quiz select (server select)
  • Highlight if new highscore
  • Theme select

Global Highscore

The global highscore uses mySQL server via some simple php-script.

mySQL table structure is really simple and contains: | server | nickname | score | date |

The read-script only returns the lines from which server is being asked for.

Server independent highscore

The highscore, both local and global, is server independent. Local server saves the highscore in different files in local storage Global server saves the server-info in the table to handle the different ones

Quiz select

There is a drop-down selector that allows you to change the quiz server from a given list. Named after what types of question there is. Changes stored in local storage to be fetched on load.

My own quiz-servers run on an cloud-server 24/7.

Highlight if new highscore

This was the main reason to the date-field in highscore. The app adds an highlight class to the correct line when building fragment.

Theme select

There is some various themes to choose from, and the choice gets saved in local storage so the change is there next time you visit the site!

Terminal theme

Somewhat different from the other and only works if you only use the keyboard (keypad and enter) to navigate. This is since the radio buttons are’nt visible you can’t re-gain focus.