Mastering jQuery UI

Making the quiz functional

Our UI part is now complete and we can proceed to make the quiz functional. We will do this in a few steps. First of all, we will display the data on the page in two columns. Then, we will make the country names draggable. Finally, the list items with the capital names will be made droppable so that we can drop a country name inside a capital. We will also have to ensure that a droppable capital name accepts only the correct country name. Finally, the resetting logic will be built.

Displaying data on the page

Open the quiz.js file for editing and write the following code:

$(document).ready(function()
{
  createQuizLayout();
});

On the document ready event we call a function named createQuizLayout which we need to define now. ...