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.

function createQuizLayout()
{
  //declare arrays of countries and their capitals.
  var countries = ["USA", "UK", "India", "Germany", "Turkey", "France", "Nepal", "Japan", "South Africa", "Maldives"];
  var capitals = ["Washington", "London", "Delhi", "Berlin", "Istanbul", "Paris", "Kathmandu", "Tokyo", "Capetown", "Male"];

  var arrCountry = [];
  for(var i=0; i<countries.length; i++)
  {
    arrCountry.push('<li data-index="' + (i+1) + '">' + countries[i] +'</li>');
  }

  var arrCapital = [];
  for(var i=0; i<capitals.length; i++)
  {
    arrCapital.push('<li data-index="' + (i+1) + '">' + capitals[i] +'</li>');
  }

  //shuffle the arrays
  arrCountry = shuffle(arrCountry);
  arrCapital = shuffle(arrCapital);
  // once country and capital items are ready, we insert them into DOM
  $('#source').html(arrCountry.join(''));
  $('#target').html(arrCapital.join(''));
}

Here is what the preceding code does:

An important point to note here is that we are giving a data attribute named index to each list item having a value from 1 to 10. Since we have both the countries and capital names in the same order, index will be used to match which country belongs to which capital.

After both arrays are populated, we will shuffle them so that the order of countries and capitals becomes random. For this, we will use a simple shuffle function from the website http://jsfromhell.com/array/shuffle. The shuffle function is defined as follows:

function shuffle(o)
{
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

After calling the shuffle function on both arrays arrCountry and arrCapital, the array elements are inserted in DOM after combining them into a single string using the JavaScript join function. The elements in the array arrCountry are inserted in ul with the id value source and those in the array arrCapital are inserted in ul with the id value target.

Open your browser and point it to the index.html file of the Chapter1 folder now. You will see a page similar to the one shown in the following screenshot:

If you reload the page, you will see that the order of countries and capitals changes each time. This is because shuffling creates a new order for items of both lists.

To make the country names draggable, we will use the draggable component of jQuery UI. As the name suggests, the draggable component allows DOM components to be moved around using a mouse. To do this, go to the $(document).ready() section of our quiz.js file and call another function named initQuiz. The $(document).ready() callback function should look like this now:

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

Now define the initQuiz function outside document ready handler as follows:

function initQuiz()
{
  $('#source li').draggable(
  {
    revert : true,
    revertDuration: 200,
    cursor: "move"
  });
}

The preceding code calls the draggable method of the jQuery UI library. It is being called upon the li elements of the ul source, which means it will make all the list items draggable inside the source ul. Further, we are also giving the draggable method three options that we need for our application: revert, revertDuration, and cursor. Let's look at these in more detail:

Our draggable elements are ready now, and so it is time to make the capital names droppable and build the logic to match countries to their correct capitals.

In the previous section, we created an initQuiz function where we made our countries draggable. After the draggable code, write the following code to make the capitals droppable:

var totalScore = 0;
$('#score').text(totalScore + ' points.');
$('#target li').droppable(
{
  accept : function(draggable)
  {
    if(parseInt(draggable.data('index'), 10) === parseInt($(this).data('index'), 10))
    {
      return true;
    }
    else
    {
      return false;
    }
  },
  drop: function( event, ui ) 
  {
    var that = $(this);
    that.addClass( "ui-state-highlight" ).html( 'Correct!' ).effect('bounce');
    that.droppable('disable');
    ui.draggable.addClass('correct ui-state-error');
    (ui.draggable).draggable('disable');

    totalScore++;
    $('#score').text(totalScore + ' points.');
    if($('li.correct').length == 10)
    {
      $( "#dialog-complete" ).dialog({
        resizable: false,
        modal: true
      });
    }

  }
}); 

Now save the quiz.js file and refresh your browser. You will be able to drag the country names now. Drag a country name to its correct capital and you will see that the country will revert to its original position. The capital list item will show a bounce effect and its text will change to Correct!. Both the country and capital names will be disabled now. You will not be able to drag the country name as well. On the top left hand side, the page will show the score as 1 points.

The screen will look like the following screenshot:

Try the drag and drop for all countries in the left-hand side list. When you have matched all countries correctly, you will see a dialog box and the page will look like the following screenshot:

So, a lot is happening in the preceding code. We will look at it step by step.

We defined a variable named totalScore and set it to 0. We also inserted the score inside the HTML element with the id value score. Each time the quiz starts, the score will be reset as well. After this, we call the droppable method of jQuery UI on the list items of ul with the id value target to make them ready to accept the draggable country elements.

We are using the accept option of the jQuery UI draggable method to check for the correct matches of country and capital, and we are using the drop event to change the UI and scoring.

if(parseInt(draggable.data('index'), 10) == parseInt($(this).data('index'), 10))
  {
    return true;
  }
  return false;

$( this ).addClass( "ui-state-highlight" ).html( 'Correct!' ).effect('bounce');
$( this ).droppable('disable');

ui.draggable.addClass('correct ui-state-error');
(ui.draggable).draggable('disable');

If you were wondering why we created the functions createQuizLayout and initQuiz when we wrote the code without them, the answer is that we need to call them again. It is better not to repeat yourself. We can now reset the quiz without having to reload the page.

We have already created an element with id reset. Visit the $(document).ready() callback again and write the following code after those two function calls. The section will now look like this:

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

  $('#reset').on('click', function()
  {
    $('#source li').draggable('destroy');
    $('#target li').droppable('destroy');
    createQuizLayout();
    initQuiz();
  });
});

We have an event handler registered at the click of the reset button. It is using the destroy method of jQuery UI on the draggable and droppable elements. The destroy method will remove the complete draggable and droppable functionality from respective elements. It will also remove any special CSS classes that jQuery UI might have applied earlier.

After bringing the page to its initial state, we call the createQuizLayout and initQuiz functions again, which will initialize our quiz once more.